From 7d8946d271409db600ce065d0f85080ba8f6239b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 2 Feb 2023 15:18:30 +0100 Subject: [PATCH] Adds a global save button to the site editor (#47142) --- packages/base-styles/_z-index.scss | 3 +- .../src/editor/site-editor.ts | 2 +- .../edit-site/src/components/editor/index.js | 46 +------------ .../src/components/editor/style.scss | 4 +- .../edit-site/src/components/layout/index.js | 3 + .../src/components/layout/style.scss | 28 +++++++- .../src/components/save-panel/index.js | 65 +++++++++++++++++++ .../src/components/save-panel/style.scss | 5 ++ .../edit-site/src/components/sidebar/index.js | 32 +++++++-- .../src/components/sidebar/style.scss | 15 +++++ .../src/components/site-hub/style.scss | 1 + packages/edit-site/src/style.scss | 1 + .../entities-saved-states/style.scss | 59 +++++------------ 13 files changed, 166 insertions(+), 98 deletions(-) create mode 100644 packages/edit-site/src/components/save-panel/index.js create mode 100644 packages/edit-site/src/components/save-panel/style.scss diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index fe1f3e12b95196..97427da1fd525e 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -94,10 +94,8 @@ $z-layers: ( // 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 // the multi-entity saving sidebar. - ".entities-saved-states__panel {greater than small}": 99998, ".edit-site-editor__toggle-save-panel": 100000, // Show sidebar in greater than small viewports above editor related elements @@ -141,6 +139,7 @@ $z-layers: ( ".skip-to-selected-block": 100000, ".interface-interface-skeleton__actions": 100000, + ".edit-site-layout__actions": 100000, // The focus styles of the region navigation containers should be above their content. ".is-focusing-regions {region} :focus::after": 1000000, diff --git a/packages/e2e-test-utils-playwright/src/editor/site-editor.ts b/packages/e2e-test-utils-playwright/src/editor/site-editor.ts index 8bcf96138d396b..0cb57d12d06d5e 100644 --- a/packages/e2e-test-utils-playwright/src/editor/site-editor.ts +++ b/packages/e2e-test-utils-playwright/src/editor/site-editor.ts @@ -14,7 +14,7 @@ export async function saveSiteEditorEntities( this: Editor ) { ); // Second Save button in the entities panel. await this.page.click( - 'role=region[name="Editor publish"i] >> role=button[name="Save"i]' + 'role=region[name="Save sidebar"i] >> role=button[name="Save"i]' ); await this.page.waitForSelector( 'role=region[name="Editor top bar"i] >> role=button[name="Save"i][disabled]' diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index c860bda1ce0547..817329dbbe19dc 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -3,7 +3,7 @@ */ import { useMemo } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; -import { Button, Notice } from '@wordpress/components'; +import { Notice } from '@wordpress/components'; import { EntityProvider, store as coreStore } from '@wordpress/core-data'; import { store as preferencesStore } from '@wordpress/preferences'; import { @@ -16,11 +16,7 @@ import { ComplementaryArea, store as interfaceStore, } from '@wordpress/interface'; -import { - EditorNotices, - EditorSnackbars, - EntitiesSavedStates, -} from '@wordpress/editor'; +import { EditorNotices, EditorSnackbars } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; /** @@ -64,7 +60,6 @@ export default function Editor() { isRightSidebarOpen, isInserterOpen, isListViewOpen, - isSaveViewOpen, showIconLabels, } = useSelect( ( select ) => { const { @@ -75,7 +70,6 @@ export default function Editor() { getCanvasMode, isInserterOpened, isListViewOpened, - isSaveViewOpened, } = unlock( select( editSiteStore ) ); const { hasFinishedResolution, getEntityRecord } = select( coreStore ); const { __unstableGetEditorMode } = select( blockEditorStore ); @@ -104,7 +98,6 @@ export default function Editor() { blockEditorMode: __unstableGetEditorMode(), isInserterOpen: isInserterOpened(), isListViewOpen: isListViewOpened(), - isSaveViewOpen: isSaveViewOpened(), isRightSidebarOpen: getActiveComplementaryArea( editSiteStore.name ), @@ -114,8 +107,7 @@ export default function Editor() { ), }; }, [] ); - const { setIsSaveViewOpened, setEditedPostContext } = - useDispatch( editSiteStore ); + const { setEditedPostContext } = useDispatch( editSiteStore ); const isViewMode = canvasMode === 'view'; const isEditMode = canvasMode === 'edit'; @@ -211,38 +203,6 @@ export default function Editor() { ) } - actions={ - isEditMode && ( - <> - { isSaveViewOpen ? ( - - setIsSaveViewOpened( - false - ) - } - /> - ) : ( -
- -
- ) } - - ) - } footer={ showBlockBreakcrumb && ( + + { showCanvas && (
div { - overflow-y: auto; - min-height: 100%; - @include custom-scrollbars-on-hover; + display: flex; + flex-direction: column; + height: 100%; } .resizable-editor__drag-handle { @@ -205,3 +205,25 @@ $hub-height: $grid-unit-20 * 2 + $button-size; border-radius: $radius-block-ui; } } + +.edit-site-layout__actions { + z-index: z-index(".edit-site-layout__actions"); + position: fixed !important; // Need to override the default relative positioning + top: -9999em; + bottom: auto; + left: auto; + right: 0; + width: $sidebar-width; + color: $gray-900; + background: $white; + + &:focus, + &:focus-within { + top: 0; + bottom: 0; + } + + @include break-medium { + border-left: $border-width solid $gray-300; + } +} diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js new file mode 100644 index 00000000000000..69a510f1cc5edc --- /dev/null +++ b/packages/edit-site/src/components/save-panel/index.js @@ -0,0 +1,65 @@ +/** + * WordPress dependencies + */ +import { Button, Modal } from '@wordpress/components'; +import { EntitiesSavedStates } from '@wordpress/editor'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { NavigableRegion } from '@wordpress/interface'; + +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../store'; +import { unlock } from '../../experiments'; + +export default function SavePanel() { + const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => { + const { isSaveViewOpened, getCanvasMode } = unlock( + select( editSiteStore ) + ); + + // The currently selected entity to display. + // Typically template or template part in the site editor. + return { + isSaveViewOpen: isSaveViewOpened(), + canvasMode: getCanvasMode(), + }; + }, [] ); + const { setIsSaveViewOpened } = useDispatch( editSiteStore ); + const onClose = () => setIsSaveViewOpened( false ); + + if ( canvasMode === 'view' ) { + return isSaveViewOpen ? ( + + + + ) : null; + } + + return ( + + { isSaveViewOpen ? ( + + ) : ( +
+ +
+ ) } + + ); +} diff --git a/packages/edit-site/src/components/save-panel/style.scss b/packages/edit-site/src/components/save-panel/style.scss new file mode 100644 index 00000000000000..fb7ae2102b8cfa --- /dev/null +++ b/packages/edit-site/src/components/save-panel/style.scss @@ -0,0 +1,5 @@ +.edit-site-save-panel__modal { + @include break-small() { + width: 600px; + } +} diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 80f5997be118f8..5fa49717b69080 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -2,7 +2,9 @@ * WordPress dependencies */ import { memo } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components'; +import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies @@ -11,6 +13,7 @@ import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main'; import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates'; import useSyncSidebarPathWithURL from '../sync-state-with-url/use-sync-sidebar-path-with-url'; import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus'; +import SaveButton from '../save-button'; function SidebarScreens() { useSyncSidebarPathWithURL(); @@ -26,13 +29,30 @@ function SidebarScreens() { } function Sidebar() { + const { isDirty } = useSelect( ( select ) => { + const { __experimentalGetDirtyEntityRecords } = select( coreStore ); + const dirtyEntityRecords = __experimentalGetDirtyEntityRecords(); + // The currently selected entity to display. + // Typically template or template part in the site editor. + return { + isDirty: dirtyEntityRecords.length > 0, + }; + }, [] ); + return ( - - - + <> + + + + { isDirty && ( +
+ +
+ ) } + ); } diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index 456a5bf9dc9de3..32888c86bfaa46 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -1,3 +1,18 @@ +.edit-site-sidebar__content { + flex-grow: 1; + overflow-y: auto; + @include custom-scrollbars-on-hover; +} + +.edit-site-sidebar__footer { + border-top: 1px solid $gray-800; + flex-shrink: 0; + margin: 0 $canvas-padding; + padding: $canvas-padding 0; + display: flex; + justify-content: flex-end; +} + .edit-site-sidebar__content.edit-site-sidebar__content { overflow-x: unset; } diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index e1f3c95e3ed7a4..dc7d121e7caf1e 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -7,6 +7,7 @@ .edit-site-site-hub__edit-button { height: $grid-unit-40; + color: $white; } .edit-site-site-hub__post-type { diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 59d03ac8ce069f..f73bc019f30361 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -19,6 +19,7 @@ @import "./components/welcome-guide/style.scss"; @import "./components/keyboard-shortcut-help-modal/style.scss"; @import "./components/layout/style.scss"; +@import "./components/save-panel/style.scss"; @import "./components/sidebar/style.scss"; @import "./components/sidebar-navigation-item/style.scss"; @import "./components/sidebar-navigation-screen/style.scss"; diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss index 751deeeb472412..aaf11c1aa9a6f9 100644 --- a/packages/editor/src/components/entities-saved-states/style.scss +++ b/packages/editor/src/components/entities-saved-states/style.scss @@ -1,50 +1,27 @@ -.entities-saved-states__panel { - @include reset; - background: $white; - position: fixed; - z-index: z-index(".entities-saved-states__panel"); - top: $admin-bar-height-big; - bottom: 0; - right: 0; - left: 0; - overflow: auto; - box-sizing: border-box; +.entities-saved-states__find-entity { + display: none; - .entities-saved-states__find-entity { - display: none; - } - .entities-saved-states__find-entity-small { + @include break-medium() { display: block; } +} +.entities-saved-states__find-entity-small { + display: block; @include break-medium() { - top: $admin-bar-height; - left: auto; - width: $sidebar-width; - border-left: $border-width solid $gray-300; - - body.is-fullscreen-mode & { - top: 0; - } - - .entities-saved-states__find-entity { - display: block; - } - .entities-saved-states__find-entity-small { - display: none; - } + display: none; } +} - .entities-saved-states__panel-header { - background: $white; - padding-left: $grid-unit-10; - padding-right: $grid-unit-10; - height: $header-height + $border-width; - border-bottom: $border-width solid $gray-300; - } +.entities-saved-states__panel-header { + background: $white; + padding-left: $grid-unit-10; + padding-right: $grid-unit-10; + height: $header-height; + border-bottom: $border-width solid $gray-300; +} - .entities-saved-states__text-prompt { - padding: $grid-unit-20; - padding-bottom: $grid-unit-05; - } +.entities-saved-states__text-prompt { + padding: $grid-unit-20; + padding-bottom: $grid-unit-05; }