From 8c871f3d70caad61812ada2653db47d81ed17cbe Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 28 Mar 2022 15:05:36 +0100 Subject: [PATCH] Add the stack block variation to the group block (#39690) --- .../src/components/block-switcher/index.js | 4 ++-- .../src/components/block-switcher/test/index.js | 4 ++-- .../multi-selection-inspector/index.js | 4 ++-- packages/block-library/src/group/block.json | 4 +--- packages/block-library/src/group/variations.js | 17 ++++++++++++++++- packages/icons/CHANGELOG.md | 4 ++++ packages/icons/src/index.js | 2 ++ packages/icons/src/library/copy.js | 12 ++++++++++++ packages/icons/src/library/row.js | 12 ++++++++++++ packages/icons/src/library/stack.js | 2 +- 10 files changed, 54 insertions(+), 11 deletions(-) create mode 100644 packages/icons/src/library/copy.js create mode 100644 packages/icons/src/library/row.js diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index a25b9b871eee9..a477321a963d8 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -20,7 +20,7 @@ import { isTemplatePart, } from '@wordpress/blocks'; import { useSelect, useDispatch } from '@wordpress/data'; -import { stack } from '@wordpress/icons'; +import { copy } from '@wordpress/icons'; /** * Internal dependencies @@ -69,7 +69,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { // appropriate icon to communicate the non-uniformity. _icon = isSelectionOfSameType ? getBlockType( firstBlockName )?.icon - : stack; + : copy; } return { possibleBlockTransformations: getBlockTransformItems( diff --git a/packages/block-editor/src/components/block-switcher/test/index.js b/packages/block-editor/src/components/block-switcher/test/index.js index d14c16781013c..43811b2380403 100644 --- a/packages/block-editor/src/components/block-switcher/test/index.js +++ b/packages/block-editor/src/components/block-switcher/test/index.js @@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data'; import { registerBlockType, unregisterBlockType } from '@wordpress/blocks'; import { DOWN } from '@wordpress/keycodes'; import { Button } from '@wordpress/components'; -import { stack } from '@wordpress/icons'; +import { copy } from '@wordpress/icons'; /** * Internal dependencies @@ -131,7 +131,7 @@ describe( 'BlockSwitcherDropdownMenu', () => { test( 'should render disabled block switcher with multi block of different types when no transforms', () => { useSelect.mockImplementation( () => ( { possibleBlockTransformations: [], - icon: stack, + icon: copy, } ) ); const wrapper = shallow( - +
{ sprintf( diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 4fd5f14cfb37f..bd79422311dbb 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -61,9 +61,7 @@ "fontSize": true } }, - "__experimentalLayout": { - "allowOrientation": false - } + "__experimentalLayout": true }, "editorStyle": "wp-block-group-editor", "style": "wp-block-group" diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js index f5bf4b6ad222f..047c08b881d14 100644 --- a/packages/block-library/src/group/variations.js +++ b/packages/block-library/src/group/variations.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { row, stack } from '@wordpress/icons'; const variations = [ { @@ -21,7 +22,21 @@ const variations = [ attributes: { layout: { type: 'flex' } }, scope: [ 'inserter', 'transform' ], isActive: ( blockAttributes ) => - blockAttributes.layout?.type === 'flex', + blockAttributes.layout?.type === 'flex' && + ( ! blockAttributes.layout?.orientation || + blockAttributes.layout?.orientation === 'horizontal' ), + icon: row, + }, + { + name: 'group-stack', + title: __( 'Stack' ), + description: __( 'Blocks stacked vertically.' ), + attributes: { layout: { type: 'flex', orientation: 'vertical' } }, + scope: [ 'inserter', 'transform' ], + isActive: ( blockAttributes ) => + blockAttributes.layout?.type === 'flex' && + blockAttributes.layout?.orientation === 'vertical', + icon: stack, }, ]; diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index c8d3d779a0936..af30a7bfcb391 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -10,6 +10,10 @@ - Changed `dragHandle` footprint from 18x18 to 24x24 to match other icons. ([#39342](https://github.com/WordPress/gutenberg/pull/39342)) +### New Features + +- Add new `row` and `copy` icons. + ## 7.0.0 (2022-02-23) ### New Features diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 88a3675a74bc5..a414d4fc0e607 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -47,6 +47,7 @@ export { default as cog } from './library/cog'; export { default as color } from './library/color'; export { default as column } from './library/column'; export { default as columns } from './library/columns'; +export { default as copy } from './library/copy'; export { default as comment } from './library/comment'; export { default as commentAuthorAvatar } from './library/comment-author-avatar'; export { default as commentAuthorName } from './library/comment-author-name'; @@ -185,6 +186,7 @@ export { default as replace } from './library/replace'; export { default as reset } from './library/reset'; export { default as resizeCornerNE } from './library/resize-corner-n-e'; export { default as reusableBlock } from './library/reusable-block'; +export { default as row } from './library/row'; export { default as symbol } from './library/symbol'; export { default as rotateLeft } from './library/rotate-left'; export { default as rotateRight } from './library/rotate-right'; diff --git a/packages/icons/src/library/copy.js b/packages/icons/src/library/copy.js new file mode 100644 index 0000000000000..981865c13a327 --- /dev/null +++ b/packages/icons/src/library/copy.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const copy = ( + + + +); + +export default copy; diff --git a/packages/icons/src/library/row.js b/packages/icons/src/library/row.js new file mode 100644 index 0000000000000..1387e8f51fb0f --- /dev/null +++ b/packages/icons/src/library/row.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const row = ( + + + +); + +export default row; diff --git a/packages/icons/src/library/stack.js b/packages/icons/src/library/stack.js index 138a01a68c2ed..19cbf860f97b9 100644 --- a/packages/icons/src/library/stack.js +++ b/packages/icons/src/library/stack.js @@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives'; const stack = ( - + );