@wordpress/block-library 9.41.1-next.v.202603102151.0 → 9.42.0

package/src/html/modal.js

@@ -37,8 +37,6 @@ export default function HTMLEditModal( {
 	const [ editedHtml, setEditedHtml ] = useState( html );
 	const [ editedCss, setEditedCss ] = useState( css );
 	const [ editedJs, setEditedJs ] = useState( js );
-	const [ isDirty, setIsDirty ] = useState( false );
-	const [ showUnsavedWarning, setShowUnsavedWarning ] = useState( false );
 	const [ isFullscreen, setIsFullscreen ] = useState( false );
 
 	const isMobileViewport = useViewportMatch( 'small', '<' );
@@ -60,18 +58,6 @@ export default function HTMLEditModal( {
 		return null;
 	}
 
-	const handleHtmlChange = ( value ) => {
-		setEditedHtml( value );
-		setIsDirty( true );
-	};
-	const handleCssChange = ( value ) => {
-		setEditedCss( value );
-		setIsDirty( true );
-	};
-	const handleJsChange = ( value ) => {
-		setEditedJs( value );
-		setIsDirty( true );
-	};
 	const handleUpdate = () => {
 		// For users without unfiltered_html capability, strip CSS and JS content
 		// to prevent kses from leaving broken content
@@ -82,25 +68,6 @@ export default function HTMLEditModal( {
 				js: canUserUseUnfilteredHTML ? editedJs : '',
 			} ),
 		} );
-		setIsDirty( false );
-	};
-	const handleCancel = () => {
-		setIsDirty( false );
-		onRequestClose();
-	};
-	const handleRequestClose = () => {
-		if ( isDirty ) {
-			setShowUnsavedWarning( true );
-		} else {
-			onRequestClose();
-		}
-	};
-	const handleDiscardChanges = () => {
-		setShowUnsavedWarning( false );
-		onRequestClose();
-	};
-	const handleContinueEditing = () => {
-		setShowUnsavedWarning( false );
 	};
 	const handleUpdateAndClose = () => {
 		handleUpdate();
@@ -114,12 +81,11 @@ export default function HTMLEditModal( {
 		<>
 			<Modal
 				title={ __( 'Edit HTML' ) }
-				onRequestClose={ handleRequestClose }
+				onRequestClose={ onRequestClose }
 				className="block-library-html__modal"
 				size="large"
 				isDismissible={ false }
-				shouldCloseOnClickOutside={ ! isDirty }
-				shouldCloseOnEsc={ ! isDirty }
+				shouldCloseOnClickOutside={ false }
 				isFullScreen={ isFullscreen }
 				__experimentalHideHeader
 			>
@@ -183,7 +149,7 @@ export default function HTMLEditModal( {
 								>
 									<PlainText
 										value={ editedHtml }
-										onChange={ handleHtmlChange }
+										onChange={ setEditedHtml }
 										placeholder={ __( 'Write HTML…' ) }
 										aria-label={ __( 'HTML' ) }
 										className="block-library-html__modal-editor"
@@ -197,7 +163,7 @@ export default function HTMLEditModal( {
 									>
 										<PlainText
 											value={ editedCss }
-											onChange={ handleCssChange }
+											onChange={ setEditedCss }
 											placeholder={ __( 'Write CSS…' ) }
 											aria-label={ __( 'CSS' ) }
 											className="block-library-html__modal-editor"
@@ -212,7 +178,7 @@ export default function HTMLEditModal( {
 									>
 										<PlainText
 											value={ editedJs }
-											onChange={ handleJsChange }
+											onChange={ setEditedJs }
 											placeholder={ __(
 												'Write JavaScript…'
 											) }
@@ -241,7 +207,7 @@ export default function HTMLEditModal( {
 							<Button
 								__next40pxDefaultSize
 								variant="tertiary"
-								onClick={ handleCancel }
+								onClick={ onRequestClose }
 							>
 								{ __( 'Cancel' ) }
 							</Button>
@@ -256,43 +222,6 @@ export default function HTMLEditModal( {
 					</VStack>
 				</Tabs>
 			</Modal>
-
-			{ showUnsavedWarning && (
-				<Modal
-					title={ __( 'Unsaved changes' ) }
-					onRequestClose={ handleContinueEditing }
-					size="medium"
-				>
-					<p>
-						{ __(
-							'You have unsaved changes. What would you like to do?'
-						) }
-					</p>
-					<Flex direction="row" justify="flex-end" gap={ 2 }>
-						<Button
-							__next40pxDefaultSize
-							variant="secondary"
-							onClick={ handleDiscardChanges }
-						>
-							{ __( 'Discard unsaved changes' ) }
-						</Button>
-						<Button
-							__next40pxDefaultSize
-							variant="secondary"
-							onClick={ handleContinueEditing }
-						>
-							{ __( 'Continue editing' ) }
-						</Button>
-						<Button
-							__next40pxDefaultSize
-							variant="primary"
-							onClick={ handleUpdateAndClose }
-						>
-							{ __( 'Update and close' ) }
-						</Button>
-					</Flex>
-				</Modal>
-			) }
 		</>
 	);
 }

package/src/image/edit.js

@@ -159,6 +159,7 @@ export function ImageEdit( {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	function onUploadError( message ) {
 		createErrorNotice( message, { type: 'snackbar' } );
+		setTemporaryURL();
 		setAttributes( {
 			src: undefined,
 			id: undefined,
@@ -167,6 +168,12 @@ export function ImageEdit( {
 		} );
 	}
 
+	function onFilesPreUpload( files ) {
+		if ( files.length === 1 ) {
+			setTemporaryURL( createBlobURL( files[ 0 ] ) );
+		}
+	}
+
 	function onSelectImagesList( images ) {
 		const win = containerRef.current?.ownerDocument.defaultView;
 
@@ -479,6 +486,7 @@ export function ImageEdit( {
 					icon={ <BlockIcon icon={ icon } /> }
 					onSelect={ onSelectImage }
 					onSelectURL={ onSelectURL }
+					onFilesPreUpload={ onFilesPreUpload }
 					onError={ onUploadError }
 					placeholder={ placeholder }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }

package/src/media-text/media-container.js

@@ -18,7 +18,7 @@ import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
-import { isBlobURL } from '@wordpress/blob';
+import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
 import { media as icon } from '@wordpress/icons';
 
@@ -82,6 +82,12 @@ function PlaceholderContainer( {
 		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
+	const onFilesPreUpload = ( files ) => {
+		if ( files.length === 1 ) {
+			onSelectMedia( { url: createBlobURL( files[ 0 ] ) } );
+		}
+	};
+
 	return (
 		<MediaPlaceholder
 			icon={ <BlockIcon icon={ icon } /> }
@@ -92,6 +98,7 @@ function PlaceholderContainer( {
 			onSelect={ onSelectMedia }
 			onToggleFeaturedImage={ toggleUseFeaturedImage }
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
+			onFilesPreUpload={ onFilesPreUpload }
 			onError={ onUploadError }
 			disableMediaButtons={ mediaUrl }
 		/>

package/src/navigation/edit/index.js

@@ -86,7 +86,7 @@ import {
 	NAVIGATION_OVERLAY_TEMPLATE_PART_AREA,
 } from '../constants';
 
-const { isIsolatedEditorKey } = unlock( blockEditorPrivateApis );
+const { isNavigationPostEditorKey } = unlock( blockEditorPrivateApis );
 
 /**
  * Component that renders the Add page button for the Navigation block.
@@ -330,15 +330,17 @@ function Navigation( {
 	} = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const settings = getSettings();
+
 		return {
 			isPreviewMode: settings.isPreviewMode,
 			onNavigateToEntityRecord: settings?.onNavigateToEntityRecord,
 			// Needed to construct the template part ID for the overlay preview.
 			currentTheme: select( coreStore ).getCurrentTheme()?.stylesheet,
-			// In preview mode or isolated editor, always show navigation expanded (no hamburger)
-			// so users can see and interact with all menu items.
+			// When editing a navigation post directly in an isolated editor,
+			// always show navigation expanded (no hamburger) so users can see
+			// and interact with all menu items.
 			editorDisabledResponsive:
-				settings.isPreviewMode || !! settings?.[ isIsolatedEditorKey ],
+				!! settings?.[ isNavigationPostEditorKey ],
 		};
 	}, [] );
 	const hasAlreadyRendered = isPreviewMode ? false : recursionDetected;

package/src/navigation/index.php

@@ -697,14 +697,10 @@ class WP_Navigation_Block_Renderer {
 		if ( ! empty( $attributes['overlay'] ) ) {
 			// Get blocks from the overlay template part.
 			$overlay_blocks = static::get_overlay_blocks_from_template_part( $attributes['overlay'], $attributes );
-			// Check if overlay contains a navigation-overlay-close block.
-			$has_custom_overlay_close_block = block_core_navigation_block_tree_has_block_type(
-				$overlay_blocks,
-				'core/navigation-overlay-close',
-				array( 'core/navigation' ) // Skip navigation blocks, as they cannot contain an overlay close block
-			);
 			// Render template part blocks directly without navigation container wrapper.
 			$overlay_blocks_html = static::get_template_part_blocks_html( $overlay_blocks );
+			// Check if overlay contains a navigation-overlay-close block (detect in rendered HTML so it works with patterns).
+			$has_custom_overlay_close_block = block_core_navigation_overlay_html_has_close_block( $overlay_blocks_html );
 			// Add Interactivity API directives to the overlay close block if present.
 			if ( $has_custom_overlay_close_block && $is_interactive ) {
 				$tags                = new WP_HTML_Tag_Processor( $overlay_blocks_html );
@@ -1094,6 +1090,28 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 	}
 }
 
+/**
+ * Checks if the overlay HTML contains a navigation-overlay-close block.
+ *
+ * Uses WP_HTML_Tag_Processor to detect the close button in rendered output,
+ * so it works when the overlay uses patterns (pattern content is rendered at
+ * output time, not in the block tree).
+ *
+ * @since 7.0.0
+ *
+ * @param string $html The rendered overlay HTML.
+ * @return bool True if a close button element is found.
+ */
+function block_core_navigation_overlay_html_has_close_block( $html ) {
+	$tags = new WP_HTML_Tag_Processor( $html );
+	return $tags->next_tag(
+		array(
+			'tag_name'   => 'BUTTON',
+			'class_name' => 'wp-block-navigation-overlay-close',
+		)
+	);
+}
+
 /**
  * Add Interactivity API directives to the navigation-overlay-close block
  * markup using the Tag Processor.
@@ -1326,17 +1344,6 @@ function block_core_navigation_build_css_font_sizes( $attributes ) {
 	return $font_sizes;
 }
 
-/**
- * Returns the top-level submenu SVG chevron icon.
- *
- * @since 5.9.0
- *
- * @return string
- */
-function block_core_navigation_render_submenu_icon() {
-	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
-}
-
 /**
  * Filter out empty "null" blocks from the block list.
  * 'parse_blocks' includes a null block with '\n\n' as the content when

package/src/navigation/style.scss

@@ -700,8 +700,18 @@ button.wp-block-navigation-item__content {
 					display: none;
 				}
 
+				// Override justification dropdown menu positioning rules inside custom overlays.
+				// Mirrors the protection at lines 674-678 for default overlays, which does not
+				// apply here. Prevents .items-justified-right descendant rules from cascading
+				// right: 0 into the overlay and anchoring submenus off the left edge of the viewport.
+				// See: https://github.com/WordPress/gutenberg/issues/76276
 				.wp-block-navigation__overlay-container {
 					display: block;
+
+					.wp-block-navigation__submenu-container {
+						right: auto;
+						left: 0;
+					}
 				}
 			}
 		}

package/src/navigation-link/index.php

@@ -5,14 +5,8 @@
  * @package WordPress
  */
 
-// Path differs between source and build: './shared/' in source, './navigation-link/shared/' in build.
-if ( file_exists( __DIR__ . '/shared/item-should-render.php' ) ) {
-	require_once __DIR__ . '/shared/item-should-render.php';
-	require_once __DIR__ . '/shared/render-submenu-icon.php';
-} else {
-	require_once __DIR__ . '/navigation-link/shared/item-should-render.php';
-	require_once __DIR__ . '/navigation-link/shared/render-submenu-icon.php';
-}
+require_once __DIR__ . '/navigation-link/shared/item-should-render.php';
+require_once __DIR__ . '/navigation-link/shared/render-submenu-icon.php';
 
 /**
  * Build an array with CSS classes and inline styles defining the colors
@@ -262,7 +256,13 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	if ( isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'] && $has_submenu ) {
 		// The submenu icon can be hidden by a CSS rule on the Navigation Block.
-		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_render_submenu_icon() . '</span>';
+		$html .= '<span class="wp-block-navigation__submenu-icon">';
+		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+			$html .= gutenberg_block_core_shared_navigation_render_submenu_icon();
+		} else {
+			$html .= block_core_shared_navigation_render_submenu_icon();
+		}
+		$html .= '</span>';
 	}
 
 	if ( $has_submenu ) {

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

@@ -36,6 +36,7 @@ jest.mock( '../../../lock-unlock', () => ( {
 import {
 	computeDisplayUrl,
 	computeBadges,
+	isHomepage,
 	useLinkPreview,
 } from '../use-link-preview';
 
@@ -144,6 +145,74 @@ describe( 'computeDisplayUrl', () => {
 	} );
 } );
 
+describe( 'isHomepage', () => {
+	const host = 'homepage.com';
+	const homeUrl = 'https://' + host;
+
+	test.each( [
+		[ '/', homeUrl ],
+		[ '/', undefined ],
+	] )( 'should return true for root path "%s"', ( url, homeUrlParam ) => {
+		expect( isHomepage( url, homeUrlParam ) ).toBe( true );
+	} );
+
+	// Check combinations of http/s and trailing slash
+	test.each( [
+		[ `http://${ host }`, homeUrl ],
+		[ `https://${ host }`, homeUrl ],
+		[ `http://${ host }/`, homeUrl ],
+		[ `https://${ host }/`, homeUrl ],
+	] )( 'should return true for site URL "%s"', ( url ) => {
+		expect( isHomepage( url, homeUrl ) ).toBe( true );
+	} );
+
+	test.each( [
+		[ '', homeUrl ],
+		[ `https://${ host }`, '' ],
+		[ `https://${ host }`, undefined ],
+	] )(
+		'should return false when url or homeUrl is empty and not a / path',
+		( url, homeUrlParam ) => {
+			expect( isHomepage( url, homeUrlParam ) ).toBe( false );
+		}
+	);
+
+	const subdomain = 'sub.' + host;
+	test.each( [
+		[ false, `http://${ subdomain }/`, homeUrl ],
+		[ false, `https://${ subdomain }`, homeUrl ],
+		[ true, `http://${ subdomain }/`, `https://${ subdomain }` ],
+		[ true, `https://${ subdomain }`, `https://${ subdomain }` ],
+	] )(
+		'should return %s for subdomain (url=%s, homeUrl=%s)',
+		( expected, url, homeUrlParam ) => {
+			expect( isHomepage( url, homeUrlParam ) ).toBe( expected );
+		}
+	);
+
+	const path = '/wordpress';
+	const subdirHomeUrl = 'https://' + host + path;
+
+	test.each( [
+		[ `https://${ host }${ path }`, subdirHomeUrl ],
+		[ `https://${ host }${ path }/`, subdirHomeUrl ],
+		[ `http://${ host }${ path }`, subdirHomeUrl ],
+		[ `http://${ host }${ path }/`, subdirHomeUrl ],
+	] )( 'should return true for subdirectory homepage "%s"', ( url ) => {
+		expect( isHomepage( url, subdirHomeUrl ) ).toBe( true );
+	} );
+
+	test.each( [
+		[ `https://${ host }/page`, homeUrl ],
+		[ '/page', homeUrl ],
+		[ `https://${ host }`, subdirHomeUrl ],
+		[ `https://${ host }/`, subdirHomeUrl ],
+		[ `https://${ host }${ path }/page`, subdirHomeUrl ],
+	] )( 'should return false for non-homepage "%s"', ( url, homeUrlParam ) => {
+		expect( isHomepage( url, homeUrlParam ) ).toBe( false );
+	} );
+} );
+
 describe( 'computeBadges', () => {
 	describe( 'kind badges', () => {
 		it( 'should show "External link" badge for external links', () => {
@@ -183,6 +252,67 @@ describe( 'computeBadges', () => {
 			} );
 		} );
 
+		it( 'should show "Homepage" badge for root path', () => {
+			const badges = computeBadges( {
+				url: '/',
+				isExternal: false,
+			} );
+
+			expect( badges ).toContainEqual( {
+				label: 'Homepage',
+				intent: 'default',
+			} );
+		} );
+
+		test.each( [
+			[ 'https://example.com' ],
+			[ 'https://example.com/' ],
+			[ 'http://example.com' ],
+			[ 'http://example.com/' ],
+		] )( 'should show "Homepage" badge when url is "%s"', ( url ) => {
+			const badges = computeBadges( {
+				url,
+				homeUrl: 'https://example.com',
+				isExternal: false,
+			} );
+			expect( badges ).toContainEqual( {
+				label: 'Homepage',
+				intent: 'default',
+			} );
+		} );
+
+		test.each( [ [ 'https://sub.example.com/', 'https://example.com' ] ] )(
+			'should not show Homepage badge when subdomain url "%s" does not match homeUrl "%s"',
+			( url, homeUrl ) => {
+				const badges = computeBadges( {
+					url,
+					homeUrl,
+					isExternal: false,
+				} );
+				expect( badges ).not.toContainEqual( {
+					label: 'Homepage',
+					intent: 'default',
+				} );
+			}
+		);
+
+		test.each( [
+			[ 'https://sub.example.com/', 'https://sub.example.com' ],
+		] )(
+			'should show Homepage badge when subdomain url "%s" matches homeUrl "%s"',
+			( url, homeUrl ) => {
+				const badges = computeBadges( {
+					url,
+					homeUrl,
+					isExternal: false,
+				} );
+				expect( badges ).toContainEqual( {
+					label: 'Homepage',
+					intent: 'default',
+				} );
+			}
+		);
+
 		it( 'should show page badge for relative paths', () => {
 			const badges = computeBadges( {
 				url: '/relative-path',
@@ -269,6 +399,25 @@ it( 'should show "Internal link" badge for hash links even when type is present'
 	} );
 } );
 
+it( 'should show "Homepage" badge for root path even when type is present', () => {
+	const badges = computeBadges( {
+		url: '/',
+		type: 'page',
+		isExternal: false,
+	} );
+
+	// Should prioritize homepage detection over type
+	expect( badges ).toContainEqual( {
+		label: 'Homepage',
+		intent: 'default',
+	} );
+	// Should NOT show Page badge
+	expect( badges ).not.toContainEqual( {
+		label: 'Page',
+		intent: 'default',
+	} );
+} );
+
 test.each( [
 	[ 'www.test.com', 'URLs without protocol' ],
 	[ 'google.com', 'domain-only URLs without protocol' ],

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

@@ -26,6 +26,41 @@ function capitalize( str ) {
 	return str.charAt( 0 ).toUpperCase() + str.slice( 1 );
 }
 
+/**
+ * Check if a URL points to the site homepage.
+ * Handles protocol (http/https) and trailing slash variations.
+ * Does not match subdomains unless they are the site URL.
+ *
+ * @param {string} url     - The URL to check
+ * @param {string} homeUrl - The WordPress site URL
+ * @return {boolean} True if url is the homepage
+ */
+export function isHomepage( url, homeUrl ) {
+	if ( url === '/' ) {
+		return true;
+	}
+	if ( ! url || ! homeUrl ) {
+		return false;
+	}
+	try {
+		const urlParsed = new URL( url, homeUrl );
+		const homeParsed = new URL( homeUrl );
+
+		// Same host, i.e. sub.homepage.com or homepage.com
+		if ( urlParsed.hostname !== homeParsed.hostname ) {
+			return false;
+		}
+
+		// Path must match site root (normalize trailing slash)
+		const urlPath = urlParsed.pathname.replace( /\/$/, '' );
+		const homePath = homeParsed.pathname.replace( /\/$/, '' );
+
+		return urlPath === homePath;
+	} catch {
+		return false;
+	}
+}
+
 /**
  * Compute display URL - strips site URL if internal, shows full URL if external.
  *
@@ -79,6 +114,7 @@ export function computeDisplayUrl( { linkUrl, homeUrl } = {} ) {
  *
  * @param {Object}  options                   - Options object
  * @param {string}  options.url               - Link URL
+ * @param {string}  options.homeUrl           - WordPress site URL (for homepage detection)
  * @param {string}  options.type              - Entity type (page, post, etc.)
  * @param {boolean} options.isExternal        - Whether link is external
  * @param {string}  options.entityStatus      - Entity status (publish, draft, etc.)
@@ -88,6 +124,7 @@ export function computeDisplayUrl( { linkUrl, homeUrl } = {} ) {
  */
 export function computeBadges( {
 	url,
+	homeUrl,
 	type,
 	isExternal,
 	entityStatus,
@@ -95,7 +132,6 @@ export function computeBadges( {
 	isEntityAvailable,
 } ) {
 	const badges = [];
-
 	// Kind badge
 	if ( url ) {
 		if ( isExternal ) {
@@ -110,6 +146,11 @@ export function computeBadges( {
 				label: __( 'Internal link' ),
 				intent: 'default',
 			} );
+		} else if ( isHomepage( url, homeUrl ) ) {
+			badges.push( {
+				label: __( 'Homepage' ),
+				intent: 'default',
+			} );
 		} else if ( type && type !== 'custom' ) {
 			// Show entity type badge (page, post, category, etc.)
 			// but not 'custom' since that's just a manual link
@@ -226,6 +267,7 @@ export function useLinkPreview( {
 	// Compute badges
 	const badges = computeBadges( {
 		url,
+		homeUrl,
 		type,
 		isExternal,
 		entityStatus: entityRecord?.status,

package/src/navigation-overlay-close/style.scss

@@ -3,7 +3,7 @@
 	align-items: center;
 	justify-content: center;
 	gap: 0.5em;
-	padding: 0.5em;
+	padding: 0;
 	border: none;
 	background: transparent;
 	cursor: pointer;
@@ -14,8 +14,8 @@
 	}
 
 	svg {
-		width: 1.5em;
-		height: 1.5em;
+		width: 24px;
+		height: 24px;
 		fill: currentColor;
 		display: block;
 		flex-shrink: 0;

package/src/navigation-submenu/index.php

@@ -5,6 +5,9 @@
  * @package WordPress
  */
 
+require_once __DIR__ . '/navigation-link/shared/item-should-render.php';
+require_once __DIR__ . '/navigation-link/shared/render-submenu-icon.php';
+
 /**
  * Returns the submenu visibility value with backward compatibility
  * for the deprecated openSubmenusOnClick attribute.
@@ -46,15 +49,6 @@ function block_core_navigation_submenu_get_submenu_visibility( $context ) {
 	return $submenu_visibility ?? 'hover';
 }
 
-// Path differs between source and build: '../navigation-link/shared/' in source, './navigation-link/shared/' in build.
-if ( file_exists( __DIR__ . '/../navigation-link/shared/item-should-render.php' ) ) {
-	require_once __DIR__ . '/../navigation-link/shared/item-should-render.php';
-	require_once __DIR__ . '/../navigation-link/shared/render-submenu-icon.php';
-} else {
-	require_once __DIR__ . '/navigation-link/shared/item-should-render.php';
-	require_once __DIR__ . '/navigation-link/shared/render-submenu-icon.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.
@@ -240,7 +234,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		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_render_submenu_icon() . '</button>';
+			$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
+			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+				$html .= gutenberg_block_core_shared_navigation_render_submenu_icon();
+			} else {
+				$html .= block_core_shared_navigation_render_submenu_icon();
+			}
+			$html .= '</button>';
 		}
 	} else {
 		$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
@@ -262,7 +262,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		$html .= '</button>';
 
 		if ( $has_submenu ) {
-			$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_render_submenu_icon() . '</span>';
+			$html .= '<span class="wp-block-navigation__submenu-icon">';
+			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+				$html .= gutenberg_block_core_shared_navigation_render_submenu_icon();
+			} else {
+				$html .= block_core_shared_navigation_render_submenu_icon();
+			}
+			$html .= '</span>';
 		}
 	}