@wordpress/block-library 9.40.1 → 9.40.2-next.v.202602271551.0

package/src/navigation/edit/menu-inspector-controls.js

@@ -6,12 +6,7 @@ import {
 	InspectorControls,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	PanelBody,
-	Spinner,
-	__experimentalHStack as HStack,
-	__experimentalHeading as Heading,
-} from '@wordpress/components';
+import { PanelBody, Spinner } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
@@ -24,121 +19,18 @@ import { unlock } from '../../lock-unlock';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import useNavigationMenu from '../use-navigation-menu';
 import LeafMoreMenu from './leaf-more-menu';
-import {
-	LinkUI,
-	updateAttributes,
-	useEntityBinding,
-} from '../../navigation-link/shared';
+import { NavigationLinkUI } from './navigation-link-ui';
+import NavigationListViewHeader from './navigation-list-view-header';
 
 const actionLabel =
 	/* translators: %s: The name of a menu. */ __( "Switch to '%s'" );
-const BLOCKS_WITH_LINK_UI_SUPPORT = [
-	'core/navigation-link',
-	'core/navigation-submenu',
-];
 const {
 	PrivateListView,
-	useBlockDisplayTitle,
 	PrivateBlockContext,
 	useListViewPanelState,
+	useBlockDisplayTitle,
 } = unlock( blockEditorPrivateApis );
 
-function AdditionalBlockContent( { 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 );
-			} }
-		/>
-	);
-}
-
 const MainContent = ( {
 	clientId,
 	currentMenuId,
@@ -194,7 +86,7 @@ const MainContent = ( {
 				description={ description }
 				showAppender
 				blockSettingsMenu={ LeafMoreMenu }
-				additionalBlockContent={ AdditionalBlockContent }
+				additionalBlockContent={ NavigationLinkUI }
 				onSelect={ openListViewContentPanel }
 			/>
 		</div>
@@ -232,34 +124,23 @@ const MenuInspectorControls = ( props ) => {
 		return (
 			<InspectorControls group="list">
 				<PanelBody title={ null }>
-					<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>
+					<NavigationListViewHeader
+						clientId={ clientId }
+						blockEditingMode={ blockEditingMode }
+						currentMenuId={ currentMenuId }
+						onSelectClassicMenu={ onSelectClassicMenu }
+						onSelectNavigationMenu={ onSelectNavigationMenu }
+						onCreateNew={ onCreateNew }
+						createNavigationMenuIsSuccess={
+							createNavigationMenuIsSuccess
+						}
+						createNavigationMenuIsError={
+							createNavigationMenuIsError
+						}
+						isManageMenusButtonDisabled={
+							isManageMenusButtonDisabled
+						}
+					/>
 					<MainContent
 						{ ...props }
 						expandRevision={ expandRevision }
@@ -273,7 +154,7 @@ const MenuInspectorControls = ( props ) => {
 	return (
 		<InspectorControls group="list">
 			<PanelBody
-				title={ __( 'Navigation' ) }
+				title={ blockTitle }
 				opened={ isOpened }
 				onToggle={ handleToggle }
 			>

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