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

package/src/list-item/hooks/use-multi-select-tab.js

@@ -0,0 +1,83 @@
+import { useRefEffect } from '@wordpress/compose';
+import { TAB } from '@wordpress/keycodes';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect, useRegistry } from '@wordpress/data';
+import { indentListItems, outdentListItems } from '../utils';
+
+export default function useMultiSelectTab( clientId ) {
+	const registry = useRegistry();
+	// Only the first item of an all-list-item multi selection attaches the
+	// listener, so there is a single handler regardless of how many list items
+	// are rendered, and only while such a selection exists.
+	const isActive = useSelect(
+		( select ) => {
+			const {
+				hasMultiSelection,
+				getMultiSelectedBlockClientIds,
+				getBlockName,
+			} = select( blockEditorStore );
+			if ( ! hasMultiSelection() ) {
+				return false;
+			}
+			const clientIds = getMultiSelectedBlockClientIds();
+			return (
+				clientIds[ 0 ] === clientId &&
+				clientIds.every(
+					( id ) => getBlockName( id ) === 'core/list-item'
+				)
+			);
+		},
+		[ clientId ]
+	);
+
+	return useRefEffect(
+		( element ) => {
+			if ( ! isActive ) {
+				return;
+			}
+
+			function onKeyDown( event ) {
+				const { keyCode, shiftKey, altKey, metaKey, ctrlKey } = event;
+
+				if (
+					keyCode !== TAB ||
+					event.defaultPrevented ||
+					altKey ||
+					metaKey ||
+					ctrlKey
+				) {
+					return;
+				}
+
+				// The listener is on the document, so it also sees a Tab from
+				// other editor UI while the multi selection lingers (moving
+				// focus does not clear it). A multi selection keeps focus on the
+				// canvas host that wraps the blocks, so only act when the key
+				// comes from an ancestor of them, not from a toolbar or panel.
+				if ( ! event.target.contains( element ) ) {
+					return;
+				}
+
+				if ( shiftKey ) {
+					if ( outdentListItems( registry ) ) {
+						event.preventDefault();
+					}
+				} else if ( indentListItems( registry ) ) {
+					event.preventDefault();
+				}
+			}
+
+			// During a multi selection focus sits on the writing flow
+			// container, not inside any item, so an element listener never sees
+			// the key. Listen on the document. Capture phase so we run before
+			// writing-flow's keydown handlers, which gate on
+			// `event.defaultPrevented`.
+			const { ownerDocument } = element;
+			ownerDocument.addEventListener( 'keydown', onKeyDown, true );
+			return () => {
+				ownerDocument.removeEventListener( 'keydown', onKeyDown, true );
+			};
+		},
+		[ isActive, registry ]
+	);
+}

package/src/list-item/hooks/use-tab.js

@@ -0,0 +1,62 @@
+import { useRefEffect } from '@wordpress/compose';
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
+import { SPACE, TAB } from '@wordpress/keycodes';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useRegistry } from '@wordpress/data';
+import { isEntirelySelected } from '@wordpress/dom';
+import { indentListItems, outdentListItems } from '../utils';
+import { unlock } from '../../lock-unlock';
+
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
+
+export default function useTab() {
+	const registry = useRegistry();
+
+	return useRefEffect(
+		( element ) => {
+			function onKeyDown( event ) {
+				const { keyCode, shiftKey, altKey, metaKey, ctrlKey } = event;
+
+				if (
+					event.defaultPrevented ||
+					( keyCode !== SPACE && keyCode !== TAB ) ||
+					// Shift selects outdent; other modifiers pass through.
+					altKey ||
+					metaKey ||
+					ctrlKey
+				) {
+					return;
+				}
+
+				const { getSelectionStart, getSelectionEnd } =
+					registry.select( blockEditorStore );
+				const isAtStart =
+					getSelectionStart().offset === 0 &&
+					getSelectionEnd().offset === 0;
+
+				// Both keys act at the start of an item; Tab also acts on a
+				// full selection.
+				if (
+					! isAtStart &&
+					! ( keyCode === TAB && isEntirelySelected( element ) )
+				) {
+					return;
+				}
+				const move = shiftKey ? outdentListItems : indentListItems;
+				if ( move( registry ) ) {
+					event.preventDefault();
+				}
+			}
+
+			// Capture phase so we run before writing-flow's ancestor-bubble
+			// keydown handlers that gate on `event.defaultPrevented`.
+			return subscribeOwnedListener(
+				element,
+				'keydown',
+				onKeyDown,
+				true
+			);
+		},
+		[ registry ]
+	);
+}

