From 06e98fc341b3137cf61fc015d538aa8dba0a42bb Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Tue, 18 Jun 2024 14:15:01 -0500 Subject: [PATCH 01/12] Replaces useHasEditorCanvasContainer with useHasEditorContentSlotFill --- .../components/editor-canvas-container/index.js | 11 ++--------- .../edit-site/src/components/editor/index.js | 16 ++++++++++------ .../editor-interface/content-slot-fill.js | 10 +++++++++- packages/editor/src/private-apis.js | 5 ++++- 4 files changed, 25 insertions(+), 17 deletions(-) diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js index baebc1bc1bc894..852504cf54e829 100644 --- a/packages/edit-site/src/components/editor-canvas-container/index.js +++ b/packages/edit-site/src/components/editor-canvas-container/index.js @@ -2,10 +2,7 @@ * WordPress dependencies */ import { Children, cloneElement, useState } from '@wordpress/element'; -import { - Button, - __experimentalUseSlotFills as useSlotFills, -} from '@wordpress/components'; +import { Button } from '@wordpress/components'; import { ESCAPE } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; import { useDispatch, useSelect } from '@wordpress/data'; @@ -138,10 +135,6 @@ function EditorCanvasContainer( { ); } -function useHasEditorCanvasContainer() { - const fills = useSlotFills( EditorContentSlotFill.privateKey ); - return !! fills?.length; -} export default EditorCanvasContainer; -export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle }; +export { getEditorCanvasContainerTitle }; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 1b8f75b3c35e76..e09ebc346e1bc2 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -35,17 +35,19 @@ import { useSpecificEditorSettings } from '../block-editor/use-site-editor-setti import PluginTemplateSettingPanel from '../plugin-template-setting-panel'; import GlobalStylesSidebar from '../global-styles-sidebar'; import { isPreviewingTheme } from '../../utils/is-previewing-theme'; -import { - getEditorCanvasContainerTitle, - useHasEditorCanvasContainer, -} from '../editor-canvas-container'; +import { getEditorCanvasContainerTitle } from '../editor-canvas-container'; import SaveButton from '../save-button'; import SiteEditorMoreMenu from '../more-menu'; import SiteIcon from '../site-icon'; import useEditorIframeProps from '../block-editor/use-editor-iframe-props'; import useEditorTitle from './use-editor-title'; -const { Editor, BackButton } = unlock( editorPrivateApis ); +const { + Editor, + BackButton, + EditorContentSlotFill, + useHasEditorContentSlotFill, +} = unlock( editorPrivateApis ); const { useHistory } = unlock( routerPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); @@ -94,7 +96,9 @@ export default function EditSiteEditor( { isLoading } ) { }, [] ); useEditorTitle(); const _isPreviewingTheme = isPreviewingTheme(); - const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer(); + const hasDefaultEditorCanvasView = ! useHasEditorContentSlotFill( + EditorContentSlotFill.privateKey + ); const iframeProps = useEditorIframeProps(); const isEditMode = canvasMode === 'edit'; const postWithTemplate = !! contextPostId; diff --git a/packages/editor/src/components/editor-interface/content-slot-fill.js b/packages/editor/src/components/editor-interface/content-slot-fill.js index 1aab394e87230f..5ac4948d946f62 100644 --- a/packages/editor/src/components/editor-interface/content-slot-fill.js +++ b/packages/editor/src/components/editor-interface/content-slot-fill.js @@ -1,7 +1,10 @@ /** * WordPress dependencies */ -import { privateApis as componentsPrivateApis } from '@wordpress/components'; +import { + privateApis as componentsPrivateApis, + __experimentalUseSlotFills as useSlotFills, +} from '@wordpress/components'; /** * Internal dependencies @@ -12,4 +15,9 @@ const { createPrivateSlotFill } = unlock( componentsPrivateApis ); const SLOT_FILL_NAME = 'EditCanvasContainerSlot'; const EditorContentSlotFill = createPrivateSlotFill( SLOT_FILL_NAME ); +export function useHasEditorContentSlotFill( privateKey ) { + const fills = useSlotFills( privateKey ); + return !! fills?.length; +} + export default EditorContentSlotFill; diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index 48e43e7737fec8..9edda09f75351f 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -8,7 +8,9 @@ import * as interfaceApis from '@wordpress/interface'; */ import { lock } from './lock-unlock'; import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; -import EditorContentSlotFill from './components/editor-interface/content-slot-fill'; +import EditorContentSlotFill, { + useHasEditorContentSlotFill, +} from './components/editor-interface/content-slot-fill'; import useBlockEditorSettings from './components/provider/use-block-editor-settings'; import BackButton from './components/header/back-button'; import CreateTemplatePartModal from './components/create-template-part-modal'; @@ -44,6 +46,7 @@ lock( privateApis, { // This is a temporary private API while we're updating the site editor to use EditorProvider. useBlockEditorSettings, + useHasEditorContentSlotFill, interfaceStore, ...remainingInterfaceApis, } ); From 0a86365d5b1a94166e50993c059c9742bd73c7c6 Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Tue, 18 Jun 2024 15:06:45 -0500 Subject: [PATCH 02/12] Uses private editor store selector/actions for overlay title --- .../edit-site/src/components/editor/index.js | 24 ++++++++++--------- .../src/components/document-bar/index.js | 8 +++++-- packages/editor/src/store/private-actions.js | 7 ++++++ .../editor/src/store/private-selectors.js | 4 ++++ packages/editor/src/store/reducer.js | 9 +++++++ 5 files changed, 39 insertions(+), 13 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index e09ebc346e1bc2..47ef98470a518a 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -17,7 +17,7 @@ import { import { __, sprintf } from '@wordpress/i18n'; import { store as coreDataStore } from '@wordpress/core-data'; import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library'; -import { useCallback, useMemo } from '@wordpress/element'; +import { useCallback, useEffect, useMemo } from '@wordpress/element'; import { store as noticesStore } from '@wordpress/notices'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -32,10 +32,10 @@ import { GlobalStylesRenderer } from '../global-styles-renderer'; import CanvasLoader from '../canvas-loader'; import { unlock } from '../../lock-unlock'; import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings'; +import { getEditorCanvasContainerTitle } from '../editor-canvas-container'; import PluginTemplateSettingPanel from '../plugin-template-setting-panel'; import GlobalStylesSidebar from '../global-styles-sidebar'; import { isPreviewingTheme } from '../../utils/is-previewing-theme'; -import { getEditorCanvasContainerTitle } from '../editor-canvas-container'; import SaveButton from '../save-button'; import SiteEditorMoreMenu from '../more-menu'; import SiteIcon from '../site-icon'; @@ -55,16 +55,17 @@ export default function EditSiteEditor( { isLoading } ) { const { editedPostType, editedPostId, + editorCanvasContainerTitle, contextPostType, contextPostId, canvasMode, isEditingPage, supportsGlobalStyles, showIconLabels, - editorCanvasView, currentPostIsTrashed, } = useSelect( ( select ) => { const { + getEditorCanvasContainerView, getEditedPostContext, getCanvasMode, isPage, @@ -74,21 +75,22 @@ export default function EditSiteEditor( { isLoading } ) { const { get } = select( preferencesStore ); const { getCurrentTheme } = select( coreDataStore ); const _context = getEditedPostContext(); + const editorCanvasContainerView = getEditorCanvasContainerView(); // The currently selected entity to display. // Typically template or template part in the site editor. return { editedPostType: getEditedPostType(), editedPostId: getEditedPostId(), + editorCanvasContainerTitle: getEditorCanvasContainerTitle( + editorCanvasContainerView + ), contextPostType: _context?.postId ? _context.postType : undefined, contextPostId: _context?.postId ? _context.postId : undefined, canvasMode: getCanvasMode(), isEditingPage: isPage(), supportsGlobalStyles: getCurrentTheme()?.is_block_theme, showIconLabels: get( 'core', 'showIconLabels' ), - editorCanvasView: unlock( - select( editSiteStore ) - ).getEditorCanvasContainerView(), currentPostIsTrashed: select( editorStore ).getCurrentPostAttribute( 'status' ) === 'trash', @@ -175,6 +177,11 @@ export default function EditSiteEditor( { isLoading } ) { [ history, createSuccessNotice ] ); + const { setCanvasOverlayTitle } = unlock( useDispatch( editorStore ) ); + useEffect( () => { + setCanvasOverlayTitle( editorCanvasContainerTitle ); + }, [ editorCanvasContainerTitle, setCanvasOverlayTitle ] ); + const isReady = ! isLoading; return ( @@ -201,11 +208,6 @@ export default function EditSiteEditor( { isLoading } ) { _isPreviewingTheme && } forceDisableBlockTools={ ! hasDefaultEditorCanvasView } - title={ - ! hasDefaultEditorCanvasView - ? getEditorCanvasContainerTitle( editorCanvasView ) - : undefined - } iframeProps={ iframeProps } onActionPerformed={ onActionPerformed } extraSidebarPanels={ diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 82603bb1c71935..13b35051861268 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -61,16 +61,18 @@ export default function DocumentBar() { documentTitle, isNotFound, isUnsyncedPattern, + overlayTitle, templateIcon, templateTitle, onNavigateToPreviousEntityRecord, } = useSelect( ( select ) => { const { + getCanvasOverlayTitle, getCurrentPostType, getCurrentPostId, getEditorSettings, __experimentalGetTemplateInfo: getTemplateInfo, - } = select( editorStore ); + } = unlock( select( editorStore ) ); const { getEditedEntityRecord, isResolving: isResolvingSelector } = select( coreStore ); const _postType = getCurrentPostType(); @@ -93,6 +95,7 @@ export default function DocumentBar() { _postId ), isUnsyncedPattern: _document?.wp_pattern_sync_status === 'unsynced', + overlayTitle: getCanvasOverlayTitle(), templateIcon: unlock( select( editorStore ) ).getPostIcon( _postType, { @@ -111,7 +114,8 @@ export default function DocumentBar() { const isTemplate = TEMPLATE_POST_TYPES.includes( postType ); const isGlobalEntity = GLOBAL_POST_TYPES.includes( postType ); const hasBackButton = !! onNavigateToPreviousEntityRecord; - const title = isTemplate ? templateTitle : documentTitle; + const entitytitle = isTemplate ? templateTitle : documentTitle; + const title = overlayTitle || entitytitle; const mounted = useRef( false ); useEffect( () => { diff --git a/packages/editor/src/store/private-actions.js b/packages/editor/src/store/private-actions.js index 5f4ff17534eef5..991c6045f6256f 100644 --- a/packages/editor/src/store/private-actions.js +++ b/packages/editor/src/store/private-actions.js @@ -491,3 +491,10 @@ export const removeTemplates = .createErrorNotice( errorMessage, { type: 'snackbar' } ); } }; + +export function setCanvasOverlayTitle( title ) { + return { + type: 'SET_CANVAS_OVERLAY_TITLE', + title, + }; +} diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js index f56e1e8c9e81fb..e59615d9f53252 100644 --- a/packages/editor/src/store/private-selectors.js +++ b/packages/editor/src/store/private-selectors.js @@ -185,3 +185,7 @@ export const hasPostMetaChanges = createRegistrySelector( export function getEntityActions( state, ...args ) { return _getEntityActions( state.dataviews, ...args ); } + +export function getCanvasOverlayTitle( state ) { + return state.canvasOverlayTitle; +} diff --git a/packages/editor/src/store/reducer.js b/packages/editor/src/store/reducer.js index a165d90e296d6f..d604a2327e2853 100644 --- a/packages/editor/src/store/reducer.js +++ b/packages/editor/src/store/reducer.js @@ -384,6 +384,14 @@ export function publishSidebarActive( state = false, action ) { return state; } +export function canvasOverlayTitle( state = '', action ) { + switch ( action.type ) { + case 'SET_CANVAS_OVERLAY_TITLE': + return action.title; + } + return state; +} + export default combineReducers( { postId, postType, @@ -404,4 +412,5 @@ export default combineReducers( { listViewToggleRef, publishSidebarActive, dataviews: dataviewsReducer, + canvasOverlayTitle, } ); From 7995a01affc528a4211c33ec1b897a0970f783bd Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Tue, 18 Jun 2024 17:10:26 -0500 Subject: [PATCH 03/12] Hides contextual pattern commands when Style Book/Revisions overlay is present --- packages/editor/src/components/commands/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js index 460a595234e59b..0a036eb3ec9f8d 100644 --- a/packages/editor/src/components/commands/index.js +++ b/packages/editor/src/components/commands/index.js @@ -29,6 +29,9 @@ import { store as editorStore } from '../../store'; import { PATTERN_POST_TYPE } from '../../store/constants'; import { modalName as patternRenameModalName } from '../pattern-rename-modal'; import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal'; +import EditorContentSlotFill, { + useHasEditorContentSlotFill, +} from '../editor-interface/content-slot-fill'; function useEditorCommandLoader() { const { @@ -299,9 +302,12 @@ function useEditedEntityContextualCommands() { }; }, [] ); const { openModal } = useDispatch( interfaceStore ); + const hasDefaultEditorCanvasView = ! useHasEditorContentSlotFill( + EditorContentSlotFill.privateKey + ); const commands = []; - if ( postType === PATTERN_POST_TYPE ) { + if ( hasDefaultEditorCanvasView && postType === PATTERN_POST_TYPE ) { commands.push( { name: 'core/rename-pattern', label: __( 'Rename pattern' ), From 9098e74feb0692d1e7b2a35cb75c97ad4f34e01c Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Tue, 18 Jun 2024 17:14:23 -0500 Subject: [PATCH 04/12] Removes uneeded argument for useHasEditorContentSlotFill --- packages/edit-site/src/components/editor/index.js | 12 +++--------- packages/editor/src/components/commands/index.js | 8 ++------ .../components/editor-interface/content-slot-fill.js | 4 ++-- 3 files changed, 7 insertions(+), 17 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 47ef98470a518a..25c4328fb8b4fb 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -42,12 +42,8 @@ import SiteIcon from '../site-icon'; import useEditorIframeProps from '../block-editor/use-editor-iframe-props'; import useEditorTitle from './use-editor-title'; -const { - Editor, - BackButton, - EditorContentSlotFill, - useHasEditorContentSlotFill, -} = unlock( editorPrivateApis ); +const { Editor, BackButton, useHasEditorContentSlotFill } = + unlock( editorPrivateApis ); const { useHistory } = unlock( routerPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); @@ -98,9 +94,7 @@ export default function EditSiteEditor( { isLoading } ) { }, [] ); useEditorTitle(); const _isPreviewingTheme = isPreviewingTheme(); - const hasDefaultEditorCanvasView = ! useHasEditorContentSlotFill( - EditorContentSlotFill.privateKey - ); + const hasDefaultEditorCanvasView = ! useHasEditorContentSlotFill(); const iframeProps = useEditorIframeProps(); const isEditMode = canvasMode === 'edit'; const postWithTemplate = !! contextPostId; diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js index 0a036eb3ec9f8d..52da2541b3f9ad 100644 --- a/packages/editor/src/components/commands/index.js +++ b/packages/editor/src/components/commands/index.js @@ -29,9 +29,7 @@ import { store as editorStore } from '../../store'; import { PATTERN_POST_TYPE } from '../../store/constants'; import { modalName as patternRenameModalName } from '../pattern-rename-modal'; import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal'; -import EditorContentSlotFill, { - useHasEditorContentSlotFill, -} from '../editor-interface/content-slot-fill'; +import { useHasEditorContentSlotFill } from '../editor-interface/content-slot-fill'; function useEditorCommandLoader() { const { @@ -302,9 +300,7 @@ function useEditedEntityContextualCommands() { }; }, [] ); const { openModal } = useDispatch( interfaceStore ); - const hasDefaultEditorCanvasView = ! useHasEditorContentSlotFill( - EditorContentSlotFill.privateKey - ); + const hasDefaultEditorCanvasView = ! useHasEditorContentSlotFill(); const commands = []; if ( hasDefaultEditorCanvasView && postType === PATTERN_POST_TYPE ) { diff --git a/packages/editor/src/components/editor-interface/content-slot-fill.js b/packages/editor/src/components/editor-interface/content-slot-fill.js index 5ac4948d946f62..042d8df7f654a9 100644 --- a/packages/editor/src/components/editor-interface/content-slot-fill.js +++ b/packages/editor/src/components/editor-interface/content-slot-fill.js @@ -15,8 +15,8 @@ const { createPrivateSlotFill } = unlock( componentsPrivateApis ); const SLOT_FILL_NAME = 'EditCanvasContainerSlot'; const EditorContentSlotFill = createPrivateSlotFill( SLOT_FILL_NAME ); -export function useHasEditorContentSlotFill( privateKey ) { - const fills = useSlotFills( privateKey ); +export function useHasEditorContentSlotFill() { + const fills = useSlotFills( EditorContentSlotFill.privateKey ); return !! fills?.length; } From 737675c7827e64179afbe57d81e05f385291771c Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Tue, 18 Jun 2024 17:40:40 -0500 Subject: [PATCH 05/12] Adds documentation comments --- packages/edit-site/src/components/editor/index.js | 2 +- .../editor/src/components/document-bar/index.js | 5 +++++ packages/editor/src/store/private-actions.js | 11 +++++++++++ packages/editor/src/store/private-selectors.js | 13 ++++++++++++- 4 files changed, 29 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 25c4328fb8b4fb..6c5d961394b153 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -32,10 +32,10 @@ import { GlobalStylesRenderer } from '../global-styles-renderer'; import CanvasLoader from '../canvas-loader'; import { unlock } from '../../lock-unlock'; import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings'; -import { getEditorCanvasContainerTitle } from '../editor-canvas-container'; import PluginTemplateSettingPanel from '../plugin-template-setting-panel'; import GlobalStylesSidebar from '../global-styles-sidebar'; import { isPreviewingTheme } from '../../utils/is-previewing-theme'; +import { getEditorCanvasContainerTitle } from '../editor-canvas-container'; import SaveButton from '../save-button'; import SiteEditorMoreMenu from '../more-menu'; import SiteIcon from '../site-icon'; diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 13b35051861268..db0f66bcda24d4 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -115,6 +115,11 @@ export default function DocumentBar() { const isGlobalEntity = GLOBAL_POST_TYPES.includes( postType ); const hasBackButton = !! onNavigateToPreviousEntityRecord; const entitytitle = isTemplate ? templateTitle : documentTitle; + /* + * The editor canvas overlay is used by the edit-site package, but has plans to be refactored. + * We use a private selector and action to get and set the overlay title, for now. + * @see https://github.com/WordPress/gutenberg/issues/62216 + */ const title = overlayTitle || entitytitle; const mounted = useRef( false ); diff --git a/packages/editor/src/store/private-actions.js b/packages/editor/src/store/private-actions.js index 991c6045f6256f..84fb0a4adaf426 100644 --- a/packages/editor/src/store/private-actions.js +++ b/packages/editor/src/store/private-actions.js @@ -492,6 +492,17 @@ export const removeTemplates = } }; +/** + * Sets the title of the current canvas overlay. + * + * The overlay is only used in the edit-site package, with plans to be removed, so you probably shouldn't + * use this action. + * + * @see https://github.com/WordPress/gutenberg/issues/62216 + * + * @param {string} title Title of the current canvas overlay, or an empty string when no overlay is present. + * @return {Object} Action object. + */ export function setCanvasOverlayTitle( title ) { return { type: 'SET_CANVAS_OVERLAY_TITLE', diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js index e59615d9f53252..1d7c058d0cbd67 100644 --- a/packages/editor/src/store/private-selectors.js +++ b/packages/editor/src/store/private-selectors.js @@ -186,6 +186,17 @@ export function getEntityActions( state, ...args ) { return _getEntityActions( state.dataviews, ...args ); } +/** + * Gets the title of the current canvas overlay, or an empty string when no title is set. + * + * The overlay is only used in the edit-site package, with plans to be removed, so generally + * you should not use this action. + * + * @see https://github.com/WordPress/gutenberg/issues/62216 + * + * @param {Object} state Global state. + * @return {string} Title of the current canvas overlay. + */ export function getCanvasOverlayTitle( state ) { - return state.canvasOverlayTitle; + return state.canvasOverlayTitle || ''; } From b7f8c680fcfe59634d53336da27d6d9e3ac9a7bd Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Tue, 18 Jun 2024 19:47:35 -0500 Subject: [PATCH 06/12] Improves naming and comments --- .../edit-site/src/components/editor/index.js | 21 +++++++++++-------- .../editor/src/components/commands/index.js | 6 +++--- .../src/components/document-bar/index.js | 9 ++++---- .../editor-interface/content-slot-fill.js | 2 +- packages/editor/src/private-apis.js | 4 ++-- packages/editor/src/store/private-actions.js | 6 +++--- .../editor/src/store/private-selectors.js | 8 +++---- packages/editor/src/store/reducer.js | 4 ++-- 8 files changed, 32 insertions(+), 28 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 6c5d961394b153..85cf91cb0a31d2 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -42,7 +42,7 @@ import SiteIcon from '../site-icon'; import useEditorIframeProps from '../block-editor/use-editor-iframe-props'; import useEditorTitle from './use-editor-title'; -const { Editor, BackButton, useHasEditorContentSlotFill } = +const { Editor, BackButton, useHasEditorContentOverlay } = unlock( editorPrivateApis ); const { useHistory } = unlock( routerPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); @@ -51,13 +51,13 @@ export default function EditSiteEditor( { isLoading } ) { const { editedPostType, editedPostId, - editorCanvasContainerTitle, contextPostType, contextPostId, canvasMode, isEditingPage, supportsGlobalStyles, showIconLabels, + editorCanvasContainerTitle, currentPostIsTrashed, } = useSelect( ( select ) => { const { @@ -78,15 +78,15 @@ export default function EditSiteEditor( { isLoading } ) { return { editedPostType: getEditedPostType(), editedPostId: getEditedPostId(), - editorCanvasContainerTitle: getEditorCanvasContainerTitle( - editorCanvasContainerView - ), contextPostType: _context?.postId ? _context.postType : undefined, contextPostId: _context?.postId ? _context.postId : undefined, canvasMode: getCanvasMode(), isEditingPage: isPage(), supportsGlobalStyles: getCurrentTheme()?.is_block_theme, showIconLabels: get( 'core', 'showIconLabels' ), + editorCanvasContainerTitle: getEditorCanvasContainerTitle( + editorCanvasContainerView + ), currentPostIsTrashed: select( editorStore ).getCurrentPostAttribute( 'status' ) === 'trash', @@ -94,7 +94,7 @@ export default function EditSiteEditor( { isLoading } ) { }, [] ); useEditorTitle(); const _isPreviewingTheme = isPreviewingTheme(); - const hasDefaultEditorCanvasView = ! useHasEditorContentSlotFill(); + const hasDefaultEditorCanvasView = ! useHasEditorContentOverlay(); const iframeProps = useEditorIframeProps(); const isEditMode = canvasMode === 'edit'; const postWithTemplate = !! contextPostId; @@ -171,10 +171,13 @@ export default function EditSiteEditor( { isLoading } ) { [ history, createSuccessNotice ] ); - const { setCanvasOverlayTitle } = unlock( useDispatch( editorStore ) ); + // Replace the title displayed in the DocumentBar when there's an overlay visible. + const { setEditorContentOverlayTitle } = unlock( + useDispatch( editorStore ) + ); useEffect( () => { - setCanvasOverlayTitle( editorCanvasContainerTitle ); - }, [ editorCanvasContainerTitle, setCanvasOverlayTitle ] ); + setEditorContentOverlayTitle( editorCanvasContainerTitle ); + }, [ editorCanvasContainerTitle, setEditorContentOverlayTitle ] ); const isReady = ! isLoading; diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js index 52da2541b3f9ad..e7a9d67e44d352 100644 --- a/packages/editor/src/components/commands/index.js +++ b/packages/editor/src/components/commands/index.js @@ -29,7 +29,7 @@ import { store as editorStore } from '../../store'; import { PATTERN_POST_TYPE } from '../../store/constants'; import { modalName as patternRenameModalName } from '../pattern-rename-modal'; import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal'; -import { useHasEditorContentSlotFill } from '../editor-interface/content-slot-fill'; +import { useHasEditorContentOverlay } from '../editor-interface/content-slot-fill'; function useEditorCommandLoader() { const { @@ -300,10 +300,10 @@ function useEditedEntityContextualCommands() { }; }, [] ); const { openModal } = useDispatch( interfaceStore ); - const hasDefaultEditorCanvasView = ! useHasEditorContentSlotFill(); + const hasEditorContentOverlay = useHasEditorContentOverlay(); const commands = []; - if ( hasDefaultEditorCanvasView && postType === PATTERN_POST_TYPE ) { + if ( ! hasEditorContentOverlay && postType === PATTERN_POST_TYPE ) { commands.push( { name: 'core/rename-pattern', label: __( 'Rename pattern' ), diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index db0f66bcda24d4..f18697698b8b6a 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -67,7 +67,7 @@ export default function DocumentBar() { onNavigateToPreviousEntityRecord, } = useSelect( ( select ) => { const { - getCanvasOverlayTitle, + getEditorContentOverlayTitle, getCurrentPostType, getCurrentPostId, getEditorSettings, @@ -95,7 +95,7 @@ export default function DocumentBar() { _postId ), isUnsyncedPattern: _document?.wp_pattern_sync_status === 'unsynced', - overlayTitle: getCanvasOverlayTitle(), + overlayTitle: getEditorContentOverlayTitle(), templateIcon: unlock( select( editorStore ) ).getPostIcon( _postType, { @@ -116,8 +116,9 @@ export default function DocumentBar() { const hasBackButton = !! onNavigateToPreviousEntityRecord; const entitytitle = isTemplate ? templateTitle : documentTitle; /* - * The editor canvas overlay is used by the edit-site package, but has plans to be refactored. - * We use a private selector and action to get and set the overlay title, for now. + * The editor content overlay is used only by the edit-site package and has plans to be removed or refactored. + * For now we use a private selector and action to get and set the overlay title, but this will likely be removed + * in the future. * @see https://github.com/WordPress/gutenberg/issues/62216 */ const title = overlayTitle || entitytitle; diff --git a/packages/editor/src/components/editor-interface/content-slot-fill.js b/packages/editor/src/components/editor-interface/content-slot-fill.js index 042d8df7f654a9..7226c92ee7ddf7 100644 --- a/packages/editor/src/components/editor-interface/content-slot-fill.js +++ b/packages/editor/src/components/editor-interface/content-slot-fill.js @@ -15,7 +15,7 @@ const { createPrivateSlotFill } = unlock( componentsPrivateApis ); const SLOT_FILL_NAME = 'EditCanvasContainerSlot'; const EditorContentSlotFill = createPrivateSlotFill( SLOT_FILL_NAME ); -export function useHasEditorContentSlotFill() { +export function useHasEditorContentOverlay() { const fills = useSlotFills( EditorContentSlotFill.privateKey ); return !! fills?.length; } diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index 9edda09f75351f..266f296cee60b3 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -9,7 +9,7 @@ import * as interfaceApis from '@wordpress/interface'; import { lock } from './lock-unlock'; import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; import EditorContentSlotFill, { - useHasEditorContentSlotFill, + useHasEditorContentOverlay, } from './components/editor-interface/content-slot-fill'; import useBlockEditorSettings from './components/provider/use-block-editor-settings'; import BackButton from './components/header/back-button'; @@ -46,7 +46,7 @@ lock( privateApis, { // This is a temporary private API while we're updating the site editor to use EditorProvider. useBlockEditorSettings, - useHasEditorContentSlotFill, + useHasEditorContentOverlay, interfaceStore, ...remainingInterfaceApis, } ); diff --git a/packages/editor/src/store/private-actions.js b/packages/editor/src/store/private-actions.js index 84fb0a4adaf426..ea69e4b1295938 100644 --- a/packages/editor/src/store/private-actions.js +++ b/packages/editor/src/store/private-actions.js @@ -493,17 +493,17 @@ export const removeTemplates = }; /** - * Sets the title of the current canvas overlay. + * Sets the title of the editor content overlay. * * The overlay is only used in the edit-site package, with plans to be removed, so you probably shouldn't * use this action. * * @see https://github.com/WordPress/gutenberg/issues/62216 * - * @param {string} title Title of the current canvas overlay, or an empty string when no overlay is present. + * @param {string} title Title of the current overlay, or an empty string when no overlay is present. * @return {Object} Action object. */ -export function setCanvasOverlayTitle( title ) { +export function setEditorContentOverlayTitle( title ) { return { type: 'SET_CANVAS_OVERLAY_TITLE', title, diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js index 1d7c058d0cbd67..f2ecb7020f3fe4 100644 --- a/packages/editor/src/store/private-selectors.js +++ b/packages/editor/src/store/private-selectors.js @@ -187,7 +187,7 @@ export function getEntityActions( state, ...args ) { } /** - * Gets the title of the current canvas overlay, or an empty string when no title is set. + * Gets the title of the editor content overlay. * * The overlay is only used in the edit-site package, with plans to be removed, so generally * you should not use this action. @@ -195,8 +195,8 @@ export function getEntityActions( state, ...args ) { * @see https://github.com/WordPress/gutenberg/issues/62216 * * @param {Object} state Global state. - * @return {string} Title of the current canvas overlay. + * @return {string} Title of the current overlay, or an empty string when no title is set. */ -export function getCanvasOverlayTitle( state ) { - return state.canvasOverlayTitle || ''; +export function getEditorContentOverlayTitle( state ) { + return state.editorContentOverlayTitle || ''; } diff --git a/packages/editor/src/store/reducer.js b/packages/editor/src/store/reducer.js index d604a2327e2853..e2ad9710509c3f 100644 --- a/packages/editor/src/store/reducer.js +++ b/packages/editor/src/store/reducer.js @@ -384,7 +384,7 @@ export function publishSidebarActive( state = false, action ) { return state; } -export function canvasOverlayTitle( state = '', action ) { +export function editorContentOverlayTitle( state = '', action ) { switch ( action.type ) { case 'SET_CANVAS_OVERLAY_TITLE': return action.title; @@ -412,5 +412,5 @@ export default combineReducers( { listViewToggleRef, publishSidebarActive, dataviews: dataviewsReducer, - canvasOverlayTitle, + editorContentOverlayTitle, } ); From b7daae2c35584394277d42d6584a70c4cf8c86dd Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Tue, 18 Jun 2024 20:25:48 -0500 Subject: [PATCH 07/12] Sets the Style Book/Revisions icon, in addition to title --- .../editor-canvas-container/index.js | 27 +++++++++++++------ .../edit-site/src/components/editor/index.js | 20 +++++++------- .../src/components/document-bar/index.js | 14 +++++++--- packages/editor/src/store/private-actions.js | 8 +++--- .../editor/src/store/private-selectors.js | 11 +++++--- packages/editor/src/store/reducer.js | 14 +++++++--- 6 files changed, 61 insertions(+), 33 deletions(-) diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js index 852504cf54e829..ba6d2b79c3121a 100644 --- a/packages/edit-site/src/components/editor-canvas-container/index.js +++ b/packages/edit-site/src/components/editor-canvas-container/index.js @@ -6,7 +6,7 @@ import { Button } from '@wordpress/components'; import { ESCAPE } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; import { useDispatch, useSelect } from '@wordpress/data'; -import { closeSmall } from '@wordpress/icons'; +import { backup, closeSmall, seen } from '@wordpress/icons'; import { useFocusOnMount, useFocusReturn } from '@wordpress/compose'; import { store as preferencesStore } from '@wordpress/preferences'; import { @@ -27,17 +27,26 @@ const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis ); * * @param {string} view Editor canvas container view. * - * @return {string} Translated string corresponding to value of view. Default is ''. + * @return {Object} Translated string for the view title and associated icon, both defaulting to ''. */ -function getEditorCanvasContainerTitle( view ) { +function getEditorCanvasContainerTitleAndIcon( view ) { switch ( view ) { case 'style-book': - return __( 'Style Book' ); + return { + title: __( 'Style Book' ), + icon: seen, + }; case 'global-styles-revisions': case 'global-styles-revisions:style-book': - return __( 'Style Revisions' ); + return { + title: __( 'Style Revisions' ), + icon: backup, + }; default: - return ''; + return { + title: '', + icon: '', + }; } } @@ -106,7 +115,9 @@ function EditorCanvasContainer( { return null; } - const title = getEditorCanvasContainerTitle( editorCanvasContainerView ); + const { title } = getEditorCanvasContainerTitleAndIcon( + editorCanvasContainerView + ); const shouldShowCloseButton = onClose || closeButtonLabel; return ( @@ -137,4 +148,4 @@ function EditorCanvasContainer( { } export default EditorCanvasContainer; -export { getEditorCanvasContainerTitle }; +export { getEditorCanvasContainerTitleAndIcon }; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 85cf91cb0a31d2..86bca66525ccd8 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -35,7 +35,7 @@ import { useSpecificEditorSettings } from '../block-editor/use-site-editor-setti import PluginTemplateSettingPanel from '../plugin-template-setting-panel'; import GlobalStylesSidebar from '../global-styles-sidebar'; import { isPreviewingTheme } from '../../utils/is-previewing-theme'; -import { getEditorCanvasContainerTitle } from '../editor-canvas-container'; +import { getEditorCanvasContainerTitleAndIcon } from '../editor-canvas-container'; import SaveButton from '../save-button'; import SiteEditorMoreMenu from '../more-menu'; import SiteIcon from '../site-icon'; @@ -57,7 +57,7 @@ export default function EditSiteEditor( { isLoading } ) { isEditingPage, supportsGlobalStyles, showIconLabels, - editorCanvasContainerTitle, + editorCanvasContainerView, currentPostIsTrashed, } = useSelect( ( select ) => { const { @@ -71,7 +71,6 @@ export default function EditSiteEditor( { isLoading } ) { const { get } = select( preferencesStore ); const { getCurrentTheme } = select( coreDataStore ); const _context = getEditedPostContext(); - const editorCanvasContainerView = getEditorCanvasContainerView(); // The currently selected entity to display. // Typically template or template part in the site editor. @@ -84,9 +83,7 @@ export default function EditSiteEditor( { isLoading } ) { isEditingPage: isPage(), supportsGlobalStyles: getCurrentTheme()?.is_block_theme, showIconLabels: get( 'core', 'showIconLabels' ), - editorCanvasContainerTitle: getEditorCanvasContainerTitle( - editorCanvasContainerView - ), + editorCanvasContainerView: getEditorCanvasContainerView(), currentPostIsTrashed: select( editorStore ).getCurrentPostAttribute( 'status' ) === 'trash', @@ -171,13 +168,16 @@ export default function EditSiteEditor( { isLoading } ) { [ history, createSuccessNotice ] ); - // Replace the title displayed in the DocumentBar when there's an overlay visible. - const { setEditorContentOverlayTitle } = unlock( + // Replace the title and icon displayed in the DocumentBar when there's an overlay visible. + const { setEditorContentOverlayTitleAndIcon } = unlock( useDispatch( editorStore ) ); + const { title, icon } = getEditorCanvasContainerTitleAndIcon( + editorCanvasContainerView + ); useEffect( () => { - setEditorContentOverlayTitle( editorCanvasContainerTitle ); - }, [ editorCanvasContainerTitle, setEditorContentOverlayTitle ] ); + setEditorContentOverlayTitleAndIcon( title, icon ); + }, [ title, icon, setEditorContentOverlayTitleAndIcon ] ); const isReady = ! isLoading; diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index f18697698b8b6a..f4c5e001211e67 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -62,12 +62,13 @@ export default function DocumentBar() { isNotFound, isUnsyncedPattern, overlayTitle, + overlayIcon, templateIcon, templateTitle, onNavigateToPreviousEntityRecord, } = useSelect( ( select ) => { const { - getEditorContentOverlayTitle, + getEditorContentOverlayTitleAndIcon, getCurrentPostType, getCurrentPostId, getEditorSettings, @@ -83,6 +84,9 @@ export default function DocumentBar() { _postId ); const _templateInfo = getTemplateInfo( _document ); + const { title: _overlayTitle, icon: _overlayIcon } = + getEditorContentOverlayTitleAndIcon(); + return { postType: _postType, documentTitle: _document.title, @@ -95,7 +99,8 @@ export default function DocumentBar() { _postId ), isUnsyncedPattern: _document?.wp_pattern_sync_status === 'unsynced', - overlayTitle: getEditorContentOverlayTitle(), + overlayTitle: _overlayTitle, + overlayIcon: _overlayIcon, templateIcon: unlock( select( editorStore ) ).getPostIcon( _postType, { @@ -117,11 +122,12 @@ export default function DocumentBar() { const entitytitle = isTemplate ? templateTitle : documentTitle; /* * The editor content overlay is used only by the edit-site package and has plans to be removed or refactored. - * For now we use a private selector and action to get and set the overlay title, but this will likely be removed + * For now we use a private selector and action to get and set the overlay title and icon, but this will likely be removed * in the future. * @see https://github.com/WordPress/gutenberg/issues/62216 */ const title = overlayTitle || entitytitle; + const icon = overlayIcon || templateIcon; const mounted = useRef( false ); useEffect( () => { @@ -190,7 +196,7 @@ export default function DocumentBar() { isReducedMotion ? { duration: 0 } : undefined } > - + Date: Wed, 19 Jun 2024 16:07:56 -0500 Subject: [PATCH 08/12] Uses props rather than state to display title/icon in DocumentBar --- .../edit-site/src/components/editor/index.js | 19 ++++++--------- packages/editor/README.md | 6 +++++ .../src/components/document-bar/index.js | 23 ++++++++----------- .../src/components/editor-interface/index.js | 2 ++ .../editor/src/components/header/index.js | 3 ++- packages/editor/src/store/private-actions.js | 20 ---------------- .../editor/src/store/private-selectors.js | 18 --------------- packages/editor/src/store/reducer.js | 15 ------------ 8 files changed, 27 insertions(+), 79 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 86bca66525ccd8..6a843474b5d981 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -17,7 +17,7 @@ import { import { __, sprintf } from '@wordpress/i18n'; import { store as coreDataStore } from '@wordpress/core-data'; import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library'; -import { useCallback, useEffect, useMemo } from '@wordpress/element'; +import { useCallback, useMemo } from '@wordpress/element'; import { store as noticesStore } from '@wordpress/notices'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -57,7 +57,7 @@ export default function EditSiteEditor( { isLoading } ) { isEditingPage, supportsGlobalStyles, showIconLabels, - editorCanvasContainerView, + editorCanvasView, currentPostIsTrashed, } = useSelect( ( select ) => { const { @@ -83,7 +83,7 @@ export default function EditSiteEditor( { isLoading } ) { isEditingPage: isPage(), supportsGlobalStyles: getCurrentTheme()?.is_block_theme, showIconLabels: get( 'core', 'showIconLabels' ), - editorCanvasContainerView: getEditorCanvasContainerView(), + editorCanvasView: getEditorCanvasContainerView(), currentPostIsTrashed: select( editorStore ).getCurrentPostAttribute( 'status' ) === 'trash', @@ -169,15 +169,8 @@ export default function EditSiteEditor( { isLoading } ) { ); // Replace the title and icon displayed in the DocumentBar when there's an overlay visible. - const { setEditorContentOverlayTitleAndIcon } = unlock( - useDispatch( editorStore ) - ); - const { title, icon } = getEditorCanvasContainerTitleAndIcon( - editorCanvasContainerView - ); - useEffect( () => { - setEditorContentOverlayTitleAndIcon( title, icon ); - }, [ title, icon, setEditorContentOverlayTitleAndIcon ] ); + const { title, icon } = + getEditorCanvasContainerTitleAndIcon( editorCanvasView ); const isReady = ! isLoading; @@ -205,6 +198,8 @@ export default function EditSiteEditor( { isLoading } ) { _isPreviewingTheme && } forceDisableBlockTools={ ! hasDefaultEditorCanvasView } + title={ title } + icon={ icon } iframeProps={ iframeProps } onActionPerformed={ onActionPerformed } extraSidebarPanels={ diff --git a/packages/editor/README.md b/packages/editor/README.md index a0769fc5bac966..8cfee5e3a7c113 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -262,6 +262,12 @@ _Usage_ ``` +_Parameters_ + +- _props_ `Object`: The component props. +- _props.title_ `string`: A title for the document, defaulting to the document or template title currently being edited. +- _props.icon_ `import("@wordpress/components").IconType`: An icon for the document, defaulting to an icon for document or template currently being edited. + _Returns_ - `JSX.Element`: The rendered DocumentBar component. diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index f4c5e001211e67..81a4181222b54f 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -52,23 +52,25 @@ const MotionButton = motion( Button ); * ```jsx * * ``` + * @param {Object} props The component props. + * @param {string} props.title A title for the document, defaulting to the document or + * template title currently being edited. + * @param {import("@wordpress/components").IconType} props.icon An icon for the document, defaulting to an icon for document + * or template currently being edited. * * @return {JSX.Element} The rendered DocumentBar component. */ -export default function DocumentBar() { +export default function DocumentBar( props ) { const { postType, documentTitle, isNotFound, isUnsyncedPattern, - overlayTitle, - overlayIcon, templateIcon, templateTitle, onNavigateToPreviousEntityRecord, } = useSelect( ( select ) => { const { - getEditorContentOverlayTitleAndIcon, getCurrentPostType, getCurrentPostId, getEditorSettings, @@ -84,9 +86,6 @@ export default function DocumentBar() { _postId ); const _templateInfo = getTemplateInfo( _document ); - const { title: _overlayTitle, icon: _overlayIcon } = - getEditorContentOverlayTitleAndIcon(); - return { postType: _postType, documentTitle: _document.title, @@ -99,8 +98,6 @@ export default function DocumentBar() { _postId ), isUnsyncedPattern: _document?.wp_pattern_sync_status === 'unsynced', - overlayTitle: _overlayTitle, - overlayIcon: _overlayIcon, templateIcon: unlock( select( editorStore ) ).getPostIcon( _postType, { @@ -119,15 +116,15 @@ export default function DocumentBar() { const isTemplate = TEMPLATE_POST_TYPES.includes( postType ); const isGlobalEntity = GLOBAL_POST_TYPES.includes( postType ); const hasBackButton = !! onNavigateToPreviousEntityRecord; - const entitytitle = isTemplate ? templateTitle : documentTitle; + const entityTitle = isTemplate ? templateTitle : documentTitle; /* * The editor content overlay is used only by the edit-site package and has plans to be removed or refactored. * For now we use a private selector and action to get and set the overlay title and icon, but this will likely be removed * in the future. * @see https://github.com/WordPress/gutenberg/issues/62216 */ - const title = overlayTitle || entitytitle; - const icon = overlayIcon || templateIcon; + const title = props.title || entityTitle; + const icon = props.icon || templateIcon; const mounted = useRef( false ); useEffect( () => { @@ -201,7 +198,7 @@ export default function DocumentBar() { size="body" as="h1" aria-label={ - TYPE_LABELS[ postType ] + ! props.title && TYPE_LABELS[ postType ] ? // eslint-disable-next-line @wordpress/valid-sprintf sprintf( TYPE_LABELS[ postType ], title ) : undefined diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js index 8d4bdfc00344af..04b52084b54f31 100644 --- a/packages/editor/src/components/editor-interface/index.js +++ b/packages/editor/src/components/editor-interface/index.js @@ -57,6 +57,7 @@ export default function EditorInterface( { customSaveButton, forceDisableBlockTools, title, + icon, iframeProps, } ) { const { @@ -140,6 +141,7 @@ export default function EditorInterface( { customSaveButton={ customSaveButton } forceDisableBlockTools={ forceDisableBlockTools } title={ title } + icon={ icon } /> ) } diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index 14b62def0cfa74..4cf28748b2d7a2 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -51,6 +51,7 @@ function Header( { forceDisableBlockTools, setEntitiesSavedStatesCallback, title, + icon, } ) { const isWideViewport = useViewportMatch( 'large' ); const isLargeViewport = useViewportMatch( 'medium' ); @@ -116,7 +117,7 @@ function Header( { ! isBlockToolsCollapsed && hasTopToolbar, } ) } > - { ! title ? : title } + Date: Wed, 19 Jun 2024 16:23:25 -0500 Subject: [PATCH 09/12] Fixes e2e test --- .../e2e/specs/site-editor/user-global-styles-revisions.spec.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js index 9eb98e55005c70..ce51743c9b2ae3 100644 --- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js +++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js @@ -155,11 +155,14 @@ test.describe( 'Style Revisions', () => { } ) => { await editor.canvas.locator( 'body' ).click(); await userGlobalStylesRevisions.openStylesPanel(); + // Search for exact names to avoid selecting the command bar button in the header. const revisionsButton = page.getByRole( 'button', { name: 'Revisions', + exact: true, } ); const styleBookButton = page.getByRole( 'button', { name: 'Style Book', + exact: true, } ); await revisionsButton.click(); // We can see the Revisions list. From e4455b5efa74e52afe4ed16b97e87d9e2c1a4ab7 Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Wed, 19 Jun 2024 16:42:19 -0500 Subject: [PATCH 10/12] Adds e2e tests --- test/e2e/specs/site-editor/style-book.spec.js | 15 +++++++++++ .../user-global-styles-revisions.spec.js | 26 +++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js index 087013607be2f2..c4e153e9b5e2fa 100644 --- a/test/e2e/specs/site-editor/style-book.spec.js +++ b/test/e2e/specs/site-editor/style-book.spec.js @@ -176,6 +176,21 @@ test.describe( 'Style Book', () => { 'style book should be visible' ).toBeVisible(); } ); + + test( 'should allow opening the command menu from the header when open', async ( { + page, + } ) => { + // Open the command menu from the header. + await page + .getByRole( 'heading', { + name: 'Style Book', + } ) + .click(); + + await expect( + page.getByLabel( 'Search commands and settings' ) + ).toBeVisible(); + } ); } ); class StyleBook { diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js index ce51743c9b2ae3..f48c819c3a0891 100644 --- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js +++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js @@ -227,6 +227,32 @@ test.describe( 'Style Revisions', () => { ).toBeVisible(); } ); + test( 'should allow opening the command menu from the header when open', async ( { + page, + editor, + userGlobalStylesRevisions, + } ) => { + await editor.canvas.locator( 'body' ).click(); + await userGlobalStylesRevisions.openStylesPanel(); + await page + .getByRole( 'button', { + name: 'Revisions', + exact: true, + } ) + .click(); + + // Open the command menu from the header. + await page + .getByRole( 'heading', { + name: 'Style Revisions', + } ) + .click(); + + await expect( + page.getByLabel( 'Search commands and settings' ) + ).toBeVisible(); + } ); + test( 'should paginate', async ( { page, editor, From 759d242b0613c6d7d4cdcb57d47a3bbd6cc2bbb7 Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Wed, 19 Jun 2024 16:51:19 -0500 Subject: [PATCH 11/12] Removes unneeded comment and unlock --- packages/editor/src/components/document-bar/index.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 81a4181222b54f..34cb68de785157 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -75,7 +75,7 @@ export default function DocumentBar( props ) { getCurrentPostId, getEditorSettings, __experimentalGetTemplateInfo: getTemplateInfo, - } = unlock( select( editorStore ) ); + } = select( editorStore ); const { getEditedEntityRecord, isResolving: isResolvingSelector } = select( coreStore ); const _postType = getCurrentPostType(); @@ -117,12 +117,6 @@ export default function DocumentBar( props ) { const isGlobalEntity = GLOBAL_POST_TYPES.includes( postType ); const hasBackButton = !! onNavigateToPreviousEntityRecord; const entityTitle = isTemplate ? templateTitle : documentTitle; - /* - * The editor content overlay is used only by the edit-site package and has plans to be removed or refactored. - * For now we use a private selector and action to get and set the overlay title and icon, but this will likely be removed - * in the future. - * @see https://github.com/WordPress/gutenberg/issues/62216 - */ const title = props.title || entityTitle; const icon = props.icon || templateIcon; From 4000088bb3074d56017532eabe4a55cb81bc9789 Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Sun, 23 Jun 2024 19:40:07 -0500 Subject: [PATCH 12/12] Removes command context when Style Book/Revisions open --- .../src/components/editor-canvas-container/index.js | 12 ++++++++++-- packages/edit-site/src/components/editor/index.js | 10 ++++++---- .../src/hooks/commands/use-set-command-context.js | 12 ++++++++++++ packages/editor/src/components/commands/index.js | 4 +--- .../components/editor-interface/content-slot-fill.js | 10 +--------- packages/editor/src/private-apis.js | 5 +---- 6 files changed, 31 insertions(+), 22 deletions(-) diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js index ba6d2b79c3121a..4f93c2e1995d29 100644 --- a/packages/edit-site/src/components/editor-canvas-container/index.js +++ b/packages/edit-site/src/components/editor-canvas-container/index.js @@ -2,7 +2,10 @@ * WordPress dependencies */ import { Children, cloneElement, useState } from '@wordpress/element'; -import { Button } from '@wordpress/components'; +import { + Button, + __experimentalUseSlotFills as useSlotFills, +} from '@wordpress/components'; import { ESCAPE } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; import { useDispatch, useSelect } from '@wordpress/data'; @@ -147,5 +150,10 @@ function EditorCanvasContainer( { ); } +function useHasEditorCanvasContainer() { + const fills = useSlotFills( EditorContentSlotFill.privateKey ); + return !! fills?.length; +} + export default EditorCanvasContainer; -export { getEditorCanvasContainerTitleAndIcon }; +export { useHasEditorCanvasContainer, getEditorCanvasContainerTitleAndIcon }; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 6a843474b5d981..85a9a428fe2f2f 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -35,15 +35,17 @@ import { useSpecificEditorSettings } from '../block-editor/use-site-editor-setti import PluginTemplateSettingPanel from '../plugin-template-setting-panel'; import GlobalStylesSidebar from '../global-styles-sidebar'; import { isPreviewingTheme } from '../../utils/is-previewing-theme'; -import { getEditorCanvasContainerTitleAndIcon } from '../editor-canvas-container'; +import { + getEditorCanvasContainerTitleAndIcon, + useHasEditorCanvasContainer, +} from '../editor-canvas-container'; import SaveButton from '../save-button'; import SiteEditorMoreMenu from '../more-menu'; import SiteIcon from '../site-icon'; import useEditorIframeProps from '../block-editor/use-editor-iframe-props'; import useEditorTitle from './use-editor-title'; -const { Editor, BackButton, useHasEditorContentOverlay } = - unlock( editorPrivateApis ); +const { Editor, BackButton } = unlock( editorPrivateApis ); const { useHistory } = unlock( routerPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); @@ -91,7 +93,7 @@ export default function EditSiteEditor( { isLoading } ) { }, [] ); useEditorTitle(); const _isPreviewingTheme = isPreviewingTheme(); - const hasDefaultEditorCanvasView = ! useHasEditorContentOverlay(); + const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer(); const iframeProps = useEditorIframeProps(); const isEditMode = canvasMode === 'edit'; const postWithTemplate = !! contextPostId; diff --git a/packages/edit-site/src/hooks/commands/use-set-command-context.js b/packages/edit-site/src/hooks/commands/use-set-command-context.js index 2824a6cc99f1c3..30f7f7ce258c61 100644 --- a/packages/edit-site/src/hooks/commands/use-set-command-context.js +++ b/packages/edit-site/src/hooks/commands/use-set-command-context.js @@ -10,6 +10,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; */ import { store as editSiteStore } from '../../store'; import { unlock } from '../../lock-unlock'; +import { useHasEditorCanvasContainer } from '../../components/editor-canvas-container'; const { useCommandContext } = unlock( commandsPrivateApis ); @@ -25,6 +26,9 @@ export default function useSetCommandContext() { hasBlockSelected: getBlockSelectionStart(), }; }, [] ); + + const hasEditorCanvasContainer = useHasEditorCanvasContainer(); + // Sets the right context for the command palette let commandContext = 'site-editor'; if ( canvasMode === 'edit' ) { @@ -33,5 +37,13 @@ export default function useSetCommandContext() { if ( hasBlockSelected ) { commandContext = 'block-selection-edit'; } + if ( hasEditorCanvasContainer ) { + /* + * The editor canvas overlay will likely be deprecated in the future, so for now we clear the command context + * to remove the suggested commands that may not make sense with Style Book or Style Revisions open. + * See https://github.com/WordPress/gutenberg/issues/62216. + */ + commandContext = ''; + } useCommandContext( commandContext ); } diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js index e7a9d67e44d352..460a595234e59b 100644 --- a/packages/editor/src/components/commands/index.js +++ b/packages/editor/src/components/commands/index.js @@ -29,7 +29,6 @@ import { store as editorStore } from '../../store'; import { PATTERN_POST_TYPE } from '../../store/constants'; import { modalName as patternRenameModalName } from '../pattern-rename-modal'; import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal'; -import { useHasEditorContentOverlay } from '../editor-interface/content-slot-fill'; function useEditorCommandLoader() { const { @@ -300,10 +299,9 @@ function useEditedEntityContextualCommands() { }; }, [] ); const { openModal } = useDispatch( interfaceStore ); - const hasEditorContentOverlay = useHasEditorContentOverlay(); const commands = []; - if ( ! hasEditorContentOverlay && postType === PATTERN_POST_TYPE ) { + if ( postType === PATTERN_POST_TYPE ) { commands.push( { name: 'core/rename-pattern', label: __( 'Rename pattern' ), diff --git a/packages/editor/src/components/editor-interface/content-slot-fill.js b/packages/editor/src/components/editor-interface/content-slot-fill.js index 7226c92ee7ddf7..1aab394e87230f 100644 --- a/packages/editor/src/components/editor-interface/content-slot-fill.js +++ b/packages/editor/src/components/editor-interface/content-slot-fill.js @@ -1,10 +1,7 @@ /** * WordPress dependencies */ -import { - privateApis as componentsPrivateApis, - __experimentalUseSlotFills as useSlotFills, -} from '@wordpress/components'; +import { privateApis as componentsPrivateApis } from '@wordpress/components'; /** * Internal dependencies @@ -15,9 +12,4 @@ const { createPrivateSlotFill } = unlock( componentsPrivateApis ); const SLOT_FILL_NAME = 'EditCanvasContainerSlot'; const EditorContentSlotFill = createPrivateSlotFill( SLOT_FILL_NAME ); -export function useHasEditorContentOverlay() { - const fills = useSlotFills( EditorContentSlotFill.privateKey ); - return !! fills?.length; -} - export default EditorContentSlotFill; diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index 266f296cee60b3..48e43e7737fec8 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -8,9 +8,7 @@ import * as interfaceApis from '@wordpress/interface'; */ import { lock } from './lock-unlock'; import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; -import EditorContentSlotFill, { - useHasEditorContentOverlay, -} from './components/editor-interface/content-slot-fill'; +import EditorContentSlotFill from './components/editor-interface/content-slot-fill'; import useBlockEditorSettings from './components/provider/use-block-editor-settings'; import BackButton from './components/header/back-button'; import CreateTemplatePartModal from './components/create-template-part-modal'; @@ -46,7 +44,6 @@ lock( privateApis, { // This is a temporary private API while we're updating the site editor to use EditorProvider. useBlockEditorSettings, - useHasEditorContentOverlay, interfaceStore, ...remainingInterfaceApis, } );