From 41a0bd5d2dacedceb602ca9b82d5a16c599cd26e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 9 Nov 2022 04:21:17 +0000 Subject: [PATCH] Simplfy handling of save of Nav block uncontrolled inner blocks (#45517) * Simplfy handling of save of inner blocks * Remove unused dep from effect Co-authored-by: Daniel Richards * Memoize effect dep to avoid retriggering * Correctly memoize and sort all fallback menus * Simplify fallbacks compute function Co-authored-by: Daniel Richards --- .../src/navigation/edit/index.js | 53 +++++++++---------- .../navigation/edit/unsaved-inner-blocks.js | 34 ++---------- 2 files changed, 30 insertions(+), 57 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index a732c4f3824a0f..bd2c2145cb85f0 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -6,7 +6,13 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useState, useEffect, useRef, Platform } from '@wordpress/element'; +import { + useState, + useEffect, + useRef, + Platform, + useMemo, +} from '@wordpress/element'; import { addQueryArgs } from '@wordpress/url'; import { __experimentalOffCanvasEditor as OffCanvasEditor, @@ -197,9 +203,6 @@ function Navigation( { __unstableMarkNextChangeAsNotPersistent, } = useDispatch( blockEditorStore ); - const [ hasSavedUnsavedInnerBlocks, setHasSavedUnsavedInnerBlocks ] = - useState( false ); - const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = useState( false ); @@ -233,8 +236,16 @@ function Navigation( { classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING; // Only autofallback to published menus. - const fallbackNavigationMenus = navigationMenus?.filter( - ( menu ) => menu.status === 'publish' + const fallbackNavigationMenus = useMemo( + () => + navigationMenus + ?.filter( ( menu ) => menu.status === 'publish' ) + ?.sort( ( menuA, menuB ) => { + const menuADate = new Date( menuA.date ); + const menuBDate = new Date( menuB.date ); + return menuADate.getTime() < menuBDate.getTime(); + } ), + [ navigationMenus ] ); // Attempt to retrieve and prioritize any existing navigation menu unless: @@ -254,12 +265,6 @@ function Navigation( { return; } - fallbackNavigationMenus.sort( ( menuA, menuB ) => { - const menuADate = new Date( menuA.date ); - const menuBDate = new Date( menuB.date ); - return menuADate.getTime() < menuBDate.getTime(); - } ); - /** * This fallback displays (both in editor and on front) * a list of pages only if no menu (user assigned or @@ -269,7 +274,12 @@ function Navigation( { */ __unstableMarkNextChangeAsNotPersistent(); setRef( fallbackNavigationMenus[ 0 ].id ); - }, [ navigationMenus ] ); + }, [ + ref, + isCreatingNavigationMenu, + fallbackNavigationMenus, + hasUncontrolledInnerBlocks, + ] ); useEffect( () => { if ( @@ -680,7 +690,7 @@ function Navigation( { /> ); - if ( hasUnsavedBlocks ) { + if ( hasUnsavedBlocks && ! isCreatingNavigationMenu ) { return ( @@ -744,24 +754,11 @@ function Navigation( { overlayTextColor={ overlayTextColor } > { - // Set some state used as a guard to prevent the creation of multiple posts. - setHasSavedUnsavedInnerBlocks( true ); - // Switch to using the wp_navigation entity. - setRef( post.id ); - - showNavigationMenuStatusNotice( - __( `New Navigation Menu created.` ) - ); - } } /> 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 d656d3fb23f944..0fa2a119446f36 100644 --- a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js +++ b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useInnerBlocksProps } from '@wordpress/block-editor'; -import { Disabled, Spinner } from '@wordpress/components'; +import { Disabled } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { useContext, useEffect, useRef, useMemo } from '@wordpress/element'; @@ -11,7 +11,6 @@ import { useContext, useEffect, useRef, useMemo } from '@wordpress/element'; * Internal dependencies */ import useNavigationMenu from '../use-navigation-menu'; -import useCreateNavigationMenu from './use-create-navigation-menu'; const EMPTY_OBJECT = {}; const DRAFT_MENU_PARAMS = [ @@ -38,9 +37,8 @@ const ALLOWED_BLOCKS = [ export default function UnsavedInnerBlocks( { blocks, - clientId, - hasSavedUnsavedInnerBlocks, - onSave, + createNavigationMenu, + hasSelection, } ) { const originalBlocks = useRef(); @@ -75,7 +73,6 @@ export default function UnsavedInnerBlocks( { // The block will be disabled in a block preview, use this as a way of // avoiding the side-effects of this component for block previews. const isDisabled = useContext( Disabled.Context ); - const savingLock = useRef( false ); const innerBlocksProps = useInnerBlocksProps( { @@ -121,9 +118,6 @@ export default function UnsavedInnerBlocks( { const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu(); - const { create: createNavigationMenu } = - useCreateNavigationMenu( clientId ); - // Automatically save the uncontrolled blocks. useEffect( () => { // The block will be disabled when used in a BlockPreview. @@ -140,9 +134,7 @@ export default function UnsavedInnerBlocks( { // which is an indication they want to start editing. if ( isDisabled || - hasSavedUnsavedInnerBlocks || isSaving || - savingLock.current || ! hasResolvedDraftNavigationMenus || ! hasResolvedNavigationMenus || ! hasSelection || @@ -151,11 +143,7 @@ export default function UnsavedInnerBlocks( { return; } - savingLock.current = true; - createNavigationMenu( null, blocks ).then( ( menu ) => { - onSave( menu ); - savingLock.current = false; - } ); + createNavigationMenu( null, blocks ); }, [ isDisabled, isSaving, @@ -170,17 +158,5 @@ export default function UnsavedInnerBlocks( { const Wrapper = isSaving ? Disabled : 'div'; - return ( - <> - { isSaving ? ( - - ) : ( - - ) } - - ); + return ; }