package/src/list-item/index.js

@@ -1,7 +1,5 @@
-import { __ } from '@wordpress/i18n';
 import { listItem as icon } from '@wordpress/icons';
 import { privateApis } from '@wordpress/block-editor';
-import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
@@ -9,8 +7,6 @@ import save from './save';
 import transforms from './transforms';
 import { unlock } from '../lock-unlock';
 
-const { fieldsKey, formKey } = unlock( blocksPrivateApis );
-
 const { name } = metadata;
 
 export { metadata, name };
@@ -45,18 +41,4 @@ export const settings = {
 	},
 };
 
-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/list-item/utils.js

@@ -0,0 +1,236 @@
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { cloneBlock } from '@wordpress/blocks';
+
+/**
+ * The previous sibling to nest a list item under when indenting, or undefined
+ * for the first item, which has no sibling to nest under.
+ *
+ * @param {Object} select   The block editor store's selectors.
+ * @param {string} clientId The list item's client ID.
+ *
+ * @return {string|undefined} The client ID to nest the item under.
+ */
+export function getIndentTarget( select, clientId ) {
+	return select.getPreviousBlockClientId( clientId );
+}
+
+/**
+ * The ancestor list item the given item's list is nested in when outdenting, or
+ * undefined at the top level, where there is nothing to outdent to.
+ *
+ * @param {Object} select   The block editor store's selectors.
+ * @param {string} clientId The list item's client ID.
+ *
+ * @return {string|undefined} The ancestor list item's client ID.
+ */
+export function getOutdentTarget( select, clientId ) {
+	const listId = select.getBlockRootClientId( clientId );
+	const parentListItemId = select.getBlockRootClientId( listId );
+	if (
+		! parentListItemId ||
+		select.getBlockName( parentListItemId ) !== 'core/list-item'
+	) {
+		return undefined;
+	}
+	return parentListItemId;
+}
+
+/**
+ * Moves blocks into a list item's nested list, keeping their client IDs. If the
+ * list item has no nested list yet, one is created from the source list so it
+ * inherits its attributes.
+ *
+ * @param {Object}   registry     The data registry.
+ * @param {string[]} clientIds    The blocks to move.
+ * @param {string}   sourceListId The list the blocks currently live in, also
+ *                                cloned when a nested list has to be created.
+ * @param {string}   listItemId   The list item to nest the blocks under.
+ */
+export function moveBlocksToNestedList(
+	registry,
+	clientIds,
+	sourceListId,
+	listItemId
+) {
+	const { getBlockOrder, getBlock } = registry.select( blockEditorStore );
+	const { moveBlocksToPosition, removeBlocks, insertBlock } =
+		registry.dispatch( blockEditorStore );
+	// A list item can hold more than one nested list; append to the last one,
+	// the same subtree a reader sees at the end of the item.
+	const nestedLists = getBlockOrder( listItemId );
+	const nestedListId = nestedLists[ nestedLists.length - 1 ];
+
+	if ( nestedListId ) {
+		moveBlocksToPosition( clientIds, sourceListId, nestedListId );
+		return;
+	}
+
+	// Insert the list with the items already inside: an empty list would be
+	// scaffolded with the list block type's template, and moving into a freshly
+	// created list would fail its canInsert check. Cloning the source list keeps
+	// its attributes; passing the items as inner blocks keeps their client IDs.
+	const nestedList = cloneBlock(
+		getBlock( sourceListId ),
+		{},
+		clientIds.map( ( id ) => getBlock( id ) )
+	);
+	// Remove and re-insert in one batch so the blocks are never momentarily
+	// detached. A caller batch nests harmlessly: only the outermost flushes.
+	registry.batch( () => {
+		removeBlocks( clientIds, false );
+		insertBlock( nestedList, 0, listItemId, false );
+	} );
+}
+
+/**
+ * Indents the selected list items, nesting them under the previous sibling of
+ * the given item. Defaults to the first selected item.
+ *
+ * @param {Object} registry   The data registry.
+ * @param {string} [clientId] The list item providing the sibling to nest under.
+ *
+ * @return {boolean} Whether the items were indented.
+ */
+export function indentListItems( registry, clientId ) {
+	const select = registry.select( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getSelectedBlockClientIds,
+		getSelectionStart,
+		getSelectionEnd,
+		hasMultiSelection,
+		getMultiSelectedBlockClientIds,
+	} = select;
+	const { selectionChange, multiSelect } =
+		registry.dispatch( blockEditorStore );
+
+	const _hasMultiSelection = hasMultiSelection();
+	const clientIds = _hasMultiSelection
+		? getMultiSelectedBlockClientIds()
+		: getSelectedBlockClientIds();
+
+	if ( clientId === undefined ) {
+		clientId = clientIds[ 0 ];
+	}
+
+	const previousSiblingId = getIndentTarget( select, clientId );
+
+	// Can't indent the first item: there is no sibling to nest it under.
+	if ( ! previousSiblingId ) {
+		return false;
+	}
+
+	const rootClientId = getBlockRootClientId( clientId );
+	// Read the selection before the move: creating a nested list removes and
+	// re-inserts the items, which drops it.
+	const selectionStart = getSelectionStart();
+	const selectionEnd = getSelectionEnd();
+
+	registry.batch( () => {
+		moveBlocksToNestedList(
+			registry,
+			clientIds,
+			rootClientId,
+			previousSiblingId
+		);
+
+		// Put the selection back on the same blocks (client IDs are kept).
+		if ( ! _hasMultiSelection ) {
+			selectionChange(
+				clientIds[ 0 ],
+				selectionEnd.attributeKey,
+				selectionEnd.clientId === selectionStart.clientId
+					? selectionStart.offset
+					: selectionEnd.offset,
+				selectionEnd.offset
+			);
+		} else {
+			multiSelect( clientIds[ 0 ], clientIds[ clientIds.length - 1 ] );
+		}
+	} );
+
+	return true;
+}
+
+/**
+ * Outdents list items, moving them up a level. Defaults to the selected items;
+ * a specific set can be passed, e.g. to outdent an item's children.
+ *
+ * @param {Object}          registry    The data registry.
+ * @param {string[]|string} [clientIds] The list items to outdent.
+ *
+ * @return {boolean} Whether the items were outdented.
+ */
+export function outdentListItems( registry, clientIds ) {
+	const select = registry.select( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlockName,
+		getBlockOrder,
+		getBlockIndex,
+		getSelectedBlockClientIds,
+	} = select;
+	const { moveBlocksToPosition, removeBlock, multiSelect } =
+		registry.dispatch( blockEditorStore );
+
+	if ( clientIds === undefined ) {
+		clientIds = getSelectedBlockClientIds();
+	}
+
+	if ( ! Array.isArray( clientIds ) ) {
+		clientIds = [ clientIds ];
+	}
+
+	if ( ! clientIds.length ) {
+		return false;
+	}
+
+	const firstClientId = clientIds[ 0 ];
+
+	// Can't outdent if it's not a list item.
+	if ( getBlockName( firstClientId ) !== 'core/list-item' ) {
+		return false;
+	}
+
+	// Can't outdent if it's at the top level.
+	const parentListItemId = getOutdentTarget( select, firstClientId );
+	if ( ! parentListItemId ) {
+		return false;
+	}
+
+	const parentListId = getBlockRootClientId( firstClientId );
+	const lastClientId = clientIds[ clientIds.length - 1 ];
+	const order = getBlockOrder( parentListId );
+	const followingListItems = order.slice( getBlockIndex( lastClientId ) + 1 );
+
+	registry.batch( () => {
+		if ( followingListItems.length ) {
+			// Nest the items that follow under the outdented item so they keep
+			// their place below it.
+			moveBlocksToNestedList(
+				registry,
+				followingListItems,
+				parentListId,
+				firstClientId
+			);
+		}
+		moveBlocksToPosition(
+			clientIds,
+			parentListId,
+			getBlockRootClientId( parentListItemId ),
+			getBlockIndex( parentListItemId ) + 1
+		);
+		if ( ! getBlockOrder( parentListId ).length ) {
+			const shouldSelectParent = false;
+			removeBlock( parentListId, shouldSelectParent );
+		}
+
+		// Reset the lingering partial cross-block range to a whole block
+		// selection. A single caret is preserved by the store on its own.
+		if ( clientIds.length > 1 ) {
+			multiSelect( firstClientId, lastClientId );
+		}
+	} );
+
+	return true;
+}

