Auto-inserting blocks: Add block icon to block inspector panel toggles (

#54029)

Add block icons to block inspector panel toggle labels, and right-align the toggles.

packages/block-editor/src/hooks/auto-inserting-blocks.js

@@ -4,15 +4,19 @@
 import { __ } from '@wordpress/i18n';
 import { addFilter } from '@wordpress/hooks';
 import { Fragment } from '@wordpress/element';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	__experimentalHStack as HStack,
+	PanelBody,
+	ToggleControl,
+} from '@wordpress/components';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { InspectorControls } from '../components';
+import { BlockIcon, InspectorControls } from '../components';
 import { store as blockEditorStore } from '../store';
 
 function AutoInsertingBlocksControl( props ) {
@@ -151,7 +155,11 @@ function AutoInsertingBlocksControl( props ) {
 
 	return (
 		<InspectorControls>
-			<PanelBody title={ __( 'Plugins' ) } initialOpen={ true }>
+			<PanelBody
+				className="block-editor-hooks__auto-inserting-blocks"
+				title={ __( 'Plugins' ) }
+				initialOpen={ true }
+			>
 				{ Object.keys( groupedAutoInsertedBlocks ).map( ( vendor ) => {
 					return (
 						<Fragment key={ vendor }>
@@ -169,7 +177,14 @@ function AutoInsertingBlocksControl( props ) {
 										<ToggleControl
 											checked={ checked }
 											key={ block.title }
-											label={ block.title }
+											label={
+												<HStack justify="flex-start">
+													<BlockIcon
+														icon={ block.icon }
+													/>
+													<span>{ block.title }</span>
+												</HStack>
+											}
 											onChange={ () => {
 												if ( ! checked ) {
 													// Create and insert block.

packages/block-editor/src/hooks/auto-inserting-blocks.scss

@@ -0,0 +1,16 @@
+.block-editor-hooks__auto-inserting-blocks {
+	/**
+	 * Since we're displaying the block icon alongside the block name,
+	 * we need to right-align the toggle.
+	 */
+	.components-toggle-control .components-h-stack {
+		flex-direction: row-reverse;
+	}
+
+	/**
+	 * Un-reverse the flex direction for the toggle's label.
+	 */
+	.components-toggle-control .components-h-stack .components-h-stack {
+		flex-direction: row;
+	}
+}

packages/block-editor/src/style.scss

@@ -46,6 +46,7 @@
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";
 @import "./hooks/anchor.scss";
+@import "./hooks/auto-inserting-blocks.scss";
 @import "./hooks/border.scss";
 @import "./hooks/color.scss";
 @import "./hooks/dimensions.scss";