@wordpress/block-library 9.37.2-next.ba3aee3a2.0 → 9.38.0

package/src/navigation-link/shared/invalid-draft-display.js

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Displays a label with an "(Invalid)" or "(Draft)" indicator for navigation links.
+ *
+ * @param {Object}  props           Component props.
+ * @param {string}  props.label     The label text to display.
+ * @param {boolean} props.isInvalid Whether the link is invalid (deleted or trashed).
+ * @param {boolean} props.isDraft   Whether the link is a draft.
+ * @param {string}  props.className Optional additional CSS class for the label element.
+ *
+ * @return {Element} The invalid/draft display component.
+ */
+export function InvalidDraftDisplay( {
+	label,
+	isInvalid,
+	isDraft,
+	className = 'wp-block-navigation-link__label',
+} ) {
+	// Only render if the link is invalid or a draft.
+	if ( ! isInvalid && ! isDraft ) {
+		return null;
+	}
+
+	const statusText = isInvalid
+		? /* translators: Indicating that the navigation link is Invalid. */
+		  __( 'Invalid' )
+		: /* translators: Indicating that the navigation link is a Draft. */
+		  __( 'Draft' );
+
+	return (
+		<div
+			className={ clsx(
+				'wp-block-navigation-link__placeholder-text',
+				className,
+				{
+					'is-invalid': isInvalid,
+					'is-draft': isDraft,
+				}
+			) }
+		>
+			<span>
+				{
+					// Some attributes are stored in an escaped form. It's a legacy issue.
+					// Ideally they would be stored in a raw, unescaped form.
+					// Unescape is used here to "recover" the escaped characters
+					// so they display without encoding.
+					// See `updateAttributes` for more details.
+					`${ decodeEntities( label ) } (${ statusText })`.trim()
+				}
+			</span>
+		</div>
+	);
+}

package/src/navigation-link/shared/test/use-enable-link-status-validation.test.js

@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { useEnableLinkStatusValidation } from '../use-enable-link-status-validation';
+
+// Mock useSelect directly at the implementation level to avoid loading complex dependencies
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	const mock = jest.fn();
+	return mock;
+} );
+
+const { useSelect } = require( '@wordpress/data' );
+
+describe( 'useEnableLinkStatusValidation', () => {
+	const mockClientId = 'test-client-id';
+	const mockRootNavigationId = 'root-navigation-id';
+	const mockSelectedBlockId = 'selected-block-id';
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should return true when root navigation block is selected', () => {
+		useSelect.mockImplementation( ( callback ) => {
+			return callback( () => ( {
+				getSelectedBlockClientId: () => mockRootNavigationId,
+				hasSelectedInnerBlock: () => false,
+				getBlockParentsByBlockName: () => [ mockRootNavigationId ],
+			} ) );
+		} );
+
+		const { result } = renderHook( () =>
+			useEnableLinkStatusValidation( mockClientId )
+		);
+
+		expect( result.current ).toBe( true );
+	} );
+
+	it( 'should return true when an inner block of root navigation is selected', () => {
+		useSelect.mockImplementation( ( callback ) => {
+			return callback( () => ( {
+				getSelectedBlockClientId: () => mockSelectedBlockId,
+				hasSelectedInnerBlock: ( clientId, deep ) =>
+					clientId === mockRootNavigationId && deep === true,
+				getBlockParentsByBlockName: () => [ mockRootNavigationId ],
+			} ) );
+		} );
+
+		const { result } = renderHook( () =>
+			useEnableLinkStatusValidation( mockClientId )
+		);
+
+		expect( result.current ).toBe( true );
+	} );
+
+	it( 'should return false when neither root navigation nor its inner blocks are selected', () => {
+		useSelect.mockImplementation( ( callback ) => {
+			return callback( () => ( {
+				getSelectedBlockClientId: () => 'other-block-id',
+				hasSelectedInnerBlock: () => false,
+				getBlockParentsByBlockName: () => [ mockRootNavigationId ],
+			} ) );
+		} );
+
+		const { result } = renderHook( () =>
+			useEnableLinkStatusValidation( mockClientId )
+		);
+
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'should handle case when root navigation id is not found', () => {
+		useSelect.mockImplementation( ( callback ) => {
+			return callback( () => ( {
+				getSelectedBlockClientId: () => mockSelectedBlockId,
+				hasSelectedInnerBlock: () => false,
+				getBlockParentsByBlockName: () => [],
+			} ) );
+		} );
+
+		const { result } = renderHook( () =>
+			useEnableLinkStatusValidation( mockClientId )
+		);
+
+		// When rootNavigationId is undefined (empty array),
+		// both conditions will be false
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'should update when clientId changes', () => {
+		const newClientId = 'new-client-id';
+		const newRootNavigationId = 'new-root-navigation-id';
+
+		useSelect.mockImplementation( ( callback ) => {
+			return callback( () => ( {
+				getSelectedBlockClientId: () => newRootNavigationId,
+				hasSelectedInnerBlock: () => false,
+				getBlockParentsByBlockName: ( clientId ) => {
+					return clientId === newClientId
+						? [ newRootNavigationId ]
+						: [ mockRootNavigationId ];
+				},
+			} ) );
+		} );
+
+		const { result, rerender } = renderHook(
+			( { clientId } ) => useEnableLinkStatusValidation( clientId ),
+			{
+				initialProps: { clientId: mockClientId },
+			}
+		);
+
+		// Initially false (different IDs)
+		expect( result.current ).toBe( false );
+
+		// Rerender with new clientId
+		rerender( { clientId: newClientId } );
+
+		// Should now be true (matching IDs)
+		expect( result.current ).toBe( true );
+	} );
+} );

