@wordpress/block-library 7.18.0 → 8.0.0

package/src/group/editor.scss

@@ -52,3 +52,51 @@
 		pointer-events: all;
 	}
 }
+
+.wp-block-group__placeholder {
+	.wp-block-group-placeholder__variations {
+		list-style: none;
+		display: flex;
+		justify-content: center;
+		flex-direction: row;
+		flex-wrap: wrap;
+		width: 100%;
+		padding: 0;
+		margin: 0;
+	}
+	.components-placeholder__instructions {
+		text-align: center;
+		margin-bottom: 18px;
+	}
+	.wp-block-group-placeholder__variations svg {
+		fill: $gray-400 !important;
+	}
+	.wp-block-group-placeholder__variations svg:hover {
+		fill: var(--wp-admin-theme-color) !important;
+	}
+	.wp-block-group-placeholder__variations > li {
+		margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
+		width: auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation-button {
+		width: 44px;
+		height: 32px;
+		padding: 0;
+		&:hover {
+			box-shadow: none;
+		}
+	}
+	.components-placeholder {
+		min-height: auto;
+		padding: $grid-unit-30;
+	}
+	.is-small,
+	.is-medium {
+		.wp-block-group-placeholder__variations > li {
+			margin: $grid-unit-15;
+		}
+	}
+}

package/src/group/placeholder.js

@@ -0,0 +1,168 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { store as blocksStore } from '@wordpress/blocks';
+import { Path, SVG, Button, Placeholder } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Returns a custom variation icon.
+ *
+ * @param {string} name The block variation name.
+ *
+ * @return {JSX.Element} The SVG element.
+ */
+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" />
+			</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" />
+			</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" />
+			</SVG>
+		),
+	};
+	return icons?.[ name ];
+};
+
+/**
+ * A custom hook to tell the Group block whether to show the variation placeholder.
+ *
+ * @param {Object}  props                  Arguments to pass to hook.
+ * @param {Object}  [props.attributes]     The block's attributes.
+ * @param {string}  [props.usedLayoutType] The block's current layout type.
+ * @param {boolean} [props.hasInnerBlocks] Whether the block has inner blocks.
+ *
+ * @return {[boolean, Function]} A state value and setter function.
+ */
+export function useShouldShowPlaceHolder( {
+	attributes = {
+		style: undefined,
+		backgroundColor: undefined,
+		textColor: undefined,
+		fontSize: undefined,
+	},
+	usedLayoutType = '',
+	hasInnerBlocks = false,
+} ) {
+	const { style, backgroundColor, textColor, fontSize } = attributes;
+	/*
+	 * Shows the placeholder when no known styles are set,
+	 * or when a non-default layout has been selected.
+	 * Should the Group block support more style presets in the
+	 * future, e.g., attributes.spacingSize, we can add them to the
+	 * condition.
+	 */
+	const [ showPlaceholder, setShowPlaceholder ] = useState(
+		! hasInnerBlocks &&
+			! backgroundColor &&
+			! fontSize &&
+			! textColor &&
+			! style &&
+			usedLayoutType !== 'flex'
+	);
+
+	useEffect( () => {
+		if (
+			!! hasInnerBlocks ||
+			!! backgroundColor ||
+			!! fontSize ||
+			!! textColor ||
+			!! style ||
+			usedLayoutType === 'flex'
+		) {
+			setShowPlaceholder( false );
+		}
+	}, [
+		backgroundColor,
+		fontSize,
+		textColor,
+		style,
+		usedLayoutType,
+		hasInnerBlocks,
+	] );
+
+	return [ showPlaceholder, setShowPlaceholder ];
+}
+
+/**
+ * Display group variations if none is selected.
+ *
+ * @param {Object}   props          Component props.
+ * @param {string}   props.name     The block's name.
+ * @param {Function} props.onSelect Function to set block's attributes.
+ *
+ * @return {JSX.Element}                The placeholder.
+ */
+function GroupPlaceHolder( { name, onSelect } ) {
+	const variations = useSelect(
+		( select ) => select( blocksStore ).getBlockVariations( name, 'block' ),
+		[ name ]
+	);
+	const blockProps = useBlockProps( {
+		className: 'wp-block-group__placeholder',
+	} );
+	return (
+		<div { ...blockProps }>
+			<Placeholder
+				instructions={ __( 'Group blocks together. Select a layout:' ) }
+			>
+				{ /*
+				 * Taken from BlockVariationPicker component.
+				 * Disable reason: The `list` ARIA role is redundant but
+				 * Safari+VoiceOver won't announce the list otherwise.
+				 */
+				/* eslint-disable jsx-a11y/no-redundant-roles */ }
+				<ul
+					role="list"
+					className="wp-block-group-placeholder__variations"
+					aria-label={ __( 'Block variations' ) }
+				>
+					{ variations.map( ( variation ) => (
+						<li key={ variation.name }>
+							<Button
+								variant="tertiary"
+								icon={ getGroupPlaceholderIcons(
+									variation.name
+								) }
+								iconSize={ 44 }
+								onClick={ () => onSelect( variation ) }
+								className="wp-block-group-placeholder__variation-button"
+								label={ `${ variation.title }: ${ variation.description }` }
+							/>
+						</li>
+					) ) }
+				</ul>
+				{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+			</Placeholder>
+		</div>
+	);
+}
+
+export default GroupPlaceHolder;

package/src/group/test/__snapshots__/edit.native.js.snap

@@ -3,7 +3,7 @@
 exports[`Group block inserts block and adds a Heading block as an inner block 1`] = `
 "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2></h2>
+<h2 class=\\"wp-block-heading\\"></h2>
 <!-- /wp:heading --></div>
 <!-- /wp:group -->"
 `;

package/src/group/test/edit.native.js

@@ -79,14 +79,14 @@ describe( 'Group block', () => {
 		const screen = await initializeEditor( {
 			initialHtml: NESTED_GROUP_BLOCK,
 		} );
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Get block
 		let groupBlock = await getBlock( screen, 'Group' );
 		fireEvent.press( groupBlock );
 
 		// Get Ungroup button
-		let ungroupButton = getByA11yLabel( /Ungroup/ );
+		let ungroupButton = getByLabelText( /Ungroup/ );
 		fireEvent.press( ungroupButton );
 
 		// Press Group block again
@@ -94,7 +94,7 @@ describe( 'Group block', () => {
 		fireEvent.press( groupBlock );
 
 		// Ungroup last block
-		ungroupButton = getByA11yLabel( /Ungroup/ );
+		ungroupButton = getByLabelText( /Ungroup/ );
 		fireEvent.press( ungroupButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();

package/src/group/test/placeholder.js

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { useShouldShowPlaceHolder } from '../placeholder';
+
+describe( 'useShouldShowPlaceHolder', () => {
+	function renderTestComponent( ...props ) {
+		let returnVal = [];
+		function TestComponent() {
+			returnVal = returnVal.concat(
+				useShouldShowPlaceHolder( ...props )
+			);
+			return null;
+		}
+		render( <TestComponent /> );
+		return returnVal;
+	}
+
+	test.each( [
+		{
+			attributes: {},
+			usedLayoutType: undefined,
+			hasInnerBlocks: undefined,
+			expectedValue: true,
+		},
+		{
+			attributes: { style: { something: 'something' } },
+			usedLayoutType: undefined,
+			hasInnerBlocks: undefined,
+			expectedValue: false,
+		},
+		{
+			attributes: { backgroundColor: 'red' },
+			usedLayoutType: undefined,
+			hasInnerBlocks: true,
+			expectedValue: false,
+		},
+		{
+			attributes: { fontSize: 'big' },
+			usedLayoutType: undefined,
+			hasInnerBlocks: true,
+			expectedValue: false,
+		},
+		{
+			attributes: { textColor: 'yellow' },
+			usedLayoutType: undefined,
+			hasInnerBlocks: true,
+			expectedValue: false,
+		},
+		{
+			attributes: undefined,
+			usedLayoutType: 'flex',
+			hasInnerBlocks: undefined,
+			expectedValue: false,
+		},
+		{
+			attributes: undefined,
+			usedLayoutType: undefined,
+			hasInnerBlocks: true,
+			expectedValue: false,
+		},
+	] )(
+		'should return $expectedValue for `showPlaceholder` when hasInnerBlocks is $hasInnerBlocks, usedLayoutType is $usedLayoutType and attributes is $attributes',
+		( { hasInnerBlocks, usedLayoutType, attributes, expectedValue } ) => {
+			const [ showPlaceholder ] = renderTestComponent( {
+				hasInnerBlocks,
+				usedLayoutType,
+				attributes,
+			} );
+			expect( showPlaceholder ).toBe( expectedValue );
+		}
+	);
+} );

package/src/group/variations.js

@@ -11,7 +11,7 @@ const variations = [
 		description: __( 'Gather blocks in a container.' ),
 		attributes: { layout: { type: 'constrained' } },
 		isDefault: true,
-		scope: [ 'inserter', 'transform' ],
+		scope: [ 'block', 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
 			! blockAttributes.layout ||
 			! blockAttributes.layout?.type ||
@@ -24,7 +24,7 @@ const variations = [
 		title: _x( 'Row', 'single horizontal line' ),
 		description: __( 'Arrange blocks horizontally.' ),
 		attributes: { layout: { type: 'flex', flexWrap: 'nowrap' } },
-		scope: [ 'inserter', 'transform' ],
+		scope: [ 'block', 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
 			blockAttributes.layout?.type === 'flex' &&
 			( ! blockAttributes.layout?.orientation ||
@@ -36,7 +36,7 @@ const variations = [
 		title: __( 'Stack' ),
 		description: __( 'Arrange blocks vertically.' ),
 		attributes: { layout: { type: 'flex', orientation: 'vertical' } },
-		scope: [ 'inserter', 'transform' ],
+		scope: [ 'block', 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
 			blockAttributes.layout?.type === 'flex' &&
 			blockAttributes.layout?.orientation === 'vertical',

package/src/heading/block.json

@@ -29,7 +29,7 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"anchor": true,
-		"className": false,
+		"className": true,
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -57,7 +57,6 @@
 				"textTransform": true
 			}
 		},
-		"__experimentalSelector": "h1,h2,h3,h4,h5,h6",
 		"__unstablePasteTextInline": true,
 		"__experimentalSlashInserter": true
 	},