diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 6f61e01c1d7c6..08508ebd97344 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -7,7 +7,6 @@ import clsx from 'clsx'; * WordPress dependencies */ import { useDispatch, useSelect } from '@wordpress/data'; -import { Notice } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { EditorKeyboardShortcutsRegister, @@ -28,11 +27,8 @@ import { store as preferencesStore } from '@wordpress/preferences'; import WelcomeGuide from '../welcome-guide'; import { store as editSiteStore } from '../../store'; import { GlobalStylesRenderer } from '../global-styles-renderer'; -import useTitle from '../routes/use-title'; import CanvasLoader from '../canvas-loader'; import { unlock } from '../../lock-unlock'; -import useEditedEntityRecord from '../use-edited-entity-record'; -import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants'; import TemplatePartConverter from '../template-part-converter'; import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings'; import PluginTemplateSettingPanel from '../plugin-template-setting-panel'; @@ -45,25 +41,18 @@ import { import SaveButton from '../save-button'; import SiteEditorMoreMenu from '../more-menu'; import useEditorIframeProps from '../block-editor/use-editor-iframe-props'; +import useEditorTitle from './use-editor-title'; -const { - EditorInterface, - ExperimentalEditorProvider: EditorProvider, - Sidebar, -} = unlock( editorPrivateApis ); +const { Editor } = unlock( editorPrivateApis ); const { useHistory } = unlock( routerPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); -export default function Editor( { isLoading } ) { +export default function EditSiteEditor( { isLoading } ) { const { - record: editedPost, - getTitle, - isLoaded: hasLoadedPost, - } = useEditedEntityRecord(); - const { type: editedPostType } = editedPost; - const { - context, - contextPost, + editedPostType, + editedPostId, + contextPostType, + contextPostId, editorMode, canvasMode, isEditingPage, @@ -72,25 +61,25 @@ export default function Editor( { isLoading } ) { editorCanvasView, currentPostIsTrashed, } = useSelect( ( select ) => { - const { getEditedPostContext, getCanvasMode, isPage } = unlock( - select( editSiteStore ) - ); + const { + getEditedPostContext, + getCanvasMode, + isPage, + getEditedPostType, + getEditedPostId, + } = unlock( select( editSiteStore ) ); const { get } = select( preferencesStore ); - const { getEntityRecord, getCurrentTheme } = select( coreDataStore ); + const { getCurrentTheme } = select( coreDataStore ); const { getEditorMode } = select( editorStore ); const _context = getEditedPostContext(); // The currently selected entity to display. // Typically template or template part in the site editor. return { - context: _context, - contextPost: _context?.postId - ? getEntityRecord( - 'postType', - _context.postType, - _context.postId - ) - : undefined, + editedPostType: getEditedPostType(), + editedPostId: getEditedPostId(), + contextPostType: _context?.postId ? _context.postType : undefined, + contextPostId: _context?.postId ? _context.postId : undefined, editorMode: getEditorMode(), canvasMode: getCanvasMode(), isEditingPage: isPage(), @@ -104,30 +93,14 @@ export default function Editor( { isLoading } ) { 'trash', }; }, [] ); + useEditorTitle(); const _isPreviewingTheme = isPreviewingTheme(); const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer(); const iframeProps = useEditorIframeProps(); - const isViewMode = canvasMode === 'view'; const isEditMode = canvasMode === 'edit'; const showVisualEditor = isViewMode || editorMode === 'visual'; - const postWithTemplate = !! context?.postId; - - let title; - if ( hasLoadedPost ) { - title = sprintf( - // translators: A breadcrumb trail for the Admin document title. %1$s: title of template being edited, %2$s: type of template (Template or Template Part). - __( '%1$s ‹ %2$s' ), - getTitle(), - POST_TYPE_LABELS[ editedPostType ] ?? - POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ] - ); - } - - // Only announce the title once the editor is ready to prevent "Replace" - // action in from double-announcing. - useTitle( hasLoadedPost && title ); - + const postWithTemplate = !! contextPostId; const loadingProgressId = useInstanceId( CanvasLoader, 'edit-site-editor__loading-progress' @@ -202,10 +175,7 @@ export default function Editor( { isLoading } ) { [ history, createSuccessNotice ] ); - const isReady = - ! isLoading && - ( ( postWithTemplate && !! contextPost && !! editedPost ) || - ( ! postWithTemplate && !! editedPost ) ); + const isReady = ! isLoading; return ( <> @@ -215,55 +185,37 @@ export default function Editor( { isLoading } ) { { showVisualEditor && } { ! isReady ? : null } { isEditMode && } - { hasLoadedPost && ! editedPost && ( - - { __( - "You attempted to edit an item that doesn't exist. Perhaps it was deleted?" - ) } - - ) } { isReady && ( - + } + forceDisableBlockTools={ ! hasDefaultEditorCanvasView } + title={ + ! hasDefaultEditorCanvasView + ? getEditorCanvasContainerTitle( editorCanvasView ) + : undefined + } + iframeProps={ iframeProps } + onActionPerformed={ onActionPerformed } + extraSidebarPanels={ + ! isEditingPage && + } > - - } - forceDisableBlockTools={ ! hasDefaultEditorCanvasView } - title={ - ! hasDefaultEditorCanvasView - ? getEditorCanvasContainerTitle( - editorCanvasView - ) - : undefined - } - iframeProps={ iframeProps } - /> - - ) - } - /> { supportsGlobalStyles && } - + ) } ); diff --git a/packages/edit-site/src/components/editor/use-editor-title.js b/packages/edit-site/src/components/editor/use-editor-title.js new file mode 100644 index 0000000000000..01e258a5db107 --- /dev/null +++ b/packages/edit-site/src/components/editor/use-editor-title.js @@ -0,0 +1,35 @@ +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import useEditedEntityRecord from '../use-edited-entity-record'; +import useTitle from '../routes/use-title'; +import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants'; + +function useEditorTitle() { + const { + record: editedPost, + getTitle, + isLoaded: hasLoadedPost, + } = useEditedEntityRecord(); + let title; + if ( hasLoadedPost ) { + title = sprintf( + // translators: A breadcrumb trail for the Admin document title. %1$s: title of template being edited, %2$s: type of template (Template or Template Part). + __( '%1$s ‹ %2$s' ), + getTitle(), + POST_TYPE_LABELS[ editedPost.type ] ?? + POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ] + ); + } + + // Only announce the title once the editor is ready to prevent "Replace" + // action in from double-announcing. + useTitle( hasLoadedPost && title ); +} + +export default useEditorTitle; diff --git a/packages/editor/src/components/editor/index.js b/packages/editor/src/components/editor/index.js new file mode 100644 index 0000000000000..deef2c48835cd --- /dev/null +++ b/packages/editor/src/components/editor/index.js @@ -0,0 +1,93 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import { Notice } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { TEMPLATE_POST_TYPE } from '../../store/constants'; +import EditorInterface from '../editor-interface'; +import EditorProvider from '../provider'; +import Sidebar from '../sidebar'; + +function Editor( { + postType, + postId, + templateId, + settings, + children, + + // This could be part of the settings. + onActionPerformed, + + // The following abstractions are not ideal but necessary + // to account for site editor and post editor differences for now. + className, + styles, + customSaveButton, + forceDisableBlockTools, + title, + iframeProps, + extraSidebarPanels, + enableRegionNavigation = true, +} ) { + const { post, template, hasLoadedPost } = useSelect( + ( select ) => { + const { getEntityRecord, hasFinishedResolution } = + select( coreStore ); + return { + post: getEntityRecord( 'postType', postType, postId ), + template: templateId + ? getEntityRecord( + 'postType', + TEMPLATE_POST_TYPE, + templateId + ) + : undefined, + hasLoadedPost: hasFinishedResolution( 'getEntityRecord', [ + 'postType', + postType, + postId, + ] ), + }; + }, + [ postType, postId, templateId ] + ); + + return ( + + { hasLoadedPost && ! post && ( + + { __( + "You attempted to edit an item that doesn't exist. Perhaps it was deleted?" + ) } + + ) } + + + { children } + + ); +} + +export default Editor; diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index 58e15135e13ac..429f7ffc7f3f9 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -12,8 +12,9 @@ import { EntitiesSavedStatesExtensible } from './components/entities-saved-state 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 EditorInterface from './components/editor-interface'; import CreateTemplatePartModal from './components/create-template-part-modal'; +import Editor from './components/editor'; +import EditorInterface from './components/editor-interface'; import PluginPostExcerpt from './components/post-excerpt/plugin'; import PreferencesModal from './components/preferences-modal'; import { usePostActions } from './components/post-actions/actions'; @@ -34,6 +35,7 @@ lock( privateApis, { BackButton, ExperimentalEditorProvider, EntitiesSavedStatesExtensible, + Editor, EditorInterface, EditorContentSlotFill, GlobalStylesProvider,