Always show block icon on the block switcher when a single block is s…

…elected
WordPress · Nov 8, 2018 · dc6efd3 · dc6efd3
1 parent 1ac70e1
commit dc6efd3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git 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 (
+				<Toolbar>
+					<IconButton
+						disabled
+						className="editor-block-switcher__no-switcher-icon"
+						label={ __( 'Block icon' ) }
+					>
+						<BlockIcon icon={ blockType.icon } showColors />
+					</IconButton>
+				</Toolbar>
+			);
 		}
 
 		return (

diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss
@@ -3,6 +3,19 @@
 	height: $icon-button-size;
 }
 
+.components-icon-button.editor-block-switcher__no-switcher-icon {
+	width: $icon-button-size + 6px + 6px;
+	margin: 0;
+	display: block;
+	height: $icon-button-size;
+	padding: 3px;
+	opacity: 0.8;
+	.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 {