@wordpress/block-library 8.6.0 → 8.7.0

package/src/cover/edit/inspector-controls.js

@@ -206,9 +206,7 @@ export default function CoverInspectorControls( {
 							isImgElement && (
 								<TextareaControl
 									__nextHasNoMarginBottom
-									label={ __(
-										'Alt text (alternative text)'
-									) }
+									label={ __( 'Alternative text' ) }
 									value={ alt }
 									onChange={ ( newAlt ) =>
 										setAttributes( { alt: newAlt } )
@@ -217,11 +215,12 @@ export default function CoverInspectorControls( {
 										<>
 											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
 												{ __(
-													'Describe the purpose of the image'
+													'Describe the purpose of the image.'
 												) }
 											</ExternalLink>
+											<br />
 											{ __(
-												'Leave empty if the image is purely decorative.'
+												'Leave empty if decorative.'
 											) }
 										</>
 									}

package/src/cover/test/__snapshots__/transforms.native.js.snap

@@ -30,7 +30,7 @@ exports[`Cover block transformations with Image to Image block 1`] = `
 
 exports[`Cover block transformations with Image to Media & Text block 1`] = `
 "<!-- wp:media-text {"mediaId":890,"mediaType":"image","backgroundColor":"luminous-vivid-orange"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-890 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<div class="wp-block-media-text is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-890 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
 <p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->"
@@ -60,7 +60,7 @@ exports[`Cover block transformations with Video to Group block 1`] = `
 
 exports[`Cover block transformations with Video to Media & Text block 1`] = `
 "<!-- wp:media-text {"mediaId":891,"mediaType":"video","backgroundColor":"luminous-vivid-orange"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<div class="wp-block-media-text is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
 <p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->"

package/src/cover/test/edit.js

@@ -0,0 +1,324 @@
+/**
+ * External dependencies
+ */
+import { screen, fireEvent, act, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import {
+	initializeEditor,
+	selectBlock,
+} from 'test/integration/helpers/integration-test-editor';
+
+async function setup( attributes ) {
+	const testBlock = { name: 'core/cover', attributes };
+	return initializeEditor( testBlock );
+}
+
+async function createAndSelectBlock() {
+	await userEvent.click(
+		screen.getByRole( 'button', {
+			name: 'Color: Black',
+		} )
+	);
+	await userEvent.click(
+		screen.getByRole( 'button', {
+			name: 'Select Cover',
+		} )
+	);
+}
+
+describe( 'Cover block', () => {
+	describe( 'Editor canvas', () => {
+		test( 'shows placeholder if background image and color not set', async () => {
+			await setup();
+
+			expect(
+				screen.getByRole( 'group', {
+					name: 'To edit this block, you need permission to upload media.',
+				} )
+			).toBeInTheDocument();
+		} );
+
+		test( 'can set overlay color using color picker on block placeholder', async () => {
+			const { container } = await setup();
+			const colorPicker = screen.getByRole( 'button', {
+				name: 'Color: Black',
+			} );
+			await userEvent.click( colorPicker );
+			const color = colorPicker.style.backgroundColor;
+			expect(
+				screen.queryByRole( 'group', {
+					name: 'To edit this block, you need permission to upload media.',
+				} )
+			).not.toBeInTheDocument();
+
+			// eslint-disable-next-line testing-library/no-node-access
+			const overlay = container.getElementsByClassName(
+				'wp-block-cover__background'
+			);
+			expect( overlay[ 0 ] ).toHaveStyle(
+				`background-color: ${ color }`
+			);
+		} );
+
+		test( 'can have the title edited', async () => {
+			await setup();
+
+			await userEvent.click(
+				screen.getByRole( 'button', {
+					name: 'Color: Black',
+				} )
+			);
+
+			const title = screen.getByLabelText( 'Empty block;', {
+				exact: false,
+			} );
+			await userEvent.click( title );
+			await userEvent.keyboard( 'abc' );
+			expect( title ).toHaveTextContent( 'abc' );
+		} );
+	} );
+
+	describe( 'Block toolbar', () => {
+		test( 'full height toggle sets minHeight style attribute to 100vh when clicked', async () => {
+			await setup();
+			await createAndSelectBlock();
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveStyle(
+				'min-height: 100vh;'
+			);
+
+			await userEvent.click(
+				screen.getByLabelText( 'Toggle full height' )
+			);
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
+				'min-height: 100vh;'
+			);
+		} );
+
+		test( 'content position button sets content position', async () => {
+			await setup();
+			await createAndSelectBlock();
+
+			await userEvent.click(
+				screen.getByLabelText( 'Change content position' )
+			);
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
+				'has-custom-content-position'
+			);
+
+			await act( async () =>
+				within( screen.getByRole( 'grid' ) )
+					.getByRole( 'gridcell', {
+						name: 'top left',
+					} )
+					.focus()
+			);
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'has-custom-content-position'
+			);
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'is-position-top-left'
+			);
+		} );
+	} );
+
+	describe( 'Inspector controls', () => {
+		describe( 'Media settings', () => {
+			test( 'does not display media settings panel if url is not set', async () => {
+				await setup();
+				expect(
+					screen.queryByRole( 'button', {
+						name: 'Media settings',
+					} )
+				).not.toBeInTheDocument();
+			} );
+			test( 'displays media settings panel if url is set', async () => {
+				await setup( {
+					url: 'http://localhost/my-image.jpg',
+				} );
+
+				await selectBlock( 'Block: Cover' );
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Media settings',
+					} )
+				).toBeInTheDocument();
+			} );
+		} );
+
+		test( 'sets hasParallax attribute to true if fixed background toggled', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
+				'has-parallax'
+			);
+			await selectBlock( 'Block: Cover' );
+			await userEvent.click(
+				screen.getByLabelText( 'Fixed background' )
+			);
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'has-parallax'
+			);
+		} );
+
+		test( 'sets isRepeated attribute to true if repeated background toggled', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
+				'is-repeated'
+			);
+			await selectBlock( 'Block: Cover' );
+			await userEvent.click(
+				screen.getByLabelText( 'Repeated background' )
+			);
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'is-repeated'
+			);
+		} );
+
+		test( 'sets left focalPoint attribute when focal point values changed', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+
+			await selectBlock( 'Block: Cover' );
+			await userEvent.clear( screen.getByLabelText( 'Left' ) );
+			await userEvent.type( screen.getByLabelText( 'Left' ), '100' );
+
+			expect(
+				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
+					'img'
+				)
+			).toHaveStyle( 'object-position: 100% 50%;' );
+		} );
+
+		test( 'sets alt attribute if text entered in alt text box', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+
+			await selectBlock( 'Block: Cover' );
+			await userEvent.type(
+				screen.getByLabelText( 'Alt text (alternative text)' ),
+				'Me'
+			);
+			expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();
+		} );
+
+		test( 'clears media  when clear media button clicked', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+
+			await selectBlock( 'Block: Cover' );
+			expect(
+				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
+					'img'
+				)
+			).toBeInTheDocument();
+
+			await userEvent.click(
+				screen.getByRole( 'button', {
+					name: 'Clear Media',
+				} )
+			);
+			expect(
+				within( screen.queryByLabelText( 'Block: Cover' ) ).queryByRole(
+					'img'
+				)
+			).not.toBeInTheDocument();
+		} );
+
+		describe( 'Color panel', () => {
+			test( 'applies selected opacity to block when number control value changed', async () => {
+				const { container } = await setup();
+
+				await createAndSelectBlock();
+
+				// eslint-disable-next-line testing-library/no-node-access
+				const overlay = container.getElementsByClassName(
+					'wp-block-cover__background'
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-100' );
+
+				await userEvent.click(
+					screen.getByRole( 'tab', {
+						name: 'Styles',
+					} )
+				);
+
+				fireEvent.change(
+					screen.getByRole( 'spinbutton', {
+						name: 'Overlay opacity',
+					} ),
+					{
+						target: { value: '40' },
+					}
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-40' );
+			} );
+
+			test( 'applies selected opacity to block when slider moved', async () => {
+				const { container } = await setup();
+
+				await createAndSelectBlock();
+
+				// eslint-disable-next-line testing-library/no-node-access
+				const overlay = container.getElementsByClassName(
+					'wp-block-cover__background'
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-100' );
+
+				await userEvent.click(
+					screen.getByRole( 'tab', {
+						name: 'Styles',
+					} )
+				);
+
+				fireEvent.change(
+					screen.getByRole( 'slider', {
+						name: 'Overlay opacity',
+					} ),
+					{ target: { value: 30 } }
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-30' );
+			} );
+		} );
+
+		describe( 'Dimensions panel', () => {
+			test( 'sets minHeight attribute when number control value changed', async () => {
+				await setup();
+				await createAndSelectBlock();
+				await userEvent.click(
+					screen.getByRole( 'tab', {
+						name: 'Styles',
+					} )
+				);
+				await userEvent.clear(
+					screen.getByLabelText( 'Minimum height of cover' )
+				);
+				await userEvent.type(
+					screen.getByLabelText( 'Minimum height of cover' ),
+					'300'
+				);
+
+				expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
+					'min-height: 300px;'
+				);
+			} );
+		} );
+	} );
+} );

