diff --git a/packages/block-editor/src/hooks/auto-inserting-blocks.js b/packages/block-editor/src/hooks/auto-inserting-blocks.js index 266d9dd55fa674..308212893e7cda 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'; @@ -12,7 +16,7 @@ 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 ( - + { Object.keys( groupedAutoInsertedBlocks ).map( ( vendor ) => { return ( @@ -169,7 +177,14 @@ function AutoInsertingBlocksControl( props ) { + + { block.title } + + } onChange={ () => { if ( ! checked ) { // Create and insert block. diff --git a/packages/block-editor/src/hooks/auto-inserting-blocks.scss b/packages/block-editor/src/hooks/auto-inserting-blocks.scss new file mode 100644 index 00000000000000..8c43c3673053e0 --- /dev/null +++ b/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; + } +} diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 5eafc0766ae220..3bd759acbbce1e 100644 --- a/packages/block-editor/src/style.scss +++ b/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";