@wordpress/block-library 9.45.0 → 9.45.1-next.v.202605131006.0

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

@@ -0,0 +1,337 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { useRegistry, useSelect } from '@wordpress/data';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+function normalizeImageBlockCaption( caption ) {
+	if ( typeof caption !== 'string' ) {
+		return '';
+	}
+
+	const textContent = stripHTML( caption ).trim();
+
+	if ( ! textContent ) {
+		return '';
+	}
+
+	return caption.replace( /\n/g, '<br>' );
+}
+
+function getAttachmentCaption( attachment ) {
+	const caption = attachment?.caption;
+
+	if ( typeof caption === 'string' ) {
+		return normalizeImageBlockCaption( caption );
+	}
+
+	if (
+		caption &&
+		typeof caption === 'object' &&
+		Object.hasOwn( caption, 'raw' )
+	) {
+		return normalizeImageBlockCaption( caption.raw );
+	}
+
+	return undefined;
+}
+
+export function getImageBlockMetadataFromAttachment( attachment ) {
+	return {
+		alt:
+			typeof attachment?.alt_text === 'string'
+				? attachment.alt_text
+				: attachment?.alt || '',
+		caption: getAttachmentCaption( attachment ),
+	};
+}
+
+function normalizeMetadataAttribute( value ) {
+	return value || '';
+}
+
+export function getSyncedImageBlockAttributes(
+	currentAttributes,
+	originalAttachment,
+	updatedAttachment
+) {
+	if ( ! originalAttachment || ! updatedAttachment ) {
+		return {};
+	}
+
+	const originalMetadata =
+		getImageBlockMetadataFromAttachment( originalAttachment );
+	const updatedMetadata =
+		getImageBlockMetadataFromAttachment( updatedAttachment );
+	const syncedAttributes = {};
+
+	const normalizedCurrentAlt = normalizeMetadataAttribute(
+		currentAttributes.alt
+	);
+	if (
+		originalMetadata.alt !== updatedMetadata.alt &&
+		( normalizedCurrentAlt === originalMetadata.alt ||
+			! normalizedCurrentAlt )
+	) {
+		syncedAttributes.alt = updatedMetadata.alt;
+	}
+
+	const normalizedCurrentCaption = normalizeMetadataAttribute(
+		currentAttributes.caption
+	);
+	if (
+		originalMetadata.caption !== undefined &&
+		updatedMetadata.caption !== undefined &&
+		originalMetadata.caption !== updatedMetadata.caption &&
+		( normalizedCurrentCaption === originalMetadata.caption ||
+			! normalizedCurrentCaption )
+	) {
+		syncedAttributes.caption = updatedMetadata.caption || undefined;
+	}
+
+	return syncedAttributes;
+}
+
+const { openMediaEditorModalKey } = unlock( blockEditorPrivateApis );
+// Caption sync needs `caption.raw`; view/default attachment records can contain
+// only rendered caption data or be tied to an in-flight stale resolution.
+const ATTACHMENT_EDIT_QUERY = { context: 'edit' };
+
+function getAttachmentFallbackForEmptyBlockMetadata( { alt, caption } ) {
+	const attachment = {};
+
+	if ( ! alt ) {
+		attachment.alt_text = '';
+	}
+
+	if ( ! caption?.toString() ) {
+		attachment.caption = '';
+	}
+
+	return Object.keys( attachment ).length ? attachment : undefined;
+}
+
+function hasKnownAttachmentMetadata( attachment ) {
+	if ( ! attachment ) {
+		return false;
+	}
+
+	const hasKnownAlt =
+		typeof attachment.alt_text === 'string' ||
+		typeof attachment.alt === 'string';
+	const hasKnownCaption =
+		getImageBlockMetadataFromAttachment( attachment ).caption !== undefined;
+
+	return hasKnownAlt && hasKnownCaption;
+}
+
+export function useOpenImageMediaEditorModal( { attributes, setAttributes } ) {
+	// 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;
+	const registry = useRegistry();
+	const openMediaEditorModal = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()[ openMediaEditorModalKey ],
+		[]
+	);
+	// Track the block's current alt and caption in a ref so handleMediaUpdate
+	// can read the latest values without being listed as a dependency (which
+	// would recreate the callback and re-register the onUpdate handler on every
+	// keystroke while the modal is open).
+	const blockMetadataRef = useRef( { alt, caption: caption?.toString() } );
+	// Snapshot of the attachment's metadata taken just before the modal opens,
+	// used as the baseline for detecting what changed during the editing session.
+	const mediaEditorMetadataBaselineRef = useRef();
+	// Incremented on every handleMediaUpdate call; stale async continuations
+	// check against this to bail out if a newer update has since started.
+	const mediaEditorMetadataSyncRequestRef = useRef( 0 );
+
+	useEffect( () => {
+		blockMetadataRef.current = { alt, caption: caption?.toString() };
+	}, [ alt, caption ] );
+
+	const getCachedAttachmentRecord = useCallback(
+		( attachmentId ) => {
+			const { getEditedEntityRecord, getEntityRecord } =
+				registry.select( coreStore );
+			return (
+				getEditedEntityRecord(
+					'postType',
+					'attachment',
+					attachmentId
+				) ||
+				getEntityRecord(
+					'postType',
+					'attachment',
+					attachmentId,
+					ATTACHMENT_EDIT_QUERY
+				) ||
+				getEntityRecord( 'postType', 'attachment', attachmentId )
+			);
+		},
+		[ registry ]
+	);
+
+	const resolveAttachmentRecord = useCallback(
+		async ( attachmentId ) => {
+			const resolveSelect = registry.resolveSelect( coreStore );
+
+			try {
+				return (
+					( await resolveSelect.getEntityRecord(
+						'postType',
+						'attachment',
+						attachmentId,
+						ATTACHMENT_EDIT_QUERY
+					) ) ||
+					( await resolveSelect.getEntityRecord(
+						'postType',
+						'attachment',
+						attachmentId
+					) )
+				);
+			} catch {
+				return undefined;
+			}
+		},
+		[ registry ]
+	);
+
+	const resolveFreshAttachmentRecord = useCallback(
+		async ( attachmentId ) => {
+			// Bust cached records so resolveAttachmentRecord fetches the
+			// server state that reflects the media editor's saved changes.
+			const { invalidateResolution } = registry.dispatch( coreStore );
+
+			invalidateResolution( 'getEntityRecord', [
+				'postType',
+				'attachment',
+				attachmentId,
+			] );
+			invalidateResolution( 'getEntityRecord', [
+				'postType',
+				'attachment',
+				attachmentId,
+				ATTACHMENT_EDIT_QUERY,
+			] );
+			return resolveAttachmentRecord( attachmentId );
+		},
+		[ registry, resolveAttachmentRecord ]
+	);
+
+	const handleMediaUpdate = useCallback(
+		async ( { id: newId, url: newUrl } ) => {
+			if ( typeof newId !== 'number' ) {
+				return;
+			}
+
+			// Capture and clear the baseline so a rapid second save doesn't
+			// reuse a stale snapshot.
+			const originalAttachment = mediaEditorMetadataBaselineRef.current;
+			mediaEditorMetadataBaselineRef.current = undefined;
+			const syncRequest = ++mediaEditorMetadataSyncRequestRef.current;
+			const nextAttributes = {};
+
+			if ( newId !== id ) {
+				nextAttributes.id = newId;
+				nextAttributes.url = newUrl ?? url;
+			}
+
+			if ( originalAttachment ) {
+				// Fetch fresh server state so the comparison reflects what
+				// the media editor actually saved, not a potentially stale
+				// cache.
+				const resolvedAttachment =
+					await resolveFreshAttachmentRecord( newId );
+
+				// A newer update started while we were awaiting; discard
+				// this one.
+				if (
+					syncRequest !== mediaEditorMetadataSyncRequestRef.current
+				) {
+					return;
+				}
+
+				// 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 resolvedMetadataAttributes =
+					getSyncedImageBlockAttributes(
+						blockMetadataRef.current,
+						originalAttachment,
+						resolvedAttachment
+					);
+
+				if ( Object.keys( resolvedMetadataAttributes ).length ) {
+					Object.assign( nextAttributes, resolvedMetadataAttributes );
+					blockMetadataRef.current = {
+						...blockMetadataRef.current,
+						...resolvedMetadataAttributes,
+					};
+				}
+			}
+
+			if ( Object.keys( nextAttributes ).length ) {
+				setAttributes( nextAttributes );
+			}
+		},
+		[ id, resolveFreshAttachmentRecord, setAttributes, url ]
+	);
+
+	const openImageMediaEditorModal = useCallback( async () => {
+		if ( ! id || ! openMediaEditorModal ) {
+			return;
+		}
+
+		// Snapshot the attachment's current metadata before the user makes
+		// any changes so handleMediaUpdate can compare against it later.
+		// Prefer a freshly resolved edit-context record for accuracy; fall
+		// back to whatever is in the cache, or a minimal object derived from
+		// the block's own attributes when nothing is cached yet.
+		const cachedAttachmentRecord = getCachedAttachmentRecord( id );
+		const fallbackAttachmentRecord =
+			getAttachmentFallbackForEmptyBlockMetadata(
+				blockMetadataRef.current
+			);
+		const resolvedAttachmentRecord = hasKnownAttachmentMetadata(
+			cachedAttachmentRecord
+		)
+			? undefined
+			: await resolveAttachmentRecord( id );
+
+		mediaEditorMetadataBaselineRef.current =
+			resolvedAttachmentRecord ||
+			( hasKnownAttachmentMetadata( cachedAttachmentRecord )
+				? cachedAttachmentRecord
+				: fallbackAttachmentRecord ) ||
+			cachedAttachmentRecord;
+
+		openMediaEditorModal( {
+			id,
+			onUpdate: handleMediaUpdate,
+		} );
+	}, [
+		getCachedAttachmentRecord,
+		handleMediaUpdate,
+		id,
+		openMediaEditorModal,
+		resolveAttachmentRecord,
+	] );
+
+	return id && openMediaEditorModal ? openImageMediaEditorModal : undefined;
+}

