Add the Done button from to the template editing mode

WordPress · Nov 26, 2020 · 706b9fe · 706b9fe
1 parent 00dcf84
commit 706b9fe
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 36 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -71,9 +71,6 @@ $z-layers: (
 	".edit-site-sidebar": 100000,
 	".edit-widgets-sidebar": 100000,
 	".edit-post-layout .edit-post-post-publish-panel": 100001,
-	// For larger views, the wp-admin navbar dropdown should be at top of
-	// the Publish Post sidebar.
-	".edit-post-layout .edit-post-post-publish-panel {greater than small}": 99998,
 
 	".entities-saved-states__panel": 100001,
 	// For larger views, the wp-admin navbar dropdown should be on top of

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -19,7 +19,8 @@ import HeaderToolbar from './header-toolbar';
 import MoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 import { default as DevicePreview } from '../device-preview';
-import MainDashboardButton from '../header/main-dashboard-button';
+import MainDashboardButton from './main-dashboard-button';
+import TemplateSaveButton from './template-save-button';
 
 function Header( { setEntitiesSavedStatesCallback } ) {
 	const {
@@ -28,6 +29,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 		isSaving,
 		showIconLabels,
 		hasReducedUI,
+		isEditingTemplate,
 	} = useSelect(
 		( select ) => ( {
 			hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
@@ -41,6 +43,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 			hasReducedUI: select( 'core/edit-post' ).isFeatureActive(
 				'reducedUI'
 			),
+			isEditingTemplate: select( 'core/edit-post' ).isEditingTemplate(),
 		} ),
 		[]
 	);
@@ -60,30 +63,35 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				<HeaderToolbar />
 			</div>
 			<div className="edit-post-header__settings">
-				{ ! isPublishSidebarOpened && (
-					// This button isn't completely hidden by the publish sidebar.
-					// We can't hide the whole toolbar when the publish sidebar is open because
-					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-					// We track that DOM node to return focus to the PostPublishButtonOrToggle
-					// when the publish sidebar has been closed.
-					<PostSavedState
-						forceIsDirty={ hasActiveMetaboxes }
-						forceIsSaving={ isSaving }
-						showIconLabels={ showIconLabels }
-					/>
+				{ ! isEditingTemplate && (
+					<>
+						{ ! isPublishSidebarOpened && (
+							// This button isn't completely hidden by the publish sidebar.
+							// We can't hide the whole toolbar when the publish sidebar is open because
+							// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+							// We track that DOM node to return focus to the PostPublishButtonOrToggle
+							// when the publish sidebar has been closed.
+							<PostSavedState
+								forceIsDirty={ hasActiveMetaboxes }
+								forceIsSaving={ isSaving }
+								showIconLabels={ showIconLabels }
+							/>
+						) }
+						<DevicePreview />
+						<PostPreviewButton
+							forceIsAutosaveable={ hasActiveMetaboxes }
+							forcePreviewLink={ isSaving ? null : undefined }
+						/>
+						<PostPublishButtonOrToggle
+							forceIsDirty={ hasActiveMetaboxes }
+							forceIsSaving={ isSaving }
+							setEntitiesSavedStatesCallback={
+								setEntitiesSavedStatesCallback
+							}
+						/>
+					</>
 				) }
-				<DevicePreview />
-				<PostPreviewButton
-					forceIsAutosaveable={ hasActiveMetaboxes }
-					forcePreviewLink={ isSaving ? null : undefined }
-				/>
-				<PostPublishButtonOrToggle
-					forceIsDirty={ hasActiveMetaboxes }
-					forceIsSaving={ isSaving }
-					setEntitiesSavedStatesCallback={
-						setEntitiesSavedStatesCallback
-					}
-				/>
+				{ isEditingTemplate && <TemplateSaveButton /> }
 				{ ( isLargeViewport || ! showIconLabels ) && (
 					<>
 						<PinnedItems.Slot scope="core/edit-post" />
@@ -92,7 +100,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				) }
 				{ showIconLabels && ! isLargeViewport && (
 					<MoreMenu showIconLabels={ showIconLabels } />
-				) }
+				) }{ ' ' }
 			</div>
 		</div>
 	);

diff --git a/packages/edit-post/src/components/header/template-save-button/index.js b/packages/edit-post/src/components/header/template-save-button/index.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { EntitiesSavedStates } from '@wordpress/editor';
+import { Button } from '@wordpress/components';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { ActionsPanelFill } from '../../layout/actions-panel';
+import { store as editPostStore } from '../../../store';
+
+function TemplateSaveButton() {
+	const [
+		isEntitiesReviewPanelOpen,
+		setIsEntitiesReviewPanelOpen,
+	] = useState( false );
+	const { setIsEditingTemplate } = useDispatch( editPostStore );
+	return (
+		<>
+			<Button
+				isPrimary
+				onClick={ () => setIsEntitiesReviewPanelOpen( true ) }
+				aria-expanded={ false }
+			>
+				{ __( 'Done' ) }
+			</Button>
+			<ActionsPanelFill>
+				<EntitiesSavedStates
+					isOpen={ isEntitiesReviewPanelOpen }
+					close={ ( entities ) => {
+						setIsEntitiesReviewPanelOpen( false );
+						if ( entities.length ) {
+							setIsEditingTemplate( false );
+						}
+					} }
+				/>
+			</ActionsPanelFill>
+		</>
+	);
+}
+
+export default TemplateSaveButton;
diff --git a/packages/edit-post/src/components/layout/actions-panel.js b/packages/edit-post/src/components/layout/actions-panel.js
@@ -3,7 +3,7 @@
  */
 import { EntitiesSavedStates, PostPublishPanel } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { Button, createSlotFill } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback } from '@wordpress/element';
 /**
@@ -12,6 +12,10 @@ import { useCallback } from '@wordpress/element';
 import PluginPostPublishPanel from '../sidebar/plugin-post-publish-panel';
 import PluginPrePublishPanel from '../sidebar/plugin-pre-publish-panel';
 
+const { Fill, Slot } = createSlotFill( 'ActionsPanel' );
+
+export const ActionsPanelFill = Fill;
+
 export default function ActionsPanel( {
 	setEntitiesSavedStatesCallback,
 	closeEntitiesSavedStates,
@@ -92,6 +96,7 @@ export default function ActionsPanel( {
 				isOpen={ isEntitiesSavedStatesOpen }
 				close={ closeEntitiesSavedStates }
 			/>
+			<Slot bubblesVirtually />
 			{ ! isEntitiesSavedStatesOpen && unmountableContent }
 		</>
 	);

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -31,7 +31,6 @@
 	overflow: auto;
 
 	@include break-medium() {
-		z-index: z-index(".edit-post-layout .edit-post-post-publish-panel {greater than small}");
 		top: $admin-bar-height;
 		left: auto;
 		width: $sidebar-width + $border-width;

diff --git a/packages/edit-post/src/components/sidebar/post-template/index.js b/packages/edit-post/src/components/sidebar/post-template/index.js
@@ -36,7 +36,7 @@ function PostTemplate() {
 		<PanelRow className="edit-post-post-template">
 			<span>{ __( 'Template' ) }</span>
 			{ ! isEditing && (
-				<span>
+				<span className="edit-post-post-template__value">
 					{ createInterpolateElement(
 						sprintf(
 							/* translators: 1: Template name. */