package/src/navigation-link/shared/use-enable-link-status-validation.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Hook to determine if link status validation should be enabled.
+ *
+ * Link status validation is enabled when the root Navigation block is selected
+ * or any of its inner blocks are selected. This ensures validation only runs
+ * when the user is actively working within the navigation structure.
+ *
+ * @param {string} clientId The client ID of the current block.
+ * @return {boolean} Whether link status validation should be enabled.
+ */
+export function useEnableLinkStatusValidation( clientId ) {
+	return useSelect(
+		( select ) => {
+			const {
+				getSelectedBlockClientId,
+				hasSelectedInnerBlock,
+				getBlockParentsByBlockName,
+			} = select( blockEditorStore );
+
+			const selectedBlockId = getSelectedBlockClientId();
+			const rootNavigationId = getBlockParentsByBlockName(
+				clientId,
+				'core/navigation'
+			)[ 0 ];
+
+			// Enable when the root Navigation block is selected or any of its inner blocks.
+			return (
+				selectedBlockId === rootNavigationId ||
+				hasSelectedInnerBlock( rootNavigationId, true )
+			);
+		},
+		[ clientId ]
+	);
+}

package/src/navigation-link/shared/use-is-invalid-link.js

@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useBlockEditingMode } from '@wordpress/block-editor';
+
+/**
+ * A React hook to determine if a navigation link or submenu's parent link is invalid.
+ *
+ * @param {string}  kind    The kind of link (post-type, custom, taxonomy, etc).
+ * @param {string}  type    The type of post (post, page, etc).
+ * @param {number}  id      The post or term id.
+ * @param {boolean} enabled Whether to enable the validation check.
+ *
+ * @return {Array} Array containing [isInvalid, isDraft] booleans.
+ */
+export const useIsInvalidLink = ( kind, type, id, enabled ) => {
+	const isPostType =
+		kind === 'post-type' || type === 'post' || type === 'page';
+	const hasId = Number.isInteger( id );
+	const blockEditingMode = useBlockEditingMode();
+
+	const { postStatus, isDeleted } = useSelect(
+		( select ) => {
+			if ( ! isPostType ) {
+				return { postStatus: null, isDeleted: false };
+			}
+
+			// Fetching the posts status is an "expensive" operation. Especially for sites with large navigations.
+			// When the block is rendered in a template or other disabled contexts we can skip this check in order
+			// to avoid all these additional requests that don't really add any value in that mode.
+			if ( blockEditingMode === 'disabled' || ! enabled ) {
+				return { postStatus: null, isDeleted: false };
+			}
+
+			const { getEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const entityRecord = getEntityRecord( 'postType', type, id );
+			const hasResolved = hasFinishedResolution( 'getEntityRecord', [
+				'postType',
+				type,
+				id,
+			] );
+
+			// If resolution has finished and entityRecord is undefined, the entity was deleted.
+			const deleted = hasResolved && entityRecord === undefined;
+
+			return {
+				postStatus: entityRecord?.status,
+				isDeleted: deleted,
+			};
+		},
+		[ isPostType, blockEditingMode, enabled, type, id ]
+	);
+
+	// Check Navigation Link validity if:
+	// 1. Link is 'post-type'.
+	// 2. It has an id.
+	// 3. It's neither null, nor undefined, as valid items might be either of those while loading.
+	// If those conditions are met, check if
+	// 1. The post status is trash (trashed).
+	// 2. The entity doesn't exist (deleted).
+	// If either of those is true, invalidate.
+	const isInvalid =
+		isPostType &&
+		hasId &&
+		( isDeleted || ( postStatus && 'trash' === postStatus ) );
+	const isDraft = 'draft' === postStatus;
+
+	return [ isInvalid, isDraft ];
+};

package/src/navigation-overlay-close/block.json

@@ -15,10 +15,7 @@
 			"default": "icon"
 		},
 		"text": {
-			"type": "rich-text",
-			"source": "rich-text",
-			"selector": "span",
-			"default": "Close"
+			"type": "string"
 		}
 	},
 	"supports": {

package/src/navigation-overlay-close/index.js

@@ -2,16 +2,14 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { select } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import initBlock from '../utils/init-block';
+import { isWithinNavigationOverlay } from '../utils/is-within-overlay';
 import edit from './edit';
 import metadata from './block.json';
-import save from './save';
 import icon from './icon';
 
 const { name } = metadata;
@@ -21,41 +19,8 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
-	save,
 };
 