package/src/media-text/index.js

@@ -1,6 +1,5 @@
 import { __ } from '@wordpress/i18n';
 import { mediaAndText as icon } from '@wordpress/icons';
-import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 import initBlock from '../utils/init-block';
 import { TEMPLATE } from './constants';
 import deprecated from './deprecated';
@@ -8,9 +7,6 @@ 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;
 
@@ -49,50 +45,4 @@ export const settings = {
 	deprecated,
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'media',
-			label: __( 'Media' ),
-			type: 'media',
-			Edit: {
-				control: 'media', // TODO: replace with custom component
-				allowedTypes: [ 'image', 'video' ],
-				multiple: false,
-			},
-			getValue: ( { item } ) => ( {
-				id: item.mediaId,
-				url: item.mediaUrl,
-				mediaType: item.mediaType,
-				link: item.mediaLink,
-			} ),
-			setValue: ( { value } ) => ( {
-				mediaId: value.id,
-				mediaUrl: value.url,
-				mediaType: value.mediaType,
-				mediaLink: value.link,
-			} ),
-		},
-		{
-			id: 'link',
-			label: __( 'Link' ),
-			type: 'url',
-			Edit: 'link', // TODO: replace with custom component
-			getValue: ( { item } ) => ( {
-				url: item.href,
-				rel: item.rel,
-				linkTarget: item.linkTarget,
-			} ),
-			setValue: ( { value } ) => ( {
-				href: value.url,
-				rel: value.rel,
-				linkTarget: value.linkTarget,
-			} ),
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'media', 'link' ],
-	};
-}
-
 export const init = () => initBlock( { name, metadata, settings } );