@@ -66,7 +66,11 @@ function PostTemplate() {
 					) }
 				</span>
 			) }
-			{ isEditing && <span>{ template.post_title }</span> }
+			{ isEditing && (
+				<span className="edit-post-post-template__value">
+					{ template.post_title }
+				</span>
+			) }
 		</PanelRow>
 	);
 }

diff --git a/packages/edit-post/src/components/sidebar/post-template/style.scss b/packages/edit-post/src/components/sidebar/post-template/style.scss
@@ -5,6 +5,9 @@
 	span {
 		display: block;
 		width: 45%;
-		padding-left: 6px;
 	}
 }
+
+.edit-post-post-template__value {
+	padding-left: 6px;
+}
diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
@@ -6,7 +6,7 @@ import { some, groupBy } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { Button, withFocusReturn } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useCallback } from '@wordpress/element';
@@ -41,7 +41,7 @@ const PLACEHOLDER_PHRASES = {
 	5: __( 'Changes have been made to your %1$s, %2$s, %3$s, %4$s, and %5$s.' ),
 };
 
-export default function EntitiesSavedStates( { isOpen, close } ) {
+function EntitiesSavedStates( { isOpen, close } ) {
 	const { dirtyEntityRecords } = useSelect( ( select ) => {
 		return {
 			dirtyEntityRecords: select(
@@ -174,3 +174,5 @@ export default function EntitiesSavedStates( { isOpen, close } ) {
 		</div>
 	) : null;
 }
+
+export default withFocusReturn( EntitiesSavedStates );
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
@@ -18,7 +18,6 @@
 	}
 
 	@include break-medium() {
-		z-index: z-index(".entities-saved-states__panel {greater than small}");
 		top: $admin-bar-height;
 		left: auto;
 		width: $sidebar-width;