Group: Add group block variations to Group toolbar (#39920)

Co-authored-by: Glen Davies <[email protected]> Co-authored-by: Riad Benguella <[email protected]> Co-authored-by: Aaron Robertshaw <[email protected]>
WordPress · Apr 3, 2022 · 4518134 · 4518134
1 parent 04639ad
commit 4518134
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git 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
@@ -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' ) } ) {
 		<ToolbarGroup>
 			<ToolbarButton
 				icon={ group }
-				label={ label }
+				label={ _x( 'Group', 'verb' ) }
 				onClick={ onConvertToGroup }
 			/>
+			<ToolbarButton
+				icon={ row }
+				label={ _x( 'Row', 'single horizontal line' ) }
+				onClick={ onConvertToRow }
+			/>
+			<ToolbarButton
+				icon={ stack }
+				label={ _x( 'Stack', 'verb' ) }
+				onClick={ onConvertToStack }
+			/>
 		</ToolbarGroup>
 	);
 }