@wordpress/block-library 7.17.0 → 7.19.0

package/src/gallery/gallery.js

@@ -26,6 +26,7 @@ export const Gallery = ( props ) => {
 		mediaPlaceholder,
 		insertBlocksAfter,
 		blockProps,
+		__unstableLayoutClassNames: layoutClassNames,
 	} = props;
 
 	const { align, columns, caption, imageCrop } = attributes;
@@ -42,6 +43,7 @@ export const Gallery = ( props ) => {
 			{ ...innerBlocksProps }
 			className={ classnames(
 				blockProps.className,
+				layoutClassNames,
 				'blocks-gallery-grid',
 				{
 					[ `align${ align }` ]: align,

package/src/gallery/index.php

@@ -76,13 +76,10 @@ function block_core_gallery_render( $attributes, $content ) {
 		}
 	}
 
-	$class   = wp_unique_id( 'wp-block-gallery-' );
-	$content = preg_replace(
-		'/' . preg_quote( 'class="', '/' ) . '/',
-		'class="' . $class . ' ',
-		$content,
-		1
-	);
+	$unique_gallery_classname = wp_unique_id( 'wp-block-gallery-' );
+	$processed_content        = new WP_HTML_Tag_Processor( $content );
+	$processed_content->next_tag();
+	$processed_content->add_class( $unique_gallery_classname );
 
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.
@@ -102,10 +99,22 @@ function block_core_gallery_render( $attributes, $content ) {
 	}
 
 	// Set the CSS variable to the column value, and the `gap` property to the combined gap value.
-	$style = '.wp-block-gallery.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_column . '; gap: ' . $gap_value . '}';
+	$gallery_styles   = array();
+	$gallery_styles[] = array(
+		'selector'     => ".wp-block-gallery.{$unique_gallery_classname}",
+		'declarations' => array(
+			'--wp--style--unstable-gallery-gap' => $gap_column,
+			'gap'                               => $gap_value,
+		),
+	);
 
-	wp_enqueue_block_support_styles( $style, 11 );
-	return $content;
+	gutenberg_style_engine_get_stylesheet_from_css_rules(
+		$gallery_styles,
+		array(
+			'context' => 'block-supports',
+		)
+	);
+	return (string) $processed_content;
 }
 /**
  * Registers the `core/gallery` block on server.

package/src/gallery/test/index.native.js

@@ -100,7 +100,7 @@ describe( 'Gallery block', () => {
 	// is addressed.
 	it.skip( 'displays media options picker when selecting the block', async () => {
 		// Initialize with an empty gallery
-		const { getByA11yLabel, getByText, getByTestId } =
+		const { getByLabelText, getByText, getByTestId } =
 			await initializeEditor( {
 				initialHtml: generateGalleryBlock( 0 ),
 			} );
@@ -121,7 +121,7 @@ describe( 'Gallery block', () => {
 
 		// Observe that the block is selected, this is done by checking if the block settings
 		// button is visible
-		const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
 		expect( blockActionsButton ).toBeVisible();
 	} );
 
@@ -160,18 +160,18 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc003
 	it( 'sets caption to gallery', async () => {
 		// Initialize with a gallery that contains one item
-		const { getByA11yLabel } = await initializeWithGalleryBlock( {
+		const { getByLabelText } = await initializeWithGalleryBlock( {
 			numberOfItems: 1,
 			media,
 		} );
 
 		// Check gallery item caption is not visible
-		const galleryItemCaption = getByA11yLabel( /Image caption. Empty/ );
+		const galleryItemCaption = getByLabelText( /Image caption. Empty/ );
 		expect( galleryItemCaption ).not.toBeVisible();
 
 		// Set gallery caption
 		const captionField = within(
-			getByA11yLabel( /Gallery caption. Empty/ )
+			getByLabelText( /Gallery caption. Empty/ )
 		).getByPlaceholderText( 'Add caption' );
 		changeTextOfRichText(
 			captionField,
@@ -456,7 +456,7 @@ describe( 'Gallery block', () => {
 		fireEvent.press( galleryItem3 );
 		await act( () =>
 			fireEvent.press(
-				within( galleryItem3 ).getByA11yLabel(
+				within( galleryItem3 ).getByLabelText(
 					/Move block left from position 3 to position 2/
 				)
 			)
@@ -465,7 +465,7 @@ describe( 'Gallery block', () => {
 		fireEvent.press( galleryItem1 );
 		await act( () =>
 			fireEvent.press(
-				within( galleryItem1 ).getByA11yLabel(
+				within( galleryItem1 ).getByLabelText(
 					/Move block right from position 1 to position 2/
 				)
 			)
@@ -563,14 +563,14 @@ describe( 'Gallery block', () => {
 				numberOfItems: 3,
 				media,
 			} );
-			const { getByA11yLabel } = screen;
+			const { getByLabelText } = screen;
 
 			await openBlockSettings( screen );
 
 			// Can't increment due to maximum value
 			// NOTE: Default columns value is 3
 			fireEvent(
-				getByA11yLabel( /Columns\. Value is 3/ ),
+				getByLabelText( /Columns\. Value is 3/ ),
 				'accessibilityAction',
 				{
 					nativeEvent: { actionName: 'increment' },
@@ -585,13 +585,13 @@ describe( 'Gallery block', () => {
 				numberOfItems: 3,
 				media,
 			} );
-			const { getByA11yLabel } = screen;
+			const { getByLabelText } = screen;
 
 			await openBlockSettings( screen );
 
 			// Decrement columns
 			fireEvent(
-				getByA11yLabel( /Columns\. Value is 3/ ),
+				getByLabelText( /Columns\. Value is 3/ ),
 				'accessibilityAction',
 				{
 					nativeEvent: { actionName: 'decrement' },

package/src/gallery/use-image-sizes.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, some } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -57,9 +57,10 @@ export default function useImageSizes( images, isSelected, getSettings ) {
 				};
 			}, {} );
 		}
+		const resizedImageSizes = Object.values( resizedImages );
 		return imageSizes
 			.filter( ( { slug } ) =>
-				some( resizedImages, ( sizes ) => sizes[ slug ] )
+				resizedImageSizes.some( ( sizes ) => sizes[ slug ] )
 			)
 			.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 	}

package/src/gallery/v1/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, find, get, isEmpty, map, reduce, some } 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,
@@ -302,9 +297,10 @@ function GalleryEdit( props ) {
 	}
 
 	function getImagesSizeOptions() {
+		const resizedImageSizes = Object.values( resizedImages );
 		return map(
 			filter( imageSizes, ( { slug } ) =>
-				some( resizedImages, ( sizes ) => sizes[ slug ] )
+				resizedImageSizes.some( ( sizes ) => sizes[ slug ] )
 			),
 			( { name, slug } ) => ( { value: slug, label: name } )
 		);

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,29 +12,71 @@ 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, setAttributes, clientId } ) {
+function GroupEdit( {
+	attributes,
+	name,
+	setAttributes,
+	clientId,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
 	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
 		( select ) => {
 			const { getBlock, getSettings } = select( blockEditorStore );
@@ -47,16 +88,26 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 		},
 		[ 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';
 
-	const blockProps = useBlockProps();
-
+	// Hooks.
+	const blockProps = useBlockProps( {
+		className: ! layoutSupportEnabled ? layoutClassNames : null,
+	} );
+	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
+		attributes,
+		usedLayoutType: usedLayout?.type,
+		hasInnerBlocks,
+	} );
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
 			? blockProps
@@ -67,34 +118,42 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 				? undefined
 				: InnerBlocks.ButtonBlockAppender,
 			__experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,
+			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
 		}
 	);
 
+	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;