diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss index 1c12f4f85e754a..de39f03861c23a 100644 --- a/blocks/library/image/editor.scss +++ b/blocks/library/image/editor.scss @@ -113,3 +113,14 @@ } } } + +.editor-block-list__block[data-type="core/image"] .editor-block-toolbar .blocks-format-toolbar__link-modal { + position: absolute; + left: 0; + right: 0; + margin: -1px 0; + + @include break-small() { + margin: -1px; + } +} \ No newline at end of file diff --git a/blocks/url-input/style.scss b/blocks/url-input/style.scss index 73f5840b05af48..3c005f6ea11a2d 100644 --- a/blocks/url-input/style.scss +++ b/blocks/url-input/style.scss @@ -42,6 +42,15 @@ $input-size: 230px; width: $input-size + $icon-button-size * 2 + 2px; // add borders } +// Hide suggestions on mobile until we @todo find a better way to show them +.blocks-url-input__suggestions, +.blocks-url-input .spinner { + display: none; + @include break-small() { + display: inherit; + } +} + .blocks-url-input__suggestion { padding: 4px #{ $icon-button-size + $input-padding } 4px $input-padding; color: $dark-gray-300; // lightest we can use for contrast diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index bda716bfc0a00d..b9027ef3633821 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -670,10 +670,6 @@ margin-left: -1px; } - > .editor-block-switcher:first-child { - margin-left: -2px; - } - @include break-small() { width: auto; } diff --git a/editor/components/block-switcher/style.scss b/editor/components/block-switcher/style.scss index dc258edb7b29f6..8a0936e267ca1e 100644 --- a/editor/components/block-switcher/style.scss +++ b/editor/components/block-switcher/style.scss @@ -1,5 +1,9 @@ .editor-block-switcher { position: relative; + + .components-toolbar { + border-left: none; + } } .editor-block-switcher__toggle { diff --git a/editor/components/block-toolbar/style.scss b/editor/components/block-toolbar/style.scss index f015989f05fe04..651a4242b066a5 100644 --- a/editor/components/block-toolbar/style.scss +++ b/editor/components/block-toolbar/style.scss @@ -1,9 +1,14 @@ .editor-block-toolbar { display: inline-flex; - overflow: auto; // allow horizontal scrolling on mobile flex-grow: 1; width: 100%; background: $white; + overflow: auto; // allow horizontal scrolling on mobile + + // allow overflow on desktop + @include break-small() { + overflow: inherit; + } .components-toolbar { border: none; diff --git a/editor/components/observe-typing/index.js b/editor/components/observe-typing/index.js index 9ba35d7ce7d2ef..1ebe6a22c83bb8 100644 --- a/editor/components/observe-typing/index.js +++ b/editor/components/observe-typing/index.js @@ -120,7 +120,8 @@ class ObserveTyping extends Component { // Abort early if already typing, or key press is incurred outside a // text field (e.g. arrow-ing through toolbar buttons). - if ( isTyping || ! isTextField( target ) ) { + // Ignore typing in a block toolbar + if ( isTyping || ! isTextField( target ) || target.closest( '.editor-block-toolbar' ) ) { return; }