-function isWithinOverlay() {
-	// @wordpress/block-library should not depend on @wordpress/editor.
-	// Blocks can be loaded into a *non-post* block editor, so to avoid
-	// declaring @wordpress/editor as a dependency, we must access its
-	// store by string.
-	// eslint-disable-next-line @wordpress/data-no-store-string-literals
-	const editorStore = select( 'core/editor' );
-
-	// Return false if the editor store is not available.
-	if ( ! editorStore ) {
-		return false;
-	}
-
-	const { getCurrentPostType, getCurrentPostId } = editorStore;
-	const { getEditedEntityRecord } = select( coreStore );
-
-	const postType = getCurrentPostType();
-	const postId = getCurrentPostId();
-
-	if ( postType === 'wp_template_part' && postId ) {
-		const templatePartEntity = getEditedEntityRecord(
-			'postType',
-			'wp_template_part',
-			postId
-		);
-
-		return templatePartEntity?.area === 'overlay';
-	}
-
-	return false;
-}
-
 export const init = () => {
 	addFilter(
 		'blockEditor.__unstableCanInsertBlockType',
@@ -69,7 +34,7 @@ export const init = () => {
 				return canInsert;
 			}
 
-			return isWithinOverlay();
+			return isWithinNavigationOverlay();
 		}
 	);
 

package/src/navigation-overlay-close/index.php

@@ -5,6 +5,39 @@
  * @package WordPress
  */
 