package/src/gallery/edit.js

@@ -562,6 +562,7 @@ function GalleryEdit( props ) {
 							max={ Math.min( MAX_COLUMNS, images.length ) }
 							{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
 							required
+							size="__unstable-large"
 						/>
 					) }
 					<ToggleControl
@@ -578,6 +579,7 @@ function GalleryEdit( props ) {
 						onChange={ setLinkTo }
 						options={ linkOptions }
 						hideCancelButton={ true }
+						size="__unstable-large"
 					/>
 					{ hasLinkTo && (
 						<ToggleControl
@@ -590,7 +592,7 @@ function GalleryEdit( props ) {
 					{ imageSizeOptions?.length > 0 && (
 						<SelectControl
 							__nextHasNoMarginBottom
-							label={ __( 'Image size' ) }
+							label={ __( 'Resolution' ) }
 							help={ __(
 								'Select the size of the source images.'
 							) }
@@ -598,12 +600,13 @@ function GalleryEdit( props ) {
 							options={ imageSizeOptions }
 							onChange={ updateImagesSize }
 							hideCancelButton={ true }
+							size="__unstable-large"
 						/>
 					) }
 					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
 						<BaseControl className={ 'gallery-image-sizes' }>
 							<BaseControl.VisualLabel>
-								{ __( 'Image size' ) }
+								{ __( 'Resolution' ) }
 							</BaseControl.VisualLabel>
 							<View className={ 'gallery-image-sizes__loading' }>
 								<Spinner />

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

@@ -5,7 +5,7 @@ import { useMemo } from '@wordpress/element';
 
 /**
  * Calculates the image sizes that are avaible for the current gallery images in order to
- * populate the 'Image size' selector.
+ * populate the 'Resolution' selector.
  *
  * @param {Array}    images      Basic image block data taken from current gallery innerBlock
  * @param {boolean}  isSelected  Is the block currently selected in the editor.

package/src/group/deprecated.js

@@ -50,7 +50,8 @@ const deprecated = [
 				default: 'div',
 			},
 			templateLock: {
-				type: 'string',
+				type: [ 'string', 'boolean' ],
+				enum: [ 'all', 'insert', false ],
 			},
 		},
 		supports: {
@@ -135,7 +136,8 @@ const deprecated = [
 				default: 'div',
 			},
 			templateLock: {
-				type: 'string',
+				type: [ 'string', 'boolean' ],
+				enum: [ 'all', 'insert', false ],
 			},
 		},
 		supports: {

package/src/group/edit.js

@@ -12,6 +12,7 @@ import {
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { View } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -97,7 +98,8 @@ function GroupEdit( {
 		? { ...defaultLayout, ...layout, type: 'default' }
 		: { ...defaultLayout, ...layout };
 	const { type = 'default' } = usedLayout;
-	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
+	const layoutSupportEnabled =
+		themeSupportsLayout || type === 'flex' || type === 'grid';
 
 	// Hooks.
 	const blockProps = useBlockProps( {
@@ -108,15 +110,28 @@ function GroupEdit( {
 		usedLayoutType: usedLayout?.type,
 		hasInnerBlocks,
 	} );
+
+	// Default to the regular appender being rendered.
+	let renderAppender;
+	if ( showPlaceholder ) {
+		// In the placeholder state, ensure the appender is not rendered.
+		// This is needed because `...innerBlocksProps` is used in the placeholder
+		// state so that blocks can dragged onto the placeholder area
+		// from both the list view and in the editor canvas.
+		renderAppender = false;
+	} else if ( ! hasInnerBlocks ) {
+		// When there is no placeholder, but the block is also empty,
+		// use the larger button appender.
+		renderAppender = InnerBlocks.ButtonBlockAppender;
+	}
+
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
 			? blockProps
 			: { className: 'wp-block-group__inner-container' },
 		{
 			templateLock,
-			renderAppender: hasInnerBlocks
-				? undefined
-				: InnerBlocks.ButtonBlockAppender,
+			renderAppender,
 			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
 		}
 	);
@@ -138,11 +153,14 @@ function GroupEdit( {
 				}
 			/>
 			{ showPlaceholder && (
-				<GroupPlaceHolder
-					clientId={ clientId }
-					name={ name }
-					onSelect={ selectVariation }
-				/>
+				<View { ...innerBlocksProps }>
+					{ innerBlocksProps.children }
+					<GroupPlaceHolder
+						clientId={ clientId }
+						name={ name }
+						onSelect={ selectVariation }
+					/>
+				</View>
 			) }
 			{ layoutSupportEnabled && ! showPlaceholder && (
 				<TagName { ...innerBlocksProps } />

package/src/group/placeholder.js

@@ -47,6 +47,17 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 				<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>
 		),
+		'group-grid': (
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				width="44"
+				height="32"
+				viewBox="0 0 44 32"
+			>
+				<Path d="m20.30137,-0.00025l-18.9728,0c-0.86524,0.07234 -1.41711,0.79149 -1.41711,1.89149l0,12.64468c0,0.6 0.73401,0.96383 1.0304,0.96383l19.67469,0.03617c0.29639,0 1.0304,-0.4 1.0304,-1l-0.03576,-12.7532c0,-1.1 -0.76644,-1.78297 -1.30983,-1.78297zm0.52975,16.60851l-19.99654,-0.03617c-0.29639,0 -0.92312,0.36383 -0.92312,0.96383l-0.03576,12.68085c0,1.1 0.8022,1.81915 1.34559,1.81915l19.00857,0c0.54339,0 1.45287,-0.71915 1.45287,-1.81915l0,-12.53617c0,-0.6 -0.5552,-1.07234 -0.8516,-1.07234z" />
+				<Path d="m42.73056,-0.03617l-18.59217,0c-0.84788,0.07234 -1.38868,0.79149 -1.38868,1.89149l0,12.64468c0,0.6 0.71928,0.96383 1.00973,0.96383l19.27997,0.03617c0.29045,0 1.00973,-0.4 1.00973,-1l-0.03504,-12.7532c0,-1.1 -0.75106,-1.78297 -1.28355,-1.78297zm0.51912,16.60851l-19.59537,-0.03617c-0.29045,0 -0.9046,0.36383 -0.9046,0.96383l-0.03504,12.68085c0,1.1 0.78611,1.81915 1.31859,1.81915l18.62721,0c0.53249,0 1.42372,-0.71915 1.42372,-1.81915l0,-12.53617c0,-0.6 -0.54407,-1.07234 -0.83451,-1.07234z" />
+			</SVG>
+		),
 	};
 	return icons?.[ name ];
 };
@@ -85,7 +96,8 @@ export function useShouldShowPlaceHolder( {
 			! fontSize &&
 			! textColor &&
 			! style &&
-			usedLayoutType !== 'flex'
+			usedLayoutType !== 'flex' &&
+			usedLayoutType !== 'grid'
 	);
 
 	useEffect( () => {

package/src/group/variations.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { group, row, stack } from '@wordpress/icons';
+import { group, row, stack, grid } from '@wordpress/icons';
 
 const variations = [
 	{
@@ -44,4 +44,17 @@ const variations = [
 	},
 ];
 
+if ( window?.__experimentalEnableGroupGridVariation ) {
+	variations.push( {
+		name: 'group-grid',
+		title: __( 'Grid' ),
+		description: __( 'Arrange blocks in a grid.' ),
+		attributes: { layout: { type: 'grid' } },
+		scope: [ 'block', 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			blockAttributes.layout?.type === 'grid',
+		icon: grid,
+	} );
+}
+
 export default variations;

package/src/home-link/index.php

@@ -98,12 +98,12 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 		$colors['css_classes'],
 		$font_sizes['css_classes']
 	);
+	$classes[]       = 'wp-block-navigation-item';
 	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
-	$css_classes     = trim( implode( ' ', $classes ) ) . ' wp-block-navigation-item';
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => $css_classes,
+			'class' => implode( ' ', $classes ),
 			'style' => $style_attribute,
 		)
 	);

package/src/image/block.json

@@ -85,7 +85,7 @@
 	"supports": {
 		"anchor": true,
 		"color": {
-			"__experimentalDuotone": "img, .components-placeholder",
+			"__experimentalDuotone": true,
 			"text": false,
 			"background": false
 		},
@@ -93,7 +93,6 @@
 			"color": true,
 			"radius": true,
 			"width": true,
-			"__experimentalSelector": "img, .wp-block-image__crop-area",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,
@@ -102,6 +101,12 @@
 			}
 		}
 	},
+	"selectors": {
+		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area",
+		"filter": {
+			"duotone": "img, .components-placeholder"
+		}
+	},
 	"styles": [
 		{
 			"name": "default",

package/src/image/edit.js

@@ -211,7 +211,7 @@ export function ImageEdit( {
 					: 'full',
 			};
 		} else {
-			// Keep the same url when selecting the same file, so "Image Size"
+			// Keep the same url when selecting the same file, so "Resolution"
 			// option is not changed.
 			additionalAttributes = { url };
 		}

package/src/image/edit.native.js

@@ -578,7 +578,7 @@ export class ImageEdit extends Component {
 				footerNote={
 					<>
 						{ __(
-							'Describe the purpose of the image. Leave empty if the image is purely decorative.'
+							'Describe the purpose of the image. Leave empty if decorative.'
 						) }{ ' ' }
 						<FooterMessageLink
 							href={