package/src/media-text/media-container.jsx

@@ -53,6 +53,7 @@ function ToolbarEditButton( {
 				onSelect={ onSelectMedia }
 				onToggleFeaturedImage={ toggleUseFeaturedImage }
 				useFeaturedImage={ useFeaturedImage }
+				name={ mediaUrl ? __( 'Replace' ) : __( 'Add media' ) }
 				onReset={ () => onSelectMedia( undefined ) }
 			/>
 		</BlockControls>
@@ -122,6 +123,20 @@ function MediaContainer( props, ref ) {
 
 	const { toggleSelection } = useDispatch( blockEditorStore );
 
+	const toolbarEditButton = (
+		<ToolbarEditButton
+			onSelectMedia={ onSelectMedia }
+			mediaUrl={
+				useFeaturedImage && featuredImageURL
+					? featuredImageURL
+					: mediaUrl
+			}
+			mediaId={ mediaId }
+			toggleUseFeaturedImage={ toggleUseFeaturedImage }
+			useFeaturedImage={ useFeaturedImage }
+		/>
+	);
+
 	if ( mediaUrl || featuredImageURL || useFeaturedImage ) {
 		const onResizeStart = () => {
 			toggleSelection( false );
@@ -185,17 +200,7 @@ function MediaContainer( props, ref ) {
 				isStackedOnMobile={ isStackedOnMobile }
 				ref={ ref }
 			>
-				<ToolbarEditButton
-					onSelectMedia={ onSelectMedia }
-					mediaUrl={
-						useFeaturedImage && featuredImageURL
-							? featuredImageURL
-							: mediaUrl
-					}
-					mediaId={ mediaId }
-					toggleUseFeaturedImage={ toggleUseFeaturedImage }
-					useFeaturedImage={ useFeaturedImage }
-				/>
+				{ toolbarEditButton }
 				{ ( mediaTypeRenderers[ mediaType ] || noop )() }
 				{ isTemporaryMedia && <Spinner /> }
 				{ ! useFeaturedImage && <PlaceholderContainer { ...props } /> }
@@ -210,7 +215,12 @@ function MediaContainer( props, ref ) {
 		);
 	}
 
-	return <PlaceholderContainer { ...props } />;
+	return (
+		<>
+			{ toolbarEditButton }
+			<PlaceholderContainer { ...props } />
+		</>
+	);
 }
 
 export default forwardRef( MediaContainer );

package/src/more/index.js

@@ -1,14 +1,9 @@
 import { more as icon } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-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 +31,4 @@ export const settings = {
 	save,
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'customText',
-			label: __( 'Content' ),
-			type: 'text',
-			Edit: 'rich-text', // TODO: replace with custom component
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'customText' ],
-	};
-}
-
 export const init = () => initBlock( { name, metadata, settings } );

package/src/navigation/constants.js

@@ -8,7 +8,7 @@ export const DEFAULT_BLOCK = {
 
 export const PRIORITIZED_INSERTER_BLOCKS = [
 	'core/navigation-link/page',
-	'core/navigation-link',
+	'core/navigation-link/custom-link',
 ];
 
 // These parameters must be kept aligned with those in

package/src/navigation/edit/test/layout-custom-properties.jsdom.test.js

@@ -1,19 +1,20 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import { useSettings, useStyleOverride } from '@wordpress/block-editor';
 import useLayoutCustomProperties from '../use-layout-custom-properties';
 
-const mockGetResponsiveMediaQueries = jest.fn();
+const mockGetResponsiveMediaQueries = vi.fn();
 
-jest.mock( '@wordpress/block-editor', () => ( {
-	useSettings: jest.fn(),
-	useStyleOverride: jest.fn(),
+vi.mock( import( '@wordpress/block-editor' ), () => ( {
+	useSettings: vi.fn(),
+	useStyleOverride: vi.fn(),
 } ) );
 
-jest.mock( '@wordpress/global-styles-engine', () => ( {
+vi.mock( import( '@wordpress/global-styles-engine' ), () => ( {
 	privateApis: {},
 } ) );
 
-jest.mock( '../../../lock-unlock', () => ( {
+vi.mock( import( '../../../lock-unlock' ), () => ( {
 	unlock: () => ( {
 		getResponsiveMediaQueries: ( ...args ) =>
 			mockGetResponsiveMediaQueries( ...args ),
@@ -22,7 +23,7 @@ jest.mock( '../../../lock-unlock', () => ( {
 
 describe( 'Navigation layout custom properties', () => {
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 		useSettings.mockReturnValue( [ { mobile: 480, tablet: 782 } ] );
 		mockGetResponsiveMediaQueries.mockReturnValue( {
 			'@tablet': '@media (480px < width <= 782px)',