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

package/src/navigation/edit/navigation-link-ui.js

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	LinkUI,
+	updateAttributes,
+	useEntityBinding,
+} from '../../navigation-link/shared';
+
+const BLOCKS_WITH_LINK_UI_SUPPORT = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
+
+export function NavigationLinkUI( { block, insertedBlock, setInsertedBlock } ) {
+	const { updateBlockAttributes, removeBlock } =
+		useDispatch( blockEditorStore );
+
+	const supportsLinkControls = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
+		insertedBlock?.name
+	);
+	const blockWasJustInserted = insertedBlock?.clientId === block.clientId;
+	const showLinkControls = supportsLinkControls && blockWasJustInserted;
+
+	// Get binding utilities for the inserted block
+	const { createBinding, clearBinding } = useEntityBinding( {
+		clientId: insertedBlock?.clientId,
+		attributes: insertedBlock?.attributes || {},
+	} );
+
+	if ( ! showLinkControls ) {
+		return null;
+	}
+
+	/**
+	 * Cleanup function for auto-inserted Navigation Link blocks.
+	 *
+	 * Removes the block if it has no URL and clears the inserted block state.
+	 * This ensures consistent cleanup behavior across different contexts.
+	 */
+	const cleanupInsertedBlock = () => {
+		// Prevent automatic block selection when removing blocks in list view context
+		// This avoids focus stealing that would close the list view and switch to canvas
+		const shouldAutoSelectBlock = false;
+
+		// Follows the exact same pattern as Navigation Link block's onClose handler
+		// If there is no URL then remove the auto-inserted block to avoid empty blocks
+		if ( ! insertedBlock?.attributes?.url && insertedBlock?.clientId ) {
+			// Remove the block entirely to avoid poor UX
+			// This matches the Navigation Link block's behavior
+			removeBlock( insertedBlock.clientId, shouldAutoSelectBlock );
+		}
+		setInsertedBlock( null );
+	};
+
+	const setInsertedBlockAttributes =
+		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
+			if ( ! _insertedBlockClientId ) {
+				return;
+			}
+			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
+		};
+
+	// Wrapper function to clean up original block when a new block is selected
+	const handleSetInsertedBlock = ( newBlock ) => {
+		// Prevent automatic block selection when removing blocks in list view context
+		// This avoids focus stealing that would close the list view and switch to canvas
+		const shouldAutoSelectBlock = false;
+
+		// If we have an existing inserted block and a new block is being set,
+		// remove the original block to avoid duplicates
+		if ( insertedBlock?.clientId && newBlock ) {
+			removeBlock( insertedBlock.clientId, shouldAutoSelectBlock );
+		}
+		setInsertedBlock( newBlock );
+	};
+
+	return (
+		<LinkUI
+			clientId={ insertedBlock?.clientId }
+			link={ insertedBlock?.attributes }
+			onBlockInsert={ handleSetInsertedBlock }
+			onClose={ () => {
+				// Use cleanup function
+				cleanupInsertedBlock();
+			} }
+			onChange={ ( updatedValue ) => {
+				// updateAttributes determines the final state and returns metadata
+				const { isEntityLink, attributes: updatedAttributes } =
+					updateAttributes(
+						updatedValue,
+						setInsertedBlockAttributes( insertedBlock?.clientId ),
+						insertedBlock?.attributes
+					);
+
+				// Handle URL binding based on the final computed state
+				// Only create bindings for entity links (posts, pages, taxonomies)
+				// Never create bindings for custom links (manual URLs)
+				if ( isEntityLink ) {
+					createBinding( updatedAttributes );
+				} else {
+					clearBinding();
+				}
+
+				setInsertedBlock( null );
+			} }
+		/>
+	);
+}

package/src/navigation/edit/navigation-list-view-header.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import NavigationMenuSelector from './navigation-menu-selector';
+import { unlock } from '../../lock-unlock';
+
+const { useBlockDisplayTitle } = unlock( blockEditorPrivateApis );
+
+const actionLabel =
+	/* translators: %s: The name of a menu. */ __( "Switch to '%s'" );
+
+export default function NavigationListViewHeader( {
+	clientId,
+	blockEditingMode,
+	currentMenuId,
+	onSelectClassicMenu,
+	onSelectNavigationMenu,
+	onCreateNew,
+	createNavigationMenuIsSuccess,
+	createNavigationMenuIsError,
+	isManageMenusButtonDisabled,
+} ) {
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
+
+	return (
+		<HStack className="wp-block-navigation-off-canvas-editor__header">
+			<Heading
+				className="wp-block-navigation-off-canvas-editor__title"
+				level={ 2 }
+			>
+				{ blockTitle }
+			</Heading>
+			{ blockEditingMode === 'default' && (
+				<NavigationMenuSelector
+					currentMenuId={ currentMenuId }
+					onSelectClassicMenu={ onSelectClassicMenu }
+					onSelectNavigationMenu={ onSelectNavigationMenu }
+					onCreateNew={ onCreateNew }
+					createNavigationMenuIsSuccess={
+						createNavigationMenuIsSuccess
+					}
+					createNavigationMenuIsError={ createNavigationMenuIsError }
+					actionLabel={ actionLabel }
+					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
+				/>
+			) }
+		</HStack>
+	);
+}

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

