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

package/src/navigation/edit/responsive-wrapper.js

@@ -34,9 +34,12 @@ export default function ResponsiveWrapper( {
 		return children;
 	}
 
+	// Only apply overlay colors if there's no custom overlay template part.
+	const hasCustomOverlay = !! overlay;
+
 	const responsiveContainerClasses = clsx(
 		'wp-block-navigation__responsive-container',
-		{
+		! hasCustomOverlay && {
 			'has-text-color':
 				!! overlayTextColor.color || !! overlayTextColor?.class,
 			[ getColorClassName( 'color', overlayTextColor?.slug ) ]:
@@ -48,18 +51,22 @@ export default function ResponsiveWrapper( {
 				'background-color',
 				overlayBackgroundColor?.slug
 			) ]: !! overlayBackgroundColor?.slug,
+		},
+		{
 			'is-menu-open': isOpen,
 			'hidden-by-default': isHiddenByDefault,
 		}
 	);
 
-	const styles = {
-		color: ! overlayTextColor?.slug && overlayTextColor?.color,
-		backgroundColor:
-			! overlayBackgroundColor?.slug &&
-			overlayBackgroundColor?.color &&
-			overlayBackgroundColor.color,
-	};
+	const styles = ! hasCustomOverlay
+		? {
+				color: ! overlayTextColor?.slug && overlayTextColor?.color,
+				backgroundColor:
+					! overlayBackgroundColor?.slug &&
+					overlayBackgroundColor?.color &&
+					overlayBackgroundColor.color,
+		  }
+		: {};
 
 	const openButtonClasses = clsx(
 		'wp-block-navigation__responsive-container-open',

package/src/navigation/edit/test/use-create-overlay.js

@@ -23,6 +23,16 @@ jest.mock( '@wordpress/core-data', () => ( {
 	store: {},
 } ) );
 
+// Mock @wordpress/blocks
+jest.mock( '@wordpress/blocks', () => ( {
+	serialize: jest.fn( ( blocks ) => JSON.stringify( blocks ) ),
+	createBlock: jest.fn( ( name ) => ( {
+		name,
+		attributes: {},
+		innerBlocks: [],
+	} ) ),
+} ) );
+
 describe( 'useCreateOverlayTemplatePart', () => {
 	const mockSaveEntityRecord = jest.fn();
 
@@ -62,6 +72,7 @@ describe( 'useCreateOverlayTemplatePart', () => {
 			expect.objectContaining( {
 				slug: 'overlay',
 				title: 'Overlay',
+				content: expect.any( String ),
 				area: 'navigation-overlay',
 			} ),
 			{ throwOnError: true }
@@ -107,6 +118,7 @@ describe( 'useCreateOverlayTemplatePart', () => {
 			expect.objectContaining( {
 				title: 'Overlay 2',
 				slug: 'overlay-2',
+				content: expect.any( String ),
 				area: 'navigation-overlay',
 			} ),
 			{ throwOnError: true }

package/src/navigation/edit/use-create-overlay.js

@@ -5,6 +5,7 @@ import { useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
+import { serialize, createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -41,6 +42,7 @@ export default function useCreateOverlayTemplatePart( overlayTemplateParts ) {
 			{
 				slug: cleanSlug,
 				title: uniqueTitle,
+				content: serialize( [ createBlock( 'core/paragraph' ) ] ),
 				area: NAVIGATION_OVERLAY_TEMPLATE_PART_AREA,
 			},
 			{ throwOnError: true }

package/src/navigation/index.php

@@ -325,6 +325,9 @@ class WP_Navigation_Block_Renderer {
 					$block['attrs'] = array();
 				}
 				$block['attrs']['overlayMenu'] = 'never';
+				// Mark this as a nested navigation within an overlay template part
+				// so we can handle its rendering differently.
+				$block['attrs']['_isWithinOverlayTemplatePart'] = true;
 			}
 
 			// Recursively process inner blocks.
@@ -507,15 +510,7 @@ class WP_Navigation_Block_Renderer {
 			// Only published posts are valid. If this is changed then a corresponding change
 			// must also be implemented in `use-navigation-menu.js`.
 			if ( 'publish' === $navigation_post->post_status ) {
-				$navigation_name = $navigation_post->post_title;
-
-				// This is used to count the number of times a navigation name has been seen,
-				// so that we can ensure every navigation has a unique id.
-				if ( isset( static::$seen_menu_names[ $navigation_name ] ) ) {
-					++static::$seen_menu_names[ $navigation_name ];
-				} else {
-					static::$seen_menu_names[ $navigation_name ] = 1;
-				}
+				return $navigation_post->post_title;
 			}
 		}
 
@@ -599,6 +594,48 @@ class WP_Navigation_Block_Renderer {
 		return $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'];
 	}
 
+	/**
+	 * Get responsive container classes for the navigation block.
+	 *
+	 * @since 7.0.0
+	 *
+	 * @param bool  $is_hidden_by_default Whether the responsive menu is hidden by default.
+	 * @param bool  $has_custom_overlay Whether a custom overlay is used.
+	 * @param array $colors The colors array.
+	 * @return array Returns the responsive container classes.
+	 */
+	private static function get_responsive_container_classes( $is_hidden_by_default, $has_custom_overlay, $colors ) {
+		$responsive_container_classes = array( 'wp-block-navigation__responsive-container' );
+
+		if ( $is_hidden_by_default ) {
+			$responsive_container_classes[] = 'hidden-by-default';
+		}
+
+		if ( $has_custom_overlay ) {
+			// Only add the disable-default-overlay class if experiment is enabled AND overlay blocks actually rendered.
+			$responsive_container_classes[] = 'disable-default-overlay';
+		} else {
+			// Don't apply overlay color classes if using a custom overlay template part.
+			// The custom overlay is responsible for its own styling.
+			$responsive_container_classes[] = implode( ' ', $colors['overlay_css_classes'] );
+		}
+
+		return $responsive_container_classes;
+	}
+
+	/**
+	 * Get overlay inline styles for the navigation block.
+	 *
+	 * @since 7.0.0
+	 *
+	 * @param array $colors The colors array.
+	 * @return string Returns the overlay inline styles.
+	 */
+	private static function get_overlay_inline_styles( $has_custom_overlay, $colors ) {
+		$overlay_inline_styles = $has_custom_overlay ? '' : esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) );
+		return ( ! empty( $overlay_inline_styles ) ) ? "style=\"$overlay_inline_styles\"" : '';
+	}
+
 	/**
 	 * Get the responsive container markup
 	 *
@@ -649,14 +686,9 @@ class WP_Navigation_Block_Renderer {
 			$has_custom_overlay = ! empty( $overlay_blocks_html );
 		}
 
-		// Only add the disable-default-overlay class if experiment is enabled AND overlay blocks actually rendered.
-		$responsive_container_classes = array(
-			'wp-block-navigation__responsive-container',
-			$is_hidden_by_default ? 'hidden-by-default' : '',
-			$has_custom_overlay ? 'disable-default-overlay' : '',
-			implode( ' ', $colors['overlay_css_classes'] ),
-		);
-		$open_button_classes          = array(
+		$responsive_container_classes = static::get_responsive_container_classes( $is_hidden_by_default, $has_custom_overlay, $colors );
+
+		$open_button_classes = array(
 			'wp-block-navigation__responsive-container-open',
 			$is_hidden_by_default ? 'always-shown' : '',
 		);
@@ -705,7 +737,9 @@ class WP_Navigation_Block_Renderer {
 			';
 		}
 
-		$overlay_inline_styles = esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) );
+		// Don't apply overlay inline styles if using a custom overlay template part.
+		// The custom overlay is responsible for its own styling.
+		$overlay_inline_styles = static::get_overlay_inline_styles( $has_custom_overlay, $colors );
 
 		if ( $has_custom_overlay ) {
 			$custom_overlay_markup = sprintf(
@@ -744,7 +778,7 @@ class WP_Navigation_Block_Renderer {
 			$toggle_aria_label_close,
 			esc_attr( trim( implode( ' ', $responsive_container_classes ) ) ),
 			esc_attr( trim( implode( ' ', $open_button_classes ) ) ),
-			( ! empty( $overlay_inline_styles ) ) ? "style=\"$overlay_inline_styles\"" : '',
+			$overlay_inline_styles,
 			$toggle_button_content,
 			$toggle_close_button_content,
 			$open_button_directives,
@@ -765,8 +799,7 @@ class WP_Navigation_Block_Renderer {
 	 * @param WP_Block_List $inner_blocks  A list of inner blocks.
 	 * @return string Returns the navigation block markup.
 	 */
-	private static function get_nav_wrapper_attributes( $attributes, $inner_blocks ) {
-		$nav_menu_name      = static::get_unique_navigation_name( $attributes );
+	private static function get_nav_attributes( $attributes, $inner_blocks ) {
 		$is_interactive     = static::is_interactive( $attributes, $inner_blocks );
 		$is_responsive_menu = static::is_responsive( $attributes );
 		$style              = static::get_styles( $attributes );
@@ -775,6 +808,15 @@ class WP_Navigation_Block_Renderer {
 			'class' => $class,
 			'style' => $style,
 		);
+		// Only add aria-label for top-level navigation blocks.
+		// Skip navigation blocks marked as being within overlay template parts.
+		$is_within_overlay = $attributes['_isWithinOverlayTemplatePart'] ?? false;
+		if ( $is_within_overlay ) {
+			$nav_menu_name = static::get_navigation_name( $attributes );
+		} else {
+			$nav_menu_name = static::get_unique_navigation_name( $attributes );
+		}
+
 		if ( ! empty( $nav_menu_name ) ) {
 			$extra_attributes['aria-label'] = $nav_menu_name;
 		}
@@ -844,7 +886,7 @@ class WP_Navigation_Block_Renderer {
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
 	 * @return string Returns the navigation wrapper markup.
 	 */
-	private static function get_wrapper_markup( $attributes, $inner_blocks ) {
+	private static function get_inner_block_markup( $attributes, $inner_blocks ) {
 		$inner_blocks_html = static::get_inner_blocks_html( $attributes, $inner_blocks );
 		if ( static::is_responsive( $attributes ) ) {
 			return static::get_responsive_container_markup( $attributes, $inner_blocks, $inner_blocks_html );
@@ -863,6 +905,14 @@ class WP_Navigation_Block_Renderer {
 	private static function get_unique_navigation_name( $attributes ) {
 		$nav_menu_name = static::get_navigation_name( $attributes );
 
+		// This is used to count the number of times a navigation name has been seen,
+		// so that we can ensure every navigation has a unique id.
+		if ( isset( static::$seen_menu_names[ $nav_menu_name ] ) ) {
+			++static::$seen_menu_names[ $nav_menu_name ];
+		} else {
+			static::$seen_menu_names[ $nav_menu_name ] = 1;
+		}
+
 		// If the menu name has been used previously then append an ID
 		// to the name to ensure uniqueness across a given post.
 		if ( isset( static::$seen_menu_names[ $nav_menu_name ] ) && static::$seen_menu_names[ $nav_menu_name ] > 1 ) {
@@ -914,8 +964,8 @@ class WP_Navigation_Block_Renderer {
 
 		return sprintf(
 			'<nav %1$s>%2$s</nav>',
-			static::get_nav_wrapper_attributes( $attributes, $inner_blocks ),
-			static::get_wrapper_markup( $attributes, $inner_blocks )
+			static::get_nav_attributes( $attributes, $inner_blocks ),
+			static::get_inner_block_markup( $attributes, $inner_blocks )
 		);
 	}
 }

package/src/navigation/style.scss

@@ -238,25 +238,9 @@ $navigation-icon-size: 24px;
 
 	// Custom menu items.
 	// Show submenus on hover unless they open on click.
-	&:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
-		visibility: visible;
-		overflow: visible;
-		opacity: 1;
-		width: auto;
-		height: auto;
-		min-width: 200px;
-	}
-
+	&:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
 	// Keep submenus open when focus is within.
-	&:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
-		visibility: visible;
-		overflow: visible;
-		opacity: 1;
-		width: auto;
-		height: auto;
-		min-width: 200px;
-	}
-
+	&:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
 	// Show submenus on click.
 	.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
 		visibility: visible;

package/src/navigation-link/edit.js

@@ -23,13 +23,10 @@ import {
 	store as blockEditorStore,
 	getColorClassName,
 	useInnerBlocksProps,
-	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
 import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
-import { decodeEntities } from '@wordpress/html-entities';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
 import { useMergeRefs, useInstanceId } from '@wordpress/compose';
 
 /**
@@ -42,6 +39,9 @@ import {
 	useEntityBinding,
 	MissingEntityHelpText,
 	useHandleLinkChange,
+	useIsInvalidLink,
+	InvalidDraftDisplay,
+	useEnableLinkStatusValidation,
 } from './shared';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
@@ -101,62 +101,6 @@ const useIsDraggingWithin = ( elementRef ) => {
 	return isDraggingWithin;
 };
 
-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 ];
-};
-
 function getMissingText( type ) {
 	let missingText = '';
 
@@ -224,7 +168,6 @@ export default function NavigationLinkEdit( {
 		isTopLevelLink,
 		isParentOfSelectedBlock,
 		hasChildren,
-		validateLinkStatus,
 		parentBlockClientId,
 		isSubmenu,
 	} = useSelect(
@@ -235,12 +178,10 @@ export default function NavigationLinkEdit( {
 				getBlockRootClientId,
 				hasSelectedInnerBlock,
 				getBlockParentsByBlockName,
-				getSelectedBlockClientId,
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
 			const parentBlockName = getBlockName( rootClientId );
 			const isTopLevel = parentBlockName === 'core/navigation';
-			const selectedBlockClientId = getSelectedBlockClientId();
 			const rootNavigationClientId = isTopLevel
 				? rootClientId
 				: getBlockParentsByBlockName(
@@ -254,11 +195,6 @@ export default function NavigationLinkEdit( {
 					? rootClientId
 					: rootNavigationClientId;
 
-			// Enable when the root Navigation block is selected or any of its inner blocks.
-			const enableLinkStatusValidation =
-				selectedBlockClientId === rootNavigationClientId ||
-				hasSelectedInnerBlock( rootNavigationClientId, true );
-
 			return {
 				isAtMaxNesting:
 					getBlockParentsByBlockName( clientId, NESTING_BLOCK_NAMES )
@@ -269,13 +205,14 @@ export default function NavigationLinkEdit( {
 					true
 				),
 				hasChildren: !! getBlockCount( clientId ),
-				validateLinkStatus: enableLinkStatusValidation,
 				parentBlockClientId: parentBlockId,
 				isSubmenu: parentBlockName === 'core/navigation-submenu',
 			};
 		},
 		[ clientId, maxNestingLevel ]
 	);
+
+	const validateLinkStatus = useEnableLinkStatusValidation( clientId );
 	const { getBlocks } = useSelect( blockEditorStore );
 
 	// URL binding logic
@@ -493,10 +430,6 @@ export default function NavigationLinkEdit( {
 	} );
 
 	const missingText = getMissingText( type );
-	/* translators: Whether the navigation link is Invalid or a Draft. */
-	const placeholderText = `(${
-		isInvalid ? __( 'Invalid' ) : __( 'Draft' )
-	})`;
 
 	return (
 		<>
@@ -578,31 +511,12 @@ export default function NavigationLinkEdit( {
 								</>
 							) }
 							{ ( isInvalid || isDraft ) && (
-								<div
-									className={ clsx(
-										'wp-block-navigation-link__placeholder-text',
-										'wp-block-navigation-link__label',
-										{
-											'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 ) } ${
-												isInvalid || isDraft
-													? placeholderText
-													: ''
-											}`.trim()
-										}
-									</span>
-								</div>
+								<InvalidDraftDisplay
+									label={ label }
+									isInvalid={ isInvalid }
+									isDraft={ isDraft }
+									className="wp-block-navigation-link__label"
+								/>
 							) }
 						</>
 					) }

package/src/navigation-link/index.js

@@ -98,21 +98,26 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
 		{
 			id: 'label',
 			label: __( 'Label' ),
-			type: 'richtext',
+			type: 'text',
+			Edit: 'rich-text',
 		},
 		{
 			id: 'link',
 			label: __( 'Link' ),
-			type: 'link',
-			mapping: {
-				href: 'url',
-				rel: 'rel',
-				// TODO - opens in new tab? id?
-			},
+			type: 'url',
+			Edit: 'link',
+			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-link/index.php

@@ -5,6 +5,13 @@
  * @package WordPress
  */
 
+// Path differs between source and build: './shared/helpers.php' in source, './navigation-link/shared/helpers.php' in build.
+if ( file_exists( __DIR__ . '/shared/helpers.php' ) ) {
+	require_once __DIR__ . '/shared/helpers.php';
+} else {
+	require_once __DIR__ . '/navigation-link/shared/helpers.php';
+}
+
 /**
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
@@ -170,29 +177,9 @@ function block_core_navigation_link_maybe_urldecode( $url ) {
  * @return string Returns the post content with the legacy widget added.
  */
 function render_block_core_navigation_link( $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 or if the ID does not exist.
-	if ( $is_post_type && $navigation_link_has_id ) {
-		$post = get_post( $attributes['id'] );
-		/**
-		 * Filter allowed post_status for navigation link block to render.
-		 *
-		 * @since 6.8.0
-		 *
-		 * @param array $post_status
-		 * @param array $attributes
-		 * @param WP_Block $block
-		 */
-		$allowed_post_status = (array) apply_filters(
-			'render_block_core_navigation_link_allowed_post_status',
-			array( 'publish' ),
-			$attributes,
-			$block
-		);
-		if ( ! $post || ! in_array( $post->post_status, $allowed_post_status, true ) ) {
+	// 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 '';
 		}
 	}
@@ -208,8 +195,14 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	);
 	$style_attribute = $font_sizes['inline_styles'];
 
+	// 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 ) );
+
 	$css_classes = trim( implode( ' ', $classes ) );
-	$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 );
 
@@ -282,11 +275,6 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	}
 
 	if ( $has_submenu ) {
-		$inner_blocks_html = '';
-		foreach ( $block->inner_blocks as $inner_block ) {
-			$inner_blocks_html .= $inner_block->render();
-		}
-
 		$html .= sprintf(
 			'<ul class="wp-block-navigation__submenu-container">%s</ul>',
 			$inner_blocks_html

package/src/navigation-link/shared/helpers.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * Shared helper functions for Navigation Link and Navigation Submenu blocks.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Checks if a navigation item should render based on post status.
+ *
+ * @since 7.0.0
+ *
+ * @param array    $attributes The block attributes.
+ * @param WP_Block $block      The parsed block.
+ * @return bool True if the item should render, false otherwise.
+ */
+function block_core_shared_navigation_item_should_render( $attributes, $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 or if the ID does not exist.
+	if ( $is_post_type && $navigation_link_has_id ) {
+		$post = get_post( $attributes['id'] );
+		/**
+		 * Filter allowed post_status for navigation link block to render.
+		 *
+		 * @since 6.8.0
+		 *
+		 * @param array    $post_status Array of allowed post statuses.
+		 * @param array    $attributes  Block attributes.
+		 * @param WP_Block $block       The parsed block.
+		 */
+		$allowed_post_status = (array) apply_filters(
+			'render_block_core_navigation_link_allowed_post_status',
+			array( 'publish' ),
+			$attributes,
+			$block
+		);
+		if ( ! $post || ! in_array( $post->post_status, $allowed_post_status, true ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}

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

@@ -13,3 +13,6 @@ export {
 } from './use-entity-binding';
 export { LinkUI } from '../link-ui';
 export { useHandleLinkChange } from './use-handle-link-change';
+export { useIsInvalidLink } from './use-is-invalid-link';
+export { InvalidDraftDisplay } from './invalid-draft-display';
+export { useEnableLinkStatusValidation } from './use-enable-link-status-validation';