diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 3c0b1803cb5dab..32abd4aafb2c58 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -312,16 +312,14 @@ // Size multiple sequential buttons to be optically balanced. // Icons are 36px, as set by a 24px icon and 12px padding. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot, // When a plugin adds to a slot, the segment has a `components-toolbar` class. -.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot, // When no plugin adds to slots, the segment has a `components-toolbar-group` class. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar, // The nesting order is sometimes reversed. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown, // Targets unique markup for the "Replace" button. -.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group { // Inline formatting tools use this class. +.block-editor-block-toolbar .components-toolbar-group { padding-left: $grid-unit-15 * 0.5; // 6px. padding-right: $grid-unit-15 * 0.5; - > .components-button, - > div > .components-button, - > .components-dropdown .components-button { + .components-button, + .components-button.has-icon.has-icon { min-width: $block-toolbar-height - $grid-unit-15; padding-left: $grid-unit-15 * 0.5; // 6px. padding-right: $grid-unit-15 * 0.5; diff --git a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js index 8aae4e706d3dc7..9d9f967b142023 100644 --- a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js +++ b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js @@ -4,7 +4,7 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { switchToBlockType } from '@wordpress/blocks'; import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; -import { group } from '@wordpress/icons'; +import { group, row, stack } from '@wordpress/icons'; import { _x } from '@wordpress/i18n'; /** @@ -13,7 +13,13 @@ import { _x } from '@wordpress/i18n'; import { useConvertToGroupButtonProps } from '../convert-to-group-buttons'; import { store as blockEditorStore } from '../../store'; -function BlockGroupToolbar( { label = _x( 'Group', 'verb' ) } ) { +const layouts = { + group: undefined, + row: { type: 'flex' }, + stack: { type: 'flex', orientation: 'vertical' }, +}; + +function BlockGroupToolbar() { const { blocksSelection, clientIds, @@ -32,16 +38,23 @@ function BlockGroupToolbar( { label = _x( 'Group', 'verb' ) } ) { [ clientIds ] ); - const onConvertToGroup = () => { + const onConvertToGroup = ( layout = 'group' ) => { const newBlocks = switchToBlockType( blocksSelection, groupingBlockName ); - if ( newBlocks ) { + + if ( newBlocks && newBlocks.length > 0 ) { + // Because the block is not in the store yet we can't use + // updateBlockAttributes so need to manually update attributes. + newBlocks[ 0 ].attributes.layout = layouts[ layout ]; replaceBlocks( clientIds, newBlocks ); } }; + const onConvertToRow = () => onConvertToGroup( 'row' ); + const onConvertToStack = () => onConvertToGroup( 'stack' ); + // Don't render the button if the current selection cannot be grouped. // A good example is selecting multiple button blocks within a Buttons block: // The group block is not a valid child of Buttons, so we should not show the button. @@ -54,9 +67,19 @@ function BlockGroupToolbar( { label = _x( 'Group', 'verb' ) } ) { + + ); }