From 2aa48885630b95d06cd0c456ef44ff0c7fe3a209 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Wed, 30 Aug 2023 16:02:38 +0200
Subject: [PATCH] Use HStack to align icon and text label

---
 .../block-editor/src/hooks/auto-inserting-blocks.js  | 12 ++++++++----
 .../src/hooks/auto-inserting-blocks.scss             |  7 +++++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/hooks/auto-inserting-blocks.js b/packages/block-editor/src/hooks/auto-inserting-blocks.js
index ce3f81bf0bf3a..308212893e7cd 100644
--- 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
index 5e462d394fca7..8c43c3673053e 100644
--- 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;
+	}
 }