@wordpress/block-library 9.40.2-next.v.202602241322.0 → 9.40.2

package/src/navigation/edit/index.js

@@ -952,16 +952,7 @@ function Navigation( {
 
 	if ( hasUnsavedBlocks && ! isCreatingNavigationMenu ) {
 		return (
-			<TagName
-				{ ...blockProps }
-				aria-describedby={
-					! isPlaceholder ? accessibleDescriptionId : undefined
-				}
-			>
-				<AccessibleDescription id={ accessibleDescriptionId }>
-					{ __( 'Unsaved Navigation Menu.' ) }
-				</AccessibleDescription>
-
+			<>
 				<MenuInspectorControls
 					clientId={ clientId }
 					createNavigationMenuIsSuccess={
@@ -978,26 +969,36 @@ function Navigation( {
 					blockEditingMode={ blockEditingMode }
 				/>
 				{ blockEditingMode === 'default' && stylingInspectorControls }
-				<ResponsiveWrapper
-					id={ clientId }
-					onToggle={ setResponsiveMenuVisibility }
-					isOpen={ isResponsiveMenuOpen }
-					hasIcon={ hasIcon }
-					icon={ icon }
-					isResponsive={ isResponsive }
-					isHiddenByDefault={ isHiddenByDefault }
-					overlayBackgroundColor={ overlayBackgroundColor }
-					overlayTextColor={ overlayTextColor }
-					overlay={ overlay }
-					onNavigateToEntityRecord={ onNavigateToEntityRecord }
+				<TagName
+					{ ...blockProps }
+					aria-describedby={
+						! isPlaceholder ? accessibleDescriptionId : undefined
+					}
 				>
-					<UnsavedInnerBlocks
-						createNavigationMenu={ createNavigationMenu }
-						blocks={ uncontrolledInnerBlocks }
-						hasSelection={ isSelected || isInnerBlockSelected }
-					/>
-				</ResponsiveWrapper>
-			</TagName>
+					<AccessibleDescription id={ accessibleDescriptionId }>
+						{ __( 'Unsaved Navigation Menu.' ) }
+					</AccessibleDescription>
+					<ResponsiveWrapper
+						id={ clientId }
+						onToggle={ setResponsiveMenuVisibility }
+						isOpen={ isResponsiveMenuOpen }
+						hasIcon={ hasIcon }
+						icon={ icon }
+						isResponsive={ isResponsive }
+						isHiddenByDefault={ isHiddenByDefault }
+						overlayBackgroundColor={ overlayBackgroundColor }
+						overlayTextColor={ overlayTextColor }
+						overlay={ overlay }
+						onNavigateToEntityRecord={ onNavigateToEntityRecord }
+					>
+						<UnsavedInnerBlocks
+							createNavigationMenu={ createNavigationMenu }
+							blocks={ uncontrolledInnerBlocks }
+							hasSelection={ isSelected || isInnerBlockSelected }
+						/>
+					</ResponsiveWrapper>
+				</TagName>
+			</>
 		);
 	}
 
@@ -1005,7 +1006,7 @@ function Navigation( {
 	// TODO - the user should be able to select a new one?
 	if ( ref && isNavigationMenuMissing ) {
 		return (
-			<TagName { ...blockProps }>
+			<>
 				<MenuInspectorControls
 					clientId={ clientId }
 					createNavigationMenuIsSuccess={
@@ -1021,10 +1022,12 @@ function Navigation( {
 					isLoading={ isLoading }
 					blockEditingMode={ blockEditingMode }
 				/>
-				<DeletedNavigationWarning
-					onCreateNew={ createUntitledEmptyNavigationMenu }
-				/>
-			</TagName>
+				<TagName { ...blockProps }>
+					<DeletedNavigationWarning
+						onCreateNew={ createUntitledEmptyNavigationMenu }
+					/>
+				</TagName>
+			</>
 		);
 	}
 
@@ -1074,105 +1077,106 @@ function Navigation( {
 	}
 
 	return (
-		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
-			<RecursionProvider uniqueId={ recursionId }>
-				<MenuInspectorControls
-					clientId={ clientId }
-					createNavigationMenuIsSuccess={
-						createNavigationMenuIsSuccess
-					}
-					createNavigationMenuIsError={ createNavigationMenuIsError }
-					currentMenuId={ ref }
-					isNavigationMenuMissing={ isNavigationMenuMissing }
-					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
-					onCreateNew={ createUntitledEmptyNavigationMenu }
-					onSelectClassicMenu={ onSelectClassicMenu }
-					onSelectNavigationMenu={ onSelectNavigationMenu }
-					isLoading={ isLoading }
-					blockEditingMode={ blockEditingMode }
-				/>
-				{ blockEditingMode === 'default' && stylingInspectorControls }
-				{ blockEditingMode === 'contentOnly' && isEntityAvailable && (
-					<NavigationAddPageButton clientId={ clientId } />
-				) }
-				{ blockEditingMode === 'default' && isEntityAvailable && (
-					<InspectorControls group="advanced">
-						{ hasResolvedCanUserUpdateNavigationMenu &&
-							canUserUpdateNavigationMenu && (
-								<NavigationMenuNameControl />
-							) }
-						{ hasResolvedCanUserDeleteNavigationMenu &&
-							canUserDeleteNavigationMenu && (
-								<NavigationMenuDeleteControl
-									onDelete={ () => {
-										replaceInnerBlocks( clientId, [] );
-										showNavigationMenuStatusNotice(
-											__(
-												'Navigation Menu successfully deleted.'
-											)
-										);
-									} }
-								/>
-							) }
-						<ManageMenusButton
-							disabled={ isManageMenusButtonDisabled }
-							className="wp-block-navigation-manage-menus-button"
-						/>
-					</InspectorControls>
-				) }
-
-				<TagName
-					{ ...blockProps }
-					aria-describedby={
-						! isPlaceholder && ! isLoading
-							? accessibleDescriptionId
-							: undefined
-					}
-				>
-					{ isLoading && ! isHiddenByDefault && (
-						<div className="wp-block-navigation__loading-indicator-container">
-							<Spinner className="wp-block-navigation__loading-indicator" />
-						</div>
-					) }
-
-					{ ( ! isLoading || isHiddenByDefault ) && (
-						<>
-							<AccessibleMenuDescription
-								id={ accessibleDescriptionId }
-							/>
-							<ResponsiveWrapper
-								id={ clientId }
-								onToggle={ setResponsiveMenuVisibility }
-								hasIcon={ hasIcon }
-								icon={ icon }
-								isOpen={ isResponsiveMenuOpen }
-								isResponsive={ isResponsive }
-								isHiddenByDefault={ isHiddenByDefault }
-								overlayBackgroundColor={
-									overlayBackgroundColor
-								}
-								overlayTextColor={ overlayTextColor }
-								overlay={ overlay }
-								onNavigateToEntityRecord={
-									onNavigateToEntityRecord
-								}
-							>
-								{ isEntityAvailable && (
-									<NavigationInnerBlocks
-										clientId={ clientId }
-										hasCustomPlaceholder={
-											!! CustomPlaceholder
-										}
-										templateLock={ templateLock }
-										orientation={ orientation }
+		<>
+			<MenuInspectorControls
+				clientId={ clientId }
+				createNavigationMenuIsSuccess={ createNavigationMenuIsSuccess }
+				createNavigationMenuIsError={ createNavigationMenuIsError }
+				currentMenuId={ ref }
+				isNavigationMenuMissing={ isNavigationMenuMissing }
+				isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
+				onCreateNew={ createUntitledEmptyNavigationMenu }
+				onSelectClassicMenu={ onSelectClassicMenu }
+				onSelectNavigationMenu={ onSelectNavigationMenu }
+				isLoading={ isLoading }
+				blockEditingMode={ blockEditingMode }
+			/>
+			{ blockEditingMode === 'default' && stylingInspectorControls }
+			<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
+				<RecursionProvider uniqueId={ recursionId }>
+					{ blockEditingMode === 'contentOnly' &&
+						isEntityAvailable && (
+							<NavigationAddPageButton clientId={ clientId } />
+						) }
+					{ blockEditingMode === 'default' && isEntityAvailable && (
+						<InspectorControls group="advanced">
+							{ hasResolvedCanUserUpdateNavigationMenu &&
+								canUserUpdateNavigationMenu && (
+									<NavigationMenuNameControl />
+								) }
+							{ hasResolvedCanUserDeleteNavigationMenu &&
+								canUserDeleteNavigationMenu && (
+									<NavigationMenuDeleteControl
+										onDelete={ () => {
+											replaceInnerBlocks( clientId, [] );
+											showNavigationMenuStatusNotice(
+												__(
+													'Navigation Menu successfully deleted.'
+												)
+											);
+										} }
 									/>
 								) }
-							</ResponsiveWrapper>
-						</>
+							<ManageMenusButton
+								disabled={ isManageMenusButtonDisabled }
+								className="wp-block-navigation-manage-menus-button"
+							/>
+						</InspectorControls>
 					) }
-				</TagName>
-			</RecursionProvider>
-		</EntityProvider>
+
+					<TagName
+						{ ...blockProps }
+						aria-describedby={
+							! isPlaceholder && ! isLoading
+								? accessibleDescriptionId
+								: undefined
+						}
+					>
+						{ isLoading && ! isHiddenByDefault && (
+							<div className="wp-block-navigation__loading-indicator-container">
+								<Spinner className="wp-block-navigation__loading-indicator" />
+							</div>
+						) }
+
+						{ ( ! isLoading || isHiddenByDefault ) && (
+							<>
+								<AccessibleMenuDescription
+									id={ accessibleDescriptionId }
+								/>
+								<ResponsiveWrapper
+									id={ clientId }
+									onToggle={ setResponsiveMenuVisibility }
+									hasIcon={ hasIcon }
+									icon={ icon }
+									isOpen={ isResponsiveMenuOpen }
+									isResponsive={ isResponsive }
+									isHiddenByDefault={ isHiddenByDefault }
+									overlayBackgroundColor={
+										overlayBackgroundColor
+									}
+									overlayTextColor={ overlayTextColor }
+									overlay={ overlay }
+									onNavigateToEntityRecord={
+										onNavigateToEntityRecord
+									}
+								>
+									{ isEntityAvailable && (
+										<NavigationInnerBlocks
+											clientId={ clientId }
+											hasCustomPlaceholder={
+												!! CustomPlaceholder
+											}
+											templateLock={ templateLock }
+											orientation={ orientation }
+										/>
+									) }
+								</ResponsiveWrapper>
+							</>
+						) }
+					</TagName>
+				</RecursionProvider>
+			</EntityProvider>
+		</>
 	);
 }
 

package/src/navigation/edit/navigation-menu-selector.js

@@ -67,7 +67,8 @@ function NavigationMenuSelector( {
 	const [ currentTitle ] = useEntityProp(
 		'postType',
 		'wp_navigation',
-		'title'
+		'title',
+		currentMenuId
 	);
 
 	const menuChoices = useMemo( () => {

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.
@@ -697,19 +707,21 @@ class WP_Navigation_Block_Renderer {
 		if ( ! empty( $attributes['overlay'] ) ) {
 			// Get blocks from the overlay template part.
 			$overlay_blocks = static::get_overlay_blocks_from_template_part( $attributes['overlay'], $attributes );
-			// Check if overlay contains a navigation-overlay-close block.
-			$has_custom_overlay_close_block = block_core_navigation_block_tree_has_block_type(
-				$overlay_blocks,
-				'core/navigation-overlay-close',
-				array( 'core/navigation' ) // Skip navigation blocks, as they cannot contain an overlay close block
-			);
 			// Render template part blocks directly without navigation container wrapper.
 			$overlay_blocks_html = static::get_template_part_blocks_html( $overlay_blocks );
+			// Check if overlay contains a navigation-overlay-close block (detect in rendered HTML so it works with patterns).
+			$has_custom_overlay_close_block = block_core_navigation_overlay_html_has_close_block( $overlay_blocks_html );
 			// Add Interactivity API directives to the overlay close block if present.
 			if ( $has_custom_overlay_close_block && $is_interactive ) {
 				$tags                = new WP_HTML_Tag_Processor( $overlay_blocks_html );
 				$overlay_blocks_html = block_core_navigation_add_directives_to_overlay_close( $tags );
 			}
+			// Images in the overlay are hidden until the menu is opened. Pre-set
+			// fetchpriority="low" so that when wp_filter_content_tags() processes the
+			// parent template part, it sees the attribute already present and calls
+			// wp_get_loading_optimization_attributes() with fetchpriority="low", which both prevents
+			// fetchpriority="high" from being added and stops the LCP counter from being incremented.
+			$overlay_blocks_html = block_core_navigation_set_overlay_image_fetch_priority( $overlay_blocks_html );
 		}
 
 		$has_custom_overlay = ! empty( $overlay_blocks_html );
@@ -1088,6 +1100,28 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 	}
 }
 
+/**
+ * Checks if the overlay HTML contains a navigation-overlay-close block.
+ *
+ * Uses WP_HTML_Tag_Processor to detect the close button in rendered output,
+ * so it works when the overlay uses patterns (pattern content is rendered at
+ * output time, not in the block tree).
+ *
+ * @since 7.0.0
+ *
+ * @param string $html The rendered overlay HTML.
+ * @return bool True if a close button element is found.
+ */
+function block_core_navigation_overlay_html_has_close_block( $html ) {
+	$tags = new WP_HTML_Tag_Processor( $html );
+	return $tags->next_tag(
+		array(
+			'tag_name'   => 'BUTTON',
+			'class_name' => 'wp-block-navigation-overlay-close',
+		)
+	);
+}
+
 /**
  * Add Interactivity API directives to the navigation-overlay-close block
  * markup using the Tag Processor.
@@ -1111,6 +1145,25 @@ function block_core_navigation_add_directives_to_overlay_close( $tags ) {
 	return $tags->get_updated_html();
 }
 
+/**
+ * Sets fetchpriority="low" on all IMG tags within the navigation overlay.
+ *
+ * Images in the overlay are hidden until the menu is opened, so they should
+ * not compete with any actual LCP element image on the page.
+ *
+ * @since 7.0.0
+ *
+ * @param string $overlay_blocks_html The rendered HTML of the overlay blocks.
+ * @return string Modified HTML with fetchpriority="low" on all IMG tags.
+ */
+function block_core_navigation_set_overlay_image_fetch_priority( string $overlay_blocks_html ): string {
+	$tags = new WP_HTML_Tag_Processor( $overlay_blocks_html );
+	while ( $tags->next_tag( 'IMG' ) ) {
+		$tags->set_attribute( 'fetchpriority', 'low' );
+	}
+	return $tags->get_updated_html();
+}
+
 /**
  * Add Interactivity API directives to the navigation-submenu and page-list
  * blocks markup using the Tag Processor.
@@ -1146,8 +1199,8 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		$open_on_hover       = 'hover' === $computed_visibility;
 
 		if ( $open_on_hover ) {
-			$tags->set_attribute( 'data-wp-on--mouseenter', 'actions.openMenuOnHover' );
-			$tags->set_attribute( 'data-wp-on--mouseleave', 'actions.closeMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on--pointerenter', 'actions.openMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on--pointerleave', 'actions.closeMenuOnHover' );
 		}
 
 		// Add directives to the toggle submenu button.

package/src/navigation/style.scss

@@ -247,7 +247,13 @@ $navigation-icon-size: 24px;
 	}
 
 	// Show submenus on hover unless they open on click.
-	&:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
+	// Restricted to true-hover devices to prevent sticky touch-hover on mobile.
+	@media (hover: hover) {
+		&:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
+			@include show-submenu;
+			min-width: 200px;
+		}
+	}
 	// Keep submenus open when focus is within.
 	&:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
 	// Show submenus on click.
@@ -694,8 +700,18 @@ button.wp-block-navigation-item__content {
 					display: none;
 				}
 
+				// Override justification dropdown menu positioning rules inside custom overlays.
+				// Mirrors the protection at lines 674-678 for default overlays, which does not
+				// apply here. Prevents .items-justified-right descendant rules from cascading
+				// right: 0 into the overlay and anchoring submenus off the left edge of the viewport.
+				// See: https://github.com/WordPress/gutenberg/issues/76276
 				.wp-block-navigation__overlay-container {
 					display: block;
+
+					.wp-block-navigation__submenu-container {
+						right: auto;
+						left: 0;
+					}
 				}
 			}
 		}

package/src/navigation/view.js

@@ -82,7 +82,12 @@ const { state, actions } = store(
 			},
 		},
 		actions: {
-			openMenuOnHover() {
+			openMenuOnHover( event ) {
+				// Pointer events from touch should not open the submenu on hover;
+				// touch devices toggle via the click action instead.
+				if ( event?.pointerType === 'touch' ) {
+					return;
+				}
 				const { type, overlayOpenedBy } = getContext();
 				if (
 					type === 'submenu' &&
@@ -93,7 +98,10 @@ const { state, actions } = store(
 					actions.openMenu( 'hover' );
 				}
 			},
-			closeMenuOnHover() {
+			closeMenuOnHover( event ) {
+				if ( event?.pointerType === 'touch' ) {
+					return;
+				}
 				const { type, overlayOpenedBy } = getContext();
 				if (
 					type === 'submenu' &&
@@ -128,6 +136,10 @@ const { state, actions } = store(
 				if ( menuOpenedBy.click || menuOpenedBy.focus ) {
 					actions.closeMenu( 'click' );
 					actions.closeMenu( 'focus' );
+					// Also clear hover in case it was set by a synthetic pointerenter
+					// on touch (e.g. the browser-fired mouseenter-equivalent before
+					// the click event), ensuring the submenu fully closes.
+					actions.closeMenu( 'hover' );
 				} else {
 					ctx.previousFocus = ref;
 					actions.openMenu( 'click' );

package/src/navigation-link/edit.js

@@ -177,6 +177,7 @@ export default function NavigationLinkEdit( {
 		clientId,
 		attributes,
 		setAttributes,
+		allowTextUpdate: true,
 	} );
 
 	const [ isInvalid, isDraft ] = useIsInvalidLink(

package/src/navigation-link/editor.scss

@@ -150,3 +150,21 @@
 .navigation-link-control__error-text {
 	color: $alert-red;
 }
+
+.navigation-link-to__action-button {
+	grid-column: auto;
+	// When this is the last button AND in an odd position among its class
+	// siblings, it's unpaired — span the full grid row.
+	&:nth-last-child(1 of #{&}):nth-child(odd of #{&}) {
+		grid-column: 1 / -1;
+	}
+
+	// Artificially increase specificity to override `justify-content` styles.
+	// Not ideal, but it shouldn't be necessary once switching to the new `Button`
+	// component from `@wordpress/ui`.
+	&#{&}#{&} {
+		justify-content: center;
+	}
+
+}
+

package/src/navigation-link/shared/controls.js

@@ -5,7 +5,6 @@ import {
 	Button,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalHStack as HStack,
 	CheckboxControl,
 	TextControl,
 	TextareaControl,
@@ -150,7 +149,7 @@ export function Controls( {
 
 	// Check if URL is viewable (not hash link or other relative path like ./ or ../)
 	const isViewableUrl =
-		url &&
+		!! url &&
 		( ! isHashLink( url ) ||
 			( isRelativePath( url ) && ! url.startsWith( '/' ) ) );
 
@@ -158,11 +157,6 @@ export function Controls( {
 	const viewUrl =
 		isViewableUrl && url.startsWith( '/' ) && homeUrl ? homeUrl + url : url;
 
-	const entityTypeName = getEntityTypeName(
-		attributes.type,
-		attributes.kind
-	);
-
 	return (
 		<ToolsPanel
 			label={ __( 'Settings' ) }
@@ -220,61 +214,6 @@ export function Controls( {
 							help={ helpText ? helpText : undefined }
 						/>
 					</ToolsPanelItem>
-
-					{ url && (
-						<HStack
-							className="navigation-link-to__actions"
-							alignment="left"
-							justify="left"
-							style={ { gridColumn: '1 / -1' } }
-						>
-							{ hasUrlBinding &&
-								isBoundEntityAvailable &&
-								entityRecord?.id &&
-								attributes.kind === 'post-type' &&
-								onNavigateToEntityRecord && (
-									<Button
-										size="compact"
-										variant="secondary"
-										onClick={ () => {
-											onNavigateToEntityRecord( {
-												postId: entityRecord.id,
-												postType: attributes.type,
-											} );
-										} }
-										__next40pxDefaultSize
-									>
-										{ sprintf(
-											/* translators: %s: entity type (e.g., "page", "post", "category") */
-											__( 'Edit %s' ),
-											entityTypeName
-										) }
-									</Button>
-								) }
-							{ isViewableUrl && (
-								<Button
-									size="compact"
-									variant="secondary"
-									href={ viewUrl }
-									target="_blank"
-									icon={ external }
-									iconPosition="right"
-									__next40pxDefaultSize
-								>
-									{ sprintf(
-										/* translators: %s: entity type (e.g., "page", "post", "category") or "link" for external links */
-										__( 'View %s' ),
-										attributes.kind &&
-											attributes.type &&
-											attributes.kind !== 'custom'
-											? entityTypeName
-											: __( 'link' )
-									) }
-								</Button>
-							) }
-						</HStack>
-					) }
-
 					<ToolsPanelItem
 						hasValue={ () => !! opensInNewTab }
 						label={ __( 'Open in new tab' ) }
@@ -291,6 +230,40 @@ export function Controls( {
 							}
 						/>
 					</ToolsPanelItem>
+
+					{ !! url &&
+						hasUrlBinding &&
+						isBoundEntityAvailable &&
+						entityRecord?.id &&
+						attributes.kind === 'post-type' &&
+						onNavigateToEntityRecord && (
+							<Button
+								variant="secondary"
+								onClick={ () => {
+									onNavigateToEntityRecord( {
+										postId: entityRecord.id,
+										postType: attributes.type,
+									} );
+								} }
+								__next40pxDefaultSize
+								className="navigation-link-to__action-button"
+							>
+								{ __( 'Edit' ) }
+							</Button>
+						) }
+					{ isViewableUrl && (
+						<Button
+							variant="secondary"
+							href={ viewUrl }
+							target="_blank"
+							icon={ external }
+							iconPosition="right"
+							__next40pxDefaultSize
+							className="navigation-link-to__action-button"
+						>
+							{ __( 'View' ) }
+						</Button>
+					) }
 				</>
 			) }