Stylising the placeholder icons

updating tests
WordPress · Sep 7, 2022 · dbb8a9c · dbb8a9c
1 parent b5ce563
commit dbb8a9c
Show file tree

Hide file tree

Showing 9 changed files with 170 additions and 65 deletions.
diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -17,6 +17,7 @@ function BlockVariationPicker( {
 	variations,
 	onSelect,
 	allowSkip,
+	buttonType = 'secondary',
 } ) {
 	const classes = classnames( 'block-editor-block-variation-picker', {
 		'has-many-variations': variations.length > 4,
@@ -42,8 +43,8 @@ function BlockVariationPicker( {
 				{ variations.map( ( variation ) => (
 					<li key={ variation.name }>
 						<Button
-							variant="secondary"
-							icon={ variation.icon }
+							variant={ buttonType }
+							icon={ variation.placeHolderIcon || variation.icon }
 							iconSize={ 48 }
 							onClick={ () => onSelect( variation ) }
 							className="block-editor-block-variation-picker__variation"

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -2,19 +2,22 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useCallback } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import {
 	InnerBlocks,
 	useBlockProps,
 	InspectorControls,
 	useInnerBlocksProps,
 	useSetting,
-	__experimentalBlockVariationPicker,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as blocksStore } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import GroupPlaceHolder from './placeholder';
 
 /**
  * Render inspector controls for the Group block.
@@ -67,57 +70,6 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 	);
 }
 
-/**
- * Display group variations if none is selected.
- *
- * @param {Object}   props               Component props.
- * @param {string}   props.clientId      The block's clientId.
- * @param {string}   props.name          The block's name.
- * @param {Function} props.setAttributes Function to set block's attributes.
- *
- * @return {JSX.Element}                The placeholder.
- */
-function Placeholder( { clientId, name, setAttributes } ) {
-	const { blockType, defaultVariation, variations } = useSelect(
-		( select ) => {
-			const {
-				getBlockVariations,
-				getBlockType,
-				getDefaultBlockVariation,
-			} = select( blocksStore );
-
-			return {
-				blockType: getBlockType( name ),
-				defaultVariation: getDefaultBlockVariation( name, 'block' ),
-				variations: getBlockVariations( name, 'block' ),
-			};
-		},
-		[ name ]
-	);
-	const blockProps = useBlockProps();
-	const { selectBlock } = useDispatch( blockEditorStore );
-	// Ensure that the inserted block is selected after a Group variation is selected.
-	const updateSelection = useCallback(
-		( newClientId ) => selectBlock( newClientId, -1 ),
-		[ selectBlock ]
-	);
-	return (
-		<div { ...blockProps }>
-			<__experimentalBlockVariationPicker
-				icon={ blockType?.icon?.src }
-				label={ blockType?.title }
-				variations={ variations }
-				onSelect={ ( nextVariation = defaultVariation ) => {
-					setAttributes( nextVariation.attributes );
-					updateSelection( clientId );
-				} }
-				instructions={ __( 'Group blocks together. Select a layout:' ) }
-				allowSkip
-			/>
-		</div>
-	);
-}
-
 function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
 		( select ) => {
@@ -183,7 +135,7 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 				}
 			/>
 			{ showPlaceholder && (
-				<Placeholder
+				<GroupPlaceHolder
 					clientId={ clientId }
 					name={ name }
 					setAttributes={ setAttributes }

diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
@@ -51,3 +51,19 @@
 		pointer-events: all;
 	}
 }
+
+.wp-block-group__placeholder {
+	.components-placeholder__instructions {
+		text-align: center;
+	}
+	.block-editor-block-variation-picker__variations {
+		justify-content: center;
+	}
+	.block-editor-block-variation-picker__variations svg {
+		fill: $gray-400 !important;
+	}
+	.block-editor-block-variation-picker__variations > li {
+		margin: 0 10px;
+		width: auto;
+	}
+}
diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js
@@ -0,0 +1,126 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import {
+	useBlockProps,
+	__experimentalBlockVariationPicker,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { store as blocksStore } from '@wordpress/blocks';
+import { Path, SVG } from '@wordpress/components';
+
+const getGroupPlaceholderIcons = ( name = 'group' ) => {
+	const icons = {
+		group: (
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				width="44"
+				height="32"
+				viewBox="0 0 44 32"
+			>
+				<Path
+					d="M42 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z"
+					// style="fill:#ccc"
+				/>
+			</SVG>
+		),
+		'group-row': (
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				width="44"
+				height="32"
+				viewBox="0 0 44 32"
+			>
+				<Path
+					d="M42 0H23.5c-.6 0-1 .4-1 1v30c0 .6.4 1 1 1H42c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM20.5 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h18.5c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z"
+					// style="fill:#ccc"
+				/>
+			</SVG>
+		),
+		'group-stack': (
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				width="44"
+				height="32"
+				viewBox="0 0 44 32"
+			>
+				<Path
+					d="M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z"
+					// style="fill:#ccc"
+				/>
+			</SVG>
+		),
+	};
+	return icons?.[ name ];
+};
+
+/**
+ * Display group variations if none is selected.
+ *
+ * @param {Object}   props               Component props.
+ * @param {string}   props.clientId      The block's clientId.
+ * @param {string}   props.name          The block's name.
+ * @param {Function} props.setAttributes Function to set block's attributes.
+ *
+ * @return {JSX.Element}                The placeholder.
+ */
+function GroupPlaceHolder( { clientId, name, setAttributes } ) {
+	const { blockType, defaultVariation, variations } = useSelect(
+		( select ) => {
+			const {
+				getBlockVariations,
+				getBlockType,
+				getDefaultBlockVariation,
+			} = select( blocksStore );
+
+			const variationsWithPlaceHolderIcons = (
+				getBlockVariations( name, 'block' ) || []
+			).map( ( groupVariation ) => {
+				const placeholderIcon = getGroupPlaceholderIcons(
+					groupVariation.name
+				);
+				if ( !! placeholderIcon ) {
+					groupVariation.placeHolderIcon = placeholderIcon;
+				}
+				return groupVariation;
+			} );
+
+			return {
+				blockType: getBlockType( name ),
+				defaultVariation: getDefaultBlockVariation( name, 'block' ),
+				variations: variationsWithPlaceHolderIcons,
+			};
+		},
+		[ name ]
+	);
+	const blockProps = useBlockProps( {
+		className: 'wp-block-group__placeholder',
+	} );
+	const { selectBlock } = useDispatch( blockEditorStore );
+	// Ensure that the inserted block is selected after a Group variation is selected.
+	const updateSelection = useCallback(
+		( newClientId ) => selectBlock( newClientId, -1 ),
+		[ selectBlock ]
+	);
+	return (
+		<div { ...blockProps }>
+			<__experimentalBlockVariationPicker
+				icon={ blockType?.icon?.src }
+				label={ blockType?.title }
+				variations={ variations }
+				onSelect={ ( nextVariation = defaultVariation ) => {
+					setAttributes( nextVariation.attributes );
+					updateSelection( clientId );
+				} }
+				instructions={ __( 'Group blocks together. Select a layout:' ) }
+				allowSkip={ false }
+				buttonType="tertiary"
+			/>
+		</div>
+	);
+}
+
+export default GroupPlaceHolder;
diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
@@ -165,8 +165,9 @@ describe( 'Navigating the block hierarchy', () => {
 	it( 'should select the wrapper div for a group', async () => {
 		// Insert a group block.
 		await insertBlock( 'Group' );
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'[aria-label="Skip selection and choose default block variation."]'
+			'button[aria-label="Gather blocks in a container."]'
 		);
 		// Insert some random blocks.
 		// The last block shouldn't be a textual block.

diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
@@ -277,8 +277,9 @@ describe( 'Inserting blocks', () => {
 	// Check for regression of https://github.com/WordPress/gutenberg/issues/24403
 	it( 'inserts a block in proper place after having clicked `Browse All` from block appender', async () => {
 		await insertBlock( 'Group' );
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'[aria-label="Skip selection and choose default block variation."]'
+			'button[aria-label="Gather blocks in a container."]'
 		);
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Paragraph after group' );
@@ -298,8 +299,9 @@ describe( 'Inserting blocks', () => {
 		const INSERTER_SEARCH_SELECTOR =
 			'.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search';
 		await insertBlock( 'Group' );
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'[aria-label="Skip selection and choose default block variation."]'
+			'button[aria-label="Gather blocks in a container."]'
 		);
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Text' );

diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
@@ -223,8 +223,9 @@ describe( 'Order of block keyboard navigation', () => {
 	it( 'allows the block wrapper to gain focus for a group block instead of the first element', async () => {
 		// Insert a group block.
 		await insertBlock( 'Group' );
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'[aria-label="Skip selection and choose default block variation."]'
+			'button[aria-label="Gather blocks in a container."]'
 		);
 		// If active label matches, that means focus did not change from group block wrapper.
 		await expect( await getActiveLabel() ).toBe( 'Block: Group' );

diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
@@ -398,8 +398,10 @@ describe( 'Multi-block selection', () => {
 			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Group')]`
 		);
 		await page.keyboard.press( 'Enter' );
+
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'[aria-label="Skip selection and choose default block variation."]'
+			'button[aria-label="Gather blocks in a container."]'
 		);
 
 		const groupAppender = await page.waitForSelector(

diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js
@@ -28,8 +28,9 @@ test.describe( 'Group', () => {
 			'role=listbox[name="Blocks"i] >> role=option[name="Group"i]'
 		);
 
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'role=button[name="Skip selection and choose default block variation."i]'
+			'role=button[name="Gather blocks in a container."i]'
 		);
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
@@ -45,8 +46,10 @@ test.describe( 'Group', () => {
 			page.locator( 'role=option[name="Group"i][selected]' )
 		).toBeVisible();
 		await page.keyboard.press( 'Enter' );
+
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'role=button[name="Skip selection and choose default block variation."i]'
+			'role=button[name="Gather blocks in a container."i]'
 		);
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
@@ -57,8 +60,9 @@ test.describe( 'Group', () => {
 		page,
 	} ) => {
 		await editor.insertBlock( { name: 'core/group' } );
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'role=button[name="Skip selection and choose default block variation."i]'
+			'role=button[name="Gather blocks in a container."i]'
 		);
 		await page.click( 'role=button[name="Add block"i]' );
 		await page.click(