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
WordPress · Nov 1, 2021 · 86d3e43 · 86d3e43
1 parent 8709795
commit 86d3e43
Show file tree

Hide file tree

Showing 10 changed files with 310 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">