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

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

@@ -1,46 +1,35 @@
-import { useRegistry, useDispatch, useSelect } from '@wordpress/data';
+import { useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { isUnmodifiedBlock, switchToBlockType } from '@wordpress/blocks';
-import useOutdentListItem from './use-outdent-list-item';
+import { outdentListItems, getOutdentTarget } from '../utils';
 
 export default function useMerge( clientId, onMerge ) {
 	const registry = useRegistry();
-	const {
-		getPreviousBlockClientId,
-		getNextBlockClientId,
-		getBlockOrder,
-		getBlockIndex,
-		getBlockRootClientId,
-		getBlockName,
-		getBlock,
-	} = useSelect( blockEditorStore );
-	const { mergeBlocks, moveBlocksToPosition, removeBlock, insertBlocks } =
-		useDispatch( blockEditorStore );
-	const outdentListItem = useOutdentListItem();
 
-	function getTrailingId( id ) {
-		const order = getBlockOrder( id );
+	return ( forward ) => {
+		const select = registry.select( blockEditorStore );
+		const {
+			getPreviousBlockClientId,
+			getNextBlockClientId,
+			getBlockOrder,
+			getBlockIndex,
+			getBlockRootClientId,
+			getBlockName,
+			getBlock,
+		} = select;
+		const { mergeBlocks, moveBlocksToPosition, removeBlock, insertBlocks } =
+			registry.dispatch( blockEditorStore );
 
-		if ( ! order.length ) {
-			return id;
-		}
+		function getTrailingId( id ) {
+			const order = getBlockOrder( id );
 
-		return getTrailingId( order[ order.length - 1 ] );
-	}
+			if ( ! order.length ) {
+				return id;
+			}
 
-	function getParentListItemId( id ) {
-		const listId = getBlockRootClientId( id );
-		const parentListItemId = getBlockRootClientId( listId );
-		if ( ! parentListItemId ) {
-			return;
+			return getTrailingId( order[ order.length - 1 ] );
 		}
-		if ( getBlockName( parentListItemId ) !== 'core/list-item' ) {
-			return;
-		}
-		return parentListItemId;
-	}
 
-	return ( forward ) => {
 		function mergeWithNested( clientIdA, clientIdB ) {
 			registry.batch( () => {
 				// When merging a sub list item with a higher next list item, we
@@ -62,7 +51,7 @@ export default function useMerge( clientId, onMerge ) {
 							clientIdA
 						);
 					} else if (
-						getParentListItemId( clientIdB ) === clientIdA
+						getOutdentTarget( select, clientIdB ) === clientIdA
 					) {
 						// Merging into the parent item's own line: the
 						// children take the item's place in its list, one
@@ -104,7 +93,7 @@ export default function useMerge( clientId, onMerge ) {
 				while (
 					! ( nextBlockClientId = getNextBlockClientId( listItemId ) )
 				) {
-					const parentLi = getParentListItemId( listItemId );
+					const parentLi = getOutdentTarget( select, listItemId );
 					if ( ! parentLi ) {
 						break;
 					}
@@ -158,7 +147,7 @@ export default function useMerge( clientId, onMerge ) {
 				mergeWithNested( trailingId, clientId );
 				return;
 			}
-			const parentListItemId = getParentListItemId( clientId );
+			const parentListItemId = getOutdentTarget( select, clientId );
 			if ( parentListItemId ) {
 				mergeWithNested( parentListItemId, clientId );
 				return;
@@ -170,7 +159,10 @@ export default function useMerge( clientId, onMerge ) {
 				blockOrder.length > 0
 			) {
 				registry.batch( () => {
-					outdentListItem( getBlockOrder( blockOrder[ 0 ] ) );
+					outdentListItems(
+						registry,
+						getBlockOrder( blockOrder[ 0 ] )
+					);
 					removeBlock( clientId, true );
 				} );
 			} else {

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/math/README.md

@@ -31,6 +31,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - `padding`: `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
+  - `clientNavigation`: `true`
 
 ## Block Markup
 

package/src/math/block.json

@@ -36,6 +36,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"attributes": {

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/media-text/style.scss

@@ -53,6 +53,7 @@
 	grid-row: 1;
 	/*rtl:end:ignore*/
 	padding: 0 8% 0 8%;
+	// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Pending review of overflow-wrap alternative.
 	word-break: break-word;
 }
 
@@ -102,7 +103,7 @@
 	padding: 0;
 	margin: -1px;
 	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
+	clip-path: inset(50%);
 	border: 0;
 }
 

package/src/media-text/test/image-fill.js

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