From 1d40f79dbea3ca36a38716972cfeb32636ca5a0d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 23 Mar 2022 13:48:04 +0100 Subject: [PATCH 1/3] Add the stack block variation to the group block --- packages/block-library/src/group/block.json | 4 +--- packages/block-library/src/group/variations.js | 11 ++++++++++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 4fd5f14cfb37f3..bd79422311dbb3 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 f5bf4b6ad222f9..a31fe9aad14078 100644 --- a/packages/block-library/src/group/variations.js +++ b/packages/block-library/src/group/variations.js @@ -21,7 +21,16 @@ 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' ), + }, + { + name: 'group-stack', + title: __( 'Stack' ), + description: __( 'Blocks stacked in a column.' ), + attributes: { layout: { type: 'flex', orientation: 'vertical' } }, + scope: [ 'inserter', 'transform' ], + isActive: ( blockAttributes ) => + blockAttributes.layout?.type === 'flex' && blockAttributes.layout?.orientation === 'vertical', }, ]; From 5f29e8da9078e534eab7f8b0f529f975d2e4c67e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 24 Mar 2022 11:05:36 +0100 Subject: [PATCH 2/3] Add new row and stack variation icons --- .../src/components/block-switcher/index.js | 4 ++-- .../src/components/block-switcher/test/index.js | 4 ++-- .../components/multi-selection-inspector/index.js | 4 ++-- packages/block-library/src/group/variations.js | 10 ++++++++-- 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 +- 9 files changed, 45 insertions(+), 9 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 a25b9b871eee96..a477321a963d85 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 d14c16781013cc..43811b2380403a 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/variations.js b/packages/block-library/src/group/variations.js index a31fe9aad14078..71f512e7aa91aa 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,10 @@ const variations = [ attributes: { layout: { type: 'flex' } }, scope: [ 'inserter', 'transform' ], isActive: ( blockAttributes ) => - blockAttributes.layout?.type === 'flex' && ( ! blockAttributes.layout?.orientation || blockAttributes.layout?.orientation === 'horizontal' ), + blockAttributes.layout?.type === 'flex' && + ( ! blockAttributes.layout?.orientation || + blockAttributes.layout?.orientation === 'horizontal' ), + icon: row, }, { name: 'group-stack', @@ -30,7 +34,9 @@ const variations = [ attributes: { layout: { type: 'flex', orientation: 'vertical' } }, scope: [ 'inserter', 'transform' ], isActive: ( blockAttributes ) => - blockAttributes.layout?.type === 'flex' && blockAttributes.layout?.orientation === 'vertical', + blockAttributes.layout?.type === 'flex' && + blockAttributes.layout?.orientation === 'vertical', + icon: stack, }, ]; diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 2f8104c10df96b..ce8f4d0b922351 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -8,6 +8,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 88a3675a74bc5c..a414d4fc0e6072 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 00000000000000..981865c13a327b --- /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 00000000000000..1387e8f51fb0fc --- /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 138a01a68c2ed2..19cbf860f97b98 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 = ( - + ); From fbd8bdd8db6204bed7f511051a18cec48e5306df Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 25 Mar 2022 11:32:47 +0100 Subject: [PATCH 3/3] Update stack block description --- packages/block-library/src/group/variations.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js index 71f512e7aa91aa..047c08b881d148 100644 --- a/packages/block-library/src/group/variations.js +++ b/packages/block-library/src/group/variations.js @@ -30,7 +30,7 @@ const variations = [ { name: 'group-stack', title: __( 'Stack' ), - description: __( 'Blocks stacked in a column.' ), + description: __( 'Blocks stacked vertically.' ), attributes: { layout: { type: 'flex', orientation: 'vertical' } }, scope: [ 'inserter', 'transform' ], isActive: ( blockAttributes ) =>