+/**
+ * Renders the `core/navigation-overlay-close` block on server.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string Returns the block content.
+ */
+function render_block_core_navigation_overlay_close( $attributes ) {
+	$text         = empty( $attributes['text'] ) ? __( 'Close' ) : $attributes['text'];
+	$display_mode = empty( $attributes['displayMode'] ) ? 'icon' : $attributes['displayMode'];
+	$show_icon    = 'both' === $display_mode || 'icon' === $display_mode;
+	$show_text    = 'both' === $display_mode || 'text' === $display_mode;
+	$button_text  = '';
+
+	if ( $show_icon ) {
+		$button_text .= '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1.1-1-6.1 6.2-6.1-6.2-1.1 1 6.1 6.3-6.5 6.7 1.1 1 6.5-6.6 6.5 6.6 1.1-1z" /></svg>';
+	}
+
+	if ( $show_text ) {
+		$button_text .= '<span class="wp-block-navigation-overlay-close__text">' . wp_kses_post( $text ) . '</span>';
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes();
+	$html_content       = sprintf(
+		'<button %1$s type="button" %2$s >%3$s</button>',
+		$wrapper_attributes,
+		! $show_text ? 'aria-label="' . __( 'Close' ) . '"' : '',
+		$button_text
+	);
+
+	return $html_content;
+}
+
 /**
  * Registers the navigation overlay close block.
  *
@@ -12,7 +45,10 @@
  */
 function register_block_core_navigation_overlay_close() {
 	register_block_type_from_metadata(
-		__DIR__ . '/navigation-overlay-close'
+		__DIR__ . '/navigation-overlay-close',
+		array(
+			'render_callback' => 'render_block_core_navigation_overlay_close',
+		)
 	);
 }
 add_action( 'init', 'register_block_core_navigation_overlay_close' );

package/src/navigation-submenu/edit.js

@@ -37,6 +37,9 @@ import {
 	LinkUI,
 	updateAttributes,
 	useEntityBinding,
+	useIsInvalidLink,
+	InvalidDraftDisplay,
+	useEnableLinkStatusValidation,
 } from '../navigation-link/shared';
 import {
 	getColors,
@@ -128,7 +131,7 @@ export default function NavigationSubmenuEdit( {
 	context,
 	clientId,
 } ) {
-	const { label, url, description } = attributes;
+	const { label, url, description, kind, type, id } = attributes;
 
 	const {
 		showSubmenuIcon,
@@ -214,8 +217,18 @@ export default function NavigationSubmenuEdit( {
 		[ clientId ]
 	);
 
+	const validateLinkStatus = useEnableLinkStatusValidation( clientId );
+
 	const prevHasChildren = usePrevious( hasChildren );
 
+	// Check if the submenu's parent link is invalid or draft
+	const [ isInvalid, isDraft ] = useIsInvalidLink(
+		kind,
+		type,
+		id,
+		validateLinkStatus
+	);
+
 	// Show the LinkControl on mount if the URL is empty
 	// ( When adding a new menu item)
 	// This can't be done in the useState call because it conflicts
@@ -392,29 +405,41 @@ export default function NavigationSubmenuEdit( {
 			</InspectorControls>
 			<div { ...blockProps }>
 				<ParentElement className="wp-block-navigation-item__content">
-					<RichText
-						ref={ ref }
-						identifier="label"
-						className="wp-block-navigation-item__label"
-						value={ label }
-						onChange={ ( labelValue ) =>
-							setAttributes( { label: labelValue } )
-						}
-						onMerge={ mergeBlocks }
-						onReplace={ onReplace }
-						aria-label={ __( 'Navigation link text' ) }
-						placeholder={ itemLabelPlaceholder }
-						withoutInteractiveFormatting
-						onClick={ () => {
-							if ( ! openSubmenusOnClick && ! url ) {
-								setIsLinkOpen( true );
-							}
-						} }
-					/>
-					{ description && (
-						<span className="wp-block-navigation-item__description">
-							{ description }
-						</span>
+					{ ! isInvalid && ! isDraft && (
+						<>
+							<RichText
+								ref={ ref }
+								identifier="label"
+								className="wp-block-navigation-item__label"
+								value={ label }
+								onChange={ ( labelValue ) =>
+									setAttributes( { label: labelValue } )
+								}
+								onMerge={ mergeBlocks }
+								onReplace={ onReplace }
+								aria-label={ __( 'Navigation link text' ) }
+								placeholder={ itemLabelPlaceholder }
+								withoutInteractiveFormatting
+								onClick={ () => {
+									if ( ! openSubmenusOnClick && ! url ) {
+										setIsLinkOpen( true );
+									}
+								} }
+							/>
+							{ description && (
+								<span className="wp-block-navigation-item__description">
+									{ description }
+								</span>
+							) }
+						</>
+					) }
+					{ ( isInvalid || isDraft ) && (
+						<InvalidDraftDisplay
+							label={ label }
+							isInvalid={ isInvalid }
+							isDraft={ isDraft }
+							className="wp-block-navigation-item__label"
+						/>
 					) }
 					{ ! openSubmenusOnClick && isLinkOpen && (
 						<LinkUI

package/src/navigation-submenu/index.js

@@ -57,21 +57,26 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
 		{
 			id: 'label',
 			label: __( 'Label' ),
-			type: 'richtext',
+			type: 'text',
+			Edit: 'rich-text', //TODO: replace with custom component
 		},
 		{
 			id: 'link',
 			label: __( 'Link' ),
-			type: 'link',
-			mapping: {
-				href: 'url',
-				rel: 'rel',
-				// TODO - opens in new tab? id?
-			},
+			type: 'url',
+			Edit: 'link', // TODO: replace with custom component
+			getValue: ( { item } ) => ( {
+				url: item.url,
+				rel: item.rel,
+			} ),
+			setValue: ( { value } ) => ( {
+				url: value.url,
+				rel: value.rel,
+			} ),
 		},
 	];
 	settings[ formKey ] = {
-		fields: [ 'label' ],
+		fields: [ 'label', 'link' ],
 	};
 }
 

package/src/navigation-submenu/index.php

@@ -5,6 +5,13 @@
  * @package WordPress
  */
 
+// Path differs between source and build: '../navigation-link/shared/helpers.php' in source, './navigation-link/shared/helpers.php' in build.
+if ( file_exists( __DIR__ . '/../navigation-link/shared/helpers.php' ) ) {
+	require_once __DIR__ . '/../navigation-link/shared/helpers.php';
+} else {
+	require_once __DIR__ . '/navigation-link/shared/helpers.php';
+}
+
 /**
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the navigation markup in the front-end.
@@ -65,13 +72,11 @@ function block_core_navigation_submenu_render_submenu_icon() {
  * @return string Returns the post content with the legacy widget added.
  */
 function render_block_core_navigation_submenu( $attributes, $content, $block ) {
-	$navigation_link_has_id = isset( $attributes['id'] ) && is_numeric( $attributes['id'] );
-	$is_post_type           = isset( $attributes['kind'] ) && 'post-type' === $attributes['kind'];
-	$is_post_type           = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] );
-
-	// Don't render the block's subtree if it is a draft.
-	if ( $is_post_type && $navigation_link_has_id && 'publish' !== get_post_status( $attributes['id'] ) ) {
-		return '';
+	// Check if this navigation item should render based on post status.
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		if ( ! gutenberg_block_core_shared_navigation_item_should_render( $attributes, $block ) ) {
+			return '';
+		}
 	}
 
 	// Don't render the block's subtree if it has no label.
@@ -82,9 +87,15 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	$font_sizes      = block_core_navigation_submenu_build_css_font_sizes( $block->context );
 	$style_attribute = $font_sizes['inline_styles'];
 
-	$has_submenu = count( $block->inner_blocks ) > 0;
-	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
-	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
+	// Render inner blocks first to check if any menu items will actually display.
+	$inner_blocks_html = '';
+	foreach ( $block->inner_blocks as $inner_block ) {
+		$inner_blocks_html .= $inner_block->render();
+	}
+	$has_submenu = ! empty( trim( $inner_blocks_html ) );
+
+	$kind      = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
+	$is_active = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
 	if ( is_post_type_archive() && ! empty( $attributes['url'] ) ) {
 		$queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
@@ -190,7 +201,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		$html .= '</a>';
 		// End anchor tag content.
 
-		if ( $show_submenu_indicators ) {
+		if ( $show_submenu_indicators && $has_submenu ) {
 			// The submenu icon is rendered in a button here
 			// so that there's a clickable element to open the submenu.
 			$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
@@ -215,8 +226,9 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 
 		$html .= '</button>';
 
-		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_submenu_render_submenu_icon() . '</span>';
-
+		if ( $has_submenu ) {
+			$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_submenu_render_submenu_icon() . '</span>';
+		}
 	}
 
 	if ( $has_submenu ) {
@@ -248,11 +260,6 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			$style_attribute = $colors_supports['style'];
 		}
 
-		$inner_blocks_html = '';
-		foreach ( $block->inner_blocks as $inner_block ) {
-			$inner_blocks_html .= $inner_block->render();
-		}
-
 		if ( strpos( $inner_blocks_html, 'current-menu-item' ) ) {
 			$tag_processor = new WP_HTML_Tag_Processor( $html );
 			while ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-navigation-item' ) ) ) {

package/src/nextpage/block.json

@@ -13,6 +13,7 @@
 		"customClassName": false,
 		"className": false,
 		"html": false,
+		"visibility": false,
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/paragraph/index.js

@@ -65,7 +65,8 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
 		{
 			id: 'content',
 			label: __( 'Content' ),
-			type: 'richtext',
+			type: 'text',
+			Edit: 'rich-text', // TODO: replace with custom component
 		},
 	];
 	settings[ formKey ] = {