@wordpress/block-library 9.41.0 → 9.41.1-next.v.202603161435.0

package/src/html/modal.js

@@ -10,11 +10,12 @@ import {
 	Flex,
 	Notice,
 	privateApis as componentsPrivateApis,
+	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
-	__experimentalGrid as Grid,
 } from '@wordpress/components';
 import { PlainText, store as blockEditorStore } from '@wordpress/block-editor';
 import { fullscreen, square } from '@wordpress/icons';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -40,6 +41,8 @@ export default function HTMLEditModal( {
 	const [ showUnsavedWarning, setShowUnsavedWarning ] = useState( false );
 	const [ isFullscreen, setIsFullscreen ] = useState( false );
 
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+
 	// Check if user has permission to save scripts and get editor styles
 	const { canUserUseUnfilteredHTML } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
@@ -121,12 +124,7 @@ export default function HTMLEditModal( {
 				__experimentalHideHeader
 			>
 				<Tabs orientation="horizontal" defaultTabId="html">
-					<Grid
-						columns={ 1 }
-						templateRows="auto 1fr auto"
-						gap={ 4 }
-						style={ { height: '100%' } }
-					>
+					<VStack expanded>
 						<HStack
 							justify="space-between"
 							className="block-library-html__modal-header"
@@ -144,15 +142,21 @@ export default function HTMLEditModal( {
 									) }
 								</Tabs.TabList>
 							</div>
-							<div>
-								<Button
-									__next40pxDefaultSize
-									icon={ isFullscreen ? square : fullscreen }
-									label={ __( 'Enable/disable fullscreen' ) }
-									onClick={ toggleFullscreen }
-									variant="tertiary"
-								/>
-							</div>
+							{ ! isMobileViewport && (
+								<div>
+									<Button
+										__next40pxDefaultSize
+										icon={
+											isFullscreen ? square : fullscreen
+										}
+										label={ __(
+											'Enable/disable fullscreen'
+										) }
+										onClick={ toggleFullscreen }
+										variant="tertiary"
+									/>
+								</div>
+							) }
 						</HStack>
 						{ hasRestrictedContent && (
 							<Notice
@@ -165,11 +169,11 @@ export default function HTMLEditModal( {
 								) }
 							</Notice>
 						) }
-						<HStack
-							alignment="stretch"
-							justify="flex-start"
-							spacing={ 4 }
+						<Flex
+							direction={ isMobileViewport ? 'column' : 'row' }
 							className="block-library-html__modal-tabs"
+							align="stretch"
+							gap={ 8 }
 						>
 							<div className="block-library-html__modal-content">
 								<Tabs.TabPanel
@@ -227,7 +231,7 @@ export default function HTMLEditModal( {
 									} ) }
 								/>
 							</div>
-						</HStack>
+						</Flex>
 						<HStack
 							alignment="center"
 							justify="flex-end"
@@ -249,7 +253,7 @@ export default function HTMLEditModal( {
 								{ __( 'Update' ) }
 							</Button>
 						</HStack>
-					</Grid>
+					</VStack>
 				</Tabs>
 			</Modal>
 

package/src/icon/block.json

@@ -59,19 +59,10 @@
 		}
 	},
 	"selectors": {
-		"root": ".wp-block-icon",
-		"color": {
-			"root": ".wp-block-icon svg"
-		},
-		"border": {
-			"root": ".wp-block-icon svg"
-		},
+		"root": ".wp-block-icon svg",
+		"css": ".wp-block-icon",
 		"spacing": {
-			"padding": ".wp-block-icon svg"
-		},
-		"dimensions": {
-			"root": ".wp-block-icon svg",
-			"width": ".wp-block-icon svg"
+			"margin": ".wp-block-icon"
 		}
 	},
 	"style": "wp-block-icon",

package/src/image/edit.js

@@ -159,6 +159,7 @@ export function ImageEdit( {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	function onUploadError( message ) {
 		createErrorNotice( message, { type: 'snackbar' } );
+		setTemporaryURL();
 		setAttributes( {
 			src: undefined,
 			id: undefined,
@@ -167,6 +168,12 @@ export function ImageEdit( {
 		} );
 	}
 
+	function onFilesPreUpload( files ) {
+		if ( files.length === 1 ) {
+			setTemporaryURL( createBlobURL( files[ 0 ] ) );
+		}
+	}
+
 	function onSelectImagesList( images ) {
 		const win = containerRef.current?.ownerDocument.defaultView;
 
@@ -479,6 +486,7 @@ export function ImageEdit( {
 					icon={ <BlockIcon icon={ icon } /> }
 					onSelect={ onSelectImage }
 					onSelectURL={ onSelectURL }
+					onFilesPreUpload={ onFilesPreUpload }
 					onError={ onUploadError }
 					placeholder={ placeholder }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }

package/src/image/image.js

@@ -323,20 +323,15 @@ export default function Image( {
 					  )
 					: null;
 
-			// Check edit permissions. When the media editor experiment is enabled,
-			// use getEntityRecordPermissions which checks via canUser API.
-			// Only check when the image is selected to avoid unnecessary API requests.
+			// Check edit permissions when the media editor experiment is enabled.
+			// Only check when imageRecord is available to avoid unnecessary API requests.
 			let canEdit = false;
-			if ( id && isSingleSelected && window?.__experimentalMediaEditor ) {
-				const { getEntityRecordPermissions } = unlock(
-					select( coreStore )
-				);
-				const permissions = getEntityRecordPermissions(
-					'postType',
-					'attachment',
-					id
-				);
-				canEdit = permissions?.update || false;
+			if ( imageRecord && window?.__experimentalMediaEditor ) {
+				canEdit = !! select( coreStore ).canUser( 'update', {
+					kind: 'postType',
+					name: 'attachment',
+					id,
+				} );
 			}
 
 			return {

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

@@ -18,7 +18,7 @@ import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
-import { isBlobURL } from '@wordpress/blob';
+import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
 import { media as icon } from '@wordpress/icons';
 
@@ -82,6 +82,12 @@ function PlaceholderContainer( {
 		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
+	const onFilesPreUpload = ( files ) => {
+		if ( files.length === 1 ) {
+			onSelectMedia( { url: createBlobURL( files[ 0 ] ) } );
+		}
+	};
+
 	return (
 		<MediaPlaceholder
 			icon={ <BlockIcon icon={ icon } /> }
@@ -92,6 +98,7 @@ function PlaceholderContainer( {
 			onSelect={ onSelectMedia }
 			onToggleFeaturedImage={ toggleUseFeaturedImage }
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
+			onFilesPreUpload={ onFilesPreUpload }
 			onError={ onUploadError }
 			disableMediaButtons={ mediaUrl }
 		/>

package/src/navigation/edit/index.js

@@ -18,6 +18,7 @@ import {
 	useBlockProps,
 	RecursionProvider,
 	useHasRecursion,
+	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 	withColors,
 	ContrastChecker,
@@ -85,6 +86,8 @@ import {
 	NAVIGATION_OVERLAY_TEMPLATE_PART_AREA,
 } from '../constants';
 
+const { isNavigationPostEditorKey } = unlock( blockEditorPrivateApis );
+
 /**
  * Component that renders the Add page button for the Navigation block.
  *
@@ -319,19 +322,27 @@ function Navigation( {
 
 	// Skip recursion check when in preview mode.
 	const recursionDetected = useHasRecursion( recursionId );
-	const { isPreviewMode, onNavigateToEntityRecord, currentTheme } = useSelect(
-		( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			const settings = getSettings();
-			return {
-				isPreviewMode: settings.isPreviewMode,
-				onNavigateToEntityRecord: settings?.onNavigateToEntityRecord,
-				// Needed to construct the template part ID for the overlay preview.
-				currentTheme: select( coreStore ).getCurrentTheme()?.stylesheet,
-			};
-		},
-		[]
-	);
+	const {
+		isPreviewMode,
+		onNavigateToEntityRecord,
+		currentTheme,
+		editorDisabledResponsive,
+	} = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+
+		return {
+			isPreviewMode: settings.isPreviewMode,
+			onNavigateToEntityRecord: settings?.onNavigateToEntityRecord,
+			// Needed to construct the template part ID for the overlay preview.
+			currentTheme: select( coreStore ).getCurrentTheme()?.stylesheet,
+			// When editing a navigation post directly in an isolated editor,
+			// always show navigation expanded (no hamburger) so users can see
+			// and interact with all menu items.
+			editorDisabledResponsive:
+				!! settings?.[ isNavigationPostEditorKey ],
+		};
+	}, [] );
 	const hasAlreadyRendered = isPreviewMode ? false : recursionDetected;
 
 	const blockEditingMode = useBlockEditingMode();
@@ -603,7 +614,8 @@ function Navigation( {
 		setAttributes,
 	] );
 
-	const isResponsive = 'never' !== overlayMenu;
+	const isResponsive = 'never' !== overlayMenu && ! editorDisabledResponsive;
+
 	const blockProps = useBlockProps( {
 		ref: navRef,
 		className: clsx(

package/src/navigation/index.php

@@ -710,6 +710,12 @@ class WP_Navigation_Block_Renderer {
 				$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 );
@@ -1111,6 +1117,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 +1171,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.
@@ -1301,17 +1326,6 @@ function block_core_navigation_build_css_font_sizes( $attributes ) {
 	return $font_sizes;
 }
 
-/**
- * Returns the top-level submenu SVG chevron icon.
- *
- * @since 5.9.0
- *
- * @return string
- */
-function block_core_navigation_render_submenu_icon() {
-	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
-}
-
 /**
  * Filter out empty "null" blocks from the block list.
  * 'parse_blocks' includes a null block with '\n\n' as the content when

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/block.json

@@ -85,6 +85,11 @@
 			"clientNavigation": true
 		}
 	},
+	"selectors": {
+		"states": {
+			"@current": ".wp-block-navigation .current-menu-item"
+		}
+	},
 	"editorStyle": "wp-block-navigation-link-editor",
 	"style": "wp-block-navigation-link"
 }

package/src/navigation-link/index.php

@@ -5,14 +5,8 @@
  * @package WordPress
  */
 
-// Path differs between source and build: './shared/' in source, './navigation-link/shared/' in build.
-if ( file_exists( __DIR__ . '/shared/item-should-render.php' ) ) {
-	require_once __DIR__ . '/shared/item-should-render.php';
-	require_once __DIR__ . '/shared/render-submenu-icon.php';
-} else {
-	require_once __DIR__ . '/navigation-link/shared/item-should-render.php';
-	require_once __DIR__ . '/navigation-link/shared/render-submenu-icon.php';
-}
+require_once __DIR__ . '/navigation-link/shared/item-should-render.php';
+require_once __DIR__ . '/navigation-link/shared/render-submenu-icon.php';
 
 /**
  * Build an array with CSS classes and inline styles defining the colors
@@ -262,7 +256,13 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	if ( isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'] && $has_submenu ) {
 		// The submenu icon can be hidden by a CSS rule on the Navigation Block.
-		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_render_submenu_icon() . '</span>';
+		$html .= '<span class="wp-block-navigation__submenu-icon">';
+		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+			$html .= gutenberg_block_core_shared_navigation_render_submenu_icon();
+		} else {
+			$html .= block_core_shared_navigation_render_submenu_icon();
+		}
+		$html .= '</span>';
 	}
 
 	if ( $has_submenu ) {
@@ -485,4 +485,4 @@ add_action( 'init', 'register_block_core_navigation_link' );
  * Creates all variations for post types / taxonomies dynamically (= each time when variations are requested).
  * Do not use variation_callback, to also account for unregistering post types/taxonomies later on.
  */
-add_action( 'get_block_type_variations', 'block_core_navigation_link_filter_variations', 10, 2 );
+add_filter( 'get_block_type_variations', 'block_core_navigation_link_filter_variations', 10, 2 );

package/src/navigation-link/shared/test/use-link-preview.test.js

@@ -36,6 +36,7 @@ jest.mock( '../../../lock-unlock', () => ( {
 import {
 	computeDisplayUrl,
 	computeBadges,
+	isHomepage,
 	useLinkPreview,
 } from '../use-link-preview';
 
@@ -144,6 +145,74 @@ describe( 'computeDisplayUrl', () => {
 	} );
 } );
 
+describe( 'isHomepage', () => {
+	const host = 'homepage.com';
+	const homeUrl = 'https://' + host;
+
+	test.each( [
+		[ '/', homeUrl ],
+		[ '/', undefined ],
+	] )( 'should return true for root path "%s"', ( url, homeUrlParam ) => {
+		expect( isHomepage( url, homeUrlParam ) ).toBe( true );
+	} );
+
+	// Check combinations of http/s and trailing slash
+	test.each( [
+		[ `http://${ host }`, homeUrl ],
+		[ `https://${ host }`, homeUrl ],
+		[ `http://${ host }/`, homeUrl ],
+		[ `https://${ host }/`, homeUrl ],
+	] )( 'should return true for site URL "%s"', ( url ) => {
+		expect( isHomepage( url, homeUrl ) ).toBe( true );
+	} );
+
+	test.each( [
+		[ '', homeUrl ],
+		[ `https://${ host }`, '' ],
+		[ `https://${ host }`, undefined ],
+	] )(
+		'should return false when url or homeUrl is empty and not a / path',
+		( url, homeUrlParam ) => {
+			expect( isHomepage( url, homeUrlParam ) ).toBe( false );
+		}
+	);
+
+	const subdomain = 'sub.' + host;
+	test.each( [
+		[ false, `http://${ subdomain }/`, homeUrl ],
+		[ false, `https://${ subdomain }`, homeUrl ],
+		[ true, `http://${ subdomain }/`, `https://${ subdomain }` ],
+		[ true, `https://${ subdomain }`, `https://${ subdomain }` ],
+	] )(
+		'should return %s for subdomain (url=%s, homeUrl=%s)',
+		( expected, url, homeUrlParam ) => {
+			expect( isHomepage( url, homeUrlParam ) ).toBe( expected );
+		}
+	);
+
+	const path = '/wordpress';
+	const subdirHomeUrl = 'https://' + host + path;
+
+	test.each( [
+		[ `https://${ host }${ path }`, subdirHomeUrl ],
+		[ `https://${ host }${ path }/`, subdirHomeUrl ],
+		[ `http://${ host }${ path }`, subdirHomeUrl ],
+		[ `http://${ host }${ path }/`, subdirHomeUrl ],
+	] )( 'should return true for subdirectory homepage "%s"', ( url ) => {
+		expect( isHomepage( url, subdirHomeUrl ) ).toBe( true );
+	} );
+
+	test.each( [
+		[ `https://${ host }/page`, homeUrl ],
+		[ '/page', homeUrl ],
+		[ `https://${ host }`, subdirHomeUrl ],
+		[ `https://${ host }/`, subdirHomeUrl ],
+		[ `https://${ host }${ path }/page`, subdirHomeUrl ],
+	] )( 'should return false for non-homepage "%s"', ( url, homeUrlParam ) => {
+		expect( isHomepage( url, homeUrlParam ) ).toBe( false );
+	} );
+} );
+
 describe( 'computeBadges', () => {
 	describe( 'kind badges', () => {
 		it( 'should show "External link" badge for external links', () => {
@@ -183,6 +252,67 @@ describe( 'computeBadges', () => {
 			} );
 		} );
 
+		it( 'should show "Homepage" badge for root path', () => {
+			const badges = computeBadges( {
+				url: '/',
+				isExternal: false,
+			} );
+
+			expect( badges ).toContainEqual( {
+				label: 'Homepage',
+				intent: 'default',
+			} );
+		} );
+
+		test.each( [
+			[ 'https://example.com' ],
+			[ 'https://example.com/' ],
+			[ 'http://example.com' ],
+			[ 'http://example.com/' ],
+		] )( 'should show "Homepage" badge when url is "%s"', ( url ) => {
+			const badges = computeBadges( {
+				url,
+				homeUrl: 'https://example.com',
+				isExternal: false,
+			} );
+			expect( badges ).toContainEqual( {
+				label: 'Homepage',
+				intent: 'default',
+			} );
+		} );
+
+		test.each( [ [ 'https://sub.example.com/', 'https://example.com' ] ] )(
+			'should not show Homepage badge when subdomain url "%s" does not match homeUrl "%s"',
+			( url, homeUrl ) => {
+				const badges = computeBadges( {
+					url,
+					homeUrl,
+					isExternal: false,
+				} );
+				expect( badges ).not.toContainEqual( {
+					label: 'Homepage',
+					intent: 'default',
+				} );
+			}
+		);
+
+		test.each( [
+			[ 'https://sub.example.com/', 'https://sub.example.com' ],
+		] )(
+			'should show Homepage badge when subdomain url "%s" matches homeUrl "%s"',
+			( url, homeUrl ) => {
+				const badges = computeBadges( {
+					url,
+					homeUrl,
+					isExternal: false,
+				} );
+				expect( badges ).toContainEqual( {
+					label: 'Homepage',
+					intent: 'default',
+				} );
+			}
+		);
+
 		it( 'should show page badge for relative paths', () => {
 			const badges = computeBadges( {
 				url: '/relative-path',
@@ -269,6 +399,25 @@ it( 'should show "Internal link" badge for hash links even when type is present'
 	} );
 } );
 
+it( 'should show "Homepage" badge for root path even when type is present', () => {
+	const badges = computeBadges( {
+		url: '/',
+		type: 'page',
+		isExternal: false,
+	} );
+
+	// Should prioritize homepage detection over type
+	expect( badges ).toContainEqual( {
+		label: 'Homepage',
+		intent: 'default',
+	} );
+	// Should NOT show Page badge
+	expect( badges ).not.toContainEqual( {
+		label: 'Page',
+		intent: 'default',
+	} );
+} );
+
 test.each( [
 	[ 'www.test.com', 'URLs without protocol' ],
 	[ 'google.com', 'domain-only URLs without protocol' ],