[Global Styles]: Add block icon next to blocks list (#36520)

WordPress · Nov 22, 2021 · b224bf8 · b224bf8
1 parent 460d63b
commit b224bf8
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -3,6 +3,11 @@
  */
 import { getBlockTypes } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import {
+	FlexItem,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -29,7 +34,12 @@ function BlockMenuItem( { block } ) {
 
 	return (
 		<NavigationButton path={ '/blocks/' + block.name }>
-			{ block.title }
+			<HStack justify="flex-start">
+				<FlexItem>
+					<BlockIcon icon={ block.icon } />
+				</FlexItem>
+				<FlexItem>{ block.title }</FlexItem>
+			</HStack>
 		</NavigationButton>
 	);
 }