From 33a47aa3cdc1ad8349de61568fecf72c98ecda4b Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 31 Mar 2022 12:17:39 +1300 Subject: [PATCH 1/8] Add group variations to the Group block toolbar --- .../convert-to-group-buttons/toolbar.js | 31 ++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) 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 8aae4e706d3dc..07f13bf103387 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,7 @@ import { _x } from '@wordpress/i18n'; import { useConvertToGroupButtonProps } from '../convert-to-group-buttons'; import { store as blockEditorStore } from '../../store'; -function BlockGroupToolbar( { label = _x( 'Group', 'verb' ) } ) { +function BlockGroupToolbar() { const { blocksSelection, clientIds, @@ -32,16 +32,29 @@ function BlockGroupToolbar( { label = _x( 'Group', 'verb' ) } ) { [ clientIds ] ); - const onConvertToGroup = () => { + const variationAttributes = { + row: { type: 'flex' }, + stack: { type: 'flex', orientation: 'vertical' }, + }; + + const onConvertToGroup = ( variation = 'group' ) => { const newBlocks = switchToBlockType( blocksSelection, groupingBlockName ); + if ( newBlocks ) { + newBlocks[ 0 ].attributes.layout = + variation !== 'group' + ? variationAttributes[ variation ] + : undefined; 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' ) } ) { + + ); } From 0985239443931cc2197ba8c1d79f519592070cc8 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 31 Mar 2022 12:19:01 +1300 Subject: [PATCH 2/8] Check the newblocks array has items in it --- .../src/components/convert-to-group-buttons/toolbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 07f13bf103387..738a069c0de97 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 @@ -43,7 +43,7 @@ function BlockGroupToolbar() { groupingBlockName ); - if ( newBlocks ) { + if ( newBlocks && newBlocks.length > 0 ) { newBlocks[ 0 ].attributes.layout = variation !== 'group' ? variationAttributes[ variation ] From 23464a8a5afee271d8a594f26bf2745e522e4988 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 31 Mar 2022 13:40:12 +1300 Subject: [PATCH 3/8] There is no point in setting attribute if type===group --- .../src/components/convert-to-group-buttons/toolbar.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 738a069c0de97..f62b9fa78b41f 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 @@ -44,10 +44,10 @@ function BlockGroupToolbar() { ); if ( newBlocks && newBlocks.length > 0 ) { - newBlocks[ 0 ].attributes.layout = - variation !== 'group' - ? variationAttributes[ variation ] - : undefined; + if ( variation !== 'group' ) { + newBlocks[ 0 ].attributes.layout = + variationAttributes[ variation ]; + } replaceBlocks( clientIds, newBlocks ); } }; From cf14af73db3320291dfa09b761b3c0b6153a3191 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 31 Mar 2022 17:19:37 +1300 Subject: [PATCH 4/8] Add comment about why updateBlockAttributes is not used --- .../src/components/convert-to-group-buttons/toolbar.js | 2 ++ 1 file changed, 2 insertions(+) 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 f62b9fa78b41f..43966408d9687 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 @@ -45,6 +45,8 @@ function BlockGroupToolbar() { if ( newBlocks && newBlocks.length > 0 ) { if ( variation !== 'group' ) { + // Because the block is not in the store yet we can't use + // updateBlockAttributes so need to manually update attributes. newBlocks[ 0 ].attributes.layout = variationAttributes[ variation ]; } From b7a53bb271dd372f30fb6f5118514df10a81e2bc Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 31 Mar 2022 19:10:14 +1300 Subject: [PATCH 5/8] Move variations const outside of component --- .../src/components/convert-to-group-buttons/toolbar.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 43966408d9687..ae3cce72bfe61 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 @@ -13,6 +13,11 @@ import { _x } from '@wordpress/i18n'; import { useConvertToGroupButtonProps } from '../convert-to-group-buttons'; import { store as blockEditorStore } from '../../store'; +const variationAttributes = { + row: { type: 'flex' }, + stack: { type: 'flex', orientation: 'vertical' }, +}; + function BlockGroupToolbar() { const { blocksSelection, @@ -32,11 +37,6 @@ function BlockGroupToolbar() { [ clientIds ] ); - const variationAttributes = { - row: { type: 'flex' }, - stack: { type: 'flex', orientation: 'vertical' }, - }; - const onConvertToGroup = ( variation = 'group' ) => { const newBlocks = switchToBlockType( blocksSelection, From c3b3046c7b117d09fae270e1b4072b28b7b3ab89 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 31 Mar 2022 13:10:10 +0100 Subject: [PATCH 6/8] Fix toolbar group selectors --- .../block-editor/src/components/block-tools/style.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 3c0b1803cb5da..32abd4aafb2c5 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; From 1428c39aee8b1e5ba29a589852f763a9300ec3c6 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 1 Apr 2022 16:41:19 +1000 Subject: [PATCH 7/8] Improve Row translation context --- .../src/components/convert-to-group-buttons/toolbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ae3cce72bfe61..f4dbbf4d3942c 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 @@ -74,7 +74,7 @@ function BlockGroupToolbar() { /> Date: Fri, 1 Apr 2022 16:53:47 +1000 Subject: [PATCH 8/8] Rename variations to layouts and remove group check --- .../components/convert-to-group-buttons/toolbar.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) 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 f4dbbf4d3942c..9d9f967b14202 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 @@ -13,7 +13,8 @@ import { _x } from '@wordpress/i18n'; import { useConvertToGroupButtonProps } from '../convert-to-group-buttons'; import { store as blockEditorStore } from '../../store'; -const variationAttributes = { +const layouts = { + group: undefined, row: { type: 'flex' }, stack: { type: 'flex', orientation: 'vertical' }, }; @@ -37,19 +38,16 @@ function BlockGroupToolbar() { [ clientIds ] ); - const onConvertToGroup = ( variation = 'group' ) => { + const onConvertToGroup = ( layout = 'group' ) => { const newBlocks = switchToBlockType( blocksSelection, groupingBlockName ); if ( newBlocks && newBlocks.length > 0 ) { - if ( variation !== 'group' ) { - // Because the block is not in the store yet we can't use - // updateBlockAttributes so need to manually update attributes. - newBlocks[ 0 ].attributes.layout = - variationAttributes[ variation ]; - } + // 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 ); } };