@wordpress/block-library 10.2.0 → 10.4.0

package/src/navigation/index.php

@@ -16,7 +16,7 @@
  * will always have a value even for legacy blocks. We check the legacy openSubmenusOnClick
  * attribute first to preserve original behavior for blocks saved before the migration.
  *
- * @since 6.9.0
+ * @since 7.0.0
  *
  * @param array $attributes Block attributes containing submenuVisibility and/or openSubmenusOnClick.
  * @return string The visibility mode: 'hover', 'click', or 'always'.
@@ -40,6 +40,45 @@ function block_core_navigation_get_submenu_visibility( $attributes ) {
 	return $submenu_visibility ?? 'hover';
 }
 
+/**
+ * Returns the custom properties used by the Navigation block for a layout.
+ *
+ * @since 7.1.0
+ *
+ * @param array $layout Layout configuration.
+ * @return array Navigation layout custom property declarations.
+ */
+function block_core_navigation_get_layout_custom_property_declarations( $layout ) {
+	$justification_values = array(
+		'left'          => 'flex-start',
+		'center'        => 'center',
+		'right'         => 'flex-end',
+		'space-between' => 'space-between',
+	);
+	$justify_content      = is_array( $layout ) ? ( $layout['justifyContent'] ?? 'left' ) : 'left';
+	if ( ! is_string( $justify_content ) || ! isset( $justification_values[ $justify_content ] ) ) {
+		$justify_content = 'left';
+	}
+
+	$justification = $justification_values[ $justify_content ];
+	$is_vertical   = is_array( $layout ) && 'vertical' === ( $layout['orientation'] ?? null );
+	$align         = 'center';
+	$justify       = $justification;
+
+	if ( $is_vertical ) {
+		$align   = in_array( $justify_content, array( 'center', 'right' ), true ) ? $justification : 'flex-start';
+		$justify = 'left' === $justify_content ? 'initial' : $justification;
+	}
+
+	return array(
+		'--navigation-layout-justification-setting' => $justification,
+		'--navigation-layout-direction'             => $is_vertical ? 'column' : 'row',
+		'--navigation-layout-wrap'                  => is_array( $layout ) && 'nowrap' === ( $layout['flexWrap'] ?? null ) ? 'nowrap' : 'wrap',
+		'--navigation-layout-justify'               => $justify,
+		'--navigation-layout-align'                 => $align,
+	);
+}
+
 /**
  * Helper functions used to render the navigation block.
  *
@@ -576,12 +615,13 @@ class WP_Navigation_Block_Renderer {
 			'space-between' => 'items-justified-space-between',
 		);
 
-		$layout_class = '';
+		$layout_class        = '';
+		$nav_justify_content = $attributes['layout']['justifyContent'] ?? null;
 		if (
-			isset( $attributes['layout']['justifyContent'] ) &&
-			isset( $layout_justification[ $attributes['layout']['justifyContent'] ] )
+			is_string( $nav_justify_content ) &&
+			isset( $layout_justification[ $nav_justify_content ] )
 		) {
-			$layout_class .= $layout_justification[ $attributes['layout']['justifyContent'] ];
+			$layout_class .= $layout_justification[ $nav_justify_content ];
 		}
 		if ( isset( $attributes['layout']['orientation'] ) && 'vertical' === $attributes['layout']['orientation'] ) {
 			$layout_class .= ' is-vertical';
@@ -643,9 +683,14 @@ class WP_Navigation_Block_Renderer {
 	 * @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.
+	 * @param bool  $has_custom_overlay   Whether a custom overlay is used.
+	 * @param array $colors               The colors array.
 	 * @return array Returns the responsive container classes.
+	 *
+	 * @phpstan-param array{
+	 *     overlay_css_classes: list<string>,
+	 *     ...
+	 * } $colors
 	 */
 	private static function get_responsive_container_classes( $is_hidden_by_default, $has_custom_overlay, $colors ) {
 		$responsive_container_classes = array( 'wp-block-navigation__responsive-container' );
@@ -670,8 +715,14 @@ class WP_Navigation_Block_Renderer {
 	 *
 	 * @since 7.0.0
 	 *
-	 * @param array $colors The colors array.
+	 * @param bool  $has_custom_overlay Whether a custom overlay is used.
+	 * @param array $colors             The colors array.
 	 * @return string Returns the overlay inline styles.
+	 *
+	 * @phpstan-param array{
+	 *     overlay_inline_styles: string,
+	 *     ...
+	 * } $colors
 	 */
 	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'] ) );
@@ -1211,7 +1262,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 			)
 		) ) {
 			$tags->set_attribute( 'data-wp-on--click', 'actions.toggleMenuOnClick' );
-			$tags->set_attribute( 'data-wp-bind--aria-expanded', 'state.isMenuOpen' );
+			$tags->set_attribute( 'data-wp-bind--aria-expanded', 'state.isSubmenuOpen' );
 			// The `aria-expanded` attribute for SSR is already added in the submenu block.
 		}
 		// Add directives to the submenu.