package/src/index.js

@@ -296,22 +296,9 @@ const getAllBlocks = () => {
 		blocks.push( playlistTrack );
 	}
 
-	// When in a WordPress context, conditionally
-	// add the classic block and TinyMCE editor
-	// under any of the following conditions:
-	//   - the current post contains a classic block
-	//   - the experiment to disable TinyMCE isn't active.
-	//   - a query argument specifies that TinyMCE should be loaded
-	if (
-		window?.wp?.oldEditor &&
-		( window?.wp?.needsClassicBlock ||
-			! window?.__experimentalDisableTinymce ||
-			!! new URLSearchParams( window?.location?.search ).get(
-				'requiresTinymce'
-			) )
-	) {
-		blocks.push( classic );
-	}
+	// Always register the classic block. Inserter availability is controlled
+	// by the block's `supports.inserter` value in `freeform/init`.
+	blocks.push( classic );
 
 	return blocks.filter( Boolean );
 };

package/src/navigation/index.php

@@ -425,7 +425,11 @@ class WP_Navigation_Block_Renderer {
 			$full_template_part_id = $theme . '//' . $slug;
 			$block_template        = get_block_file_template( $full_template_part_id, 'wp_template_part' );
 			if ( isset( $block_template->content ) ) {
-				$parsed_blocks = parse_blocks( $block_template->content );
+				// Expand shortcodes before parsing blocks, matching the order in
+				// `render_block_core_template_part()`.
+				$content       = shortcode_unautop( $block_template->content );
+				$content       = do_shortcode( $content );
+				$parsed_blocks = parse_blocks( $content );
 				$blocks        = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
 				// Disable overlay menu for any navigation blocks within the overlay to prevent nested overlays.
 				$blocks = static::disable_overlay_menu_for_nested_navigation_blocks( $blocks );
@@ -449,6 +453,12 @@ class WP_Navigation_Block_Renderer {
 		// Re-serialize, and run Block Hooks algorithm to inject hooked blocks.
 		$markup = serialize_blocks( $blocks );
 		$markup = apply_block_hooks_to_content_from_post_object( $markup, $template_part_post );
+
+		// Expand shortcodes before parsing blocks, matching the order in
+		// `render_block_core_template_part()`.
+		$markup = shortcode_unautop( $markup );
+		$markup = do_shortcode( $markup );
+
 		$blocks = parse_blocks( $markup );
 
 		// Disable overlay menu for any navigation blocks within the overlay to prevent nested overlays.

package/src/query/editor.scss

@@ -2,7 +2,6 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 
 .block-library-query-pattern__selection-modal {
 	.block-editor-block-patterns-list {
@@ -25,7 +24,7 @@
 		padding: $grid-unit-20 0;
 		transform: translateY(- $grid-unit-05); // Offsets the top padding on the modal content container
 		margin-bottom: - $grid-unit-05;
-		z-index: z-index(".block-library-query-pattern__selection-search");
+		z-index: 2; // Above the BlockPreview z-index: 1 overlay in the scrolling list.
 	}
 }
 

package/src/shortcode/transforms.js

@@ -2,6 +2,25 @@
  * WordPress dependencies
  */
 import { removep, autop } from '@wordpress/autop';
+import { getBlockTransforms, rawHandler } from '@wordpress/blocks';
+import { next } from '@wordpress/shortcode';
+
+const getShortcodeFromTransforms = () =>
+	getBlockTransforms( 'from' ).filter(
+		( transform ) =>
+			transform.type === 'shortcode' &&
+			transform.blockName !== 'core/shortcode'
+	);
+
+// Single-shortcode only: keeps the transform menu honest (one block in, one
+// block out) and avoids unmatched shortcodes silently falling back to freeform.
+const isSingleShortcode = ( text, tag ) => {
+	const trimmed = text.trim();
+	const match = next( tag, trimmed );
+	return (
+		!! match && match.index === 0 && match.content.length === trimmed.length
+	);
+};
 
 const transforms = {
 	from: [
@@ -26,6 +45,24 @@ const transforms = {
 			priority: 20,
 		},
 	],
+	// One `to` transform per registered shortcode-from block. A single transform
+	// with a dynamic `blocks` list won't work: `isMatch` runs once per
+	// transform, so all targets would surface (or none) regardless of which
+	// shortcode tag the block actually contains.
+	get to() {
+		return getShortcodeFromTransforms().map( ( fromTransform ) => ( {
+			type: 'block',
+			blocks: [ fromTransform.blockName ],
+			isMatch: ( { text } ) => {
+				return []
+					.concat( fromTransform.tag )
+					.some( ( tag ) => isSingleShortcode( text, tag ) );
+			},
+			transform: ( { text } ) => {
+				return rawHandler( { HTML: `<p>${ text.trim() }</p>` } );
+			},
+		} ) );
+	},
 };
 
 export default transforms;

package/src/site-logo/edit.js

@@ -409,6 +409,11 @@ const SiteLogo = ( {
 											} )
 									: () => setIsEditingImage( true )
 							}
+							aria-haspopup={
+								openMediaEditorModal && logoId
+									? 'dialog'
+									: undefined
+							}
 							icon={ crop }
 							label={ __( 'Crop' ) }
 						/>

package/src/table/edit.js

@@ -24,7 +24,7 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	Button,
 	Placeholder,
@@ -91,8 +91,8 @@ const cellAriaLabel = {
 };
 
 const placeholder = {
-	head: __( 'Header label' ),
-	foot: __( 'Footer label' ),
+	head: _x( 'Header label', 'table header' ),
+	foot: _x( 'Footer label', 'table footer' ),
 };
 
 function TSection( { name, ...props } ) {

package/src/template-part/editor.scss

@@ -25,7 +25,7 @@
 	position: sticky;
 	top: 0;
 	padding: $grid-unit-20 0;
-	z-index: z-index(".block-library-template-part__selection-search");
+	z-index: 2; // Above the BlockPreview z-index: 1 overlay in the scrolling list.
 }
 
 // We don't use .is-outline-mode in this case so colors take effect properly in the block editor.