Add icon to menu item.

WordPress · Oct 13, 2020 · e324a60 · e324a60
1 parent 2ab5913
commit e324a60
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -23,6 +23,7 @@ import { getBlockType, serialize } from '@wordpress/blocks';
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
+import BlockIcon from '../block-icon';
 import BlockModeToggle from './block-mode-toggle';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __experimentalBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
@@ -125,6 +126,11 @@ export function BlockSettingsDropdown( {
 								/>
 								{ firstParentClientId !== undefined && (
 									<MenuItem
+										icon={
+											<BlockIcon
+												icon={ parentBlockType.icon }
+											/>
+										}
 										onClick={ () =>
 											selectBlock( firstParentClientId )
 										}

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -105,6 +105,13 @@
 	}
 }
 
+// Override standard MenuItem icon spacing, since the block transform icons are
+// shown on the left, rather than the right.
+.block-editor-block-switcher__transforms__menugroup .block-editor-block-icon {
+	margin-left: -2px; // This optically balances the icon.
+	margin-right: $grid-unit-10;
+}
+
 .block-editor-block-switcher__popover__preview__parent {
 	.block-editor-block-switcher__popover__preview__container {
 		position: absolute;

diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
@@ -12,12 +12,6 @@
 	.components-menu-item__shortcut + .components-menu-items__item-icon {
 		margin-left: $grid-unit-10;
 	}
-
-	// If a block item is shown inline (such as transforms), space it correctly.
-	.block-editor-block-icon {
-		margin-left: -2px; // This optically balances the icon.
-		margin-right: $grid-unit-10;
-	}
 }
 
 .components-menu-item__info-wrapper {