@wordpress/block-library 10.6.1-next.v.202609031004.0 → 11.0.0

package/src/audio/index.js

@@ -1,15 +1,10 @@
-import { __ } from '@wordpress/i18n';
 import { audio 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';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
-import { unlock } from '../lock-unlock';
-
-const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -29,36 +24,4 @@ export const settings = {
 	save,
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'audio',
-			label: __( 'Audio' ),
-			type: 'media',
-			Edit: {
-				control: 'media', // TODO: replace with custom component
-				allowedTypes: [ 'audio' ],
-				multiple: false,
-			},
-			getValue: ( { item } ) => ( {
-				id: item.id,
-				url: item.src,
-			} ),
-			setValue: ( { value } ) => ( {
-				id: value.id,
-				src: value.url,
-			} ),
-		},
-		{
-			id: 'caption',
-			label: __( 'Caption' ),
-			type: 'text',
-			Edit: 'rich-text', // TODO: replace with custom component
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'audio', 'caption' ],
-	};
-}
-
 export const init = () => initBlock( { name, metadata, settings } );

package/src/breadcrumbs/index.php

@@ -263,8 +263,8 @@ function block_core_breadcrumbs_create_page_number_item( $query_var = 'paged' )
  *
  * @since 7.0.0
  *
- * @param string $text       The text content.
- * @param bool   $is_paged   Whether we're on a paginated view.
+ * @param string $text     The text content.
+ * @param bool   $is_paged Whether we're on a paginated view.
  *
  * @return array The breadcrumb item data.
  */
@@ -298,7 +298,7 @@ function block_core_breadcrumbs_get_post_title( $post_id_or_object ) {
  *
  * @since 7.0.0
  *
- * @param int    $post_id   The post ID.
+ * @param int $post_id The post ID.
  *
  * @return array Array of breadcrumb item data.
  */
@@ -524,7 +524,7 @@ function block_core_breadcrumbs_get_terms_breadcrumbs( $post_id, $post_type ) {
 	 *
 	 * @since 7.0.0
 	 *
-	 * @param array  $settings {
+	 * @param array  $settings  {
 	 *     Array of breadcrumb settings. Default empty array.
 	 *
 	 *     @type string $taxonomy Optional. Taxonomy slug to use for breadcrumbs.

package/src/button/index.js

@@ -1,14 +1,10 @@
 import { __ } from '@wordpress/i18n';
 import { button 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';
 import metadata from './block.json';
 import save from './save';
-import { unlock } from '../lock-unlock';
-
-const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -47,34 +43,4 @@ export const settings = {
 	},
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'text',
-			label: __( 'Content' ),
-			type: 'text',
-			Edit: 'rich-text', // TODO: replace with custom component
-		},
-		{
-			id: 'link',
-			label: __( 'Link' ),
-			type: 'url',
-			Edit: 'link', // TODO: replace with custom component
-			getValue: ( { item } ) => ( {
-				url: item.url,
-				rel: item.rel,
-				linkTarget: item.linkTarget,
-			} ),
-			setValue: ( { value } ) => ( {
-				url: value.url,
-				rel: value.rel,
-				linkTarget: value.linkTarget,
-			} ),
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'text', 'link' ],
-	};
-}
-
 export const init = () => initBlock( { name, metadata, settings } );

package/src/button/test/get-experimental-label.jsdom.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { settings } from '..';
 
 describe( 'Button block __experimentalLabel', () => {

package/src/code/index.js

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

package/src/columns/test/transforms.jsdom.test.js

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

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/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/test/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.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/test/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

@@ -238,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>

package/src/gallery/test/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/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.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/group/test/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/heading/index.js

@@ -1,10 +1,6 @@
 import { heading as icon } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	privateApis as blocksPrivateApis,
-	getBlockType,
-	unregisterBlockVariation,
-} from '@wordpress/blocks';
+import { getBlockType, unregisterBlockVariation } from '@wordpress/blocks';
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
@@ -12,9 +8,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;
 
@@ -78,20 +71,6 @@ export const settings = {
 	variations,
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'content',
-			label: __( 'Content' ),
-			type: 'text',
-			Edit: 'rich-text', // TODO: replace with custom component
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'content' ],
-	};
-}
-
 export const init = () => {
 	const block = initBlock( { name, metadata, settings } );
 

package/src/heading/index.php

@@ -17,7 +17,7 @@
  * @since 6.2.0
  *
  * @param array  $attributes Attributes of the block being rendered.
- * @param string $content Content of the block being rendered.
+ * @param string $content    Content of the block being rendered.
  *
  * @return string The content of the block being rendered.
  */

package/src/home-link/index.php

@@ -11,7 +11,7 @@
  *
  * @since 6.0.0
  *
- * @param  array $context home link block context.
+ * @param array $context home link block context.
  * @return array Colors CSS classes and inline styles.
  */
 function block_core_home_link_build_css_colors( $context ) {
@@ -64,7 +64,7 @@ function block_core_home_link_build_css_colors( $context ) {
  *
  * @since 6.0.0
  *
- * @param  array $context    Home link block context.
+ * @param array $context Home link block context.
  * @return string The li wrapper attributes.
  */
 function block_core_home_link_build_li_wrapper_attributes( $context ) {

package/src/html/test/index.jsdom.test.js

@@ -1,3 +1,12 @@
+import {
+	afterAll,
+	afterEach,
+	beforeAll,
+	beforeEach,
+	describe,
+	expect,
+	it,
+} from 'vitest';
 import {
 	createBlock,
 	registerBlockType,

package/src/html/test/utils.jsdom.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { parseContent, serializeContent } from '../utils';
 
 describe( 'core/html', () => {

package/src/image/image.jsx

@@ -893,9 +893,6 @@ export default function Image( {
 		</>
 	);
 
-	const hasDataFormBlockFields =
-		window?.__experimentalContentOnlyInspectorFields;
-
 	const controls = (
 		<>
 			{ showBlockControls && (
@@ -964,7 +961,7 @@ export default function Image( {
 					/>
 				</BlockControls>
 			) }
-			{ ! hasDataFormBlockFields && isSingleSelected && (
+			{ isSingleSelected && (
 				<InspectorControls group="content">
 					<ToolsPanel
 						label={ __( 'Media' ) }