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

package/src/navigation-link/index.php

@@ -14,9 +14,9 @@ require_once __DIR__ . '/navigation-link/shared/render-submenu-icon.php';
  *
  * @since 5.9.0
  *
- * @param  array $context     Navigation block context.
- * @param  array $attributes  Block attributes.
- * @param  bool  $is_sub_menu Whether the link is part of a sub-menu. Default false.
+ * @param array $context     Navigation block context.
+ * @param array $attributes  Block attributes.
+ * @param bool  $is_sub_menu Whether the link is part of a sub-menu. Default false.
  * @return array Colors CSS classes and inline styles.
  */
 function block_core_navigation_link_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
@@ -90,7 +90,7 @@ function block_core_navigation_link_build_css_colors( $context, $attributes, $is
  * @since 5.9.0
  * @deprecated 7.0.0
  *
- * @param  array $context Navigation block context.
+ * @param array $context Navigation block context.
  * @return array Font size CSS classes and inline styles.
  */
 function block_core_navigation_link_build_css_font_sizes( $context ) {
@@ -308,7 +308,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
  * @since 5.9.0
  *
  * @param WP_Taxonomy|WP_Post_Type $entity post type or taxonomy entity.
- * @param string                   $kind string of value 'taxonomy' or 'post-type'.
+ * @param string                   $kind   string of value 'taxonomy' or 'post-type'.
  *
  * @return array
  */

package/src/navigation-link/shared/test/controls.jsdom.test.jsx

@@ -1,35 +1,40 @@
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { Controls } from '../controls';
+import { useEntityBinding } from '../use-entity-binding';
+import { useIsInvalidLink } from '../use-is-invalid-link';
+
+globalThis.wpVitest.mockMatchMedia();
 
 // Mock the updateAttributes function
 let mockUpdateAttributes;
-jest.mock( '../update-attributes', () => ( {
+vi.mock( import( '../update-attributes' ), () => ( {
 	updateAttributes: ( ...args ) => mockUpdateAttributes( ...args ),
 } ) );
 
 // Mock the useToolsPanelDropdownMenuProps hook
-jest.mock( '../../../utils/hooks', () => ( {
+vi.mock( import( '../../../utils/hooks' ), () => ( {
 	useToolsPanelDropdownMenuProps: () => ( {} ),
 } ) );
 
 // Mock the useEntityBinding hook
-jest.mock( '../use-entity-binding', () => ( {
-	useEntityBinding: jest.fn( () => ( {
+vi.mock( import( '../use-entity-binding' ), () => ( {
+	useEntityBinding: vi.fn( () => ( {
 		hasUrlBinding: false,
 		isBoundEntityAvailable: false,
-		clearBinding: jest.fn(),
+		clearBinding: vi.fn(),
 	} ) ),
 } ) );
 
 // Mock the useIsInvalidLink hook
-jest.mock( '../use-is-invalid-link', () => ( {
-	useIsInvalidLink: jest.fn( () => [ false, false ] ),
+vi.mock( import( '../use-is-invalid-link' ), () => ( {
+	useIsInvalidLink: vi.fn( () => [ false, false ] ),
 } ) );
 
 describe( 'Controls', () => {
 	// Initialize the mock function
 	beforeAll( () => {
-		mockUpdateAttributes = jest.fn();
+		mockUpdateAttributes = vi.fn();
 	} );
 
 	const defaultProps = {
@@ -40,25 +45,23 @@ describe( 'Controls', () => {
 			rel: 'nofollow',
 			opensInNewTab: false,
 		},
-		setAttributes: jest.fn(),
-		setIsEditingControl: jest.fn(),
+		setAttributes: vi.fn(),
+		setIsEditingControl: vi.fn(),
 		clientId: 'test-client-id',
 	};
 
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 		mockUpdateAttributes.mockClear();
 
 		// Reset useEntityBinding mock to default
-		const { useEntityBinding } = require( '../use-entity-binding' );
 		useEntityBinding.mockReturnValue( {
 			hasUrlBinding: false,
 			isBoundEntityAvailable: false,
-			clearBinding: jest.fn(),
+			clearBinding: vi.fn(),
 		} );
 
 		// Reset useIsInvalidLink mock to default
-		const { useIsInvalidLink } = require( '../use-is-invalid-link' );
 		useIsInvalidLink.mockReturnValue( [ false, false ] );
 	} );
 
@@ -126,11 +129,10 @@ describe( 'Controls', () => {
 
 	describe( 'URL binding help text', () => {
 		it( 'shows invalid link help text when bound entity is not available', () => {
-			const { useEntityBinding } = require( '../use-entity-binding' );
 			useEntityBinding.mockReturnValue( {
 				hasUrlBinding: true,
 				isBoundEntityAvailable: false,
-				clearBinding: jest.fn(),
+				clearBinding: vi.fn(),
 			} );
 
 			const propsWithCategoryBinding = {
@@ -152,7 +154,6 @@ describe( 'Controls', () => {
 		} );
 
 		it( 'shows draft help text for draft entities', () => {
-			const { useIsInvalidLink } = require( '../use-is-invalid-link' );
 			useIsInvalidLink.mockReturnValue( [ false, true ] ); // isInvalid: false, isDraft: true
 
 			const propsWithDraftPage = {
@@ -174,7 +175,6 @@ describe( 'Controls', () => {
 		} );
 
 		it( 'shows draft help text for different entity types', () => {
-			const { useIsInvalidLink } = require( '../use-is-invalid-link' );
 			useIsInvalidLink.mockReturnValue( [ false, true ] );
 
 			const propsWithDraftPost = {

package/src/navigation-link/shared/test/use-enable-link-status-validation.jsdom.test.js

@@ -1,11 +1,13 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
+import { useSelect } from '@wordpress/data';
 import { useEnableLinkStatusValidation } from '../use-enable-link-status-validation';
+
 // Mock useSelect directly at the implementation level to avoid loading complex dependencies
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	const mock = jest.fn();
-	return mock;
-} );
-const { useSelect } = require( '@wordpress/data' );
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn(),
+} ) );
 
 describe( 'useEnableLinkStatusValidation', () => {
 	const mockClientId = 'test-client-id';
@@ -13,7 +15,7 @@ describe( 'useEnableLinkStatusValidation', () => {
 	const mockSelectedBlockId = 'selected-block-id';
 
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	it( 'should return true when root navigation block is selected', () => {

package/src/navigation-link/shared/test/use-entity-binding.jsdom.test.js

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
 import {
 	useBlockBindingsUtils,
@@ -10,22 +11,22 @@ import {
 } from '../use-entity-binding';
 
 // Mock the entire @wordpress/block-editor module
-jest.mock( '@wordpress/block-editor', () => ( {
-	useBlockBindingsUtils: jest.fn(),
-	useBlockEditingMode: jest.fn(),
+vi.mock( import( '@wordpress/block-editor' ), () => ( {
+	useBlockBindingsUtils: vi.fn(),
+	useBlockEditingMode: vi.fn(),
 } ) );
 
 // Mock useSelect specifically to avoid needing to set up full data store
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	const mock = jest.fn();
-	return mock;
-} );
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn(),
+} ) );
 
 describe( 'useEntityBinding', () => {
-	const mockUpdateBlockBindings = jest.fn();
+	const mockUpdateBlockBindings = vi.fn();
 
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 		useBlockBindingsUtils.mockReturnValue( {
 			updateBlockBindings: mockUpdateBlockBindings,
 		} );
@@ -325,9 +326,9 @@ describe( 'useEntityBinding', () => {
 		} );
 
 		it( 'handles invalid kind gracefully in createBinding', () => {
-			const consoleSpy = jest
+			const consoleSpy = vi
 				.spyOn( console, 'warn' )
-				.mockImplementation();
+				.mockImplementation( () => {} );
 
 			const attributes = {
 				metadata: {},

package/src/navigation-link/shared/test/use-handle-link-change.jsdom.test.js

@@ -1,35 +1,38 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
+import { useDispatch } from '@wordpress/data';
+import { useHandleLinkChange } from '../use-handle-link-change';
+import { updateAttributes } from '../update-attributes';
+import { useEntityBinding } from '../use-entity-binding';
 // Mock the entire @wordpress/block-editor module
-jest.mock( '@wordpress/block-editor', () => ( {
+vi.mock( import( '@wordpress/block-editor' ), () => ( {
 	store: {},
 } ) );
+
 // Mock the entire @wordpress/core-data module
-jest.mock( '@wordpress/core-data', () => ( {
+vi.mock( import( '@wordpress/core-data' ), () => ( {
 	store: {},
 } ) );
+
 // Mock useDispatch specifically to avoid needing to set up full data store
-jest.mock( '@wordpress/data', () => ( {
-	useDispatch: jest.fn(),
-	createSelector: jest.fn( ( fn ) => fn ),
-	createRegistrySelector: jest.fn( ( fn ) => fn ),
-	createReduxStore: jest.fn( () => ( {} ) ),
-	combineReducers: jest.fn( ( reducers ) => ( state = {}, action ) => {
+vi.mock( import( '@wordpress/data' ), () => ( {
+	useDispatch: vi.fn(),
+	createSelector: vi.fn( ( fn ) => fn ),
+	createRegistrySelector: vi.fn( ( fn ) => fn ),
+	createReduxStore: vi.fn( () => ( {} ) ),
+	combineReducers: vi.fn( ( reducers ) => ( state = {}, action ) => {
 		const newState = {};
 		Object.keys( reducers ).forEach( ( key ) => {
 			newState[ key ] = reducers[ key ]( state[ key ], action );
 		} );
 		return newState;
 	} ),
-	register: jest.fn(),
+	register: vi.fn(),
 } ) );
-import { useDispatch } from '@wordpress/data';
-import { useHandleLinkChange } from '../use-handle-link-change';
-import { updateAttributes } from '../update-attributes';
-import { useEntityBinding } from '../use-entity-binding';
 
 // Mock internal dependencies
-jest.mock( '../update-attributes' );
-jest.mock( '../use-entity-binding' );
+vi.mock( import( '../update-attributes' ) );
+vi.mock( import( '../use-entity-binding' ) );
 
 describe( 'useHandleLinkChange', () => {
 	let mockSetAttributes;
@@ -41,10 +44,10 @@ describe( 'useHandleLinkChange', () => {
 
 	beforeEach( () => {
 		// Reset mocks
-		mockSetAttributes = jest.fn();
-		mockUpdateBlockAttributes = jest.fn();
-		mockCreateBinding = jest.fn();
-		mockClearBinding = jest.fn();
+		mockSetAttributes = vi.fn();
+		mockUpdateBlockAttributes = vi.fn();
+		mockCreateBinding = vi.fn();
+		mockClearBinding = vi.fn();
 
 		// Mock useDispatch
 		useDispatch.mockReturnValue( {
@@ -70,7 +73,7 @@ describe( 'useHandleLinkChange', () => {
 	} );
 
 	afterEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	describe( 'creating new entity links', () => {

package/src/navigation-link/shared/test/use-link-preview.jsdom.test.js

@@ -1,34 +1,37 @@
+import { beforeEach, describe, expect, it, test, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import { useSelect } from '@wordpress/data';
+import {
+	computeDisplayUrl,
+	computeBadges,
+	isHomepage,
+	useLinkPreview,
+} from '../use-link-preview';
 // Mock useRemoteUrlData from block-editor
-const mockUseRemoteUrlData = jest.fn();
-jest.mock( '@wordpress/block-editor', () => ( {
+const mockUseRemoteUrlData = vi.fn();
+
+vi.mock( import( '@wordpress/block-editor' ), () => ( {
 	privateApis: {},
 	store: {},
 } ) );
+
 // Mock the unlock function to return useRemoteUrlData, isHashLink, and isRelativePath
-jest.mock( '../../../lock-unlock', () => ( {
-	unlock: jest.fn( () => ( {
+vi.mock( import( '../../../lock-unlock' ), () => ( {
+	unlock: vi.fn( () => ( {
 		useRemoteUrlData: ( ...args ) => mockUseRemoteUrlData( ...args ),
 		isHashLink: ( url ) => url?.startsWith( '#' ),
 		isRelativePath: ( url ) =>
 			url?.startsWith( '/' ) && ! url?.startsWith( '//' ),
 	} ) ),
 } ) );
-import {
-	computeDisplayUrl,
-	computeBadges,
-	isHomepage,
-	useLinkPreview,
-} from '../use-link-preview';
 
 // Mock @wordpress/data
-jest.mock( '@wordpress/data', () => ( {
-	useSelect: jest.fn(),
+vi.mock( import( '@wordpress/data' ), () => ( {
+	useSelect: vi.fn(),
 } ) );
 
 // Mock @wordpress/core-data
-jest.mock( '@wordpress/core-data', () => ( {
+vi.mock( import( '@wordpress/core-data' ), () => ( {
 	store: {},
 } ) );
 
@@ -448,7 +451,7 @@ it( 'should show "Page" badge for internal custom links', () => {
 
 describe( 'useLinkPreview', () => {
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 		mockUseRemoteUrlData.mockReturnValue( { richData: null } );
 		useSelect.mockReturnValue( null );
 	} );

package/src/navigation-link/test/__snapshots__/hooks.jsdom.test.js.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and isActive functions 1`] = `
+exports[`hooks > enhanceNavigationLinkVariations > enhances variations with icon and isActive functions 1`] = `
 {
   "extraProp": "extraProp",
   "name": "core/navigation-link",

package/src/navigation-link/test/hooks.jsdom.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { __ } from '@wordpress/i18n';
 import { enhanceNavigationLinkVariations } from '../hooks';
 

package/src/navigation-link/variations.js

@@ -0,0 +1,19 @@
+import { __ } from '@wordpress/i18n';
+import { customLink as linkIcon } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'custom-link',
+		title: __( 'Custom Link' ),
+		description: __( 'Add a custom link to your navigation.' ),
+		icon: linkIcon,
+		attributes: {
+			kind: 'custom',
+		},
+		isActive: ( blockAttributes ) => blockAttributes.kind === 'custom',
+		isDefault: true,
+		scope: [ 'inserter' ],
+	},
+];
+
+export default variations;

package/src/navigation-submenu/index.js

@@ -1,14 +1,10 @@
 import { page, addSubmenu } from '@wordpress/icons';
-import { _x, __ } from '@wordpress/i18n';
-import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
+import { _x } from '@wordpress/i18n';
 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;
 
@@ -48,32 +44,4 @@ export const settings = {
 	transforms,
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'label',
-			label: __( 'Label' ),
-			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,
-			} ),
-			setValue: ( { value } ) => ( {
-				url: value.url,
-				rel: value.rel,
-			} ),
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'label', 'link' ],
-	};
-}
-
 export const init = () => initBlock( { name, metadata, settings } );

package/src/page-list/index.php

@@ -36,8 +36,8 @@ function block_core_page_list_get_submenu_visibility( $context ) {
  *
  * @since 5.8.0
  *
- * @param  array $attributes Block attributes.
- * @param  array $context    Navigation block context.
+ * @param array $attributes Block attributes.
+ * @param array $context    Navigation block context.
  * @return array Colors CSS classes and inline styles.
  */
 function block_core_page_list_build_css_colors( $attributes, $context ) {
@@ -128,14 +128,14 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
  *
  * @since 5.8.0
  *
- * @param string  $submenu_visibility The submenu visibility mode: 'hover', 'click', or 'always'.
- * @param boolean $show_submenu_icons Whether to show submenu indicator icons.
- * @param boolean $is_navigation_child If block is a child of Navigation block.
- * @param array   $nested_pages The array of nested pages.
- * @param boolean $is_nested Whether the submenu is nested or not.
+ * @param string  $submenu_visibility       The submenu visibility mode: 'hover', 'click', or 'always'.
+ * @param boolean $show_submenu_icons       Whether to show submenu indicator icons.
+ * @param boolean $is_navigation_child      If block is a child of Navigation block.
+ * @param array   $nested_pages             The array of nested pages.
+ * @param boolean $is_nested                Whether the submenu is nested or not.
  * @param array   $active_page_ancestor_ids An array of ancestor ids for active page.
- * @param array   $colors Color information for overlay styles.
- * @param integer $depth The nesting depth.
+ * @param array   $colors                   Color information for overlay styles.
+ * @param integer $depth                    The nesting depth.
  *
  * @return string List markup.
  */
@@ -227,7 +227,7 @@ function block_core_page_list_render_nested_page_list( $submenu_visibility, $sho
  * @since 5.8.0
  *
  * @param array $current_level The level being iterated through.
- * @param array $children The children grouped by parent post ID.
+ * @param array $children      The children grouped by parent post ID.
  *
  * @return array The nested array of pages.
  */

package/src/page-list/test/convert-to-navigation-links.jsdom.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { convertToNavigationLinks } from '../use-convert-to-navigation-links';
 
 // Expected entity binding structure for navigation links
@@ -12,8 +13,8 @@ const EXPECTED_ENTITY_BINDING = {
 
 // Mock createBlock to avoid creating the blocks in test environment
 // as convertToNavigationLinks calls this method internally.
-jest.mock( '@wordpress/blocks', () => {
-	const blocks = jest.requireActual( '@wordpress/blocks' );
+vi.mock( import( '@wordpress/blocks' ), async ( importOriginal ) => {
+	const blocks = await importOriginal();
 
 	return {
 		...blocks,

package/src/paragraph/index.js

@@ -1,15 +1,11 @@
 import { __ } from '@wordpress/i18n';
 import { paragraph 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;
 
@@ -56,18 +52,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/paragraph/use-enter.js

@@ -1,7 +1,6 @@
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
-import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import {
@@ -29,12 +28,12 @@ export function useOnEnter( props ) {
 	const propsRef = useRef( props );
 	propsRef.current = props;
 	return useRefEffect( ( element ) => {
-		function onKeyDown( event ) {
+		function onBeforeInput( event ) {
 			if ( event.defaultPrevented ) {
 				return;
 			}
 
-			if ( event.keyCode !== ENTER ) {
+			if ( event.inputType !== 'insertParagraph' ) {
 				return;
 			}
 
@@ -120,8 +119,16 @@ export function useOnEnter( props ) {
 			} );
 		}
 
-		// Capture phase so we run before writing-flow's ancestor-bubble
-		// keydown handlers that gate on `event.defaultPrevented`.
-		return subscribeOwnedListener( element, 'keydown', onKeyDown, true );
+		// Enter is handled on beforeinput: moving focus while the keydown
+		// is still being handled leaves the iOS keyboard's
+		// auto-capitalization stale. Capture phase so we run before
+		// writing-flow's ancestor-bubble handler that gates on
+		// `event.defaultPrevented`.
+		return subscribeOwnedListener(
+			element,
+			'beforeinput',
+			onBeforeInput,
+			true
+		);
 	}, [] );
 }