Show a draft save button on the block toolbar

WordPress · Oct 29, 2021 · 868ae0a · 868ae0a
1 parent eccd1ee
commit 868ae0a
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 14 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -42,6 +42,7 @@ 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';
 
 function getComputedStyle( node ) {
@@ -136,9 +137,11 @@ function Navigation( {
 		canSwitchNavigationMenu,
 		hasResolvedNavigationMenus,
 		navigationMenus,
+		navigationMenu,
 	} = useNavigationMenu( navigationMenuId );
 
 	const navRef = useRef();
+	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
 
 	const { listViewToolbarButton, listViewModal } = useListViewModal(
 		clientId
@@ -270,8 +273,8 @@ function Navigation( {
 		>
 			<RecursionProvider>
 				<BlockControls>
-					<ToolbarGroup>
-						{ isEntityAvailable && (
+					{ ! isDraftNavigationMenu && isEntityAvailable && (
+						<ToolbarGroup>
 							<ToolbarDropdownMenu
 								label={ __( 'Select Menu' ) }
 								text={ __( 'Select Menu' ) }
@@ -288,8 +291,8 @@ function Navigation( {
 									/>
 								) }
 							</ToolbarDropdownMenu>
-						) }
-					</ToolbarGroup>
+						</ToolbarGroup>
+					) }
 					{ hasItemJustificationControls && (
 						<JustifyToolbar
 							value={ itemsJustification }
@@ -304,6 +307,11 @@ function Navigation( {
 						/>
 					) }
 					<ToolbarGroup>{ listViewToolbarButton }</ToolbarGroup>
+					<ToolbarGroup>
+						{ isDraftNavigationMenu && (
+							<NavigationMenuPublishButton />
+						) }
+					</ToolbarGroup>
 				</BlockControls>
 				{ listViewModal }
 				<InspectorControls>

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/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -521,11 +521,3 @@ body.editor-styles-wrapper
 		margin-top: $grid-unit-20;
 	}
 }
-
-.wp-block-navigation__unsaved-changes-warning {
-	width: 100%;
-
-	.block-editor-warning__actions {
-		margin-top: 0;
-	}
-}