Use HStack to align icon and text label

WordPress · Aug 30, 2023 · 2aa4888 · 2aa4888
1 parent af33711
commit 2aa4888
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/packages/block-editor/src/hooks/auto-inserting-blocks.js b/packages/block-editor/src/hooks/auto-inserting-blocks.js
@@ -4,7 +4,11 @@
 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';
@@ -174,12 +178,12 @@ function AutoInsertingBlocksControl( props ) {
 											checked={ checked }
 											key={ block.title }
 											label={
-												<>
+												<HStack justify="flex-start">
 													<BlockIcon
 														icon={ block.icon }
 													/>
-													{ block.title }
-												</>
+													<span>{ block.title }</span>
+												</HStack>
 											}
 											onChange={ () => {
 												if ( ! checked ) {

diff --git a/packages/block-editor/src/hooks/auto-inserting-blocks.scss b/packages/block-editor/src/hooks/auto-inserting-blocks.scss
@@ -6,4 +6,11 @@
 	.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;
+	}
 }