Update unsaved navigation block flow (#35976)

* Change semantics around upgrading to consider it an unsaved menu * Adjust styling of warning
WordPress · Oct 27, 2021 · 617dee1 · 617dee1
1 parent d00ec9a
commit 617dee1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 25 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -42,7 +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 UpgradeToNavigationMenu from './upgrade-to-navigation-menu';
+import UnsavedInnerBlocks from './unsaved-inner-blocks';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
@@ -74,6 +74,7 @@ function detectColors( colorsDetectionElement, setColor, setBackground ) {
 function Navigation( {
 	attributes,
 	setAttributes,
+	isSelected,
 	clientId,
 	className,
 	backgroundColor,
@@ -201,13 +202,17 @@ 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.
-	// Offer a UI to upgrade it to using the entity.
-	if ( hasExistingNavItems && navigationMenuId === undefined ) {
+	// Consider this 'unsaved'. Offer an uncontrolled version of inner blocks,
+	// with a prompt to 'save'.
+	const hasUnsavedBlocks =
+		hasExistingNavItems && navigationMenuId === undefined;
+	if ( hasUnsavedBlocks ) {
 		return (
-			<UpgradeToNavigationMenu
+			<UnsavedInnerBlocks
 				blockProps={ blockProps }
 				blocks={ innerBlocks }
-				onUpgrade={ ( post ) =>
+				isSelected={ isSelected }
+				onSave={ ( post ) =>
 					setAttributes( { navigationMenuId: post.id } )
 				}
 			/>

diff --git a/...gation/edit/upgrade-to-navigation-menu.js → ...c/navigation/edit/unsaved-inner-blocks.js b/...gation/edit/upgrade-to-navigation-menu.js → ...c/navigation/edit/unsaved-inner-blocks.js
@@ -17,10 +17,11 @@ import { __ } from '@wordpress/i18n';
  */
 import NavigationMenuNameModal from './navigation-menu-name-modal';
 
-export default function UpgradeToNavigationMenu( {
+export default function UnsavedInnerBlocks( {
 	blockProps,
 	blocks,
-	onUpgrade,
+	onSave,
+	isSelected,
 } ) {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		renderAppender: false,
@@ -50,26 +51,27 @@ export default function UpgradeToNavigationMenu( {
 
 	return (
 		<>
-			<Warning
-				actions={ [
-					<Button
-						key="upgrade"
-						onClick={ () => setIsModalVisible( true ) }
-						variant="primary"
+			<nav { ...blockProps }>
+				{ isSelected && (
+					<Warning
+						className="wp-block-navigation__unsaved-changes-warning"
+						actions={ [
+							<Button
+								key="save"
+								onClick={ () => setIsModalVisible( true ) }
+								variant="primary"
+							>
+								{ __( 'Save as' ) }
+							</Button>,
+						] }
 					>
-						{ __( 'Upgrade' ) }
-					</Button>,
-				] }
-			>
-				{ __(
-					'The navigation block has been updated to store data in a similar way to a reusable block. Please use the upgrade option to save your navigation block data and continue editing your block.'
+						{ __( 'Save this block to continue editing.' ) }
+					</Warning>
 				) }
-			</Warning>
-			<Disabled>
-				<nav { ...blockProps }>
+				<Disabled>
 					<div { ...innerBlocksProps } />
-				</nav>
-			</Disabled>
+				</Disabled>
+			</nav>
 			{ isModalVisible && (
 				<NavigationMenuNameModal
 					title={ __( 'Name your navigation menu' ) }
@@ -78,7 +80,7 @@ export default function UpgradeToNavigationMenu( {
 					} }
 					onFinish={ async ( title ) => {
 						const menu = await createNavigationMenu( title );
-						onUpgrade( menu );
+						onSave( menu );
 					} }
 				/>
 			) }

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -521,3 +521,11 @@ body.editor-styles-wrapper
 		margin-top: $grid-unit-20;
 	}
 }
+
+.wp-block-navigation__unsaved-changes-warning {
+	width: 100%;
+
+	.block-editor-warning__actions {
+		margin-top: 0;
+	}
+}