Try creating nav menu on pattern insertion or when the block has unco…

…ntrolled inner blocks (#36024) * Add automatic wp_navigation creation Fix issues with multiple menu creation Lift limit on loading of menus Remove attempt to use template part area to generate a name Remove unused client id prop Try creating as auto-draft and publishing on save Only save when selecting menu Show a draft save button on the block toolbar Show loading state when navigation block first loads Remove flicker when selecting block with unsaved inner blocks Polish switch to controlled inner blocks Take drafts into account when naming menus Fix repeated line * Remove unused file * Remove unusued useState * Update animations
WordPress · Nov 3, 2021 · 92f75c1 · 92f75c1
1 parent 0638a8c
commit 92f75c1
Show file tree

Hide file tree

Showing 9 changed files with 303 additions and 70 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -38,10 +38,12 @@ import { __ } from '@wordpress/i18n';
 import useListViewModal from './use-list-view-modal';
 import useNavigationMenu from '../use-navigation-menu';
 import Placeholder from './placeholder';
+import PlaceholderPreview from './placeholder/placeholder-preview';
 import ResponsiveWrapper from './responsive-wrapper';
 import NavigationInnerBlocks from './inner-blocks';
 import NavigationMenuSelector from './navigation-menu-selector';
 import NavigationMenuNameControl from './navigation-menu-name-control';
+import NavigationMenuPublishButton from './navigation-menu-publish-button';
 import UnsavedInnerBlocks from './unsaved-inner-blocks';
 import NavigationMenuDeleteControl from './navigation-menu-delete-control';
 
@@ -75,8 +77,8 @@ function detectColors( colorsDetectionElement, setColor, setBackground ) {
 function Navigation( {
 	attributes,
 	setAttributes,
-	isSelected,
 	clientId,
+	isSelected,
 	className,
 	backgroundColor,
 	setBackgroundColor,
@@ -108,13 +110,26 @@ function Navigation( {
 		`navigationMenu/${ navigationMenuId }`
 	);
 
-	const innerBlocks = useSelect(
-		( select ) => select( blockEditorStore ).getBlocks( clientId ),
+	const { innerBlocks, isInnerBlockSelected } = useSelect(
+		( select ) => {
+			const { getBlocks, hasSelectedInnerBlock } = select(
+				blockEditorStore
+			);
+			return {
+				innerBlocks: getBlocks( clientId ),
+				isInnerBlockSelected: hasSelectedInnerBlock( clientId, true ),
+			};
+		},
 		[ clientId ]
 	);
 	const hasExistingNavItems = !! innerBlocks.length;
 	const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore );
 
+	const [
+		hasSavedUnsavedInnerBlocks,
+		setHasSavedUnsavedInnerBlocks,
+	] = useState( false );
+
 	const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
 		! hasExistingNavItems
 	);
@@ -127,10 +142,13 @@ function Navigation( {
 		isNavigationMenuResolved,
 		isNavigationMenuMissing,
 		canSwitchNavigationMenu,
-		hasResolvedNavigationMenu,
+		hasResolvedNavigationMenus,
+		navigationMenus,
+		navigationMenu,
 	} = useNavigationMenu( navigationMenuId );
 
 	const navRef = useRef();
+	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
 
 	const { listViewToolbarButton, listViewModal } = useListViewModal(
 		clientId
@@ -203,19 +221,23 @@ function Navigation( {
 
 	// If the block has inner blocks, but no menu id, this was an older
 	// navigation block added before the block used a wp_navigation entity.
+	// Either this block was saved in the content or inserted by a pattern.
 	// Consider this 'unsaved'. Offer an uncontrolled version of inner blocks,
-	// with a prompt to 'save'.
-	const hasUnsavedBlocks =
-		hasExistingNavItems && navigationMenuId === undefined;
+	// that automatically saves the menu.
+	const hasUnsavedBlocks = hasExistingNavItems && ! isEntityAvailable;
 	if ( hasUnsavedBlocks ) {
 		return (
 			<UnsavedInnerBlocks
 				blockProps={ blockProps }
 				blocks={ innerBlocks }
-				isSelected={ isSelected }
-				onSave={ ( post ) =>
-					setAttributes( { navigationMenuId: post.id } )
-				}
+				navigationMenus={ navigationMenus }
+				hasSelection={ isSelected || isInnerBlockSelected }
+				hasSavedUnsavedInnerBlocks={ hasSavedUnsavedInnerBlocks }
+				onSave={ ( post ) => {
+					setHasSavedUnsavedInnerBlocks( true );
+					// Switch to using the wp_navigation entity.
+					setAttributes( { navigationMenuId: post.id } );
+				} }
 			/>
 		);
 	}
@@ -261,8 +283,8 @@ function Navigation( {
 		>
 			<RecursionProvider>
 				<BlockControls>
-					<ToolbarGroup>
-						{ isEntityAvailable && (
+					{ ! isDraftNavigationMenu && isEntityAvailable && (
+						<ToolbarGroup>
 							<ToolbarDropdownMenu
 								label={ __( 'Select Menu' ) }
 								text={ __( 'Select Menu' ) }
@@ -279,8 +301,8 @@ function Navigation( {
 									/>
 								) }
 							</ToolbarDropdownMenu>
-						) }
-					</ToolbarGroup>
+						</ToolbarGroup>
+					) }
 					{ hasItemJustificationControls && (
 						<JustifyToolbar
 							value={ itemsJustification }
@@ -295,6 +317,11 @@ function Navigation( {
 						/>
 					) }
 					<ToolbarGroup>{ listViewToolbarButton }</ToolbarGroup>
+					<ToolbarGroup>
+						{ isDraftNavigationMenu && (
+							<NavigationMenuPublishButton />
+						) }
+					</ToolbarGroup>
 				</BlockControls>
 				{ listViewModal }
 				<InspectorControls>
@@ -420,11 +447,14 @@ function Navigation( {
 								selectBlock( clientId );
 							} }
 							canSwitchNavigationMenu={ canSwitchNavigationMenu }
-							hasResolvedNavigationMenu={
-								hasResolvedNavigationMenu
+							hasResolvedNavigationMenus={
+								hasResolvedNavigationMenus
 							}
 						/>
 					) }
+					{ ! isEntityAvailable && ! isPlaceholderShown && (
+						<PlaceholderPreview isLoading />
+					) }
 					{ ! isPlaceholderShown && (
 						<ResponsiveWrapper
 							id={ clientId }

diff --git a/packages/block-library/src/navigation/edit/navigation-menu-name-modal.js b/packages/block-library/src/navigation/edit/navigation-menu-name-modal.js
@@ -13,10 +13,12 @@ import { __ } from '@wordpress/i18n';
 
 export default function NavigationMenuNameModal( {
 	title,
+	finishButtonText = __( 'Create' ),
 	onFinish,
 	onRequestClose,
+	value = '',
 } ) {
-	const [ name, setName ] = useState( '' );
+	const [ name, setName ] = useState( value );
 
 	return (
 		<Modal
@@ -57,7 +59,7 @@ export default function NavigationMenuNameModal( {
 							disabled={ ! name.length }
 							aria-disabled={ ! name.length }
 						>
-							{ __( 'Create' ) }
+							{ finishButtonText }
 						</Button>
 					</FlexItem>
 				</Flex>

diff --git a/packages/block-library/src/navigation/edit/navigation-menu-publish-button.js b/packages/block-library/src/navigation/edit/navigation-menu-publish-button.js
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import {
+	useEntityId,
+	useEntityProp,
+	store as coreStore,
+} from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import NavigationMenuNameModal from './navigation-menu-name-modal';
+
+export default function NavigationMenuPublishButton() {
+	const [ isNameModalVisible, setIsNameModalVisible ] = useState( false );
+	const id = useEntityId( 'postType', 'wp_navigation' );
+	const [ navigationMenuTitle ] = useEntityProp(
+		'postType',
+		'wp_navigation',
+		'title'
+	);
+	const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
+		coreStore
+	);
+
+	return (
+		<>
+			<ToolbarButton onClick={ () => setIsNameModalVisible( true ) }>
+				{ __( 'Save as' ) }
+			</ToolbarButton>
+			{ isNameModalVisible && (
+				<NavigationMenuNameModal
+					title={ __( 'Save your new navigation menu' ) }
+					value={ navigationMenuTitle }
+					onRequestClose={ () => setIsNameModalVisible( false ) }
+					finishButtonText={ __( 'Save' ) }
+					onFinish={ ( updatedTitle ) => {
+						editEntityRecord( 'postType', 'wp_navigation', id, {
+							title: updatedTitle,
+							status: 'publish',
+						} );
+						saveEditedEntityRecord(
+							'postType',
+							'wp_navigation',
+							id
+						);
+					} }
+				/>
+			) }
+		</>
+	);
+}
diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -88,7 +88,7 @@ const ExistingMenusDropdown = ( {
 export default function NavigationPlaceholder( {
 	onFinish,
 	canSwitchNavigationMenu,
-	hasResolvedNavigationMenu,
+	hasResolvedNavigationMenus,
 } ) {
 	const [ selectedMenu, setSelectedMenu ] = useState();
 
@@ -189,10 +189,10 @@ export default function NavigationPlaceholder( {
 
 	return (
 		<>
-			{ ( ! hasResolvedNavigationMenu || isStillLoading ) && (
+			{ ( ! hasResolvedNavigationMenus || isStillLoading ) && (
 				<PlaceholderPreview isLoading />
 			) }
-			{ hasResolvedNavigationMenu && ! isStillLoading && (
+			{ hasResolvedNavigationMenus && ! isStillLoading && (
 				<Placeholder className="wp-block-navigation-placeholder">
 					<PlaceholderPreview />
 					<div className="wp-block-navigation-placeholder__controls">