@wordpress/block-library 7.18.0 → 7.19.0

package/src/gallery/v1/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, find, get, isEmpty, map, reduce } from 'lodash';
+import { filter, find, get, isEmpty, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -98,34 +98,29 @@ function GalleryEdit( props ) {
 
 	const resizedImages = useMemo( () => {
 		if ( isSelected ) {
-			return reduce(
-				attributes.ids,
+			return ( attributes.ids ?? [] ).reduce(
 				( currentResizedImages, id ) => {
 					if ( ! id ) {
 						return currentResizedImages;
 					}
 					const image = getMedia( id );
-					const sizes = reduce(
-						imageSizes,
-						( currentSizes, size ) => {
-							const defaultUrl = get( image, [
-								'sizes',
-								size.slug,
-								'url',
-							] );
-							const mediaDetailsUrl = get( image, [
-								'media_details',
-								'sizes',
-								size.slug,
-								'source_url',
-							] );
-							return {
-								...currentSizes,
-								[ size.slug ]: defaultUrl || mediaDetailsUrl,
-							};
-						},
-						{}
-					);
+					const sizes = imageSizes.reduce( ( currentSizes, size ) => {
+						const defaultUrl = get( image, [
+							'sizes',
+							size.slug,
+							'url',
+						] );
+						const mediaDetailsUrl = get( image, [
+							'media_details',
+							'sizes',
+							size.slug,
+							'source_url',
+						] );
+						return {
+							...currentSizes,
+							[ size.slug ]: defaultUrl || mediaDetailsUrl,
+						};
+					}, {} );
 					return {
 						...currentResizedImages,
 						[ parseInt( id, 10 ) ]: sizes,

package/src/group/block.json

@@ -41,6 +41,9 @@
 				"blockGap": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,

package/src/group/edit.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	InnerBlocks,
 	useBlockProps,
@@ -13,30 +12,67 @@ import {
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
 
-const htmlElementMessages = {
-	header: __(
-		'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
-	),
-	main: __(
-		'The <main> element should be used for the primary content of your document only. '
-	),
-	section: __(
-		"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
-	),
-	article: __(
-		'The <article> element should represent a self contained, syndicatable portion of the document.'
-	),
-	aside: __(
-		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
-	),
-	footer: __(
-		'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
-	),
-};
+/**
+ * Internal dependencies
+ */
+import GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';
+
+/**
+ * Render inspector controls for the Group block.
+ *
+ * @param {Object}   props                 Component props.
+ * @param {string}   props.tagName         The HTML tag name.
+ * @param {Function} props.onSelectTagName onChange function for the SelectControl.
+ *
+ * @return {JSX.Element}                The control group.
+ */
+function GroupEditControls( { tagName, onSelectTagName } ) {
+	const htmlElementMessages = {
+		header: __(
+			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+		),
+		main: __(
+			'The <main> element should be used for the primary content of your document only. '
+		),
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		article: __(
+			'The <article> element should represent a self-contained, syndicatable portion of the document.'
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+		footer: __(
+			'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+		),
+	};
+	return (
+		<InspectorControls __experimentalGroup="advanced">
+			<SelectControl
+				label={ __( 'HTML element' ) }
+				options={ [
+					{ label: __( 'Default (<div>)' ), value: 'div' },
+					{ label: '<header>', value: 'header' },
+					{ label: '<main>', value: 'main' },
+					{ label: '<section>', value: 'section' },
+					{ label: '<article>', value: 'article' },
+					{ label: '<aside>', value: 'aside' },
+					{ label: '<footer>', value: 'footer' },
+				] }
+				value={ tagName }
+				onChange={ onSelectTagName }
+				help={ htmlElementMessages[ tagName ] }
+			/>
+		</InspectorControls>
+	);
+}
 
 function GroupEdit( {
 	attributes,
+	name,
 	setAttributes,
 	clientId,
 	__unstableLayoutClassNames: layoutClassNames,
@@ -52,18 +88,26 @@ function GroupEdit( {
 		},
 		[ clientId ]
 	);
-	const defaultLayout = useSetting( 'layout' ) || {};
+
 	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
+
+	// Layout settings.
+	const defaultLayout = useSetting( 'layout' ) || {};
 	const usedLayout = ! layout?.type
 		? { ...defaultLayout, ...layout, type: 'default' }
 		: { ...defaultLayout, ...layout };
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
 
+	// Hooks.
 	const blockProps = useBlockProps( {
 		className: ! layoutSupportEnabled ? layoutClassNames : null,
 	} );
-
+	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
+		attributes,
+		usedLayoutType: usedLayout?.type,
+		hasInnerBlocks,
+	} );
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
 			? blockProps
@@ -78,31 +122,38 @@ function GroupEdit( {
 		}
 	);
 
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const updateSelection = useCallback(
+		( newClientId ) => selectBlock( newClientId, -1 ),
+		[ selectBlock ]
+	);
+	const selectVariation = ( nextVariation ) => {
+		setAttributes( nextVariation.attributes );
+		updateSelection( clientId );
+		setShowPlaceholder( false );
+	};
+
 	return (
 		<>
-			<InspectorControls __experimentalGroup="advanced">
-				<SelectControl
-					label={ __( 'HTML element' ) }
-					options={ [
-						{ label: __( 'Default (<div>)' ), value: 'div' },
-						{ label: '<header>', value: 'header' },
-						{ label: '<main>', value: 'main' },
-						{ label: '<section>', value: 'section' },
-						{ label: '<article>', value: 'article' },
-						{ label: '<aside>', value: 'aside' },
-						{ label: '<footer>', value: 'footer' },
-					] }
-					value={ TagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-					help={ htmlElementMessages[ TagName ] }
+			<GroupEditControls
+				tagName={ TagName }
+				onSelectTagName={ ( value ) =>
+					setAttributes( { tagName: value } )
+				}
+			/>
+			{ showPlaceholder && (
+				<GroupPlaceHolder
+					clientId={ clientId }
+					name={ name }
+					onSelect={ selectVariation }
 				/>
-			</InspectorControls>
-			{ layoutSupportEnabled && <TagName { ...innerBlocksProps } /> }
+			) }
+			{ layoutSupportEnabled && ! showPlaceholder && (
+				<TagName { ...innerBlocksProps } />
+			) }
 			{ /* Ideally this is not needed but it's there for backward compatibility reason
 				to keep this div for themes that might rely on its presence */ }
-			{ ! layoutSupportEnabled && (
+			{ ! layoutSupportEnabled && ! showPlaceholder && (
 				<TagName { ...blockProps }>
 					<div { ...innerBlocksProps } />
 				</TagName>

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,187 @@
+/**
+ * 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"
+					// 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 ];
+};
+
+/**
+ * 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 { defaultVariation, variations } = useSelect(
+		( select ) => {
+			const { getBlockVariations, getDefaultBlockVariation } =
+				select( blocksStore );
+			return {
+				defaultVariation: getDefaultBlockVariation( name, 'block' ),
+				variations: getBlockVariations( name, 'block' ) || [],
+			};
+		},
+		[ name ]
+	);
+	const blockProps = useBlockProps( {
+		className: 'wp-block-group__placeholder',
+	} );
+	const selectVariation = ( nextVariation = defaultVariation ) =>
+		onSelect( nextVariation );
+
+	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={ () => selectVariation( 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/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',