@@ -11,13 +11,12 @@ import { moreVertical } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useMemo, useState } from '@wordpress/element';
-import { useEntityProp } from '@wordpress/core-data';
+import { useEntityRecords, useEntityProp } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import useNavigationMenu from '../use-navigation-menu';
-import useNavigationEntities from '../use-navigation-entities';
 
 function buildMenuLabel( title, id, status ) {
 	if ( ! title ) {
@@ -53,7 +52,10 @@ function NavigationMenuSelector( {
 
 	actionLabel = actionLabel || createActionLabel;
 
-	const { menus: classicMenus } = useNavigationEntities();
+	const { records: classicMenus } = useEntityRecords( 'root', 'menu', {
+		per_page: -1,
+		context: 'view',
+	} );
 
 	const {
 		navigationMenus,

package/src/navigation/edit/placeholder/index.js

@@ -6,11 +6,11 @@ import { __ } from '@wordpress/i18n';
 import { navigation, Icon } from '@wordpress/icons';
 import { speak } from '@wordpress/a11y';
 import { useEffect } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import useNavigationEntities from '../../use-navigation-entities';
 import PlaceholderPreview from './placeholder-preview';
 import NavigationMenuSelector from '../navigation-menu-selector';
 
@@ -24,7 +24,8 @@ export default function NavigationPlaceholder( {
 	onSelectClassicMenu,
 	onCreateEmpty,
 } ) {
-	const { isResolvingMenus, hasResolvedMenus } = useNavigationEntities();
+	const { isResolving: isResolvingMenus, hasResolved: hasResolvedMenus } =
+		useEntityRecords( 'root', 'menu', { per_page: -1, context: 'view' } );
 
 	useEffect( () => {
 		if ( ! isSelected ) {

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

@@ -4,12 +4,16 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecords } from '@wordpress/core-data';
+
 /**
  * Internal dependencies
  */
 import NavigationMenuSelector from '../navigation-menu-selector';
 import useNavigationMenu from '../../use-navigation-menu';
-import useNavigationEntities from '../../use-navigation-entities';
 
 jest.mock( '../../use-navigation-menu', () => {
 	// This allows us to tweak the returned value on each test.
@@ -17,14 +21,13 @@ jest.mock( '../../use-navigation-menu', () => {
 	return mock;
 } );
 
-jest.mock( '../../use-navigation-entities', () => {
-	// This allows us to tweak the returned value on each test.
-	const mock = jest.fn();
-	return mock;
-} );
+jest.mock( '@wordpress/core-data', () => ( {
+	...jest.requireActual( '@wordpress/core-data' ),
+	useEntityRecords: jest.fn(),
+} ) );
 
-useNavigationEntities.mockReturnValue( {
-	menus: [],
+useEntityRecords.mockReturnValue( {
+	records: [],
 } );
 
 const navigationMenu1 = {
@@ -485,8 +488,8 @@ describe( 'NavigationMenuSelector', () => {
 			it( 'should not show classic menus if there are no classic menus', async () => {
 				const user = userEvent.setup();
 
-				useNavigationEntities.mockReturnValue( {
-					menus: [],
+				useEntityRecords.mockReturnValue( {
+					records: [],
 				} );
 
 				render( <NavigationMenuSelector /> );
@@ -507,8 +510,8 @@ describe( 'NavigationMenuSelector', () => {
 					canUserCreateNavigationMenus: false,
 				} );
 
-				useNavigationEntities.mockReturnValue( {
-					menus: classicMenusFixture,
+				useEntityRecords.mockReturnValue( {
+					records: classicMenusFixture,
 				} );
 
 				render( <NavigationMenuSelector /> );
@@ -529,8 +532,8 @@ describe( 'NavigationMenuSelector', () => {
 					canUserCreateNavigationMenus: true,
 				} );
 
-				useNavigationEntities.mockReturnValue( {
-					menus: classicMenusFixture,
+				useEntityRecords.mockReturnValue( {
+					records: classicMenusFixture,
 				} );
 
 				render( <NavigationMenuSelector /> );
@@ -566,8 +569,8 @@ describe( 'NavigationMenuSelector', () => {
 					canUserCreateNavigationMenus: true,
 				} );
 
-				useNavigationEntities.mockReturnValue( {
-					menus: classicMenusFixture,
+				useEntityRecords.mockReturnValue( {
+					records: classicMenusFixture,
 				} );
 
 				const { rerender } = render(
@@ -598,8 +601,8 @@ describe( 'NavigationMenuSelector', () => {
 					canUserCreateNavigationMenus: true,
 				} );
 
-				useNavigationEntities.mockReturnValue( {
-					menus: classicMenusFixture,
+				useEntityRecords.mockReturnValue( {
+					records: classicMenusFixture,
 				} );
 
 				rerender(
@@ -631,8 +634,8 @@ describe( 'NavigationMenuSelector', () => {
 					canUserCreateNavigationMenus: true,
 				} );
 
-				useNavigationEntities.mockReturnValue( {
-					menus: classicMenusFixture,
+				useEntityRecords.mockReturnValue( {
+					records: classicMenusFixture,
 				} );
 
 				// Simulate the menu being created and component being re-rendered.

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>
+					) }
 				</>
 			) }
 

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

@@ -237,7 +237,7 @@ describe( 'Controls', () => {
 
 			render( <Controls { ...propsWithExternalLink } /> );
 
-			expect( screen.getByText( 'View link' ) ).toBeVisible();
+			expect( screen.getByText( 'View' ) ).toBeVisible();
 		} );
 
 		it( 'shows "View page" for page links', () => {
@@ -253,7 +253,7 @@ describe( 'Controls', () => {
 
 			render( <Controls { ...propsWithPageLink } /> );
 
-			expect( screen.getByText( 'View page' ) ).toBeVisible();
+			expect( screen.getByText( 'View' ) ).toBeVisible();
 		} );
 
 		it( 'shows "View post" for post links', () => {
@@ -269,7 +269,7 @@ describe( 'Controls', () => {
 
 			render( <Controls { ...propsWithPostLink } /> );
 
-			expect( screen.getByText( 'View post' ) ).toBeVisible();
+			expect( screen.getByText( 'View' ) ).toBeVisible();
 		} );
 
 		it( 'shows "View category" for category links', () => {
@@ -285,7 +285,7 @@ describe( 'Controls', () => {
 
 			render( <Controls { ...propsWithCategoryLink } /> );
 
-			expect( screen.getByText( 'View category' ) ).toBeVisible();
+			expect( screen.getByText( 'View' ) ).toBeVisible();
 		} );
 
 		it( 'shows "View link" for custom type links', () => {
@@ -301,7 +301,7 @@ describe( 'Controls', () => {
 
 			render( <Controls { ...propsWithCustomLink } /> );
 
-			expect( screen.getByText( 'View link' ) ).toBeVisible();
+			expect( screen.getByText( 'View' ) ).toBeVisible();
 		} );
 	} );
 } );

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

@@ -92,10 +92,28 @@ describe( 'computeDisplayUrl', () => {
 		it( 'should treat same-origin URLs as internal', () => {
 			const result = computeDisplayUrl( {
 				linkUrl: 'https://example.com/my-page',
-				siteUrl: 'https://example.com',
+				homeUrl: 'https://example.com',
 			} );
 			expect( result.isExternal ).toBe( false );
 		} );
+
+		it( 'should treat same-origin URLs as internal when homeUrl includes a path', () => {
+			const result = computeDisplayUrl( {
+				linkUrl: 'https://example.com/my-page',
+				homeUrl: 'https://example.com/blog',
+			} );
+			expect( result.isExternal ).toBe( false );
+			expect( result.displayUrl ).toBe( '/my-page' );
+		} );
+
+		it( 'should treat http and https to same host as internal (compare by host, not origin)', () => {
+			const result = computeDisplayUrl( {
+				linkUrl: 'http://example.com/my-page',
+				homeUrl: 'https://example.com',
+			} );
+			expect( result.isExternal ).toBe( false );
+			expect( result.displayUrl ).toBe( '/my-page' );
+		} );
 	} );
 
 	describe( 'special protocols and edge cases', () => {

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

@@ -31,10 +31,10 @@ function capitalize( str ) {
  *
  * @param {Object} options         - Parameters object
  * @param {string} options.linkUrl - The URL to process
- * @param {string} options.siteUrl - The WordPress site URL (falls back to window.location.origin)
+ * @param {string} options.homeUrl - The WordPress site URL (required for internal/external detection)
  * @return {Object} Object with displayUrl and isExternal flag
  */
-export function computeDisplayUrl( { linkUrl, siteUrl } = {} ) {
+export function computeDisplayUrl( { linkUrl, homeUrl } = {} ) {
 	if ( ! linkUrl ) {
 		return { displayUrl: '', isExternal: false };
 	}
@@ -51,9 +51,10 @@ export function computeDisplayUrl( { linkUrl, siteUrl } = {} ) {
 	// This must happen before trusting the type attribute
 	try {
 		const parsedUrl = new URL( linkUrl );
-		// Use provided siteUrl or fall back to window.location.origin
-		const siteDomain = siteUrl || window.location.origin;
-		if ( parsedUrl.origin === siteDomain ) {
+		// Compare by host (not origin) so http/https to same site both count as internal
+		const siteHost = new URL( homeUrl ).host;
+
+		if ( parsedUrl.host === siteHost ) {
 			// Show only the pathname (and search/hash if present)
 			let path = parsedUrl.pathname + parsedUrl.search + parsedUrl.hash;
 			// Remove trailing slash
@@ -62,12 +63,11 @@ export function computeDisplayUrl( { linkUrl, siteUrl } = {} ) {
 			}
 			displayUrl = path;
 		} else {
-			// Different origin - this is an external link
+			// Different host - this is an external link
 			isExternal = true;
 		}
 	} catch ( e ) {
-		// URL parsing failed - this means it's likely a URL without a protocol (e.g., "www.example.com")
-		// Since we already checked for relative paths and hash links above, treat as external
+		// URL parsing failed - treat as external (e.g. no homeUrl, or URL without protocol)
 		isExternal = true;
 	}
 
@@ -174,13 +174,12 @@ export function useLinkPreview( {
 	hasBinding,
 	isEntityAvailable,
 } ) {
-	// Get the WordPress site URL from settings
-	const siteUrl = useSelect( ( select ) => {
-		const siteEntity = select( coreDataStore ).getEntityRecord(
+	// Get the WordPress homepage URL from settings
+	const homeUrl = useSelect( ( select ) => {
+		return select( coreDataStore ).getEntityRecord(
 			'root',
-			'site'
-		);
-		return siteEntity?.url;
+			'__unstableBase'
+		)?.home;
 	}, [] );
 
 	const title =
@@ -194,7 +193,7 @@ export function useLinkPreview( {
 	// Compute display URL and external flag
 	const { displayUrl, isExternal } = computeDisplayUrl( {
 		linkUrl: url,
-		siteUrl,
+		homeUrl,
 	} );
 
 	const image = useSelect(

package/src/page-list/index.php

@@ -166,7 +166,7 @@ function block_core_page_list_build_css_font_sizes( $context ) {
  *
  * @since 5.8.0
  *
- * @param boolean $open_submenus_on_click Whether to open submenus on click instead of hover.
+ * @param string  $submenu_visibility The submenu visibility mode: 'hover', 'click', or 'always'.
  * @param boolean $show_submenu_icons Whether to show submenu indicator icons.
  * @param boolean $is_navigation_child If block is a child of Navigation block.
  * @param array   $nested_pages The array of nested pages.

package/src/page-list-item/edit.js

@@ -8,7 +8,6 @@ import clsx from 'clsx';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { RawHTML } from '@wordpress/element';
 import { safeHTML } from '@wordpress/dom';
 
 /**
@@ -78,9 +77,10 @@ export default function PageListItemEdit( { context, attributes } ) {
 						type="button"
 						className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
 						aria-expanded="false"
-					>
-						<RawHTML>{ safeHTML( label ) }</RawHTML>
-					</button>
+						dangerouslySetInnerHTML={ {
+							__html: safeHTML( label ),
+						} }
+					/>
 					<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
 						<ItemSubmenuIcon />
 					</span>
@@ -91,9 +91,10 @@ export default function PageListItemEdit( { context, attributes } ) {
 						'wp-block-navigation-item__content': isNavigationChild,
 					} ) }
 					href={ link }
-				>
-					<RawHTML>{ safeHTML( title ) }</RawHTML>
-				</a>
+					dangerouslySetInnerHTML={ {
+						__html: safeHTML( title ),
+					} }
+				/>
 			) }
 			{ hasChildren && (
 				<>