diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 9b90a30fa8e252..2cd8127dcfe3bc 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -275,14 +275,27 @@ function Navigation( { isCreatingNavigationMenu, fallbackNavigationMenus, hasUncontrolledInnerBlocks, + createNavigationMenuIsSuccess, ] ); + const isEntityAvailable = + ! isNavigationMenuMissing && isNavigationMenuResolved; + + // If the block has inner blocks, but no menu id, then these blocks are either: + // - inserted via a pattern. + // - inserted directly via Code View (or otherwise). + // - from an older version of navigation block added before the block used a wp_navigation entity. + // Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks, + // that automatically saves the menu as an entity when changes are made to the inner blocks. + const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable; + useEffect( () => { if ( ref || ! hasResolvedNavigationMenus || isConvertingClassicMenu || - fallbackNavigationMenus?.length > 0 + fallbackNavigationMenus?.length > 0 || + hasUnsavedBlocks ) { return; } @@ -323,13 +336,14 @@ function Navigation( { if ( getBlockType( 'core/page-list' ) ) { defaultBlocks = [ createBlock( 'core/page-list' ) ]; } + createNavigationMenu( 'Navigation', // TODO - use the template slug in future defaultBlocks, 'publish' ); } - }, [ hasResolvedNavigationMenus ] ); + }, [ hasResolvedNavigationMenus, hasUnsavedBlocks ] ); const navRef = useRef(); @@ -349,9 +363,6 @@ function Navigation( { classicMenus?.length === 0 && ! hasUncontrolledInnerBlocks; - const isEntityAvailable = - ! isNavigationMenuMissing && isNavigationMenuResolved; - // "loading" state: // - there is a menu creation process in progress. // - there is a classic menu conversion process in progress. @@ -726,14 +737,6 @@ function Navigation( { ); - // If the block has inner blocks, but no menu id, then these blocks are either: - // - inserted via a pattern. - // - inserted directly via Code View (or otherwise). - // - from an older version of navigation block added before the block used a wp_navigation entity. - // Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks, - // that automatically saves the menu as an entity when changes are made to the inner blocks. - const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable; - const isManageMenusButtonDisabled = ! hasManagePermissions || ! hasResolvedNavigationMenus; diff --git a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js index bb23db9c3bc8d9..afc6e49383c11c 100644 --- a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js +++ b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js @@ -119,6 +119,11 @@ export default function UnsavedInnerBlocks( { const { hasResolvedNavigationMenus } = useNavigationMenu(); + // We need to use a ref to track whether the effect has been called. + // Otherwise the effect will be called when blocks changes, which + // happens faster than the state of navigation menu creation is updated. + const createNavigationEffectCalled = useRef( false ); + // Automatically save the uncontrolled blocks. useEffect( () => { // The block will be disabled when used in a BlockPreview. @@ -139,11 +144,14 @@ export default function UnsavedInnerBlocks( { ! hasResolvedDraftNavigationMenus || ! hasResolvedNavigationMenus || ! hasSelection || - ! innerBlocksAreDirty + ! innerBlocksAreDirty || + createNavigationEffectCalled.current ) { return; } + // Setting this to true so that this effect is only called once. + createNavigationEffectCalled.current = true; createNavigationMenu( null, blocks ); }, [ blocks, @@ -154,6 +162,7 @@ export default function UnsavedInnerBlocks( { hasResolvedNavigationMenus, innerBlocksAreDirty, hasSelection, + createNavigationEffectCalled, ] ); const Wrapper = isSaving ? Disabled : 'div'; diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 2a2812179e3fbf..500c0056c43bac 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -446,8 +446,8 @@ function block_core_navigation_get_default_pages_fallback() { $wp_insert_post_result = wp_insert_post( array( 'post_content' => $default_blocks, - 'post_title' => 'Navigation', // TODO - use the template slug in future. - 'post_name' => 'Navigation', // TODO - use the template slug in future. + 'post_title' => 'Navigation PHP', // TODO - use the template slug in future. + 'post_name' => 'Navigation PHP', // TODO - use the template slug in future. 'post_status' => 'publish', 'post_type' => 'wp_navigation', ),