@wordpress/block-library 10.5.2-next.v.202608281122.0 → 11.0.0

package/src/comment-template/index.php

@@ -12,8 +12,8 @@
  *
  * @global int $comment_depth
  *
- * @param WP_Comment[] $comments        The array of comments.
- * @param WP_Block     $block           Block instance.
+ * @param WP_Comment[] $comments The array of comments.
+ * @param WP_Block     $block    Block instance.
  * @return string
  */
 function block_core_comment_template_render_comments( $comments, $block ) {

package/src/comment-template/test/index.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { convertToTree } from '../util';
 
 describe( 'Convert to tree', () => {

package/src/common.scss

@@ -91,6 +91,7 @@
 	padding: 0;
 	position: absolute;
 	width: 1px;
+	// stylelint-disable-next-line property-no-deprecated -- Pending review of overflow-wrap alternative.
 	word-wrap: normal !important;
 	word-break: normal !important;
 }
@@ -129,87 +130,87 @@ html :where(.has-border-color) {
 // don't accidentally match. Only real declarations at the start of
 // the style string or after a semicolon should trigger these rules.
 html
-:where(
-	[style^="border-color"],
-	[style*=";border-color"],
-	[style*="; border-color"]
-) {
+	:where(
+		[style^="border-color"],
+		[style*=";border-color"],
+		[style*="; border-color"]
+	) {
 	border-style: solid;
 }
 html
-:where(
-	[style^="border-top-color"],
-	[style*=";border-top-color"],
-	[style*="; border-top-color"]
-) {
+	:where(
+		[style^="border-top-color"],
+		[style*=";border-top-color"],
+		[style*="; border-top-color"]
+	) {
 	border-top-style: solid;
 }
 html
-:where(
-	[style^="border-right-color"],
-	[style*=";border-right-color"],
-	[style*="; border-right-color"]
-) {
+	:where(
+		[style^="border-right-color"],
+		[style*=";border-right-color"],
+		[style*="; border-right-color"]
+	) {
 	/*rtl:ignore*/
 	border-right-style: solid;
 }
 html
-:where(
-	[style^="border-bottom-color"],
-	[style*=";border-bottom-color"],
-	[style*="; border-bottom-color"]
-) {
+	:where(
+		[style^="border-bottom-color"],
+		[style*=";border-bottom-color"],
+		[style*="; border-bottom-color"]
+	) {
 	border-bottom-style: solid;
 }
 html
-:where(
-	[style^="border-left-color"],
-	[style*=";border-left-color"],
-	[style*="; border-left-color"]
-) {
+	:where(
+		[style^="border-left-color"],
+		[style*=";border-left-color"],
+		[style*="; border-left-color"]
+	) {
 	/*rtl:ignore*/
 	border-left-style: solid;
 }
 
 html
-:where(
-	[style^="border-width"],
-	[style*=";border-width"],
-	[style*="; border-width"]
-) {
+	:where(
+		[style^="border-width"],
+		[style*=";border-width"],
+		[style*="; border-width"]
+	) {
 	border-style: solid;
 }
 html
-:where(
-	[style^="border-top-width"],
-	[style*=";border-top-width"],
-	[style*="; border-top-width"]
-) {
+	:where(
+		[style^="border-top-width"],
+		[style*=";border-top-width"],
+		[style*="; border-top-width"]
+	) {
 	border-top-style: solid;
 }
 html
-:where(
-	[style^="border-right-width"],
-	[style*=";border-right-width"],
-	[style*="; border-right-width"]
-) {
+	:where(
+		[style^="border-right-width"],
+		[style*=";border-right-width"],
+		[style*="; border-right-width"]
+	) {
 	/*rtl:ignore*/
 	border-right-style: solid;
 }
 html
-:where(
-	[style^="border-bottom-width"],
-	[style*=";border-bottom-width"],
-	[style*="; border-bottom-width"]
-) {
+	:where(
+		[style^="border-bottom-width"],
+		[style*=";border-bottom-width"],
+		[style*="; border-bottom-width"]
+	) {
 	border-bottom-style: solid;
 }
 html
-:where(
-	[style^="border-left-width"],
-	[style*=";border-left-width"],
-	[style*="; border-left-width"]
-) {
+	:where(
+		[style^="border-left-width"],
+		[style*=";border-left-width"],
+		[style*="; border-left-width"]
+	) {
 	/*rtl:ignore*/
 	border-left-style: solid;
 }

package/src/cover/README.md

@@ -59,6 +59,43 @@ function example_disable_cover_video_embeds( $args, $block_type ) {
 add_filter( 'register_block_type_args', 'example_disable_cover_video_embeds', 10, 2 );
 ```
 
+## Overlay color and opacity
+
+The Cover block's overlay controls are part of its color settings. The opacity slider sets how transparent the overlay color is, so it appears next to that color rather than on its own.
+
+Both controls only appear if the block has at least one color or gradient to pick from. A `theme.json` that leaves the block with none, like the one below, hides them:
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"color": {
+			"defaultPalette": false,
+			"defaultGradients": false,
+			"palette": [],
+			"gradients": []
+		}
+	}
+}
+```
+
+Turning on `color.custom` or `color.customGradient` will not bring them back. Those settings add the custom color picker, they do not give the block anything to pick from. To show the overlay controls again, give the block a color or gradient, either for every block or just the Cover block:
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"blocks": {
+			"core/cover": {
+				"color": {
+					"defaultGradients": true
+				}
+			}
+		}
+	}
+}
+```
+
 <!-- START TOKEN(Autogenerated block API docs) -->
 Add an image or video with a text overlay.
 

package/src/cover/index.js

@@ -1,6 +1,5 @@
 import { __ } from '@wordpress/i18n';
 import { cover as icon } from '@wordpress/icons';
-import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
@@ -8,9 +7,6 @@ import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
 import variations from './variations';
-import { unlock } from '../lock-unlock';
-
-const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -53,39 +49,4 @@ export const settings = {
 	variations,
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'background',
-			label: __( 'Background' ),
-			type: 'media',
-			Edit: {
-				control: 'media', // TODO: replace with custom component
-				// TODO - How to support custom gradient?
-				// Build it into Media, or use a custom control?
-				allowedTypes: [ 'image', 'video' ],
-				multiple: false,
-				useFeaturedImage: true,
-			},
-			getValue: ( { item } ) => ( {
-				id: item.id,
-				url: item.url,
-				alt: item.alt,
-				mediaType: item.backgroundType,
-				featuredImage: item.useFeaturedImage,
-			} ),
-			setValue: ( { value } ) => ( {
-				id: value.id,
-				url: value.url,
-				alt: value.alt,
-				mediaType: value.backgroundType,
-				useFeaturedImage: value.featuredImage,
-			} ),
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'background' ],
-	};
-}
-
 export const init = () => initBlock( { name, metadata, settings } );

package/src/cover/style.scss

@@ -342,9 +342,9 @@ section.wp-block-cover-image > h2,
 // the deprecated version). In the color background or gradient option we don't
 // need the z-index because the elements are in the expected order.
 body:not(.editor-styles-wrapper) .wp-block-cover:not(
-.wp-block-cover:has(
-	.wp-block-cover__background + .wp-block-cover__inner-container
-)
+	.wp-block-cover:has(
+		.wp-block-cover__background + .wp-block-cover__inner-container
+	)
 ) {
 	.wp-block-cover__video-background {
 		// Background media sits at the base of the stack.

package/src/cover/test/{edit.js → edit.jsdom.test.js}

@@ -1,9 +1,15 @@
+/* eslint-disable jest-dom/prefer-to-have-style -- This suite moves to Browser Mode in the next stacked PR. */
+import { describe, expect, test } from 'vitest';
 import { screen, fireEvent, act, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {
 	initializeEditor,
 	selectBlock,
 } from '@wordpress/integration-tests/helpers/integration-test-editor';
+globalThis.wpVitest.mockMatchMedia();
+globalThis.wpVitest.mockCSSSupports();
+globalThis.wpVitest.mockResizeObserver();
+globalThis.wpVitest.mockVisibleElements();
 
 const defaultSettings = {
 	__experimentalFeatures: {
@@ -130,9 +136,7 @@ describe( 'Cover block', () => {
 			const overlay = container.getElementsByClassName(
 				'wp-block-cover__background'
 			);
-			expect( overlay[ 0 ] ).toHaveStyle(
-				`background-color: ${ color }`
-			);
+			expect( overlay[ 0 ].style.backgroundColor ).toBe( color );
 		} );
 
 		test( 'can have the title edited', async () => {
@@ -158,15 +162,12 @@ describe( 'Cover block', () => {
 			await setup();
 			await createAndSelectBlock();
 
-			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveStyle(
-				'min-height: 100vh;'
-			);
+			const cover = screen.getByLabelText( 'Block: Cover' );
+			expect( cover.style.minHeight ).not.toBe( '100vh' );
 
 			await userEvent.click( screen.getByLabelText( 'Full height' ) );
 
-			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
-				'min-height: 100vh;'
-			);
+			expect( cover.style.minHeight ).toBe( '100vh' );
 		} );
 
 		test( 'content position button sets content position', async () => {
@@ -309,11 +310,10 @@ describe( 'Cover block', () => {
 			await userEvent.clear( await screen.findByLabelText( 'Left' ) );
 			await userEvent.type( screen.getByLabelText( 'Left' ), '100' );
 
-			expect(
-				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
-					'presentation'
-				)
-			).toHaveStyle( 'object-position: 100% 50%;' );
+			const image = within(
+				screen.getByLabelText( 'Block: Cover' )
+			).getByRole( 'presentation' );
+			expect( image.style.objectPosition ).toBe( '100% 50%' );
 		} );
 
 		test( 'sets alt attribute if text entered in alt text box', async () => {
@@ -426,9 +426,9 @@ describe( 'Cover block', () => {
 					'300'
 				);
 
-				expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
-					'min-height: 300px;'
-				);
+				expect(
+					screen.getByLabelText( 'Block: Cover' ).style.minHeight
+				).toBe( '300px' );
 			} );
 		} );
 	} );
@@ -475,3 +475,4 @@ describe( 'Cover block', () => {
 		} );
 	} );
 } );
+/* eslint-enable jest-dom/prefer-to-have-style */

package/src/cover/test/{transforms.js → transforms.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 import {
 	createBlock,
 	getBlockTypes,

package/src/details/index.js

@@ -1,14 +1,10 @@
 import { details as icon } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import transforms from './transforms';
-import { unlock } from '../lock-unlock';
-
-const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 export { metadata, name };
@@ -72,18 +68,4 @@ export const settings = {
 	transforms,
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'summary',
-			label: __( 'Summary' ),
-			type: 'text',
-			Edit: 'rich-text', // TODO: replace with custom component
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'summary' ],
-	};
-}
-
 export const init = () => initBlock( { name, metadata, settings } );

package/src/editor.scss

@@ -16,8 +16,6 @@
 @use "./details/editor.scss" as *;
 @use "./embed/editor.scss" as *;
 @use "./file/editor.scss" as *;
-@use "./form-input/editor.scss" as *;
-@use "./form-submission-notification/editor.scss" as *;
 @use "./freeform/editor.scss" as *;
 @use "./gallery/editor.scss" as *;
 @use "./group/editor.scss" as *;

package/src/embed/editor.scss

@@ -20,6 +20,7 @@
 
 	// Stops long URLs from breaking out of the no preview available screen
 	.components-placeholder__error {
+		// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Pending review of overflow-wrap alternative.
 		word-break: break-word;
 	}
 }

package/src/embed/test/{index.js → index.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { afterAll, beforeAll, describe, expect, it, test, vi } from 'vitest';
 import {
 	registerBlockType,
 	unregisterBlockType,
@@ -19,7 +20,10 @@ import metadata from '../block.json';
 
 const { name: DEFAULT_EMBED_BLOCK, attributes } = metadata;
 
-jest.mock( '@wordpress/data/src/components/use-select', () => () => ( {} ) );
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: () => ( {} ),
+} ) );
 
 describe( 'utils', () => {
 	beforeAll( () => {

package/src/file/index.js

@@ -1,6 +1,5 @@
-import { _x, __ } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
-import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
@@ -8,9 +7,6 @@ import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
 import variations from './variations';
-import { unlock } from '../lock-unlock';
-
-const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -31,42 +27,4 @@ export const settings = {
 	variations,
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'file',
-			label: __( 'File' ),
-			type: 'media',
-			Edit: {
-				control: 'media', // TODO: replace with custom component
-				allowedTypes: [],
-				multiple: false,
-			},
-			getValue: ( { item } ) => ( {
-				id: item.id,
-				url: item.href,
-			} ),
-			setValue: ( { value } ) => ( {
-				id: value.id,
-				href: value.url,
-			} ),
-		},
-		{
-			id: 'fileName',
-			label: __( 'Filename' ),
-			type: 'text',
-			Edit: 'rich-text', // TODO: replace with custom component
-		},
-		{
-			id: 'downloadButtonText',
-			label: __( 'Button Text' ),
-			type: 'text',
-			Edit: 'rich-text', // TODO: replace with custom component
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'file', 'fileName', 'downloadButtonText' ],
-	};
-}
-
 export const init = () => initBlock( { name, metadata, settings } );

package/src/footnotes/format.jsx

@@ -114,7 +114,11 @@ export const format = {
 					const object = value.replacements[ value.start ];
 					id = object?.attributes?.[ 'data-fn' ];
 				} else {
-					id = createId();
+					// The ID doubles as the anchor target of the footnote link.
+					// A CSS identifier cannot start with a digit, so a bare UUID
+					// (which often does) breaks `querySelector( '#' + id )` and
+					// `#id` style rules on the front end. Prefix it with a letter.
+					id = `fn-${ createId() }`;
 					const newValue = insertObject(
 						value,
 						{

package/src/gallery/dynamic-gallery.jsx

@@ -1,5 +1,5 @@
 import { __, sprintf } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import {
 	Button,
 	Notice,
@@ -19,6 +19,7 @@ import {
 	__experimentalUseBlockPreview as useBlockPreview,
 } from '@wordpress/block-editor';
 import { sharedIcon } from './shared-icon';
+import { isGalleryFlexLayout } from './shared';
 import { Caption } from '../utils/caption';
 import { DEFAULT_ORDERBY, DEFAULT_ORDER, MAX_IMAGES } from './dynamic-source';
 
@@ -237,14 +238,17 @@ export function GallerySourcePanel( {
 					 * its confirm dialog below) is temporary. Once more sources
 					 * exist it becomes a "Choose source" select whose options read
 					 * from each source descriptor's `title`, with help text
-					 * carrying the per-source explanation this string does today.
+					 * carrying the per-source explanation these strings do today.
 					 */ }
+					<p className="wp-block-gallery__source-description">
+						{ __( 'Images added to the gallery.' ) }
+					</p>
 					<Button
 						__next40pxDefaultSize
 						variant="secondary"
 						onClick={ requestEnableDynamicMode }
 					>
-						{ __( 'Use images attached to the post' ) }
+						{ __( 'Use attached images' ) }
 					</Button>
 				</div>
 			</PanelBody>
@@ -282,12 +286,21 @@ export function GallerySourcePanel( {
  * stays editable. This relies on the gallery's image styles using descendant
  * (not direct-child) selectors, which the box-less wrapper leaves intact.
  *
+ * The gallery's layout is passed through so the previewed images see the same
+ * parent layout that real inner blocks would (`useBlockPreview` provides it to
+ * their layout context). Without it they resolve to the default flow layout and
+ * behave as if they weren't in a gallery — most visibly, an image inside a
+ * cropped gallery would keep its baseline `height: auto` and defeat the
+ * gallery's cropping CSS.
+ *
  * @param {Object}   props
  * @param {Object[]} props.imageBlocks Non-persisted `core/image` blocks to preview.
+ * @param {Object}   props.layout      The gallery's layout, for the preview's layout context.
  */
-function GalleryImagesPreview( { imageBlocks } ) {
+function GalleryImagesPreview( { imageBlocks, layout } ) {
 	const { children, ref, className } = useBlockPreview( {
 		blocks: imageBlocks,
+		layout,
 	} );
 	return (
 		<div
@@ -353,6 +366,19 @@ export function GalleryDynamicView( {
 
 	const [ isConfirmingDetach, setIsConfirmingDetach ] = useState( false );
 
+	// The layout the previewed images sit in. Normalized the same way the
+	// gallery's own classes are (`isGalleryFlexLayout`), so a layout that the
+	// wrapper treats as flex — including a missing or typeless one — is reported
+	// as flex to the images rather than resolving to the default flow layout.
+	// Memoized because it becomes the preview's layout context value.
+	const previewLayout = useMemo(
+		() =>
+			isGalleryFlexLayout( attributes.layout )
+				? { ...attributes.layout, type: 'flex' }
+				: attributes.layout,
+		[ attributes.layout ]
+	);
+
 	// Empty-state copy for the preview. Framed as forward-looking ("… will appear
 	// here") rather than as an error, since the same empty result covers both a
 	// post with no matching images and a template with no post in context yet —
@@ -396,6 +422,7 @@ export function GalleryDynamicView( {
 					<BlockContextProvider value={ galleryContext }>
 						<GalleryImagesPreview
 							imageBlocks={ dynamicImageBlocks }
+							layout={ previewLayout }
 						/>
 					</BlockContextProvider>
 				) : (

package/src/gallery/test/dynamic-source.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { getSourceQuery } from '../dynamic-source';
 
 describe( 'getSourceQuery', () => {

package/src/gallery/test/{edit.js → edit.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, test } from 'vitest';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
@@ -14,6 +15,9 @@ import {
 import { registerCoreBlocks } from '@wordpress/block-library';
 import { unlock } from '../../lock-unlock';
 
+globalThis.wpVitest.mockMatchMedia();
+globalThis.wpVitest.mockResizeObserver();
+
 const IMAGE_ATTRIBUTES = {
 	id: 1,
 	url: 'https://example.com/image.jpg',

package/src/gallery/test/responsive-styles.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getGalleryResponsiveFlexCSS,
 	getUpdatedGalleryStyle,

package/src/gallery/test/shared.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { isGalleryFlexLayout } from '../shared';
 
 describe( 'isGalleryFlexLayout', () => {

package/src/gallery/test/{transforms.js → transforms.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 import {
 	createBlock,
 	getBlockTypes,

package/src/gallery/test/{use-get-new-images.jsx → use-get-new-images.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import useGetNewImages from '../use-get-new-images';
 

package/src/gallery/test/variations.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import variations from '../variations';
 
 const getVariation = ( name ) =>

package/src/group/test/{placeholder.jsx → placeholder.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { describe, expect, test } from 'vitest';
 import { render } from '@testing-library/react';
 import { useShouldShowPlaceHolder } from '../placeholder';
 

package/src/group/theme.scss

@@ -3,5 +3,5 @@
 // Add low specificity default padding to groups with backgrounds.
 :where(.wp-block-group.has-background) {
 	// Matches paragraph block padding.
-	padding: $block-bg-padding--v $block-bg-padding--h;
+	padding: $block-bg-padding;
 }