Add publish flow in site editor

WordPress · Apr 26, 2024 · aabdee0 · aabdee0
1 parent 08a8156
commit aabdee0
Show file tree

Hide file tree

Showing 20 changed files with 190 additions and 410 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -88,6 +88,7 @@ $z-layers: (
 	// #wpadminbar { z-index: 99999 }
 	".interface-interface-skeleton__sidebar": 100000,
 	".edit-post-layout__toggle-sidebar-panel": 100000,
+	".editor-layout__toggle-sidebar-panel": 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

diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -29,9 +29,9 @@
 
 	// Header top bar when Distraction free mode is on.
 	&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
-	.interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
-	.interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
-	.interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,
+	.interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,
+	.interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
+	.interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
 	.editor-post-publish-panel {
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -24,7 +24,6 @@ import { useState } from '@wordpress/element';
  */
 import FullscreenModeClose from './fullscreen-mode-close';
 import PostEditorMoreMenu from './more-menu';
-import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
@@ -36,6 +35,7 @@ const {
 	PreviewDropdown,
 	PinnedItems,
 	MoreMenu,
+	PostPublishButtonOrToggle,
 } = unlock( editorPrivateApis );
 
 const slideY = {

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -48,7 +48,6 @@ import Header from '../header';
 import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
 import WelcomeGuide from '../welcome-guide';
-import ActionsPanel from './actions-panel';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import useCommonCommands from '../../hooks/commands/use-common-commands';
@@ -61,6 +60,7 @@ const {
 	ListViewSidebar,
 	ComplementaryArea,
 	FullscreenMode,
+	PostLayoutActionsPanel,
 	InterfaceSkeleton,
 	interfaceStore,
 } = unlock( editorPrivateApis );
@@ -345,14 +345,15 @@ function Layout( { initialPost } ) {
 					)
 				}
 				actions={
-					<ActionsPanel
+					<PostLayoutActionsPanel
 						closeEntitiesSavedStates={ closeEntitiesSavedStates }
 						isEntitiesSavedStatesOpen={
 							entitiesSavedStatesCallback
 						}
 						setEntitiesSavedStatesCallback={
 							setEntitiesSavedStatesCallback
 						}
+						hasActiveMetaboxes={ hasActiveMetaboxes }
 					/>
 				}
 				shortcuts={ {

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -19,83 +19,3 @@
 }
 
 @include editor-left(".edit-post-layout .components-editor-notices__snackbar");
-
-.edit-post-layout .editor-post-publish-panel {
-	position: fixed;
-	z-index: z-index(".edit-post-layout .edit-post-post-publish-panel");
-	top: $admin-bar-height-big;
-	bottom: 0;
-	right: 0;
-	left: 0;
-	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;
-		border-left: $border-width solid $gray-300;
-		transform: translateX(+100%);
-		animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards;
-		@include reduce-motion("animation");
-
-		body.is-fullscreen-mode & {
-			top: 0;
-		}
-
-		// Keep it open on focus to avoid conflict with navigate-regions animation.
-		[role="region"]:focus & {
-			transform: translateX(0%);
-		}
-	}
-}
-
-@keyframes edit-post-post-publish-panel__slide-in-animation {
-	100% {
-		transform: translateX(0%);
-	}
-}
-
-.edit-post-layout .editor-post-publish-panel__header-publish-button {
-	justify-content: center;
-}
-
-.edit-post-layout__toggle-publish-panel,
-.edit-post-layout__toggle-sidebar-panel,
-.edit-post-layout__toggle-entities-saved-states-panel {
-	z-index: z-index(".edit-post-layout__toggle-sidebar-panel");
-	position: fixed !important; // Need to override the default relative positionning
-	top: -9999em;
-	bottom: auto;
-	left: auto;
-	right: 0;
-	box-sizing: border-box;
-	width: $sidebar-width;
-	background-color: $white;
-	border: 1px dotted $gray-300;
-	height: auto !important; // Need to override the default sidebar positionnings
-	padding: $grid-unit-30;
-	display: flex;
-	justify-content: center;
-}
-
-.edit-post-layout__toggle-sidebar-panel {
-	.interface-interface-skeleton__sidebar:focus &,
-	.interface-interface-skeleton__sidebar:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
-}
-
-.edit-post-layout__toggle-entities-saved-states-panel,
-.edit-post-layout__toggle-publish-panel {
-	.interface-interface-skeleton__actions:focus &,
-	.interface-interface-skeleton__actions:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
-}
-
-.edit-post-layout .entities-saved-states__panel-header {
-	height: $header-height + $border-width;
-}
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -35,6 +35,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
+import { useState, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -66,6 +67,7 @@ const {
 	InterfaceSkeleton,
 	ComplementaryArea,
 	interfaceStore,
+	PostLayoutActionsPanel,
 } = unlock( editorPrivateApis );
 
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
@@ -189,6 +191,22 @@ export default function Editor( { isLoading, onClick } ) {
 	const { closeGeneralSidebar } = useDispatch( editSiteStore );
 
 	const settings = useSpecificEditorSettings();
+
+	// Local state for save panel.
+	// Note 'truthy' callback implies an open panel.
+	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
+		useState( false );
+
+	const closeEntitiesSavedStates = useCallback(
+		( arg ) => {
+			if ( typeof entitiesSavedStatesCallback === 'function' ) {
+				entitiesSavedStatesCallback( arg );
+			}
+			setEntitiesSavedStatesCallback( false );
+		},
+		[ entitiesSavedStatesCallback ]
+	);
+
 	const isReady =
 		! isLoading &&
 		( ( postWithTemplate && !! contextPost && !! editedPost ) ||
@@ -223,6 +241,8 @@ export default function Editor( { isLoading, onClick } ) {
 							'edit-site-editor__interface-skeleton',
 							{
 								'show-icon-labels': showIconLabels,
+								'is-entity-save-view-open':
+									!! entitiesSavedStatesCallback,
 							}
 						) }
 						header={
@@ -249,11 +269,28 @@ export default function Editor( { isLoading, onClick } ) {
 											ease: [ 0.6, 0, 0.4, 1 ],
 										} }
 									>
-										<Header />
+										<Header
+											setEntitiesSavedStatesCallback={
+												setEntitiesSavedStatesCallback
+											}
+										/>
 									</motion.div>
 								) }
 							</AnimatePresence>
 						}
+						actions={
+							<PostLayoutActionsPanel
+								closeEntitiesSavedStates={
+									closeEntitiesSavedStates
+								}
+								isEntitiesSavedStatesOpen={
+									entitiesSavedStatesCallback
+								}
+								setEntitiesSavedStatesCallback={
+									setEntitiesSavedStatesCallback
+								}
+							/>
+						}
 						notices={ <EditorSnackbars /> }
 						content={
 							<>

diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -14,6 +14,7 @@ import { __unstableMotion as motion } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	DocumentBar,
+	PostSavedState,
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
@@ -31,23 +32,26 @@ import {
 } from '../editor-canvas-container';
 import { unlock } from '../../lock-unlock';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
 const {
 	CollapsableBlockToolbar,
 	MoreMenu,
 	PostViewLink,
 	PreviewDropdown,
 	PinnedItems,
+	PostPublishButtonOrToggle,
 } = unlock( editorPrivateApis );
 
-export default function HeaderEditMode() {
+export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
 	const {
 		templateType,
 		isDistractionFree,
 		blockEditorMode,
 		showIconLabels,
 		editorCanvasView,
 		isFixedToolbar,
+		isPublishSidebarOpened,
 	} = useSelect( ( select ) => {
 		const { getEditedPostType } = select( editSiteStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
@@ -64,6 +68,8 @@ export default function HeaderEditMode() {
 			).getEditorCanvasContainerView(),
 			isDistractionFree: getPreference( 'core', 'distractionFree' ),
 			isFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+			isPublishSidebarOpened:
+				select( editorStore ).isPublishSidebarOpened(),
 		};
 	}, [] );
 
@@ -94,6 +100,7 @@ export default function HeaderEditMode() {
 		ease: 'easeOut',
 	};
 
+	const _isPreviewingTheme = isPreviewingTheme();
 	return (
 		<div
 			className={ classnames( 'edit-site-header-edit-mode', {
@@ -158,7 +165,28 @@ export default function HeaderEditMode() {
 						</div>
 					) }
 					<PostViewLink />
-					<SaveButton size="compact" />
+					{
+						// TODO: For now we conditionally render the Save/Publish buttons based on
+						// some specific site editor extra handling. Examples are when we're previewing
+						// a theme, handling of global styles changes or when we're in 'view' mode,
+						// which opens the save panel in a Modal.
+					 }
+					{ ! _isPreviewingTheme && ! 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 />
+					) }
+					{ ! _isPreviewingTheme && (
+						<PostPublishButtonOrToggle
+							setEntitiesSavedStatesCallback={
+								setEntitiesSavedStatesCallback
+							}
+						/>
+					) }
+					{ _isPreviewingTheme && <SaveButton size="compact" /> }
 					{ ! isDistractionFree && <PinnedItems.Slot scope="core" /> }
 					<MoreMenu />
 					<SiteEditorMoreMenuItems />