From 706b9fe9af4634cbb4ce21ad2e6b0cd1ade5294c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 26 Nov 2020 10:25:45 +0100 Subject: [PATCH] Add the Done button from to the template editing mode --- packages/base-styles/_z-index.scss | 3 - .../edit-post/src/components/header/index.js | 58 +++++++++++-------- .../header/template-save-button/index.js | 50 ++++++++++++++++ .../src/components/layout/actions-panel.js | 7 ++- .../src/components/layout/style.scss | 1 - .../components/sidebar/post-template/index.js | 8 ++- .../sidebar/post-template/style.scss | 5 +- .../components/entities-saved-states/index.js | 6 +- .../entities-saved-states/style.scss | 1 - 9 files changed, 103 insertions(+), 36 deletions(-) create mode 100644 packages/edit-post/src/components/header/template-save-button/index.js diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 14c40bdeebd860..3ea074c2723b5d 100644 --- 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 index cd5457ff3d29e3..5b57edf175588a 100644 --- 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 } ) {
- { ! 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. - + { ! 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. + + ) } + + + + ) } - - - + { isEditingTemplate && } { ( isLargeViewport || ! showIconLabels ) && ( <> @@ -92,7 +100,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { ) } { showIconLabels && ! isLargeViewport && ( - ) } + ) }{ ' ' }
); 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 new file mode 100644 index 00000000000000..81d4f307f9e8a6 --- /dev/null +++ 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 ( + <> + + + { + setIsEntitiesReviewPanelOpen( false ); + if ( entities.length ) { + setIsEditingTemplate( false ); + } + } } + /> + + + ); +} + +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 index 5ac15a9c253c91..e1ad347a4bf7d7 100644 --- 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 } /> + { ! isEntitiesSavedStatesOpen && unmountableContent } ); diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index b7dd51c31b4258..dbe36c097afff0 100644 --- 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 index 85060025d6014b..e61af6f4ef51b4 100644 --- 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() { { __( 'Template' ) } { ! isEditing && ( - + { createInterpolateElement( sprintf( /* translators: 1: Template name. */ @@ -66,7 +66,11 @@ function PostTemplate() { ) } ) } - { isEditing && { template.post_title } } + { isEditing && ( + + { template.post_title } + + ) } ); } diff --git a/packages/edit-post/src/components/sidebar/post-template/style.scss b/packages/edit-post/src/components/sidebar/post-template/style.scss index 8ef3bf1d87945b..d625e897224368 100644 --- 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 index f7b0ee16ff06dc..52c6f749426b3a 100644 --- 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 } ) { ) : 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 index 9a347550fc9ad9..be2e6302750b29 100644 --- 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;