Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Group: Add group block variations to Group toolbar #39920

Merged
merged 8 commits into from
Apr 3, 2022
Merged

Group: Add group block variations to Group toolbar #39920

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
33a47aa
Add group variations to the Group block toolbar
Mar 30, 2022
0985239
Check the newblocks array has items in it
Mar 30, 2022
23464a8
There is no point in setting attribute if type===group
Mar 31, 2022
cf14af7
Add comment about why updateBlockAttributes is not used
Mar 31, 2022
b7a53bb
Move variations const outside of component
Mar 31, 2022
c3b3046
Fix toolbar group selectors
youknowriad Mar 31, 2022
1428c39
Improve Row translation context
aaronrobertshaw Apr 1, 2022
954ef35
Rename variations to layouts and remove group check
aaronrobertshaw Apr 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions packages/block-editor/src/components/block-tools/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
33 changes: 28 additions & 5 deletions packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand All @@ -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,
Expand All @@ -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.
Expand All @@ -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>
);
}
Expand Down