@wordpress/block-library 8.11.0 → 8.12.1

package/src/navigation/index.php

@@ -65,6 +65,84 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 
 		return $menu_items_by_parent_id;
 	}
+
+	/**
+	 * 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();
+	};
+
+	/**
+	 * Replaces view script for the Navigation block with version using Interactivity API.
+	 *
+	 * @param array $metadata Block metadata as read in via block.json.
+	 *
+	 * @return array Filtered block type metadata.
+	 */
+	function gutenberg_block_core_navigation_update_interactive_view_script( $metadata ) {
+		if ( 'core/navigation' === $metadata['name'] ) {
+			$metadata['viewScript'] = array( 'file:./interactivity.min.js' );
+		}
+		return $metadata;
+	}
+	add_filter( 'block_type_metadata', 'gutenberg_block_core_navigation_update_interactive_view_script', 10, 1 );
 }
 
 
@@ -214,7 +292,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 +442,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;
 
@@ -517,14 +586,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 ) {
@@ -533,6 +632,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>';
@@ -546,22 +654,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, 'wp-block-navigation-view-2' ) );
+		}
+		// 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, 'wp-block-navigation-view-2' ) );
+		}
 	}
 
-	$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 ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $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-' );
 
@@ -600,12 +713,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 ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $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">
+		'<button aria-haspopup="true" %3$s class="%6$s" data-micromodal-trigger="%1$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" 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>
+					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" %13$s>
+							<button %4$s data-micromodal-close 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>
@@ -621,13 +767,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
 	);
 }
 
@@ -771,7 +922,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;
 			}
 		);

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: {
-				initMenu: ( { 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: ( { 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,62 +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' );
 				},
-				toggleMenu: ( { context, actions, ref } ) => {
-					if ( context.core.navigation.isMenuOpen ) {
-						actions.core.navigation.closeMenu( { context } );
+				toggleMenuOnClick: ( args ) => {
+					const { context } = args;
+					if ( context.core.navigation.isMenuOpen.click ) {
+						closeMenu( args, 'click' );
 					} else {
-						actions.core.navigation.openMenu( { context, ref } );
+						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;
 						}
 
@@ -129,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/test/use-navigation-menu.js

@@ -36,16 +36,28 @@ function resolveRecords( registry, menus ) {
 	dispatch.startResolution( 'getEntityRecords', [
 		'postType',
 		'wp_navigation',
-		{ per_page: -1, status: [ 'publish', 'draft' ] },
+		{
+			per_page: 100,
+			status: [ 'publish', 'draft' ],
+			order: 'desc',
+			orderby: 'date',
+		},
 	] );
 	dispatch.finishResolution( 'getEntityRecords', [
 		'postType',
 		'wp_navigation',
-		{ per_page: -1, status: [ 'publish', 'draft' ] },
+		{
+			per_page: 100,
+			status: [ 'publish', 'draft' ],
+			order: 'desc',
+			orderby: 'date',
+		},
 	] );
 	dispatch.receiveEntityRecords( 'postType', 'wp_navigation', menus, {
-		per_page: -1,
+		per_page: 100,
 		status: [ 'publish', 'draft' ],
+		order: 'desc',
+		orderby: 'date',
 	} );
 }
 

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

@@ -7,6 +7,11 @@ import {
 } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { SELECT_NAVIGATION_MENUS_ARGS } from './constants';
+
 export default function useNavigationMenu( ref ) {
 	const permissions = useResourcePermissions( 'navigation', ref );
 
@@ -68,17 +73,15 @@ function selectNavigationMenus( select ) {
 	const { getEntityRecords, hasFinishedResolution, isResolving } =
 		select( coreStore );
 
-	const args = [
-		'postType',
-		'wp_navigation',
-		{ per_page: -1, status: [ 'publish', 'draft' ] },
-	];
 	return {
-		navigationMenus: getEntityRecords( ...args ),
-		isResolvingNavigationMenus: isResolving( 'getEntityRecords', args ),
+		navigationMenus: getEntityRecords( ...SELECT_NAVIGATION_MENUS_ARGS ),
+		isResolvingNavigationMenus: isResolving(
+			'getEntityRecords',
+			SELECT_NAVIGATION_MENUS_ARGS
+		),
 		hasResolvedNavigationMenus: hasFinishedResolution(
 			'getEntityRecords',
-			args
+			SELECT_NAVIGATION_MENUS_ARGS
 		),
 	};
 }

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 );
 		}
@@ -553,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-submenu/block.json

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

package/src/nextpage/block.json

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