@wordpress/block-library 8.28.5 → 8.28.7

package/src/navigation/edit/navigation-menu-selector.js

@@ -49,7 +49,7 @@ function NavigationMenuSelector( {
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
-	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
+	const [ isUpdatingMenuRef, setIsUpdatingMenuRef ] = useState( false );
 
 	actionLabel = actionLabel || createActionLabel;
 
@@ -82,10 +82,20 @@ function NavigationMenuSelector( {
 					value: id,
 					label,
 					ariaLabel: sprintf( actionLabel, label ),
+					disabled:
+						isUpdatingMenuRef ||
+						isResolvingNavigationMenus ||
+						! hasResolvedNavigationMenus,
 				};
 			} ) || []
 		);
-	}, [ navigationMenus, actionLabel ] );
+	}, [
+		navigationMenus,
+		actionLabel,
+		isResolvingNavigationMenus,
+		hasResolvedNavigationMenus,
+		isUpdatingMenuRef,
+	] );
 
 	const hasNavigationMenus = !! navigationMenus?.length;
 	const hasClassicMenus = !! classicMenus?.length;
@@ -99,7 +109,7 @@ function NavigationMenuSelector( {
 
 	let selectorLabel = '';
 
-	if ( isCreatingMenu || isResolvingNavigationMenus ) {
+	if ( isResolvingNavigationMenus ) {
 		selectorLabel = __( 'Loading…' );
 	} else if ( noMenuSelected || noBlockMenus || menuUnavailable ) {
 		// Note: classic Menus may be available.
@@ -111,17 +121,17 @@ function NavigationMenuSelector( {
 
 	useEffect( () => {
 		if (
-			isCreatingMenu &&
+			isUpdatingMenuRef &&
 			( createNavigationMenuIsSuccess || createNavigationMenuIsError )
 		) {
-			setIsCreatingMenu( false );
+			setIsUpdatingMenuRef( false );
 		}
 	}, [
 		hasResolvedNavigationMenus,
 		createNavigationMenuIsSuccess,
 		canUserCreateNavigationMenu,
 		createNavigationMenuIsError,
-		isCreatingMenu,
+		isUpdatingMenuRef,
 		menuUnavailable,
 		noBlockMenus,
 		noMenuSelected,
@@ -140,12 +150,10 @@ function NavigationMenuSelector( {
 							<MenuItemsChoice
 								value={ currentMenuId }
 								onSelect={ ( menuId ) => {
-									setIsCreatingMenu( true );
 									onSelectNavigationMenu( menuId );
 									onClose();
 								} }
 								choices={ menuChoices }
-								disabled={ isCreatingMenu }
 							/>
 						</MenuGroup>
 					) }
@@ -155,9 +163,10 @@ function NavigationMenuSelector( {
 								const label = decodeEntities( menu.name );
 								return (
 									<MenuItem
-										onClick={ () => {
-											setIsCreatingMenu( true );
-											onSelectClassicMenu( menu );
+										onClick={ async () => {
+											setIsUpdatingMenuRef( true );
+											await onSelectClassicMenu( menu );
+											setIsUpdatingMenuRef( false );
 											onClose();
 										} }
 										key={ menu.id }
@@ -165,7 +174,11 @@ function NavigationMenuSelector( {
 											createActionLabel,
 											label
 										) }
-										disabled={ isCreatingMenu }
+										disabled={
+											isUpdatingMenuRef ||
+											isResolvingNavigationMenus ||
+											! hasResolvedNavigationMenus
+										}
 									>
 										{ label }
 									</MenuItem>
@@ -177,12 +190,17 @@ function NavigationMenuSelector( {
 					{ canUserCreateNavigationMenu && (
 						<MenuGroup label={ __( 'Tools' ) }>
 							<MenuItem
-								disabled={ isCreatingMenu }
-								onClick={ () => {
+								onClick={ async () => {
+									setIsUpdatingMenuRef( true );
+									await onCreateNew();
+									setIsUpdatingMenuRef( false );
 									onClose();
-									onCreateNew();
-									setIsCreatingMenu( true );
 								} }
+								disabled={
+									isUpdatingMenuRef ||
+									isResolvingNavigationMenus ||
+									! hasResolvedNavigationMenus
+								}
 							>
 								{ __( 'Create new menu' ) }
 							</MenuItem>

package/src/navigation/edit/test/navigation-menu-selector.js

@@ -250,6 +250,7 @@ describe( 'NavigationMenuSelector', () => {
 				const user = userEvent.setup();
 				const handler = jest.fn();
 
+				// at the start we have the menus and we're not waiting on network
 				useNavigationMenu.mockReturnValue( {
 					navigationMenus: [],
 					hasResolvedNavigationMenus: true,
@@ -271,6 +272,18 @@ describe( 'NavigationMenuSelector', () => {
 					} )
 				);
 
+				// creating a menu is a network activity
+				// so we have to wait on it
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					hasResolvedNavigationMenus: false,
+					isResolvingNavigationMenus: true,
+					canUserCreateNavigationMenu: true,
+					canSwitchNavigationMenu: true,
+				} );
+
+				rerender( <NavigationMenuSelector onCreateNew={ handler } /> );
+
 				// Re-open the dropdown (it's closed when the "Create menu" button is clicked).
 				await user.click( toggleButton );
 
@@ -284,6 +297,16 @@ describe( 'NavigationMenuSelector', () => {
 					} )
 				).toBeDisabled();
 
+				// once the menu is created
+				// no more network activity to wait on
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					hasResolvedNavigationMenus: true,
+					isResolvingNavigationMenus: false,
+					canUserCreateNavigationMenu: true,
+					canSwitchNavigationMenu: true,
+				} );
+
 				// Simulate the menu being created and component being re-rendered.
 				rerender(
 					<NavigationMenuSelector
@@ -422,7 +445,7 @@ describe( 'NavigationMenuSelector', () => {
 				expect( menuItem ).toBeChecked();
 			} );
 
-			it( 'should call the handler when the navigation menu is selected and disable all options during the import/creation process', async () => {
+			it( 'should call the handler when the navigation menu is selected', async () => {
 				const user = userEvent.setup();
 
 				const handler = jest.fn();
@@ -434,7 +457,7 @@ describe( 'NavigationMenuSelector', () => {
 					canSwitchNavigationMenu: true,
 				} );
 
-				const { rerender } = render(
+				render(
 					<NavigationMenuSelector
 						onSelectNavigationMenu={ handler }
 					/>
@@ -455,42 +478,6 @@ describe( 'NavigationMenuSelector', () => {
 
 				//  Check the dropdown has been closed.
 				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
-
-				// Re-open the dropdown
-				await user.click( screen.getByRole( 'button' ) );
-
-				// Check the dropdown is again open and is in the "loading" state.
-				expect(
-					screen.getByRole( 'menu', {
-						name: /Loading/,
-					} )
-				).toBeInTheDocument();
-
-				// // Check all menu items are present but disabled.
-				screen.getAllByRole( 'menuitem' ).forEach( ( item ) => {
-					// // Check all menu items are present but disabled.
-					expect( item ).toBeDisabled();
-				} );
-
-				// // Simulate the menu being created and component being re-rendered.
-				rerender(
-					<NavigationMenuSelector
-						createNavigationMenuIsSuccess={ true } // classic menu import creates a Navigation menu.
-					/>
-				);
-
-				// Todo: fix bug where aria label is not updated.
-				// expect(
-				// 	screen.getByRole( 'menu', {
-				// 		name: `You are currently editing ${ navigationMenusFixture[ 0 ].title.rendered }`,
-				// 	} )
-				// ).toBeInTheDocument();
-
-				// Check all menu items are re-enabled.
-				screen.getAllByRole( 'menuitem' ).forEach( ( item ) => {
-					// // Check all menu items are present but disabled.
-					expect( item ).toBeEnabled();
-				} );
 			} );
 		} );
 
@@ -568,9 +555,14 @@ describe( 'NavigationMenuSelector', () => {
 
 			it( 'should call the handler when the classic menu item is selected and disable all options during the import/creation process', async () => {
 				const user = userEvent.setup();
-				const handler = jest.fn();
+				const handler = jest.fn( async () => {} );
 
+				// initially we have the menus, and we're not waiting on network
 				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					isResolvingNavigationMenus: false,
+					hasResolvedNavigationMenus: true,
+					canSwitchNavigationMenu: true,
 					canUserCreateNavigationMenu: true,
 				} );
 
@@ -597,6 +589,23 @@ describe( 'NavigationMenuSelector', () => {
 				// Check the dropdown has been closed.
 				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
 
+				// since we're importing we are doing network activity
+				// so we have to wait on it
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					isResolvingNavigationMenus: true,
+					hasResolvedNavigationMenus: false,
+					canUserCreateNavigationMenu: true,
+				} );
+
+				useNavigationEntities.mockReturnValue( {
+					menus: classicMenusFixture,
+				} );
+
+				rerender(
+					<NavigationMenuSelector onSelectClassicMenu={ handler } />
+				);
+
 				// // Re-open the dropdown (it's closed when the "Create menu" button is clicked).
 				await user.click( screen.getByRole( 'button' ) );
 
@@ -613,6 +622,19 @@ describe( 'NavigationMenuSelector', () => {
 					expect( item ).toBeDisabled();
 				} );
 
+				// once the menu is imported
+				// no more network activity to wait on
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					isResolvingNavigationMenus: false,
+					hasResolvedNavigationMenus: true,
+					canUserCreateNavigationMenu: true,
+				} );
+
+				useNavigationEntities.mockReturnValue( {
+					menus: classicMenusFixture,
+				} );
+
 				// Simulate the menu being created and component being re-rendered.
 				rerender(
 					<NavigationMenuSelector

package/src/navigation/index.php

@@ -543,8 +543,7 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Gets the nav element directives.
 	 *
-	 * @param bool  $is_interactive Whether the block is interactive.
-	 * @param array $attributes     The block attributes.
+	 * @param bool $is_interactive Whether the block is interactive.
 	 * @return string the directives for the navigation element.
 	 */
 	private static function get_nav_element_directives( $is_interactive ) {
@@ -1458,13 +1457,26 @@ function block_core_navigation_set_ignored_hooked_blocks_metadata( $inner_blocks
 /**
  * Updates the post meta with the list of ignored hooked blocks when the navigation is created or updated via the REST API.
  *
- * @param WP_Post $post Post object.
+ * @access private
+ * @since 6.5.0
+ *
+ * @param stdClass $post Post object.
+ * @return stdClass The updated post object.
  */
 function block_core_navigation_update_ignore_hooked_blocks_meta( $post ) {
-	// We run the Block Hooks mechanism to inject the `metadata.ignoredHookedBlocks` attribute into
-	// all anchor blocks. For the root level, we create a mock Navigation and extract them from there.
+	/*
+	 * We run the Block Hooks mechanism to inject the `metadata.ignoredHookedBlocks` attribute into
+	 * all anchor blocks. For the root level, we create a mock Navigation and extract them from there.
+	 */
 	$blocks = parse_blocks( $post->post_content );
-	$markup = block_core_navigation_set_ignored_hooked_blocks_metadata( $blocks, $post );
+
+	/*
+	 * Block Hooks logic requires a `WP_Post` object (rather than the `stdClass` with the updates that
+	 * we're getting from the `rest_pre_insert_wp_navigation` filter) as its second argument (to be
+	 * used as context for hooked blocks insertion).
+	 * We thus have to look it up from the DB,based on `$post->ID`.
+	 */
+	$markup = block_core_navigation_set_ignored_hooked_blocks_metadata( $blocks, get_post( $post->ID ) );
 
 	$root_nav_block        = parse_blocks( $markup )[0];
 	$ignored_hooked_blocks = isset( $root_nav_block['attrs']['metadata']['ignoredHookedBlocks'] )
@@ -1480,25 +1492,32 @@ function block_core_navigation_update_ignore_hooked_blocks_meta( $post ) {
 		update_post_meta( $post->ID, '_wp_ignored_hooked_blocks', json_encode( $ignored_hooked_blocks ) );
 	}
 
-	$serialized_inner_blocks = block_core_navigation_remove_serialized_parent_block( $markup );
-
-	wp_update_post(
-		array(
-			'ID'           => $post->ID,
-			'post_content' => $serialized_inner_blocks,
-		)
-	);
+	$post->post_content = block_core_navigation_remove_serialized_parent_block( $markup );
+	return $post;
 }
 
-// Before adding our filter, we verify if it's already added in Core.
-// However, during the build process, Gutenberg automatically prefixes our functions with "gutenberg_".
-// Therefore, we concatenate the Core's function name to circumvent this prefix for our check.
-$rest_insert_wp_navigation_core_callback = 'block_core_navigation_' . 'update_ignore_hooked_blocks_meta';
+/*
+ * Before adding our filter, we verify if it's already added in Core.
+ * However, during the build process, Gutenberg automatically prefixes our functions with "gutenberg_".
+ * Therefore, we concatenate the Core's function name to circumvent this prefix for our check.
+ */
+$rest_insert_wp_navigation_core_callback = 'block_core_navigation_' . 'update_ignore_hooked_blocks_meta'; // phpcs:ignore Generic.Strings.UnnecessaryStringConcat.Found
 
-// Injection of hooked blocks into the Navigation block relies on some functions present in WP >= 6.5
-// that are not present in Gutenberg's WP 6.5 compatibility layer.
-if ( function_exists( 'set_ignored_hooked_blocks_metadata' ) && ! has_filter( 'rest_insert_wp_navigation', $rest_insert_wp_navigation_core_callback ) ) {
-	add_action( 'rest_insert_wp_navigation', 'block_core_navigation_update_ignore_hooked_blocks_meta', 10, 3 );
+/*
+ * Injection of hooked blocks into the Navigation block relies on some functions present in WP >= 6.5
+ * that are not present in Gutenberg's WP 6.5 compatibility layer.
+ */
+if ( function_exists( 'set_ignored_hooked_blocks_metadata' ) && ! has_filter( 'rest_pre_insert_wp_navigation', $rest_insert_wp_navigation_core_callback ) ) {
+	add_filter( 'rest_pre_insert_wp_navigation', 'block_core_navigation_update_ignore_hooked_blocks_meta' );
+}
+
+/*
+ * Previous versions of Gutenberg were attaching the block_core_navigation_update_ignore_hooked_blocks_meta
+ * function to the `rest_insert_wp_navigation` _action_ (rather than the `rest_pre_insert_wp_navigation` _filter_).
+ * To avoid collisions, we need to remove the filter from that action if it's present.
+ */
+if ( has_filter( 'rest_insert_wp_navigation', $rest_insert_wp_navigation_core_callback ) ) {
+	remove_filter( 'rest_insert_wp_navigation', $rest_insert_wp_navigation_core_callback );
 }
 
 /**
@@ -1506,7 +1525,6 @@ if ( function_exists( 'set_ignored_hooked_blocks_metadata' ) && ! has_filter( 'r
  *
  * @param WP_REST_Response $response The response object.
  * @param WP_Post          $post     Post object.
- * @param WP_REST_Request  $request  Request object.
  * @return WP_REST_Response The response object.
  */
 function block_core_navigation_insert_hooked_blocks_into_rest_response( $response, $post ) {
@@ -1525,13 +1543,17 @@ function block_core_navigation_insert_hooked_blocks_into_rest_response( $respons
 	return $response;
 }
 
-// Before adding our filter, we verify if it's already added in Core.
-// However, during the build process, Gutenberg automatically prefixes our functions with "gutenberg_".
-// Therefore, we concatenate the Core's function name to circumvent this prefix for our check.
+/*
+ *  Before adding our filter, we verify if it's already added in Core.
+ * However, during the build process, Gutenberg automatically prefixes our functions with "gutenberg_".
+ * Therefore, we concatenate the Core's function name to circumvent this prefix for our check.
+ */
 $rest_prepare_wp_navigation_core_callback = 'block_core_navigation_' . 'insert_hooked_blocks_into_rest_response';
 
-// Injection of hooked blocks into the Navigation block relies on some functions present in WP >= 6.5
-// that are not present in Gutenberg's WP 6.5 compatibility layer.
+/*
+ * Injection of hooked blocks into the Navigation block relies on some functions present in WP >= 6.5
+ * that are not present in Gutenberg's WP 6.5 compatibility layer.
+ */
 if ( function_exists( 'set_ignored_hooked_blocks_metadata' ) && ! has_filter( 'rest_prepare_wp_navigation', $rest_prepare_wp_navigation_core_callback ) ) {
 	add_filter( 'rest_prepare_wp_navigation', 'block_core_navigation_insert_hooked_blocks_into_rest_response', 10, 3 );
 }