@wordpress/block-library 8.10.0 → 8.12.0

package/src/navigation/editor.scss

@@ -508,20 +508,22 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 // so focus is applied naturally on the block container.
 // It's important the right container has focus, otherwise you can't press
 // "Delete" to remove the block.
-.wp-block-navigation__responsive-container,
-.wp-block-navigation__responsive-close {
-	@include break-small() {
-		pointer-events: none;
-
-		.wp-block-navigation__responsive-container-close,
-		.block-editor-block-list__layout * {
-			pointer-events: all;
+.wp-block-navigation:not(.is-editing-disabled) {
+	.wp-block-navigation__responsive-container,
+	.wp-block-navigation__responsive-close {
+		@include break-small() {
+			pointer-events: none;
+
+			.wp-block-navigation__responsive-container-close,
+			.block-editor-block-list__layout * {
+				pointer-events: all;
+			}
 		}
-	}
 
-	// Page List items should remain inert.
-	.wp-block-pages-list__item__link {
-		pointer-events: none;
+		// Page List items should remain inert.
+		.wp-block-pages-list__item__link {
+			pointer-events: none;
+		}
 	}
 }
 
@@ -657,3 +659,13 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .wp-block-navigation__responsive-container-open.components-button {
 	opacity: 1;
 }
+
+.wp-block-navigation__menu-inspector-controls {
+	overflow-x: auto;
+
+	@include custom-scrollbars-on-hover(transparent, $gray-600);
+}
+
+.wp-block-navigation__menu-inspector-controls__empty-message {
+	margin-left: 24px;
+}

package/src/navigation/index.php

@@ -214,7 +214,7 @@ function block_core_navigation_render_submenu_icon() {
 function block_core_navigation_filter_out_empty_blocks( $parsed_blocks ) {
 	$filtered = array_filter(
 		$parsed_blocks,
-		function( $block ) {
+		static function( $block ) {
 			return isset( $block['blockName'] );
 		}
 	);
@@ -364,15 +364,6 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	 */
 	$has_old_responsive_attribute = ! empty( $attributes['isResponsive'] ) && $attributes['isResponsive'];
 	$is_responsive_menu           = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] || $has_old_responsive_attribute;
-	$should_load_view_script      = ! wp_script_is( 'wp-block-navigation-view' ) && ( $is_responsive_menu || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
-	if ( $should_load_view_script ) {
-		wp_enqueue_script( 'wp-block-navigation-view' );
-	}
-
-	$should_load_modal_view_script = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'];
-	if ( $should_load_modal_view_script ) {
-		wp_enqueue_script( 'wp-block-navigation-view-modal' );
-	}
 
 	$inner_blocks = $block->inner_blocks;
 
@@ -470,7 +461,10 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	// Restore legacy classnames for submenu positioning.
 	$layout_class = '';
-	if ( isset( $attributes['layout']['justifyContent'] ) ) {
+	if (
+		isset( $attributes['layout']['justifyContent'] ) &&
+		isset( $layout_justification[ $attributes['layout']['justifyContent'] ] )
+	) {
 		$layout_class .= $layout_justification[ $attributes['layout']['justifyContent'] ];
 	}
 	if ( isset( $attributes['layout']['orientation'] ) && 'vertical' === $attributes['layout']['orientation'] ) {
@@ -514,14 +508,44 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		'core/site-logo',
 	);
 
+	$block_styles = isset( $attributes['styles'] ) ? $attributes['styles'] : '';
+	$style        = $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'];
+	$class        = implode( ' ', $classes );
+
+	// If the menu name has been used previously then append an ID
+	// to the name to ensure uniqueness across a given post.
+	if ( isset( $seen_menu_names[ $nav_menu_name ] ) && $seen_menu_names[ $nav_menu_name ] > 1 ) {
+		$count         = $seen_menu_names[ $nav_menu_name ];
+		$nav_menu_name = $nav_menu_name . ' ' . ( $count );
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'class'      => $class,
+			'style'      => $style,
+			'aria-label' => $nav_menu_name,
+		)
+	);
+
+	$container_attributes = get_block_wrapper_attributes(
+		array(
+			'class' => 'wp-block-navigation__container ' . $class,
+			'style' => $style,
+		)
+	);
+
 	$inner_blocks_html = '';
 	$is_list_open      = false;
+	$has_submenus      = false;
 	foreach ( $inner_blocks as $inner_block ) {
 		$is_list_item = in_array( $inner_block->name, $list_item_nav_blocks, true );
 
 		if ( $is_list_item && ! $is_list_open ) {
 			$is_list_open       = true;
-			$inner_blocks_html .= '<ul class="wp-block-navigation__container">';
+			$inner_blocks_html .= sprintf(
+				'<ul %1$s>',
+				$container_attributes
+			);
 		}
 
 		if ( ! $is_list_item && $is_list_open ) {
@@ -530,6 +554,15 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		}
 
 		$inner_block_content = $inner_block->render();
+		$p                   = new WP_HTML_Tag_Processor( $inner_block_content );
+		if ( $p->next_tag(
+			array(
+				'name'       => 'LI',
+				'class_name' => 'has-child',
+			)
+		) ) {
+			$has_submenus = true;
+		}
 		if ( ! empty( $inner_block_content ) ) {
 			if ( in_array( $inner_block->name, $needs_list_item_wrapper, true ) ) {
 				$inner_blocks_html .= '<li class="wp-block-navigation-item">' . $inner_block_content . '</li>';
@@ -543,22 +576,27 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$inner_blocks_html .= '</ul>';
 	}
 
-	$block_styles = isset( $attributes['styles'] ) ? $attributes['styles'] : '';
+	// If the script already exists, there is no point in removing it from viewScript.
+	$should_load_view_script = ( $is_responsive_menu || ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ) );
+	$view_js_file            = 'wp-block-navigation-view';
+	if ( ! wp_script_is( $view_js_file ) ) {
+		$script_handles = $block->block_type->view_script_handles;
 
-	// If the menu name has been used previously then append an ID
-	// to the name to ensure uniqueness across a given post.
-	if ( isset( $seen_menu_names[ $nav_menu_name ] ) && $seen_menu_names[ $nav_menu_name ] > 1 ) {
-		$count         = $seen_menu_names[ $nav_menu_name ];
-		$nav_menu_name = $nav_menu_name . ' ' . ( $count );
+		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+		if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+		}
+		// If the script is needed, but it was previously removed, add it again.
+		if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
+		}
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes(
-		array(
-			'class'      => implode( ' ', $classes ),
-			'style'      => $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'],
-			'aria-label' => $nav_menu_name,
-		)
-	);
+	// Add directives to the submenu if needed.
+	if ( $has_submenus && $should_load_view_script ) {
+		$w                 = new WP_HTML_Tag_Processor( $inner_blocks_html );
+		$inner_blocks_html = gutenberg_block_core_navigation_add_directives_to_submenu( $w, $attributes );
+	}
 
 	$modal_unique_id = wp_unique_id( 'modal-' );
 
@@ -597,12 +635,45 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$toggle_aria_label_open      = $should_display_icon_label ? 'aria-label="' . __( 'Open menu' ) . '"' : ''; // Open button label.
 	$toggle_aria_label_close     = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.
 
+	// Add Interactivity API directives to the markup if needed.
+	$nav_element_directives          = '';
+	$open_button_directives          = '';
+	$responsive_container_directives = '';
+	$responsive_dialog_directives    = '';
+	$close_button_directives         = '';
+	if ( $should_load_view_script ) {
+		$nav_element_directives          = '
+			data-wp-interactive
+			data-wp-context=\'{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false }, "overlay": true, "roleAttribute": "" } } }\'
+		';
+		$open_button_directives          = '
+			data-wp-on--click="actions.core.navigation.openMenuOnClick"
+			data-wp-on--keydown="actions.core.navigation.handleMenuKeydown"
+		';
+		$responsive_container_directives = '
+			data-wp-class--has-modal-open="selectors.core.navigation.isMenuOpen"
+			data-wp-class--is-menu-open="selectors.core.navigation.isMenuOpen"
+			data-wp-effect="effects.core.navigation.initMenu"
+			data-wp-on--keydown="actions.core.navigation.handleMenuKeydown"
+			data-wp-on--focusout="actions.core.navigation.handleMenuFocusout"
+			tabindex="-1"
+		';
+		$responsive_dialog_directives    = '
+			data-wp-bind--aria-modal="selectors.core.navigation.isMenuOpen"
+			data-wp-bind--role="selectors.core.navigation.roleAttribute"
+			data-wp-effect="effects.core.navigation.focusFirstElement"
+		';
+		$close_button_directives         = '
+			data-wp-on--click="actions.core.navigation.closeMenuOnClick"
+		';
+	}
+
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" %3$s class="%6$s" data-micromodal-trigger="%1$s">%9$s</button>
-			<div class="%5$s" style="%7$s" id="%1$s">
-				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
-					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
-							<button %4$s data-micromodal-close class="wp-block-navigation__responsive-container-close">%10$s</button>
+		'<button aria-haspopup="true" %3$s class="%6$s" %11$s>%9$s</button>
+			<div class="%5$s" style="%7$s" id="%1$s" %12$s>
+				<div class="wp-block-navigation__responsive-close" tabindex="-1">
+					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" %13$s>
+							<button %4$s class="wp-block-navigation__responsive-container-close" %14$s>%10$s</button>
 						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>
@@ -618,13 +689,18 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) ),
 		__( 'Menu' ),
 		$toggle_button_content,
-		$toggle_close_button_content
+		$toggle_close_button_content,
+		$open_button_directives,
+		$responsive_container_directives,
+		$responsive_dialog_directives,
+		$close_button_directives
 	);
 
 	return sprintf(
-		'<nav %1$s>%2$s</nav>',
+		'<nav %1$s %3$s>%2$s</nav>',
 		$wrapper_attributes,
-		$responsive_container_markup
+		$responsive_container_markup,
+		$nav_element_directives
 	);
 }
 
@@ -768,7 +844,7 @@ function block_core_navigation_get_classic_menu_fallback() {
 		// Otherwise return the most recently created classic menu.
 		usort(
 			$classic_nav_menus,
-			function( $a, $b ) {
+			static function( $a, $b ) {
 				return $b->term_id - $a->term_id;
 			}
 		);
@@ -887,3 +963,66 @@ function block_core_navigation_get_most_recently_published_navigation() {
 
 	return null;
 }
+
+/**
+ * Add Interactivity API directives to the navigation-submenu and page-list blocks markup using the Tag Processor
+ * The final HTML of the navigation-submenu and the page-list blocks will look similar to this:
+ *
+ * <li
+ *   class="has-child"
+ *   data-wp-context='{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }'
+ *   data-wp-effect="effects.core.navigation.initMenu"
+ *   data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+ *   data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+ * >
+ *   <button
+ *     class="wp-block-navigation-submenu__toggle"
+ *     data-wp-on.click="actions.core.navigation.openMenu"
+ *     data-wp-bind.aria-expanded="context.core.navigation.isMenuOpen"
+ *   >
+ *   </button>
+ *   <span>Title</span>
+ *   <ul class="wp-block-navigation__submenu-container">
+ *     SUBMENU ITEMS
+ *   </ul>
+ * </li>
+ *
+ * @param string $w Markup of the navigation block.
+ * @param array  $block_attributes Block attributes.
+ *
+ * @return string Submenu markup with the directives injected.
+ */
+function gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_attributes ) {
+	while ( $w->next_tag(
+		array(
+			'tag_name'   => 'LI',
+			'class_name' => 'has-child',
+		)
+	) ) {
+		// Add directives to the parent `<li>`.
+		$w->set_attribute( 'data-wp-interactive', true );
+		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false }, "overlay": false } } }' );
+		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
+		$w->set_attribute( 'data-wp-on--focusout', 'actions.core.navigation.handleMenuFocusout' );
+		$w->set_attribute( 'data-wp-on--keydown', 'actions.core.navigation.handleMenuKeydown' );
+		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) {
+			$w->set_attribute( 'data-wp-on--mouseenter', 'actions.core.navigation.openMenuOnHover' );
+			$w->set_attribute( 'data-wp-on--mouseleave', 'actions.core.navigation.closeMenuOnHover' );
+		}
+
+		// Add directives to the toggle submenu button.
+		if ( $w->next_tag(
+			array(
+				'tag_name'   => 'BUTTON',
+				'class_name' => 'wp-block-navigation-submenu__toggle',
+			)
+		) ) {
+			$w->set_attribute( 'data-wp-on--click', 'actions.core.navigation.toggleMenuOnClick' );
+			$w->set_attribute( 'data-wp-bind--aria-expanded', 'selectors.core.navigation.isMenuOpen' );
+		};
+
+		// Iterate through subitems if exist.
+		gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_attributes );
+	}
+	return $w->get_updated_html();
+};

