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

package/src/separator/test/{edit.jsx → edit.jsdom.test.jsx}

@@ -1,10 +1,11 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import { useBlockProps } from '@wordpress/block-editor';
 import SeparatorEdit from '../edit';
 
-jest.mock( '@wordpress/block-editor', () => ( {
-	...jest.requireActual( '@wordpress/block-editor' ),
-	useBlockProps: jest.fn(),
+vi.mock( import( '@wordpress/block-editor' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useBlockProps: vi.fn(),
 } ) );
 
 const defaultAttributes = {
@@ -16,7 +17,7 @@ const defaultAttributes = {
 };
 const defaultProps = {
 	attributes: defaultAttributes,
-	setAttributes: jest.fn(),
+	setAttributes: vi.fn(),
 };
 
 describe( 'Separator block edit method', () => {

package/src/site-logo/index.php

@@ -139,7 +139,7 @@ add_filter( 'theme_mod_custom_logo', '_override_custom_logo_theme_mod' );
  *
  * @since 5.8.0
  *
- * @param  mixed $value Attachment ID of the custom logo or an empty value.
+ * @param mixed $value Attachment ID of the custom logo or an empty value.
  * @return mixed
  */
 function _sync_custom_logo_to_site_logo( $value ) {

package/src/site-tagline/edit.jsx

@@ -1,5 +1,5 @@
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore, useEntityProp } from '@wordpress/core-data';
 import {
 	useBlockProps,
 	BlockControls,
@@ -15,33 +15,24 @@ export default function SiteTaglineEdit( props ) {
 
 	const { attributes, setAttributes, insertBlocksAfter } = props;
 	const { level, levelOptions } = attributes;
-	const { canUserEdit, tagline } = useSelect( ( select ) => {
-		const { canUser, getEntityRecord, getEditedEntityRecord } =
-			select( coreStore );
-		const canEdit = canUser( 'update', {
-			kind: 'root',
-			name: 'site',
-		} );
-		const settings = canEdit ? getEditedEntityRecord( 'root', 'site' ) : {};
-		const readOnlySettings = getEntityRecord( 'root', '__unstableBase' );
-
-		return {
-			canUserEdit: canEdit,
-			tagline: canEdit
-				? settings?.description
-				: readOnlySettings?.description,
-		};
-	}, [] );
+	const canUserEdit = useSelect(
+		( select ) =>
+			select( coreStore ).canUser( 'update', {
+				kind: 'root',
+				name: 'site',
+			} ),
+		[]
+	);
+	// Users who cannot edit the site settings cannot read them either, so the
+	// tagline comes from the base entity instead.
+	const [ tagline, setTagline ] = useEntityProp(
+		'root',
+		canUserEdit ? 'site' : '__unstableBase',
+		'description',
+		undefined
+	);
 
 	const TagName = level === 0 ? 'p' : `h${ level }`;
-	const { editEntityRecord } = useDispatch( coreStore );
-
-	function setTagline( newTagline ) {
-		editEntityRecord( 'root', 'site', undefined, {
-			description: newTagline,
-		} );
-	}
-
 	const blockProps = useBlockProps( {
 		className:
 			! canUserEdit && ! tagline && 'wp-block-site-tagline__placeholder',

package/src/site-title/edit.jsx

@@ -1,5 +1,5 @@
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore, useEntityProp } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import {
 	RichText,
@@ -22,38 +22,31 @@ export default function SiteTitleEdit( props ) {
 	useDeprecatedTextAlign( props );
 
 	const { attributes, setAttributes } = props;
-
 	const { level, levelOptions, isLink, linkTarget } = attributes;
-	const { canUserEdit, title } = useSelect( ( select ) => {
-		const { canUser, getEntityRecord, getEditedEntityRecord } =
-			select( coreStore );
-		const canEdit = canUser( 'update', {
-			kind: 'root',
-			name: 'site',
-		} );
-		const settings = canEdit ? getEditedEntityRecord( 'root', 'site' ) : {};
-		const readOnlySettings = getEntityRecord( 'root', '__unstableBase' );
-
-		return {
-			canUserEdit: canEdit,
-			title: canEdit ? settings?.title : readOnlySettings?.name,
-		};
-	}, [] );
-	const { editEntityRecord } = useDispatch( coreStore );
+	const canUserEdit = useSelect(
+		( select ) =>
+			select( coreStore ).canUser( 'update', {
+				kind: 'root',
+				name: 'site',
+			} ),
+		[]
+	);
+	// Users who cannot edit the site settings cannot read them either, so the
+	// title comes from the base entity instead.
+	const [ title, setSiteTitle ] = useEntityProp(
+		'root',
+		canUserEdit ? 'site' : '__unstableBase',
+		canUserEdit ? 'title' : 'name',
+		undefined
+	);
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const blockEditingMode = useBlockEditingMode();
-
-	function setTitle( newTitle ) {
-		editEntityRecord( 'root', 'site', undefined, {
-			title: newTitle.trim(),
-		} );
-	}
-
 	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const blockProps = useBlockProps( {
 		className:
 			! canUserEdit && ! title && 'wp-block-site-title__placeholder',
 	} );
+
 	const siteTitleContent = canUserEdit ? (
 		<TagName { ...blockProps }>
 			<RichText
@@ -62,7 +55,7 @@ export default function SiteTitleEdit( props ) {
 				aria-label={ __( 'Site title text' ) }
 				placeholder={ __( 'Write site title…' ) }
 				value={ title }
-				onChange={ setTitle }
+				onChange={ ( newTitle ) => setSiteTitle( newTitle.trim() ) }
 				allowedFormats={ [] }
 				disableLineBreaks
 			/>

package/src/social-link/index.js

@@ -1,13 +1,8 @@
-import { __ } from '@wordpress/i18n';
 import { share 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 variations from './variations';
-import { unlock } from '../lock-unlock';
-
-const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -19,31 +14,4 @@ export const settings = {
 	variations,
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'link',
-			label: __( 'Link' ),
-			type: 'url',
-			Edit: 'link', // TODO: replace with custom component
-			getValue: ( { item } ) => ( {
-				url: item.url,
-				rel: item.rel,
-			} ),
-			setValue: ( { value } ) => ( {
-				url: value.url,
-				rel: value.rel,
-			} ),
-		},
-		{
-			id: 'label',
-			label: __( 'Label' ),
-			type: 'text',
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'link', 'label' ],
-	};
-}
-
 export const init = () => initBlock( { name, metadata, settings } );

package/src/social-link/index.php

@@ -349,7 +349,6 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 	 * @since 6.9.0
 	 *
 	 * @param array $services_data The list of services. Each item is an array containing a 'name' and 'icon' key.
-	 * @return array The list of social services.
 	 */
 	$services_data = apply_filters( 'block_core_social_link_get_services', $services_data );
 

package/src/style.scss

@@ -24,7 +24,6 @@
 @use "./details/style.scss" as *;
 @use "./embed/style.scss" as *;
 @use "./file/style.scss" as *;
-@use "./form-input/style.scss" as *;
 @use "./gallery/style.scss" as *;
 @use "./group/style.scss" as *;
 @use "./heading/style.scss" as *;

package/src/table/editor.scss

@@ -15,6 +15,7 @@
 
 		td,
 		th {
+			// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Pending review of overflow-wrap alternative.
 			word-break: break-word;
 		}
 	}

package/src/table/style.scss

@@ -36,6 +36,7 @@
 
 		td,
 		th {
+			// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Pending review of overflow-wrap alternative.
 			word-break: break-word;
 		}
 	}
@@ -53,6 +54,7 @@
 
 		td,
 		th {
+			// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Pending review of overflow-wrap alternative.
 			word-break: break-word;
 		}
 	}

package/src/table/test/state.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import deepFreeze from 'deep-freeze';
 import {
 	createTable,

package/src/table/test/utils.js

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

package/src/table-of-contents/index.php

@@ -14,7 +14,7 @@ const BLOCK_CORE_TABLE_OF_CONTENTS_DEFAULT_HEADING_LEVEL = 2;
  * Adds an aria-label to the table of contents block content.
  *
  * @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.
  */
@@ -364,8 +364,8 @@ function block_core_table_of_contents_build_list_items( $nested_headings, $list_
  * Renders the table of contents block from current post headings.
  *
  * @param array         $attributes Attributes of the block being rendered.
- * @param string        $content Content of the block being rendered.
- * @param WP_Block|null $block Block instance.
+ * @param string        $content    Content of the block being rendered.
+ * @param WP_Block|null $block      Block instance.
  *
  * @return string The content of the block being rendered.
  */

package/src/template-part/theme.scss

@@ -3,7 +3,7 @@
 // Same as the group block styles.
 :root :where(.wp-block-template-part.has-background) {
 	// Matches paragraph Block padding
-	padding: $block-bg-padding--v $block-bg-padding--h;
+	padding: $block-bg-padding;
 	margin-top: 0;
 	margin-bottom: 0;
 }

package/src/utils/test/search-patterns.js

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

package/src/utils/test/{style-state.js → style-state.jsdom.test.js}

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

package/src/utils/test/{waveform-player-dependency.js → waveform-player-dependency.jsdom.test.js}

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const FIXTURE_ATTRIBUTE = 'data-player-fixture';
 
@@ -14,14 +14,8 @@ function createDeclarativePlayer( attributes = {} ) {
 	return element;
 }
 
-function loadWaveformPlayer() {
-	let WaveformPlayer;
-
-	jest.isolateModules( () => {
-		WaveformPlayer = require( '@arraypress/waveform-player' ).default;
-	} );
-
-	return WaveformPlayer;
+async function loadWaveformPlayer() {
+	return ( await import( '@arraypress/waveform-player' ) ).default;
 }
 
 describe( 'Waveform Player dependency', () => {
@@ -30,7 +24,7 @@ describe( 'Waveform Player dependency', () => {
 	let jsdomStubs;
 
 	beforeEach( () => {
-		jest.useFakeTimers();
+		vi.useFakeTimers();
 		originalReadyState = Object.getOwnPropertyDescriptor(
 			document,
 			'readyState'
@@ -41,13 +35,13 @@ describe( 'Waveform Player dependency', () => {
 		} );
 
 		jsdomStubs = [
-			jest
+			vi
 				.spyOn( window.HTMLCanvasElement.prototype, 'getContext' )
 				.mockReturnValue( null ),
-			jest
+			vi
 				.spyOn( window.HTMLMediaElement.prototype, 'pause' )
 				.mockImplementation( () => {} ),
-			jest
+			vi
 				.spyOn( window.HTMLMediaElement.prototype, 'load' )
 				.mockImplementation( () => {} ),
 		];
@@ -56,8 +50,8 @@ describe( 'Waveform Player dependency', () => {
 	afterEach( () => {
 		WaveformPlayer?.destroyAll();
 		jsdomStubs.forEach( ( stub ) => stub.mockRestore() );
-		jest.useRealTimers();
-		jest.resetModules();
+		vi.useRealTimers();
+		vi.resetModules();
 		document.body.innerHTML = '';
 		delete window.WaveformPlayer;
 
@@ -68,14 +62,14 @@ describe( 'Waveform Player dependency', () => {
 		}
 	} );
 
-	it( 'uses the default control icons when declarative icon values are unsupported', () => {
+	it( 'uses the default control icons when declarative icon values are unsupported', async () => {
 		const iconValue = `<span ${ FIXTURE_ATTRIBUTE }></span>`;
 		const element = createDeclarativePlayer( {
 			'data-play-icon': iconValue,
 			'data-pause-icon': iconValue,
 		} );
 
-		WaveformPlayer = loadWaveformPlayer();
+		WaveformPlayer = await loadWaveformPlayer();
 		WaveformPlayer.init();
 
 		expect(
@@ -89,7 +83,7 @@ describe( 'Waveform Player dependency', () => {
 		).not.toBeNull();
 	} );
 
-	it( 'supports custom control icons passed to the constructor', () => {
+	it( 'supports custom control icons passed to the constructor', async () => {
 		const element = document.createElement( 'div' );
 		const icon = document.createElementNS(
 			'http://www.w3.org/2000/svg',
@@ -98,7 +92,7 @@ describe( 'Waveform Player dependency', () => {
 		icon.setAttribute( FIXTURE_ATTRIBUTE, 'constructor' );
 		document.body.appendChild( element );
 
-		WaveformPlayer = loadWaveformPlayer();
+		WaveformPlayer = await loadWaveformPlayer();
 		new WaveformPlayer( element, {
 			playIcon: icon.outerHTML,
 		} );
@@ -108,10 +102,10 @@ describe( 'Waveform Player dependency', () => {
 		).not.toBeNull();
 	} );
 
-	it( 'initializes declarative players only after an explicit request', () => {
+	it( 'initializes declarative players only after an explicit request', async () => {
 		const element = createDeclarativePlayer();
 
-		WaveformPlayer = loadWaveformPlayer();
+		WaveformPlayer = await loadWaveformPlayer();
 
 		expect( element ).not.toHaveAttribute( 'data-waveform-initialized' );
 		expect( element ).toBeEmptyDOMElement();

package/src/verse/index.js

@@ -1,15 +1,11 @@
 import { __ } from '@wordpress/i18n';
 import { verse 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;
 
@@ -38,18 +34,4 @@ export const settings = {
 	save,
 };
 
-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 = () => initBlock( { name, metadata, settings } );

package/src/verse/style.scss

@@ -5,6 +5,7 @@ pre.wp-block-verse {
 
 	// Prevent text overflow off-screen when the previous block has float.
 	min-width: 1em;
+	// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Pending review of overflow-wrap alternative.
 	word-break: break-word;
 }
 

package/src/video/index.js

@@ -1,6 +1,5 @@
 import { __ } from '@wordpress/i18n';
 import { video 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;
 
@@ -32,40 +28,4 @@ export const settings = {
 	save,
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'video',
-			label: __( 'Video' ),
-			type: 'media',
-			Edit: {
-				control: 'media', // TODO: replace with custom component
-				allowedTypes: [ 'video' ],
-				multiple: false,
-			},
-			getValue: ( { item } ) => ( {
-				id: item.id,
-				url: item.src,
-				caption: item.caption,
-				poster: item.poster,
-			} ),
-			setValue: ( { value } ) => ( {
-				id: value.id,
-				src: value.url,
-				caption: value.caption,
-				poster: value.poster,
-			} ),
-		},
-		{
-			id: 'caption',
-			label: __( 'Caption' ),
-			type: 'text',
-			Edit: 'rich-text', // TODO: replace with custom component
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'video', 'caption' ],
-	};
-}
-
 export const init = () => initBlock( { name, metadata, settings } );

package/src/video/test/variations.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import variations, { isGifVariation } from '../variations';
 
 const GIF_ATTRIBUTES = {

package/src/video/tracks-editor.jsx

@@ -14,8 +14,8 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { Badge } from '@wordpress/ui';
 import {
 	MediaUpload,
 	MediaUploadCheck,
@@ -25,9 +25,6 @@ import { upload, media } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { getFilename } from '@wordpress/url';
-import { unlock } from '../lock-unlock';
-
-const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 const ALLOWED_TYPES = [ 'text/vtt' ];
 
@@ -58,7 +55,9 @@ function TrackList( { tracks, onEditPress } ) {
 			>
 				<span>{ track.label }</span>
 				<HStack justify="flex-end">
-					{ track.default && <WCBadge>{ __( 'Default' ) }</WCBadge> }
+					{ track.default && (
+						<Badge intent="none">{ __( 'Default' ) }</Badge>
+					) }
 					<Button
 						__next40pxDefaultSize
 						variant="tertiary"

package/build/form/block.json

@@ -1,65 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 3,
-	"__experimental": true,
-	"name": "core/form",
-	"title": "Form",
-	"category": "widgets",
-	"allowedBlocks": [
-		"core/paragraph",
-		"core/heading",
-		"core/form-input",
-		"core/form-submit-button",
-		"core/form-submission-notification",
-		"core/group",
-		"core/columns"
-	],
-	"description": "A form.",
-	"keywords": [ "container", "wrapper", "row", "section" ],
-	"textdomain": "default",
-	"attributes": {
-		"submissionMethod": {
-			"type": "string",
-			"default": "email"
-		},
-		"method": {
-			"type": "string",
-			"default": "post"
-		},
-		"action": {
-			"type": "string"
-		},
-		"email": {
-			"type": "string"
-		}
-	},
-	"supports": {
-		"anchor": true,
-		"color": {
-			"gradients": true,
-			"link": true,
-			"__experimentalDefaultControls": {
-				"background": true,
-				"text": true,
-				"link": true
-			}
-		},
-		"spacing": {
-			"margin": true,
-			"padding": true
-		},
-		"typography": {
-			"fontSize": true,
-			"lineHeight": true,
-			"__experimentalFontFamily": true,
-			"__experimentalTextDecoration": true,
-			"__experimentalFontStyle": true,
-			"__experimentalFontWeight": true,
-			"__experimentalLetterSpacing": true,
-			"__experimentalTextTransform": true,
-			"__experimentalDefaultControls": {
-				"fontSize": true
-			}
-		}
-	}
-}