Add the stack block variation to the group block (#39690)

WordPress · Mar 28, 2022 · 8c871f3 · 8c871f3
1 parent 3cec236
commit 8c871f3
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 11 deletions.
diff --git 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
@@ -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(
 			<BlockSwitcherDropdownMenu

diff --git a/packages/block-editor/src/components/multi-selection-inspector/index.js b/packages/block-editor/src/components/multi-selection-inspector/index.js
@@ -5,7 +5,7 @@ import { sprintf, _n } from '@wordpress/i18n';
 import { withSelect } from '@wordpress/data';
 import { serialize } from '@wordpress/blocks';
 import { count as wordCount } from '@wordpress/wordcount';
-import { stack } from '@wordpress/icons';
+import { copy } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ function MultiSelectionInspector( { blocks } ) {
 
 	return (
 		<div className="block-editor-multi-selection-inspector__card">
-			<BlockIcon icon={ stack } showColors />
+			<BlockIcon icon={ copy } showColors />
 			<div className="block-editor-multi-selection-inspector__card-content">
 				<div className="block-editor-multi-selection-inspector__card-title">
 					{ sprintf(

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const copy = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z" />
+	</SVG>
+);
+
+export default copy;
diff --git a/packages/icons/src/library/row.js b/packages/icons/src/library/row.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const row = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M9.2 6.5H4V8h5.2c.3 0 .5.2.5.5v7c0 .3-.2.5-.5.5H4v1.5h5.2c1.1 0 2-.9 2-2v-7c0-1.1-.8-2-2-2zM14.8 8H20V6.5h-5.2c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2H20V16h-5.2c-.3 0-.5-.2-.5-.5v-7c-.1-.3.2-.5.5-.5z" />
+	</SVG>
+);
+
+export default row;
diff --git 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 = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z" />
+		<Path d="M16 4v5.2c0 .3-.2.5-.5.5h-7c-.3.1-.5-.2-.5-.5V4H6.5v5.2c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2V4H16zm-.5 8.8h-7c-1.1 0-2 .9-2 2V20H8v-5.2c0-.3.2-.5.5-.5h7c.3 0 .5.2.5.5V20h1.5v-5.2c0-1.2-.9-2-2-2z" />
 	</SVG>
 );