package/src/navigation/interactivity.js

@@ -17,12 +17,40 @@ const focusableSelectors = [
 	'[tabindex]:not([tabindex^="-"])',
 ];
 
+const openMenu = ( { context, ref }, menuOpenedOn ) => {
+	context.core.navigation.isMenuOpen[ menuOpenedOn ] = true;
+	context.core.navigation.previousFocus = ref;
+	if ( context.core.navigation.overlay ) {
+		// Add a `has-modal-open` class to the <html> root.
+		document.documentElement.classList.add( 'has-modal-open' );
+	}
+};
+
+const closeMenu = ( { context, selectors }, menuClosedOn ) => {
+	context.core.navigation.isMenuOpen[ menuClosedOn ] = false;
+	// Check if the menu is still open or not.
+	if ( ! selectors.core.navigation.isMenuOpen( { context } ) ) {
+		if (
+			context.core.navigation.modal.contains(
+				window.document.activeElement
+			)
+		) {
+			context.core.navigation.previousFocus.focus();
+		}
+		context.core.navigation.modal = null;
+		context.core.navigation.previousFocus = null;
+		if ( context.core.navigation.overlay ) {
+			document.documentElement.classList.remove( 'has-modal-open' );
+		}
+	}
+};
+
 store( {
 	effects: {
 		core: {
 			navigation: {
-				initModal: async ( { context, ref } ) => {
-					if ( context.core.navigation.isMenuOpen ) {
+				initMenu: ( { context, selectors, ref } ) => {
+					if ( selectors.core.navigation.isMenuOpen( { context } ) ) {
 						const focusableElements =
 							ref.querySelectorAll( focusableSelectors );
 						context.core.navigation.modal = ref;
@@ -32,8 +60,8 @@ store( {
 							focusableElements[ focusableElements.length - 1 ];
 					}
 				},
-				focusFirstElement: async ( { context, ref } ) => {
-					if ( context.core.navigation.isMenuOpen ) {
+				focusFirstElement: ( { context, selectors, ref } ) => {
+					if ( selectors.core.navigation.isMenuOpen( { context } ) ) {
 						ref.querySelector(
 							'.wp-block-navigation-item > *:first-child'
 						).focus();
@@ -45,55 +73,51 @@ store( {
 	selectors: {
 		core: {
 			navigation: {
-				roleAttribute: ( { context } ) => {
-					return context.core.navigation.overlay &&
-						context.core.navigation.isMenuOpen
+				roleAttribute: ( { context, selectors } ) =>
+					context.core.navigation.overlay &&
+					selectors.core.navigation.isMenuOpen( { context } )
 						? 'dialog'
-						: '';
-				},
+						: '',
+				isMenuOpen: ( { context } ) =>
+					// The menu is opened if either `click` or `hover` is true.
+					Object.values( context.core.navigation.isMenuOpen ).filter(
+						Boolean
+					).length > 0,
 			},
 		},
 	},
 	actions: {
 		core: {
 			navigation: {
-				openMenu: ( { context, ref } ) => {
-					context.core.navigation.isMenuOpen = true;
-					context.core.navigation.previousFocus = ref;
-					if ( context.core.navigation.overlay ) {
-						// It adds a `has-modal-open` class to the <html> root
-						document.documentElement.classList.add(
-							'has-modal-open'
-						);
-					}
+				openMenuOnHover( args ) {
+					openMenu( args, 'hover' );
 				},
-				closeMenu: ( { context } ) => {
-					if ( context.core.navigation.isMenuOpen ) {
-						context.core.navigation.isMenuOpen = false;
-						if (
-							context.core.navigation.modal.contains(
-								window.document.activeElement
-							)
-						) {
-							context.core.navigation.previousFocus.focus();
-						}
-						context.core.navigation.modal = null;
-						context.core.navigation.previousFocus = null;
-						if ( context.core.navigation.overlay ) {
-							document.documentElement.classList.remove(
-								'has-modal-open'
-							);
-						}
+				closeMenuOnHover( args ) {
+					closeMenu( args, 'hover' );
+				},
+				openMenuOnClick( args ) {
+					openMenu( args, 'click' );
+				},
+				closeMenuOnClick( args ) {
+					closeMenu( args, 'click' );
+				},
+				toggleMenuOnClick: ( args ) => {
+					const { context } = args;
+					if ( context.core.navigation.isMenuOpen.click ) {
+						closeMenu( args, 'click' );
+					} else {
+						openMenu( args, 'click' );
 					}
 				},
-				handleMenuKeydown: ( { actions, context, event } ) => {
-					if ( context.core.navigation.isMenuOpen ) {
+				handleMenuKeydown: ( args ) => {
+					const { context, event } = args;
+					if ( context.core.navigation.isMenuOpen.click ) {
 						// If Escape close the menu
 						if (
 							event?.key === 'Escape' ||
 							event?.keyCode === 27
 						) {
-							actions.core.navigation.closeMenu( { context } );
+							closeMenu( args, 'click' );
 							return;
 						}
 
@@ -122,20 +146,21 @@ store( {
 						}
 					}
 				},
-				handleMenuFocusout: ( { actions, context, event } ) => {
-					if ( context.core.navigation.isMenuOpen ) {
-						// If focus is outside modal, and in the document, close menu
-						// event.target === The element losing focus
-						// event.relatedTarget === The element receiving focus (if any)
-						// When focusout is outsite the document, `window.document.activeElement` doesn't change
-						if (
-							! context.core.navigation.modal.contains(
-								event.relatedTarget
-							) &&
-							event.target !== window.document.activeElement
-						) {
-							actions.core.navigation.closeMenu( { context } );
-						}
+				handleMenuFocusout: ( args ) => {
+					const { context, event } = args;
+					// If focus is outside modal, and in the document, close menu
+					// event.target === The element losing focus
+					// event.relatedTarget === The element receiving focus (if any)
+					// When focusout is outsite the document,
+					// `window.document.activeElement` doesn't change
+					if (
+						context.core.navigation.isMenuOpen.click &&
+						! context.core.navigation.modal.contains(
+							event.relatedTarget
+						) &&
+						event.target !== window.document.activeElement
+					) {
+						closeMenu( args, 'click' );
 					}
 				},
 			},

package/src/navigation-link/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/navigation-link",
 	"title": "Custom Link",
 	"category": "design",

package/src/navigation-link/edit.js

@@ -15,7 +15,6 @@ import {
 	ToolbarButton,
 	Tooltip,
 	ToolbarGroup,
-	KeyboardShortcuts,
 } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
@@ -340,7 +339,7 @@ export default function NavigationLinkEdit( {
 	function onKeyDown( event ) {
 		if (
 			isKeyboardEvent.primary( event, 'k' ) ||
-			( ! url && event.keyCode === ENTER )
+			( ( ! url || isDraft || isInvalid ) && event.keyCode === ENTER )
 		) {
 			setIsLinkOpen( true );
 		}
@@ -469,8 +468,11 @@ export default function NavigationLinkEdit( {
 						onChange={ ( titleValue ) => {
 							setAttributes( { title: titleValue } );
 						} }
-						label={ __( 'Link title' ) }
+						label={ __( 'Title attribute' ) }
 						autoComplete="off"
+						help={ __(
+							'Additional information to help clarify the purpose of the link.'
+						) }
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
@@ -478,8 +480,11 @@ export default function NavigationLinkEdit( {
 						onChange={ ( relValue ) => {
 							setAttributes( { rel: relValue } );
 						} }
-						label={ __( 'Link rel' ) }
+						label={ __( 'Rel attribute' ) }
 						autoComplete="off"
+						help={ __(
+							'The relationship of the linked URL as space-separated link types.'
+						) }
 					/>
 				</PanelBody>
 			</InspectorControls>
@@ -547,13 +552,6 @@ export default function NavigationLinkEdit( {
 							) }
 							{ ( isInvalid || isDraft ) && (
 								<div className="wp-block-navigation-link__placeholder-text wp-block-navigation-link__label">
-									<KeyboardShortcuts
-										shortcuts={ {
-											enter: () =>
-												isSelected &&
-												setIsLinkOpen( true ),
-										} }
-									/>
 									<Tooltip
 										position="top center"
 										text={ tooltipText }

package/src/navigation-link/hooks.js

@@ -4,7 +4,7 @@
 import {
 	category,
 	page,
-	postContent,
+	postList,
 	tag,
 	customPostType,
 } from '@wordpress/icons';
@@ -12,7 +12,7 @@ import {
 function getIcon( variationName ) {
 	switch ( variationName ) {
 		case 'post':
-			return postContent;
+			return postList;
 		case 'page':
 			return page;
 		case 'tag':

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

@@ -9,7 +9,7 @@ import {
 	BlockIcon,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { createInterpolateElement } from '@wordpress/element';
+import { createInterpolateElement, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { switchToBlockType } from '@wordpress/blocks';
@@ -154,11 +154,17 @@ export function LinkUI( props ) {
 	}
 
 	const { label, url, opensInNewTab, type, kind } = props.link;
-	const link = {
-		url,
-		opensInNewTab,
-		title: label && stripHTML( label ),
-	};
+
+	// Memoize link value to avoid overriding the LinkControl's internal state.
+	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/50976#issuecomment-1568226407.
+	const link = useMemo(
+		() => ( {
+			url,
+			opensInNewTab,
+			title: label && stripHTML( label ),
+		} ),
+		[ label, opensInNewTab, url ]
+	);
 
 	return (
 		<Popover

package/src/navigation-link/test/__snapshots__/hooks.js.snap

@@ -27,10 +27,10 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
       "description": "A link to a post.",
       "icon": <SVG
         viewBox="0 0 24 24"
-        xmlns="https://www.w3.org/2000/svg"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M4 20h16v-1.5H4V20zm0-4.8h16v-1.5H4v1.5zm0-6.4v1.5h16V8.8H4zM16 4H4v1.5h12V4z"
+          d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 14c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v12zM7 11h2V9H7v2zm0 4h2v-2H7v2zm3-4h7V9h-7v2zm0 4h7v-2h-7v2z"
         />
       </SVG>,
       "isActive": [Function],

package/src/navigation-link/update-attributes.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { safeDecodeURI } from '@wordpress/url';
 import { escapeHTML } from '@wordpress/escape-html';
+import { safeDecodeURI } from '@wordpress/url';
 
 /**
  * @typedef {'post-type'|'custom'|'taxonomy'|'post-type-archive'} WPNavigationLinkKind
@@ -89,7 +89,7 @@ export const updateAttributes = (
 
 	setAttributes( {
 		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-		...{ url: newUrl ? encodeURI( safeDecodeURI( newUrl ) ) : newUrl },
+		...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ),
 		...( label && { label } ),
 		...( undefined !== opensInNewTab && { opensInNewTab } ),
 		...( id && Number.isInteger( id ) && { id } ),