diff --git a/packages/editor/src/components/block-switcher/index.js b/packages/editor/src/components/block-switcher/index.js index d298834293471e..292dacf98567e1 100644 --- a/packages/editor/src/components/block-switcher/index.js +++ b/packages/editor/src/components/block-switcher/index.js @@ -58,7 +58,20 @@ export class BlockSwitcher extends Component { const hasStyles = blocks.length === 1 && get( blockType, [ 'styles' ], [] ).length !== 0; if ( ! hasStyles && ! possibleBlockTransformations.length ) { - return null; + if ( blocks.length > 1 ) { + return null; + } + return ( + + + + + + ); } return ( diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss index 503b312d3b6472..daebe5a47ea72f 100644 --- a/packages/editor/src/components/block-switcher/style.scss +++ b/packages/editor/src/components/block-switcher/style.scss @@ -3,15 +3,27 @@ height: $icon-button-size; } -// Style this the same as the block buttons in the library. -// Needs specificiity to override the icon button. -.components-icon-button.editor-block-switcher__toggle { - width: auto; +.components-icon-button.editor-block-switcher__toggle, +.components-icon-button.editor-block-switcher__no-switcher-icon { margin: 0; display: block; height: $icon-button-size; padding: 3px; +} + +.components-icon-button.editor-block-switcher__no-switcher-icon { + width: $icon-button-size + 6px + 6px; + .editor-block-icon { + margin-right: auto; + margin-left: auto; + } +} + +// Style this the same as the block buttons in the library. +// Needs specificiity to override the icon button. +.components-icon-button.editor-block-switcher__toggle { + width: auto; // Unset icon button styles. &:active, &:not(:disabled):not([aria-disabled="true"]):hover,