@@ -1558,13 +1609,18 @@ function register_block_core_navigation() {
 add_action( 'init', 'register_block_core_navigation' );
 
 /**
- * Adds the Navigation block state class to inner list containers.
+ * Adds Navigation block support classes to inner list containers.
  *
  * State block support adds the generated `wp-states-*` class to the outer
  * block wrapper. The Navigation block renders its menu items inside an inner
  * `wp-block-navigation__container` list, so the same state class is also needed
  * there for state styles to apply directly to the menu list.
  *
+ * Navigation also uses layout classes on its outer wrapper to define custom
+ * properties consumed by its inner containers. Viewport layout styles cannot
+ * change those classes, so equivalent custom properties and a scoping class
+ * are generated for each configured viewport layout.
+ *
  * Currently this is required as a workaround because of how difficult it is for nav
  * child blocks to inherit styles through the complex responsive nav block html. The
  * bug in https://github.com/WordPress/gutenberg/issues/62690 also prevents inheritance.
@@ -1575,25 +1631,83 @@ add_action( 'init', 'register_block_core_navigation' );
  * @param array  $block         The full block, including name and attributes.
  * @return string The updated block content.
  */
-function block_core_navigation_add_state_class_to_container( $block_content, $block ) {
+function block_core_navigation_add_support_classes_to_container( $block_content, $block ) {
 	if ( 'core/navigation' !== ( $block['blockName'] ?? null ) || empty( $block_content ) ) {
 		return $block_content;
 	}
 
+	$attributes = is_array( $block['attrs'] ?? null ) ? $block['attrs'] : array();
+	$style      = is_array( $attributes['style'] ?? null ) ? $attributes['style'] : array();
+	if (
+		defined( 'IS_GUTENBERG_PLUGIN' ) &&
+		IS_GUTENBERG_PLUGIN &&
+		function_exists( 'gutenberg_resolve_style_state_aliases' )
+	) {
+		$style = gutenberg_resolve_style_state_aliases( $style, 'core/navigation' );
+	}
+
+	$global_settings          = wp_get_global_settings();
+	$viewport_settings        = $global_settings['viewport'] ?? null;
+	$responsive_media_queries = array();
+	if ( method_exists( 'WP_Theme_JSON_Gutenberg', 'get_viewport_media_queries' ) ) {
+		$responsive_media_queries = WP_Theme_JSON_Gutenberg::get_viewport_media_queries( $viewport_settings );
+	} elseif ( method_exists( 'WP_Theme_JSON', 'get_viewport_media_queries' ) ) {
+		$responsive_media_queries = WP_Theme_JSON::get_viewport_media_queries( $viewport_settings );
+	}
+
+	$styles      = array();
+	$base_layout = is_array( $attributes['layout'] ?? null ) ? $attributes['layout'] : array();
+	foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
+		$viewport_style  = is_array( $style[ $breakpoint ] ?? null ) ? $style[ $breakpoint ] : array();
+		$viewport_layout = is_array( $viewport_style['layout'] ?? null ) ? $viewport_style['layout'] : array();
+		if ( empty( $viewport_layout ) ) {
+			continue;
+		}
+
+		$styles[] = array(
+			'declarations' => block_core_navigation_get_layout_custom_property_declarations(
+				array_replace( $base_layout, $viewport_layout )
+			),
+			'rules_group'  => $media_query,
+		);
+	}
+
 	$processor = new WP_HTML_Tag_Processor( $block_content );
 	if ( ! $processor->next_tag() ) {
 		return $block_content;
 	}
 
 	$class_attribute = $processor->get_attribute( 'class' );
-	if ( ! is_string( $class_attribute ) || ! preg_match( '/\bwp-states-[a-f0-9]{8}\b/', $class_attribute, $matches ) ) {
+	$state_class     = null;
+	if ( is_string( $class_attribute ) && preg_match( '/\bwp-states-[a-f0-9]{8}\b/', $class_attribute, $matches ) ) {
+		$state_class = $matches[0];
+	}
+
+	$layout_class = null;
+	if ( ! empty( $styles ) ) {
+		$layout_class = wp_unique_id( 'wp-block-navigation-' );
+		// The inner selector includes both Navigation classes so it overrides the
+		// default layout custom properties set by `.wp-block-navigation.items-*`.
+		$selector = ".wp-block-navigation.{$layout_class},.wp-block-navigation.wp-block-navigation__container.{$layout_class}";
+		foreach ( $styles as &$style_rule ) {
+			$style_rule['selector'] = $selector;
+		}
+		unset( $style_rule );
+
+		$processor->add_class( $layout_class );
+		wp_style_engine_get_stylesheet_from_css_rules(
+			$styles,
+			array( 'context' => 'block-supports' )
+		);
+	}
+
+	if ( null === $state_class && null === $layout_class ) {
 		return $block_content;
 	}
 
-	$state_class = $matches[0];
 	while ( $processor->next_tag() ) {
 		// Custom overlay content can include nested Navigation blocks.
-		// Avoid applying the outer Navigation state class to an inner nav block.
+		// Avoid applying the outer Navigation classes to an inner nav block.
 		if ( $processor->has_class( 'wp-block-navigation' ) && ! $processor->has_class( 'wp-block-navigation__container' ) ) {
 			break;
 		}
@@ -1602,6 +1716,14 @@ function block_core_navigation_add_state_class_to_container( $block_content, $bl
 			continue;
 		}
 
+		if ( null !== $layout_class ) {
+			$processor->add_class( $layout_class );
+		}
+
+		if ( null === $state_class ) {
+			continue;
+		}
+
 		$class_attribute = $processor->get_attribute( 'class' );
 		if ( is_string( $class_attribute ) && preg_match( '/\bwp-states-[a-f0-9]{8}\b/', $class_attribute ) ) {
 			continue;
@@ -1613,7 +1735,7 @@ function block_core_navigation_add_state_class_to_container( $block_content, $bl
 	return $processor->get_updated_html();
 }
 
-add_filter( 'render_block', 'block_core_navigation_add_state_class_to_container', 11, 2 );
+add_filter( 'render_block', 'block_core_navigation_add_support_classes_to_container', 11, 2 );
 
 /**
  * Filter that changes the parsed attribute values of navigation blocks contain typographic presets to contain the values directly.

package/src/navigation/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/navigation/menu-items-to-blocks.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { createBlock, parse } from '@wordpress/blocks';
 import { applyFilters } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
 import { buildNavigationLinkEntityBinding } from '../navigation-link/shared/use-entity-binding';
 
 /**

package/src/navigation/save.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { InnerBlocks } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {

package/src/navigation/test/menu-items-to-blocks.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import menuItemsToBlocks from '../menu-items-to-blocks';
 
 // Mock createBlock to avoid creating the blocks in test environment.

package/src/navigation/test/use-navigation-menu.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { createRegistry, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
 import useNavigationMenu from '../use-navigation-menu';
 
 const BASE_ENTITY = {

package/src/navigation/test/view.js

@@ -0,0 +1,51 @@
+let mockRegisteredStore;
+let mockCurrentContext;
+
+jest.mock( '@wordpress/interactivity', () => ( {
+	store: ( name, config ) => {
+		mockRegisteredStore = config;
+		return config;
+	},
+	getContext: () => mockCurrentContext,
+	getElement: () => ( { ref: {} } ),
+	withSyncEvent: ( fn ) => fn,
+} ) );
+
+describe( 'Navigation view script', () => {
+	beforeEach( async () => {
+		jest.resetModules();
+		mockRegisteredStore = null;
+		mockCurrentContext = null;
+		// Import the view.js script to register the store
+		await import( '../view.js' );
+	} );
+
+	it( 'updates submenuOpenedBy.hover when hovering a submenu inside an open overlay', () => {
+		// Mock the context for a submenu inside an open overlay
+		mockCurrentContext = {
+			type: 'submenu',
+			submenuOpenedBy: { click: false, hover: false, focus: false },
+			overlayOpenedBy: { click: true, hover: false, focus: false },
+		};
+
+		const { state, actions } = mockRegisteredStore;
+
+		// Verify initial state
+		expect( state.isSubmenuOpen ).toBe( true ); // because overlay is open
+		expect( mockCurrentContext.submenuOpenedBy.hover ).toBe( false );
+
+		// Simulate hover enter
+		actions.openMenuOnHover( { pointerType: 'mouse' } );
+
+		// Verify that hover state is tracked even though submenu is already "open" visually
+		expect( mockCurrentContext.submenuOpenedBy.hover ).toBe( true );
+		expect( state.isSubmenuOpen ).toBe( true ); // remains true
+
+		// Simulate hover leave
+		actions.closeMenuOnHover( { pointerType: 'mouse' } );
+
+		// Verify hover state is cleared
+		expect( mockCurrentContext.submenuOpenedBy.hover ).toBe( false );
+		expect( state.isSubmenuOpen ).toBe( true ); // remains true because overlay is still open
+	} );
+} );

package/src/navigation/use-navigation-menu.js

@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
 import {
 	store as coreStore,
 	useResourcePermissions,
 	useEntityRecords,
 } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
 
 export default function useNavigationMenu( ref ) {

package/src/navigation/use-template-part-area-label.js

@@ -1,14 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-
 // TODO: this util should perhaps be refactored somewhere like core-data.
 import { createTemplatePartId } from '../template-part/edit/utils/create-template-part-id';
 import { getTemplatePartIcon } from '../template-part/edit/utils/get-template-part-icon';

package/src/navigation/view.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	store,
 	getContext,
@@ -80,6 +77,17 @@ const { state, actions } = store(
 					? ctx.overlayOpenedBy
 					: ctx.submenuOpenedBy;
 			},
+			get isSubmenuOpen() {
+				const ctx = getContext();
+				// Once the overlay itself is open, its styles always expand
+				// every submenu regardless of hover/click/focus state, so the
+				// toggle's `aria-expanded` should reflect that immediately
+				// instead of waiting for a hover/click/focus interaction.
+				const isOverlayOpen =
+					Object.values( ctx.overlayOpenedBy || {} ).filter( Boolean )
+						.length > 0;
+				return isOverlayOpen || state.isMenuOpen;
+			},
 		},
 		actions: {
 			openMenuOnHover( event ) {
@@ -88,13 +96,8 @@ const { state, actions } = store(
 				if ( event?.pointerType === 'touch' ) {
 					return;
 				}
-				const { type, overlayOpenedBy } = getContext();
-				if (
-					type === 'submenu' &&
-					// Only open on hover if the overlay is closed.
-					Object.values( overlayOpenedBy || {} ).filter( Boolean )
-						.length === 0
-				) {
+				const { type } = getContext();
+				if ( type === 'submenu' ) {
 					actions.openMenu( 'hover' );
 				}
 			},
@@ -102,13 +105,8 @@ const { state, actions } = store(
 				if ( event?.pointerType === 'touch' ) {
 					return;
 				}
-				const { type, overlayOpenedBy } = getContext();
-				if (
-					type === 'submenu' &&
-					// Only close on hover if the overlay is closed.
-					Object.values( overlayOpenedBy || {} ).filter( Boolean )
-						.length === 0
-				) {
+				const { type } = getContext();
+				if ( type === 'submenu' ) {
 					actions.closeMenu( 'hover' );
 				}
 			},

package/src/navigation-link/edit.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
@@ -25,10 +18,6 @@ import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
 import { VisuallyHidden } from '@wordpress/ui';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { useMergeRefs, useInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { getColors } from '../navigation/edit/utils';
 import {
 	Controls,
@@ -425,12 +414,15 @@ export default function NavigationLinkEdit( {
 										}
 										onMerge={ mergeBlocks }
 										onReplace={ onReplace }
-										__unstableOnSplitAtEnd={ () =>
-											insertBlocksAfter(
-												createBlock(
-													'core/navigation-link'
-												)
-											)
+										__unstableOnSplitAtEnd={
+											insertBlocksAfter
+												? () =>
+														insertBlocksAfter(
+															createBlock(
+																'core/navigation-link'
+															)
+														)
+												: undefined
 										}
 										aria-label={ __(
 											'Navigation link text'
@@ -470,7 +462,8 @@ export default function NavigationLinkEdit( {
 								// If there is no link and no binding, remove the auto-inserted block.
 								// This avoids empty blocks which can provided a poor UX.
 								// Don't remove if binding exists (even if entity is unavailable) so user can fix it.
-								if ( ! url && ! hasUrlBinding ) {
+								// `onReplace` is undefined when the block can't be removed.
+								if ( ! url && ! hasUrlBinding && onReplace ) {
 									onReplace( [] );
 									return;
 								}

package/src/navigation-link/hooks.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	category,
 	page,

package/src/navigation-link/icons.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { Path, SVG } from '@wordpress/components';
 
 export const ItemSubmenuIcon = () => (

package/src/navigation-link/index.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { _x, __, sprintf } from '@wordpress/i18n';
 import { customLink as linkIcon } from '@wordpress/icons';
 import { InnerBlocks } from '@wordpress/block-editor';
 import { addFilter } from '@wordpress/hooks';
 import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';

package/src/navigation-link/index.php

@@ -80,6 +80,66 @@ function block_core_navigation_link_build_css_colors( $context, $attributes, $is
 	return $colors;
 }
 
+/**
+ * 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.
+ *
+ * This function is no longer used internally and is kept only for backward
+ * compatibility with third-party code that may call it directly.
+ *
+ * @since 5.9.0
+ * @deprecated 7.0.0
+ *
+ * @param  array $context Navigation block context.
+ * @return array Font size CSS classes and inline styles.
+ */
+function block_core_navigation_link_build_css_font_sizes( $context ) {
+	_deprecated_function( __FUNCTION__, '7.0.0' );
+
+	// CSS classes.
+	$font_sizes = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	$has_named_font_size  = array_key_exists( 'fontSize', $context );
+	$has_custom_font_size = isset( $context['style']['typography']['fontSize'] );
+
+	if ( $has_named_font_size ) {
+		// Add the font size class.
+		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
+	} elseif ( $has_custom_font_size ) {
+		// Add the custom font size inline style.
+		$font_sizes['inline_styles'] = sprintf(
+			'font-size: %s;',
+			wp_get_typography_font_size_value(
+				array(
+					'size' => $context['style']['typography']['fontSize'],
+				)
+			)
+		);
+	}
+
+	return $font_sizes;
+}
+
+/**
+ * Returns the top-level submenu SVG chevron icon.
+ *
+ * @since 5.9.0
+ * @deprecated 7.0.0 Use block_core_shared_navigation_render_submenu_icon() instead.
+ *
+ * @return string
+ */
+function block_core_navigation_link_render_submenu_icon() {
+	_deprecated_function(
+		__FUNCTION__,
+		'7.0.0',
+		'block_core_shared_navigation_render_submenu_icon()'
+	);
+	return block_core_shared_navigation_render_submenu_icon();
+}
+
 /**
  * Decodes a url if it's encoded, returning the same url if not.
  *
@@ -90,6 +150,10 @@ function block_core_navigation_link_build_css_colors( $context, $attributes, $is
  * @return string $url Returns the decoded url.
  */
 function block_core_navigation_link_maybe_urldecode( $url ) {
+	if ( ! is_string( $url ) ) {
+		return '';
+	}
+
 	$is_url_encoded = false;
 	$query          = parse_url( $url, PHP_URL_QUERY );
 	$query_params   = wp_parse_args( $query );

package/src/navigation-link/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/navigation-link/link-ui/block-inserter.js

@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
 import DialogWrapper from './dialog-wrapper';
 import { unlock } from '../../lock-unlock';
 

package/src/navigation-link/link-ui/dialog-wrapper.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { Button } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __unstableStripHTML as stripHTML, focus } from '@wordpress/dom';
 import {
 	Popover,
@@ -21,10 +18,6 @@ import { plus } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
 import { VisuallyHidden } from '@wordpress/ui';
 import { isURL } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
 import { LinkUIPageCreator } from './page-creator';
 import LinkUIBlockInserter from './block-inserter';
 import { useEntityBinding, useLinkPreview } from '../shared';
@@ -248,11 +241,12 @@ function UnforwardedLinkUI( props, ref ) {
 										setAddingPage( true );
 									} }
 									canAddPage={
+										blockEditingMode !== 'disabled' &&
 										permissions?.canCreate &&
 										type === 'page'
 									}
 									canAddBlock={
-										blockEditingMode === 'default'
+										blockEditingMode !== 'disabled'
 									}
 								/>
 							);