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

package/src/image/use-open-image-media-editor-modal.js

@@ -7,6 +7,11 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { useRegistry, useSelect } from '@wordpress/data';
 import { useCallback, useEffect, useRef } from '@wordpress/element';
 import { unlock } from '../lock-unlock';
+import {
+	DEFAULT_MEDIA_SIZE_SLUG,
+	LINK_DESTINATION_ATTACHMENT,
+	LINK_DESTINATION_MEDIA,
+} from './constants';
 
 function normalizeImageBlockCaption( caption ) {
 	if ( typeof caption !== 'string' ) {
@@ -96,6 +101,107 @@ export function getSyncedImageBlockAttributes(
 	return syncedAttributes;
 }
 
+/**
+ * Resolves the attributes needed to keep the selected image size on a new
+ * attachment.
+ *
+ * WordPress skips generating a sub-size larger than the file itself, so the
+ * selected size may not exist on the edited image; fall back to full when it
+ * doesn't.
+ *
+ * @param {string|undefined} sizeSlug   The block's currently selected size.
+ * @param {Object}           attachment The new attachment record.
+ *
+ * @return {Object|undefined} Attributes to apply, if any.
+ */
+function getNewAttachmentSizeAttributes( sizeSlug, attachment ) {
+	const sizes = attachment.media_details?.sizes;
+
+	if ( ! sizeSlug || sizeSlug === DEFAULT_MEDIA_SIZE_SLUG || ! sizes ) {
+		return undefined;
+	}
+
+	const sizeUrl = sizes[ sizeSlug ]?.source_url;
+
+	if ( sizeUrl ) {
+		return { url: sizeUrl };
+	}
+
+	const fullUrl = attachment.source_url ?? sizes.full?.source_url;
+
+	return fullUrl
+		? { url: fullUrl, sizeSlug: DEFAULT_MEDIA_SIZE_SLUG }
+		: undefined;
+}
+
+/**
+ * Resolves the link attributes needed to keep the block's link pointing at the
+ * new attachment.
+ *
+ * Only the destinations derived from the attachment follow the edited image. A
+ * `custom` link is the user's own URL and a `none` link has nothing to point
+ * at, so both are left alone. When the record doesn't carry the field, the
+ * existing link is kept rather than cleared.
+ *
+ * @param {string|undefined} linkDestination The block's link destination.
+ * @param {Object}           attachment      The new attachment record.
+ *
+ * @return {Object|undefined} Attributes to apply, if any.
+ */
+function getNewAttachmentLinkAttributes( linkDestination, attachment ) {
+	// Media file links point at the full-size file, independently of the size
+	// the block renders.
+	if ( linkDestination === LINK_DESTINATION_MEDIA ) {
+		return attachment.source_url
+			? { href: attachment.source_url }
+			: undefined;
+	}
+
+	if ( linkDestination === LINK_DESTINATION_ATTACHMENT ) {
+		return attachment.link ? { href: attachment.link } : undefined;
+	}
+
+	return undefined;
+}
+
+/**
+ * Resolves the block attributes that are derived from the attachment, for an
+ * edit that saved to a different one.
+ *
+ * Editing media (crop, rotate, flip) creates a new attachment with its own
+ * generated sub-sizes and its own attachment page, and the media editor
+ * reports the full-size file. Without re-deriving these, the size control
+ * keeps reporting e.g. "Medium" while the block renders the full-size image,
+ * and a "Media file" or "Attachment page" link still points at the image as it
+ * was before the edit. Everything else the user set on the block — dimensions,
+ * lightbox, title, custom links — is left untouched.
+ *
+ * @param {Object}           blockAttributes The block's current attributes.
+ * @param {Object|undefined} attachment      The new attachment record.
+ *
+ * @return {Object|undefined} Attributes to apply, or undefined when the
+ *                            attachment record isn't known yet.
+ */
+export function getNewAttachmentImageBlockAttributes(
+	blockAttributes,
+	attachment
+) {
+	if ( ! attachment ) {
+		return undefined;
+	}
+
+	return {
+		...getNewAttachmentSizeAttributes(
+			blockAttributes.sizeSlug,
+			attachment
+		),
+		...getNewAttachmentLinkAttributes(
+			blockAttributes.linkDestination,
+			attachment
+		),
+	};
+}
+
 const { openMediaEditorModalKey } = unlock( blockEditorPrivateApis );
 
 function getAttachmentFallbackForEmptyBlockMetadata( { alt, caption } ) {
@@ -134,8 +240,10 @@ export function useOpenImageMediaEditorModal( {
 } ) {
 	// Keep this hook private to the Image block and pass the block attributes
 	// object so the callsite stays compact. Destructure only the attributes
-	// currently used for metadata sync; add more here if the sync policy grows.
-	const { id, url, alt, caption } = attributes;
+	// the update needs to read — those synced from the attachment's metadata,
+	// and those derived from which attachment the block points at; add more
+	// here if the sync policy grows.
+	const { id, url, alt, caption, sizeSlug, linkDestination } = attributes;
 	const registry = useRegistry();
 	const openMediaEditorModal = useSelect(
 		( select ) =>
@@ -151,6 +259,8 @@ export function useOpenImageMediaEditorModal( {
 		url,
 		alt,
 		caption: caption?.toString(),
+		sizeSlug,
+		linkDestination,
 	} );
 	// Snapshot of the attachment's metadata taken just before the modal opens,
 	// used as the baseline for detecting what changed during the editing session.
@@ -165,8 +275,10 @@ export function useOpenImageMediaEditorModal( {
 			url,
 			alt,
 			caption: caption?.toString(),
+			sizeSlug,
+			linkDestination,
 		};
-	}, [ alt, caption, id, url ] );
+	}, [ alt, caption, id, linkDestination, sizeSlug, url ] );
 
 	// Reads the cached attachment record. The `attachment` postType entity
 	// fetches with `context: 'edit'` by default, so `getEditedEntityRecord`
@@ -236,14 +348,19 @@ export function useOpenImageMediaEditorModal( {
 			const nextAttributes = {};
 
 			const currentBlockAttributes = blockAttributesRef.current;
+			const isNewAttachment = newId !== currentBlockAttributes.id;
 
-			if ( newId !== currentBlockAttributes.id ) {
+			if ( isNewAttachment ) {
 				nextAttributes.id = newId;
 				nextAttributes.url = newUrl ?? currentBlockAttributes.url;
 				if ( nextAttributes.url !== currentBlockAttributes.url ) {
 					// The block is about to point at a freshly generated file
 					// the browser hasn't loaded yet; let the caller show a
-					// loading state until its <img> fires load/error.
+					// loading state until its <img> fires load/error. Raising
+					// it here, before anything is awaited, keeps the rest of
+					// this update behind that loading state: the attributes
+					// land in a single `setAttributes` at the end, so the
+					// image never renders against half-updated settings.
 					onUrlChange?.( nextAttributes.url );
 				}
 				blockAttributesRef.current = {
@@ -253,10 +370,9 @@ export function useOpenImageMediaEditorModal( {
 				};
 			}
 
-			if ( originalAttachment ) {
-				// Fetch fresh server state so the comparison reflects what
-				// the media editor actually saved, not a potentially stale
-				// cache.
+			if ( originalAttachment || isNewAttachment ) {
+				// Fetch fresh server state so this reflects what the media
+				// editor actually saved, not a potentially stale cache.
 				const resolvedAttachment =
 					await resolveFreshAttachmentRecord( newId );
 
@@ -268,21 +384,63 @@ export function useOpenImageMediaEditorModal( {
 					return;
 				}
 
+				// A failed refetch returns nothing, which would leave the
+				// block pointing at the new file while its size and link
+				// still describe the old one. The record the media editor
+				// received when it saved is already in the store, so fall
+				// back to that rather than half-updating the block.
+				const attachmentRecord =
+					resolvedAttachment ?? getCachedAttachmentRecord( newId );
+
+				const latestBlockAttributes = blockAttributesRef.current;
+
 				// Sync alt text and caption back to the block only when
 				// they were changed in the media editor. Fields the user
 				// has independently customised on the block (i.e. values
 				// that don't match the pre-session attachment metadata)
-				// are left untouched.
-				const latestBlockAttributes = blockAttributesRef.current;
-				const resolvedMetadataAttributes =
-					getSyncedImageBlockAttributes(
-						latestBlockAttributes,
-						originalAttachment,
-						resolvedAttachment
-					);
-
-				if ( Object.keys( resolvedMetadataAttributes ).length ) {
-					Object.assign( nextAttributes, resolvedMetadataAttributes );
+				// are left untouched. Without a baseline there's no way to
+				// tell the two apart, so nothing is synced.
+				if ( originalAttachment ) {
+					const resolvedMetadataAttributes =
+						getSyncedImageBlockAttributes(
+							latestBlockAttributes,
+							originalAttachment,
+							attachmentRecord
+						);
+
+					if ( Object.keys( resolvedMetadataAttributes ).length ) {
+						Object.assign(
+							nextAttributes,
+							resolvedMetadataAttributes
+						);
+					}
+				}
+
+				if ( isNewAttachment ) {
+					const derivedAttributes =
+						getNewAttachmentImageBlockAttributes(
+							latestBlockAttributes,
+							attachmentRecord
+						);
+
+					if ( derivedAttributes ) {
+						Object.assign( nextAttributes, derivedAttributes );
+
+						// The URL announced before the resolve was the
+						// full-size file the media editor reported, and
+						// deriving the selected size can change it.
+						// Re-announce so the pending swap names the file
+						// that actually lands: an update that is undone or
+						// superseded never changes the <img> src, and the
+						// block then clears its loading state by matching
+						// the pending URL against the rendered one.
+						if (
+							derivedAttributes.url &&
+							derivedAttributes.url !== latestBlockAttributes.url
+						) {
+							onUrlChange?.( derivedAttributes.url );
+						}
+					}
 				}
 			}
 
@@ -294,7 +452,12 @@ export function useOpenImageMediaEditorModal( {
 				setAttributes( nextAttributes );
 			}
 		},
-		[ onUrlChange, resolveFreshAttachmentRecord, setAttributes ]
+		[
+			getCachedAttachmentRecord,
+			onUrlChange,
+			resolveFreshAttachmentRecord,
+			setAttributes,
+		]
 	);
 
 	const openImageMediaEditorModal = useCallback( async () => {

package/src/index.jsx

@@ -49,10 +49,6 @@ import * as cover from './cover';
 import * as details from './details';
 import * as embed from './embed';
 import * as file from './file';
-import * as form from './form';
-import * as formInput from './form-input';
-import * as formSubmitButton from './form-submit-button';
-import * as formSubmissionNotification from './form-submission-notification';
 import * as gallery from './gallery';
 import * as group from './group';
 import * as heading from './heading';
@@ -267,13 +263,6 @@ const getAllBlocks = () => {
 		breadcrumbs,
 	];
 
-	if ( window?.__experimentalEnableFormBlocks ) {
-		blocks.push( form );
-		blocks.push( formInput );
-		blocks.push( formSubmitButton );
-		blocks.push( formSubmissionNotification );
-	}
-
 	if ( window?.__experimentalEnableBlockExperiments ) {
 		// Blocks added here are only registered when the "Block experiments"
 		// option is enabled in the Gutenberg > Experiments settings page.

package/src/latest-posts/edit.jsx

@@ -164,7 +164,7 @@ function Controls( { attributes, setAttributes } ) {
 			return;
 		}
 		// Categories that are already will be objects, while new additions will be strings (the name).
-		// allCategories nomalizes the array so that they are all objects.
+		// allCategories normalizes the array so that they are all objects.
 		const allCategories = tokens.map( ( token ) => {
 			return typeof token === 'string'
 				? categorySuggestions[ token ]

package/src/latest-posts/test/{deprecated.js → deprecated.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 // Load block support registration filters.
 import '@wordpress/block-editor';
 import {

package/src/list/index.php

@@ -15,7 +15,7 @@
  * @see https://github.com/WordPress/gutenberg/issues/12420
  *
  * @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/list/style.scss

@@ -6,5 +6,5 @@ ul {
 }
 
 :root :where(.wp-block-list.has-background) {
-	padding: $block-bg-padding--v $block-bg-padding--h;
+	padding: $block-bg-padding;
 }

package/src/list-item/edit.jsx

@@ -14,29 +14,24 @@ import {
 	formatIndent,
 } from '@wordpress/icons';
 import { useMergeRefs } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useRegistry } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
+import { useEnter, useTab, useMultiSelectTab, useMerge } from './hooks';
 import {
-	useEnter,
-	useSpace,
-	useIndentListItem,
-	useOutdentListItem,
-	useMerge,
-} from './hooks';
+	indentListItems,
+	outdentListItems,
+	getIndentTarget,
+	getOutdentTarget,
+} from './utils';
 
 export function IndentUI( { clientId } ) {
-	const indentListItem = useIndentListItem( clientId );
-	const outdentListItem = useOutdentListItem();
+	const registry = useRegistry();
 	const { canIndent, canOutdent } = useSelect(
 		( select ) => {
-			const { getBlockIndex, getBlockRootClientId, getBlockName } =
-				select( blockEditorStore );
+			const storeSelect = select( blockEditorStore );
 			return {
-				canIndent: getBlockIndex( clientId ) > 0,
-				canOutdent:
-					getBlockName(
-						getBlockRootClientId( getBlockRootClientId( clientId ) )
-					) === 'core/list-item',
+				canIndent: !! getIndentTarget( storeSelect, clientId ),
+				canOutdent: !! getOutdentTarget( storeSelect, clientId ),
 			};
 		},
 		[ clientId ]
@@ -50,7 +45,7 @@ export function IndentUI( { clientId } ) {
 				shortcut={ displayShortcut.shift( 'Tab' ) }
 				description={ __( 'Outdent list item' ) }
 				disabled={ ! canOutdent }
-				onClick={ () => outdentListItem() }
+				onClick={ () => outdentListItems( registry ) }
 			/>
 			<ToolbarButton
 				icon={ isRTL() ? formatIndentRTL : formatIndent }
@@ -58,7 +53,7 @@ export function IndentUI( { clientId } ) {
 				shortcut="Tab"
 				description={ __( 'Indent list item' ) }
 				disabled={ ! canIndent }
-				onClick={ () => indentListItem() }
+				onClick={ () => indentListItems( registry, clientId ) }
 			/>
 		</>
 	);
@@ -77,13 +72,18 @@ export default function ListItemEdit( {
 		__unstableDisableDropZone: true,
 	} );
 	const useEnterRef = useEnter( clientId );
-	const useSpaceRef = useSpace( clientId );
+	const useTabRef = useTab();
+	const useMultiSelectTabRef = useMultiSelectTab( clientId );
 	const onMerge = useMerge( clientId, mergeBlocks );
 	return (
 		<>
 			<li { ...innerBlocksProps }>
 				<RichText
-					ref={ useMergeRefs( [ useEnterRef, useSpaceRef ] ) }
+					ref={ useMergeRefs( [
+						useEnterRef,
+						useTabRef,
+						useMultiSelectTabRef,
+					] ) }
 					identifier="content"
 					tagName="div"
 					onChange={ ( nextContent ) =>

package/src/list-item/hooks/index.js

@@ -1,5 +1,4 @@
-export { default as useOutdentListItem } from './use-outdent-list-item';
-export { default as useIndentListItem } from './use-indent-list-item';
 export { default as useEnter } from './use-enter';
-export { default as useSpace } from './use-space';
+export { default as useTab } from './use-tab';
+export { default as useMultiSelectTab } from './use-multi-select-tab';
 export { default as useMerge } from './use-merge';

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

@@ -5,82 +5,94 @@ import {
 } from '@wordpress/blocks';
 import { useRefEffect } from '@wordpress/compose';
 import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
-import { ENTER } from '@wordpress/keycodes';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import useOutdentListItem from './use-outdent-list-item';
+import { outdentListItems, getOutdentTarget } from '../utils';
 import { unlock } from '../../lock-unlock';
 
 const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default function useEnter( clientId ) {
-	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const {
-		getBlock,
-		getBlockAttributes,
-		getBlockRootClientId,
-		getBlockIndex,
-		getBlockName,
-	} = useSelect( blockEditorStore );
-	const outdentListItem = useOutdentListItem();
-	return useRefEffect( ( element ) => {
-		function onKeyDown( event ) {
-			if ( event.defaultPrevented || event.keyCode !== ENTER ) {
-				return;
-			}
-			const { content } = getBlockAttributes( clientId ) ?? {};
-			if ( content?.length ) {
-				return;
-			}
-			event.preventDefault();
-			const canOutdent =
-				getBlockName(
-					getBlockRootClientId( getBlockRootClientId( clientId ) )
-				) === 'core/list-item';
-			if ( canOutdent ) {
-				outdentListItem();
-				return;
+	const registry = useRegistry();
+	return useRefEffect(
+		( element ) => {
+			function onBeforeInput( event ) {
+				if (
+					event.defaultPrevented ||
+					event.inputType !== 'insertParagraph'
+				) {
+					return;
+				}
+				const select = registry.select( blockEditorStore );
+				const {
+					getBlock,
+					getBlockAttributes,
+					getBlockRootClientId,
+					getBlockIndex,
+				} = select;
+				const { replaceBlocks, selectionChange } =
+					registry.dispatch( blockEditorStore );
+
+				const { content } = getBlockAttributes( clientId ) ?? {};
+				if ( content?.length ) {
+					return;
+				}
+				event.preventDefault();
+				const canOutdent = !! getOutdentTarget( select, clientId );
+				if ( canOutdent ) {
+					outdentListItems( registry );
+					return;
+				}
+				// Here we are in top level list so we need to split.
+				const topParentListBlock = getBlock(
+					getBlockRootClientId( clientId )
+				);
+				const blockIndex = getBlockIndex( clientId );
+				const head = cloneBlock( {
+					...topParentListBlock,
+					innerBlocks: topParentListBlock.innerBlocks.slice(
+						0,
+						blockIndex
+					),
+				} );
+				const middle = createBlock( getDefaultBlockName() );
+				// Last list item might contain a `list` block innerBlock
+				// In that case append remaining innerBlocks blocks.
+				const after = [
+					...( topParentListBlock.innerBlocks[ blockIndex ]
+						.innerBlocks[ 0 ]?.innerBlocks || [] ),
+					...topParentListBlock.innerBlocks.slice( blockIndex + 1 ),
+				];
+				const tail = after.length
+					? [
+							cloneBlock( {
+								...topParentListBlock,
+								innerBlocks: after,
+							} ),
+					  ]
+					: [];
+				replaceBlocks(
+					topParentListBlock.clientId,
+					[ head, middle, ...tail ],
+					1
+				);
+				// We manually change the selection here because we are replacing
+				// a different block than the selected one.
+				selectionChange( middle.clientId );
 			}
-			// Here we are in top level list so we need to split.
-			const topParentListBlock = getBlock(
-				getBlockRootClientId( clientId )
-			);
-			const blockIndex = getBlockIndex( clientId );
-			const head = cloneBlock( {
-				...topParentListBlock,
-				innerBlocks: topParentListBlock.innerBlocks.slice(
-					0,
-					blockIndex
-				),
-			} );
-			const middle = createBlock( getDefaultBlockName() );
-			// Last list item might contain a `list` block innerBlock
-			// In that case append remaining innerBlocks blocks.
-			const after = [
-				...( topParentListBlock.innerBlocks[ blockIndex ]
-					.innerBlocks[ 0 ]?.innerBlocks || [] ),
-				...topParentListBlock.innerBlocks.slice( blockIndex + 1 ),
-			];
-			const tail = after.length
-				? [
-						cloneBlock( {
-							...topParentListBlock,
-							innerBlocks: after,
-						} ),
-				  ]
-				: [];
-			replaceBlocks(
-				topParentListBlock.clientId,
-				[ head, middle, ...tail ],
-				1
-			);
-			// We manually change the selection here because we are replacing
-			// a different block than the selected one.
-			selectionChange( middle.clientId );
-		}
 
-		// 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
+			);
+		},
+		[ clientId, registry ]
+	);
 }