From 6c7c35231e2c905ff74f293321f15c0dfd828d91 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 26 Jan 2024 09:56:36 +1300 Subject: [PATCH] Remove `template-only` mode from editor and edit-post packages (#57700) Co-authored-by: Daniel Richards --- .../reference-guides/data/data-core-editor.md | 3 +- .../src/components/block-canvas/style.scss | 4 +- packages/block-library/src/block/edit.js | 1 - .../edit-post/src/components/header/index.js | 7 +-- .../components/header/mode-switcher/index.js | 41 ++++++--------- .../sidebar/settings-header/index.js | 9 ++-- .../sidebar/settings-sidebar/index.js | 14 ++--- .../sidebar/template-summary/index.js | 10 ++-- .../src/components/visual-editor/index.js | 6 ++- .../src/components/welcome-guide/index.js | 17 +++--- packages/edit-post/src/editor.js | 47 ++++++----------- .../edit-post/src/hooks/use-post-history.js | 2 +- .../plugins/welcome-guide-menu-item/index.js | 6 +-- packages/edit-post/src/store/actions.js | 9 ---- .../components/block-editor/back-button.js | 9 ++-- .../block-editor/site-editor-canvas.js | 31 ++++++----- .../block-editor/use-post-link-props.js | 6 ++- .../edit-site/src/components/editor/index.js | 13 ++--- .../edit-site/src/components/routes/link.js | 2 +- .../src/components/sidebar-edit-mode/index.js | 5 +- .../settings-header/index.js | 46 +++++----------- .../src/components/welcome-guide/template.js | 4 +- .../hooks/commands/use-edit-mode-commands.js | 40 +++++++++----- .../src/components/document-bar/index.js | 27 ++-------- .../edit-template-blocks-notification.js | 26 ++++++++-- .../src/components/editor-canvas/index.js | 6 +-- .../components/post-template/block-theme.js | 52 ++++++++++++------- .../components/post-template/classic-theme.js | 28 ++++++---- .../create-new-template-modal.js | 28 ++++++---- .../editor/src/components/provider/index.js | 14 ++--- packages/editor/src/store/actions.js | 11 ++-- packages/editor/src/store/private-actions.js | 1 + packages/editor/src/store/selectors.js | 12 +++++ .../various/post-editor-template-mode.spec.js | 2 + test/e2e/specs/site-editor/pages.spec.js | 5 +- 35 files changed, 274 insertions(+), 270 deletions(-) diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index be2276bbf0364..5cae475965401 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -1404,13 +1404,12 @@ _Returns_ Returns an action used to set the rendering mode of the post editor. We support multiple rendering modes: - `all`: This is the default mode. It renders the post editor with all the features available. If a template is provided, it's preferred over the post. -- `template-only`: This mode renders the editor with only the template blocks visible. - `post-only`: This mode extracts the post blocks from the template and renders only those. The idea is to allow the user to edit the post/page in isolation without the wrapping template. - `template-locked`: This mode renders both the template and the post blocks but the template blocks are locked and can't be edited. The post blocks are editable. _Parameters_ -- _mode_ `string`: Mode (one of 'template-only', 'post-only', 'template-locked' or 'all'). +- _mode_ `string`: Mode (one of 'post-only', 'template-locked' or 'all'). ### setTemplateValidity diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss index 631024b7c3aec..c431b5ca00b0f 100644 --- a/packages/block-editor/src/components/block-canvas/style.scss +++ b/packages/block-editor/src/components/block-canvas/style.scss @@ -4,10 +4,10 @@ iframe[name="editor-canvas"] { display: block; } -iframe[name="editor-canvas"]:not(.has-history) { +iframe[name="editor-canvas"]:not(.has-editor-padding) { background-color: $white; } -iframe[name="editor-canvas"].has-history { +iframe[name="editor-canvas"].has-editor-padding { padding: $grid-unit-60 $grid-unit-60 0; } diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index 2d517983c3fe1..e29b90b5e3c5c 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -252,7 +252,6 @@ export default function ReusableBlockEdit( { ? getPostLinkProps( { postId: ref, postType: 'wp_block', - canvas: 'edit', } ) : {}; diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 050ee8103251f..3074d5f0da88d 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -64,7 +64,6 @@ function Header( { setEntitiesSavedStatesCallback } ) { hasBlockSelection, hasActiveMetaboxes, hasFixedToolbar, - isEditingTemplate, isPublishSidebarOpened, showIconLabels, hasHistory, @@ -78,8 +77,6 @@ function Header( { setEntitiesSavedStatesCallback } ) { !! select( blockEditorStore ).getBlockSelectionStart(), hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), hasHistory: !! select( editorStore ).getEditorSettings().goBack, - isEditingTemplate: - select( editorStore ).getRenderingMode() === 'template-only', isPublishSidebarOpened: select( editPostStore ).isPublishSidebarOpened(), hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ), @@ -150,14 +147,14 @@ function Header( { setEntitiesSavedStatesCallback } ) {
- { ( isEditingTemplate || hasHistory ) && } + { hasHistory && }
( { - shortcut: select( - keyboardShortcutsStore - ).getShortcutRepresentation( 'core/edit-post/toggle-mode' ), - isRichEditingEnabled: - select( editorStore ).getEditorSettings().richEditingEnabled, - isCodeEditingEnabled: - select( editorStore ).getEditorSettings().codeEditingEnabled, - isEditingTemplate: - select( editorStore ).getRenderingMode() === 'template-only', - mode: select( editPostStore ).getEditorMode(), - } ), - [] - ); + const { shortcut, isRichEditingEnabled, isCodeEditingEnabled, mode } = + useSelect( + ( select ) => ( { + shortcut: select( + keyboardShortcutsStore + ).getShortcutRepresentation( 'core/edit-post/toggle-mode' ), + isRichEditingEnabled: + select( editorStore ).getEditorSettings() + .richEditingEnabled, + isCodeEditingEnabled: + select( editorStore ).getEditorSettings() + .codeEditingEnabled, + mode: select( editPostStore ).getEditorMode(), + } ), + [] + ); const { switchEditorMode } = useDispatch( editPostStore ); - if ( isEditingTemplate ) { - return null; - } - let selectedMode = mode; if ( ! isRichEditingEnabled && mode === 'visual' ) { selectedMode = 'text'; diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js index 368bd3e9e50db..4f7efaa594899 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/index.js +++ b/packages/edit-post/src/components/sidebar/settings-header/index.js @@ -15,21 +15,18 @@ import { sidebars } from '../settings-sidebar'; const { Tabs } = unlock( componentsPrivateApis ); const SettingsHeader = () => { - const { documentLabel, isTemplateMode } = useSelect( ( select ) => { - const { getPostTypeLabel, getRenderingMode } = select( editorStore ); + const { documentLabel } = useSelect( ( select ) => { + const { getPostTypeLabel } = select( editorStore ); return { // translators: Default label for the Document sidebar tab, not selected. documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ), - isTemplateMode: getRenderingMode() === 'template-only', }; }, [] ); return ( - - { isTemplateMode ? __( 'Template' ) : documentLabel } - + { documentLabel } { /* translators: Text label for the Block Settings Sidebar tab. */ } { __( 'Block' ) } diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index 0cd69cb11538c..44900fff3f7be 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -48,7 +48,7 @@ export const sidebars = { const SidebarContent = ( { sidebarName, keyboardShortcut, - isTemplateMode, + isEditingTemplate, } ) => { // Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we // need to forward the `Tabs` context so it can be passed through the @@ -77,7 +77,7 @@ const SidebarContent = ( { > - { ! isTemplateMode && ( + { ! isEditingTemplate && ( <> @@ -90,7 +90,7 @@ const SidebarContent = ( { ) } - { isTemplateMode && } + { isEditingTemplate && } @@ -105,7 +105,7 @@ const SettingsSidebar = () => { sidebarName, isSettingsSidebarActive, keyboardShortcut, - isTemplateMode, + isEditingTemplate, } = useSelect( ( select ) => { // The settings sidebar is used by the edit-post/document and edit-post/block sidebars. // sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed. @@ -132,8 +132,8 @@ const SettingsSidebar = () => { sidebarName: sidebar, isSettingsSidebarActive: isSettingsSidebar, keyboardShortcut: shortcut, - isTemplateMode: - select( editorStore ).getRenderingMode() === 'template-only', + isEditingTemplate: + select( editorStore ).getCurrentPostType() === 'wp_template', }; }, [] ); @@ -161,7 +161,7 @@ const SettingsSidebar = () => { ); diff --git a/packages/edit-post/src/components/sidebar/template-summary/index.js b/packages/edit-post/src/components/sidebar/template-summary/index.js index 30358038ffb5b..6e770eac872a4 100644 --- a/packages/edit-post/src/components/sidebar/template-summary/index.js +++ b/packages/edit-post/src/components/sidebar/template-summary/index.js @@ -4,16 +4,12 @@ import { Icon, layout } from '@wordpress/icons'; import { useSelect } from '@wordpress/data'; import { Flex, FlexItem, FlexBlock, PanelBody } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import { store as editPostStore } from '../../../store'; +import { store as editorStore } from '@wordpress/editor'; function TemplateSummary() { const template = useSelect( ( select ) => { - const { getEditedPostTemplate } = select( editPostStore ); - return getEditedPostTemplate(); + const { getCurrentPost } = select( editorStore ); + return getCurrentPost(); }, [] ); if ( ! template ) { diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index fd9b4a6ff8bb6..74dffb35fcd27 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -30,6 +30,7 @@ export default function VisualEditor( { styles } ) { renderingMode, isBlockBasedTheme, hasV3BlocksOnly, + isEditingTemplate, } = useSelect( ( select ) => { const { isFeatureActive } = select( editPostStore ); const { getEditorSettings, getRenderingMode } = select( editorStore ); @@ -43,6 +44,8 @@ export default function VisualEditor( { styles } ) { hasV3BlocksOnly: getBlockTypes().every( ( type ) => { return type.apiVersion >= 3; } ), + isEditingTemplate: + select( editorStore ).getCurrentPostType() === 'wp_template', }; }, [] ); const hasMetaBoxes = useSelect( @@ -74,12 +77,11 @@ export default function VisualEditor( { styles } ) { const isToBeIframed = ( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) && ! hasMetaBoxes ) || - renderingMode === 'template-only'; + isEditingTemplate; return (
diff --git a/packages/edit-post/src/components/welcome-guide/index.js b/packages/edit-post/src/components/welcome-guide/index.js index 9543fde137308..1bd2815466d9b 100644 --- a/packages/edit-post/src/components/welcome-guide/index.js +++ b/packages/edit-post/src/components/welcome-guide/index.js @@ -12,17 +12,18 @@ import WelcomeGuideTemplate from './template'; import { store as editPostStore } from '../../store'; export default function WelcomeGuide() { - const { isActive, isTemplateMode } = useSelect( ( select ) => { + const { isActive, isEditingTemplate } = useSelect( ( select ) => { const { isFeatureActive } = select( editPostStore ); - const { getRenderingMode } = select( editorStore ); - const _isTemplateMode = getRenderingMode() === 'template-only'; - const feature = _isTemplateMode + const { getCurrentPostType } = select( editorStore ); + const _isEditingTemplate = getCurrentPostType() === 'wp_template'; + + const feature = _isEditingTemplate ? 'welcomeGuideTemplate' : 'welcomeGuide'; return { isActive: isFeatureActive( feature ), - isTemplateMode: _isTemplateMode, + isEditingTemplate: _isEditingTemplate, }; }, [] ); @@ -30,5 +31,9 @@ export default function WelcomeGuide() { return null; } - return isTemplateMode ? : ; + return isEditingTemplate ? ( + + ) : ( + + ); } diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index 45bdd88318e49..99039a7d78631 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -42,36 +42,16 @@ function Editor( { ( select ) => { const { isFeatureActive, getEditedPostTemplate } = select( editPostStore ); - const { - getEntityRecord, - getPostType, - getEntityRecords, - canUser, - } = select( coreStore ); + const { getEntityRecord, getPostType, canUser } = + select( coreStore ); const { getEditorSettings } = select( editorStore ); - const isTemplate = [ - 'wp_template', - 'wp_template_part', - ].includes( currentPost.postType ); - // Ideally the initializeEditor function should be called using the ID of the REST endpoint. - // to avoid the special case. - let postObject; - if ( isTemplate ) { - const posts = getEntityRecords( - 'postType', - currentPost.postType, - { - wp_id: currentPost.postId, - } - ); - postObject = posts?.[ 0 ]; - } else { - postObject = getEntityRecord( - 'postType', - currentPost.postType, - currentPost.postId - ); - } + + const postObject = getEntityRecord( + 'postType', + currentPost.postType, + currentPost.postId + ); + const supportsTemplateMode = getEditorSettings().supportsTemplateMode; const isViewable = @@ -84,7 +64,10 @@ function Editor( { 'preferredStyleVariations' ), template: - supportsTemplateMode && isViewable && canEditTemplate + supportsTemplateMode && + isViewable && + canEditTemplate && + currentPost.postType !== 'wp_template' ? getEditedPostTemplate() : null, post: postObject, @@ -94,12 +77,15 @@ function Editor( { ); const { updatePreferredStyleVariations } = useDispatch( editPostStore ); + const defaultRenderingMode = + currentPost.postType === 'wp_template' ? 'all' : 'post-only'; const editorSettings = useMemo( () => { const result = { ...settings, getPostLinkProps, goBack, + defaultRenderingMode, __experimentalPreferredStyleVariations: { value: preferredStyleVariations, onChange: updatePreferredStyleVariations, @@ -114,6 +100,7 @@ function Editor( { updatePreferredStyleVariations, getPostLinkProps, goBack, + defaultRenderingMode, ] ); if ( ! post ) { diff --git a/packages/edit-post/src/hooks/use-post-history.js b/packages/edit-post/src/hooks/use-post-history.js index 02c34a26727b1..fe7252b7d270d 100644 --- a/packages/edit-post/src/hooks/use-post-history.js +++ b/packages/edit-post/src/hooks/use-post-history.js @@ -50,7 +50,7 @@ export default function usePostHistory( initialPostId, initialPostType ) { return { href: newUrl, onClick: ( event ) => { - event.preventDefault(); + event?.preventDefault(); dispatch( { type: 'push', post: { postId: params.postId, postType: params.postType }, diff --git a/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js b/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js index e43f7910b5ffc..c454fee8588db 100644 --- a/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js +++ b/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js @@ -7,16 +7,16 @@ import { __ } from '@wordpress/i18n'; import { store as editorStore } from '@wordpress/editor'; export default function WelcomeGuideMenuItem() { - const isTemplateMode = useSelect( + const isEditingTemplate = useSelect( ( select ) => - select( editorStore ).getRenderingMode() === 'template-only', + select( editorStore ).getCurrentPostType() === 'wp_template', [] ); return ( ); diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js index 96a545a25323a..a1246b4f59928 100644 --- a/packages/edit-post/src/store/actions.js +++ b/packages/edit-post/src/store/actions.js @@ -469,15 +469,6 @@ export function setIsEditingTemplate() { return { type: 'NOTHING' }; } -/** - * Switches to the template mode. - */ -export const __unstableSwitchToTemplateMode = - () => - ( { registry } ) => { - registry.dispatch( editorStore ).setRenderingMode( 'template-only' ); - }; - /** * Create a block based template. * diff --git a/packages/edit-site/src/components/block-editor/back-button.js b/packages/edit-site/src/components/block-editor/back-button.js index acd9cf7028e65..7161626660227 100644 --- a/packages/edit-site/src/components/block-editor/back-button.js +++ b/packages/edit-site/src/components/block-editor/back-button.js @@ -24,11 +24,14 @@ function BackButton() { const isTemplatePart = location.params.postType === TEMPLATE_PART_POST_TYPE; const isNavigationMenu = location.params.postType === NAVIGATION_POST_TYPE; const isPattern = location.params.postType === PATTERN_TYPES.user; - const previousTemplateId = location.state?.fromTemplateId; - const isFocusMode = isTemplatePart || isNavigationMenu || isPattern; + const isFocusMode = + location.params.focusMode || + isTemplatePart || + isNavigationMenu || + isPattern; - if ( ! isFocusMode || ( ! previousTemplateId && ! isPattern ) ) { + if ( ! isFocusMode ) { return null; } diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js index 3bba8cc26d01f..e946068ea1d84 100644 --- a/packages/edit-site/src/components/block-editor/site-editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/site-editor-canvas.js @@ -22,22 +22,29 @@ import { NAVIGATION_POST_TYPE, } from '../../utils/constants'; import { unlock } from '../../lock-unlock'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; -export default function SiteEditorCanvas() { - const { templateType, isFocusMode, isViewMode } = useSelect( ( select ) => { - const { getEditedPostType, getCanvasMode } = unlock( - select( editSiteStore ) - ); +const { useLocation } = unlock( routerPrivateApis ); - const _templateType = getEditedPostType(); +export default function SiteEditorCanvas() { + const location = useLocation(); + const { templateType, isFocusableEntity, isViewMode } = useSelect( + ( select ) => { + const { getEditedPostType, getCanvasMode } = unlock( + select( editSiteStore ) + ); - return { - templateType: _templateType, - isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ), - isViewMode: getCanvasMode() === 'view', - }; - }, [] ); + const _templateType = getEditedPostType(); + return { + templateType: _templateType, + isFocusableEntity: FOCUSABLE_ENTITIES.includes( _templateType ), + isViewMode: getCanvasMode() === 'view', + }; + }, + [] + ); + const isFocusMode = location.params.focusMode || isFocusableEntity; const [ resizeObserver, sizes ] = useResizeObserver(); const settings = useSiteEditorSettings(); diff --git a/packages/edit-site/src/components/block-editor/use-post-link-props.js b/packages/edit-site/src/components/block-editor/use-post-link-props.js index dd02305393122..3fee876ceb96d 100644 --- a/packages/edit-site/src/components/block-editor/use-post-link-props.js +++ b/packages/edit-site/src/components/block-editor/use-post-link-props.js @@ -15,6 +15,10 @@ export function usePostLinkProps() { const history = useHistory(); return ( params, state ) => { - return getPostLinkProps( history, params, state ); + return getPostLinkProps( + history, + { ...params, focusMode: true, canvas: 'edit' }, + state + ); }; } diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index ffb9c5446d796..402004c603518 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -102,13 +102,13 @@ export default function Editor( { isLoading } ) { contextPost, editorMode, canvasMode, - renderingMode, blockEditorMode, isRightSidebarOpen, isInserterOpen, isListViewOpen, showIconLabels, showBlockBreadcrumbs, + postTypeLabel, } = useSelect( ( select ) => { const { get } = select( preferencesStore ); const { getEditedPostContext, getEditorMode, getCanvasMode } = unlock( @@ -117,7 +117,7 @@ export default function Editor( { isLoading } ) { const { __unstableGetEditorMode } = select( blockEditorStore ); const { getActiveComplementaryArea } = select( interfaceStore ); const { getEntityRecord } = select( coreDataStore ); - const { getRenderingMode, isInserterOpened, isListViewOpened } = + const { isInserterOpened, isListViewOpened, getPostTypeLabel } = select( editorStore ); const _context = getEditedPostContext(); @@ -134,7 +134,6 @@ export default function Editor( { isLoading } ) { : undefined, editorMode: getEditorMode(), canvasMode: getCanvasMode(), - renderingMode: getRenderingMode(), blockEditorMode: __unstableGetEditorMode(), isInserterOpen: isInserterOpened(), isListViewOpen: isListViewOpened(), @@ -143,6 +142,7 @@ export default function Editor( { isLoading } ) { ), showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), showIconLabels: get( 'core', 'showIconLabels' ), + postTypeLabel: getPostTypeLabel(), }; }, [] ); @@ -267,12 +267,7 @@ export default function Editor( { isLoading } ) { footer={ shouldShowBlockBreadcrumbs && ( ) } diff --git a/packages/edit-site/src/components/routes/link.js b/packages/edit-site/src/components/routes/link.js index 9ee60b5ef8b9e..1e358328942e6 100644 --- a/packages/edit-site/src/components/routes/link.js +++ b/packages/edit-site/src/components/routes/link.js @@ -22,7 +22,7 @@ export function getPostLinkProps( shouldReplace = false ) { function onClick( event ) { - event.preventDefault(); + event?.preventDefault(); if ( shouldReplace ) { history.replace( params, state ); diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js index b7683f242a619..edd48ee69d361 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/index.js @@ -8,7 +8,6 @@ import { useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as interfaceStore } from '@wordpress/interface'; import { store as blockEditorStore } from '@wordpress/block-editor'; -import { store as editorStore } from '@wordpress/editor'; /** * Internal dependencies @@ -49,9 +48,7 @@ export function SidebarComplementaryAreaFills() { hasBlockSelection: !! select( blockEditorStore ).getBlockSelectionStart(), supportsGlobalStyles: ! settings?.supportsTemplatePartsMode, - isEditingPage: - select( editSiteStore ).isPage() && - select( editorStore ).getRenderingMode() !== 'template-only', + isEditingPage: select( editSiteStore ).isPage(), }; }, [] ); const { enableComplementaryArea } = useDispatch( interfaceStore ); diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js index c8ceb089cf0f5..b3bbf0dd03578 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js @@ -17,23 +17,12 @@ import { store as editorStore } from '@wordpress/editor'; */ import { STORE_NAME } from '../../../store/constants'; import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants'; -import { store as editSiteStore } from '../../../store'; -import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../../utils/constants'; const SettingsHeader = ( { sidebarName } ) => { - const { isEditingPage, entityType } = useSelect( ( select ) => { - const { getEditedPostType, isPage } = select( editSiteStore ); - const { getRenderingMode } = select( editorStore ); - - return { - isEditingPage: isPage() && getRenderingMode() !== 'template-only', - entityType: getEditedPostType(), - }; - } ); - - const entityLabel = - POST_TYPE_LABELS[ entityType ] || - POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]; + const postTypeLabel = useSelect( + ( select ) => select( editorStore ).getPostTypeLabel(), + [] + ); const { enableComplementaryArea } = useDispatch( interfaceStore ); const openTemplateSettings = () => @@ -41,22 +30,11 @@ const SettingsHeader = ( { sidebarName } ) => { const openBlockSettings = () => enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK ); - let templateAriaLabel; - if ( isEditingPage ) { - templateAriaLabel = - sidebarName === SIDEBAR_TEMPLATE - ? // translators: ARIA label for the Template sidebar tab, selected. - __( 'Page (selected)' ) - : // translators: ARIA label for the Template Settings Sidebar tab, not selected. - __( 'Page' ); - } else { - templateAriaLabel = - sidebarName === SIDEBAR_TEMPLATE - ? // translators: ARIA label for the Template sidebar tab, selected. - sprintf( __( '%s (selected)' ), entityLabel ) - : // translators: ARIA label for the Template Settings Sidebar tab, not selected. - entityLabel; - } + const documentAriaLabel = + sidebarName === SIDEBAR_TEMPLATE + ? // translators: ARIA label for the Template sidebar tab, selected. + sprintf( __( '%s (selected)' ), postTypeLabel ) + : postTypeLabel; /* Use a list so screen readers will announce how many tabs there are. */ return ( @@ -70,10 +48,10 @@ const SettingsHeader = ( { sidebarName } ) => { 'is-active': sidebarName === SIDEBAR_TEMPLATE, } ) } - aria-label={ templateAriaLabel } - data-label={ isEditingPage ? __( 'Page' ) : entityLabel } + aria-label={ documentAriaLabel } + data-label={ postTypeLabel } > - { isEditingPage ? __( 'Page' ) : entityLabel } + { postTypeLabel }
  • diff --git a/packages/edit-site/src/components/welcome-guide/template.js b/packages/edit-site/src/components/welcome-guide/template.js index 073a19c2d6efd..0e699e6b4b242 100644 --- a/packages/edit-site/src/components/welcome-guide/template.js +++ b/packages/edit-site/src/components/welcome-guide/template.js @@ -25,12 +25,12 @@ export default function WelcomeGuideTemplate() { 'welcomeGuide' ); const { isPage } = select( editSiteStore ); - const { getRenderingMode } = select( editorStore ); + const { getCurrentPostType } = select( editorStore ); return ( isTemplateActive && ! isEditorActive && isPage() && - getRenderingMode() === 'template-only' + getCurrentPostType() === 'wp_template' ); }, [] ); diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js index 0febc2379a8b4..2eb873f84f181 100644 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js @@ -38,22 +38,34 @@ import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal'; import { PATTERN_MODALS } from '../../components/pattern-modal'; import { unlock } from '../../lock-unlock'; import { TEMPLATE_POST_TYPE } from '../../utils/constants'; +import { useLink } from '../../components/routes/link'; const { useHistory } = unlock( routerPrivateApis ); function usePageContentFocusCommands() { const { record: template } = useEditedEntityRecord(); - const { isPage, canvasMode, renderingMode } = useSelect( ( select ) => { - const { isPage: _isPage, getCanvasMode } = unlock( - select( editSiteStore ) - ); - const { getRenderingMode } = select( editorStore ); - return { - isPage: _isPage(), - canvasMode: getCanvasMode(), - renderingMode: getRenderingMode(), - }; - }, [] ); + const { isPage, canvasMode, templateId, currentPostType } = useSelect( + ( select ) => { + const { isPage: _isPage, getCanvasMode } = unlock( + select( editSiteStore ) + ); + const { getCurrentPostType, getCurrentTemplateId } = + select( editorStore ); + return { + isPage: _isPage(), + canvasMode: getCanvasMode(), + templateId: getCurrentTemplateId(), + currentPostType: getCurrentPostType(), + }; + }, + [] + ); + + const { onClick: editTemplate } = useLink( { + postType: 'wp_template', + postId: templateId, + } ); + const { setRenderingMode } = useDispatch( editorStore ); if ( ! isPage || canvasMode !== 'edit' ) { @@ -62,7 +74,7 @@ function usePageContentFocusCommands() { const commands = []; - if ( renderingMode !== 'template-only' ) { + if ( currentPostType !== 'wp_template' ) { commands.push( { name: 'core/switch-to-template-focus', /* translators: %1$s: template title */ @@ -72,7 +84,7 @@ function usePageContentFocusCommands() { ), icon: layout, callback: ( { close } ) => { - setRenderingMode( 'template-only' ); + editTemplate(); close(); }, } ); @@ -129,7 +141,7 @@ function useManipulateDocumentCommands() { const isEditingPage = useSelect( ( select ) => select( editSiteStore ).isPage() && - select( editorStore ).getRenderingMode() !== 'template-only', + select( editorStore ).getCurrentPostType() !== 'wp_template', [] ); diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index fdf9cbe55dbca..97e9c8a2cf779 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -48,27 +48,14 @@ const icons = { }; export default function DocumentBar() { - const { - isEditingTemplate, - templateId, - postType, - postId, - goBack, - getEditorSettings, - } = useSelect( ( select ) => { + const { postType, postId, goBack } = useSelect( ( select ) => { const { - getRenderingMode, - getCurrentTemplateId, getCurrentPostId, getCurrentPostType, getEditorSettings: getSettings, } = select( editorStore ); - const _templateId = getCurrentTemplateId(); const back = getSettings().goBack; return { - isEditingTemplate: - !! _templateId && getRenderingMode() === 'template-only', - templateId: _templateId, postType: getCurrentPostType(), postId: getCurrentPostId(), goBack: typeof back === 'function' ? back : undefined, @@ -76,13 +63,7 @@ export default function DocumentBar() { }; }, [] ); - const { setRenderingMode } = useDispatch( editorStore ); - const handleOnBack = () => { - if ( isEditingTemplate ) { - setRenderingMode( getEditorSettings().defaultRenderingMode ); - return; - } if ( goBack ) { goBack(); } @@ -90,9 +71,9 @@ export default function DocumentBar() { return ( ); } diff --git a/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js b/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js index 566311e20cadc..01947e453aa11 100644 --- a/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js +++ b/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js @@ -27,14 +27,30 @@ import { store as editorStore } from '../../store'; * editor iframe canvas. */ export default function EditTemplateBlocksNotification( { contentRef } ) { - const renderingMode = useSelect( - ( select ) => select( editorStore ).getRenderingMode(), + const { renderingMode, getPostLinkProps, templateId } = useSelect( + ( select ) => { + const { + getRenderingMode, + getEditorSettings, + getCurrentTemplateId, + } = select( editorStore ); + return { + renderingMode: getRenderingMode(), + getPostLinkProps: getEditorSettings().getPostLinkProps, + templateId: getCurrentTemplateId(), + }; + }, [] ); + const editTemplate = getPostLinkProps + ? getPostLinkProps( { + postId: templateId, + postType: 'wp_template', + } ) + : {}; const { getNotices } = useSelect( noticesStore ); const { createInfoNotice, removeNotice } = useDispatch( noticesStore ); - const { setRenderingMode } = useDispatch( editorStore ); const [ isDialogOpen, setIsDialogOpen ] = useState( false ); @@ -62,7 +78,7 @@ export default function EditTemplateBlocksNotification( { contentRef } ) { actions: [ { label: __( 'Edit template' ), - onClick: () => setRenderingMode( 'template-only' ), + onClick: () => editTemplate.onClick(), }, ], } @@ -98,7 +114,7 @@ export default function EditTemplateBlocksNotification( { contentRef } ) { confirmButtonText={ __( 'Edit template' ) } onConfirm={ () => { setIsDialogOpen( false ); - setRenderingMode( 'template-only' ); + editTemplate.onClick(); } } onCancel={ () => setIsDialogOpen( false ) } > diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index a06c8096134cf..3d561a5c01cda 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -91,7 +91,7 @@ function EditorCanvas( { wrapperBlockName, wrapperUniqueId, deviceType, - hasHistory, + showEditorPadding, } = useSelect( ( select ) => { const { getCurrentPostId, @@ -138,7 +138,7 @@ function EditorCanvas( { wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), deviceType: getDeviceType(), - hasHistory: !! editorSettings.goBack, + showEditorPadding: !! editorSettings.goBack, }; }, [] ); const { isCleanNewPost } = useSelect( editorStore ); @@ -302,7 +302,7 @@ function EditorCanvas( { height="100%" iframeProps={ { className: classnames( 'editor-canvas__iframe', { - 'has-history': hasHistory, + 'has-editor-padding': showEditorPadding, } ), ...iframeProps, style: { diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js index dcd269af1a431..a6a102e847018 100644 --- a/packages/editor/src/components/post-template/block-theme.js +++ b/packages/editor/src/components/post-template/block-theme.js @@ -24,25 +24,46 @@ const POPOVER_PROPS = { }; export default function BlockThemeControl( { id } ) { - const { isTemplateHidden } = useSelect( ( select ) => { - const { getRenderingMode } = unlock( select( editorStore ) ); - return { - isTemplateHidden: getRenderingMode() === 'post-only', - }; - }, [] ); + const { isTemplateHidden, getPostLinkProps, getEditorSettings, hasGoBack } = + useSelect( ( select ) => { + const { getRenderingMode, getEditorSettings: _getEditorSettings } = + unlock( select( editorStore ) ); + const editorSettings = _getEditorSettings(); + return { + isTemplateHidden: getRenderingMode() === 'post-only', + getPostLinkProps: editorSettings.getPostLinkProps, + getEditorSettings: _getEditorSettings, + hasGoBack: editorSettings.hasOwnProperty( 'goBack' ), + }; + }, [] ); + const { editedRecord: template, hasResolved } = useEntityRecord( 'postType', 'wp_template', id ); - const { getEditorSettings } = useSelect( editorStore ); const { createSuccessNotice } = useDispatch( noticesStore ); const { setRenderingMode } = useDispatch( editorStore ); + const editTemplate = getPostLinkProps + ? getPostLinkProps( { + postId: template.id, + postType: 'wp_template', + } ) + : {}; if ( ! hasResolved ) { return null; } - + // The site editor does not have a `goBack` setting as it uses its own routing + // and assigns its own backlink to focusMode pages. + const notificationAction = hasGoBack + ? [ + { + label: __( 'Go back' ), + onClick: () => getEditorSettings().goBack(), + }, + ] + : undefined; return ( { - setRenderingMode( 'template-only' ); + onClick={ ( event ) => { + editTemplate.onClick( event ); onClose(); createSuccessNotice( __( @@ -67,16 +88,7 @@ export default function BlockThemeControl( { id } ) { ), { type: 'snackbar', - actions: [ - { - label: __( 'Go back' ), - onClick: () => - setRenderingMode( - getEditorSettings() - .defaultRenderingMode - ), - }, - ], + actions: notificationAction, } ); } } diff --git a/packages/editor/src/components/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js index 2aac8f90a0218..3d731a500b9d1 100644 --- a/packages/editor/src/components/post-template/classic-theme.js +++ b/packages/editor/src/components/post-template/classic-theme.js @@ -63,12 +63,16 @@ function PostTemplateDropdownContent( { onClose } ) { selectedTemplateSlug, canCreate, canEdit, + currentTemplateId, + getPostLinkProps, + getEditorSettings, } = useSelect( ( select ) => { const { canUser, getEntityRecords } = select( coreStore ); const editorSettings = select( editorStore ).getEditorSettings(); const canCreateTemplates = canUser( 'create', 'templates' ); - + const _currentTemplateId = + select( editorStore ).getCurrentTemplateId(); return { availableTemplates: editorSettings.availableTemplates, fetchedTemplates: canCreateTemplates @@ -88,12 +92,23 @@ function PostTemplateDropdownContent( { onClose } ) { allowSwitchingTemplate && canCreateTemplates && editorSettings.supportsTemplateMode && - !! select( editorStore ).getCurrentTemplateId(), + !! _currentTemplateId, + currentTemplateId: _currentTemplateId, + getPostLinkProps: editorSettings.getPostLinkProps, + getEditorSettings: select( editorStore ).getEditorSettings, }; }, [ allowSwitchingTemplate ] ); + const editTemplate = + getPostLinkProps && currentTemplateId + ? getPostLinkProps( { + postId: currentTemplateId, + postType: 'wp_template', + } ) + : {}; + const options = useMemo( () => Object.entries( { @@ -113,9 +128,7 @@ function PostTemplateDropdownContent( { onClose } ) { options.find( ( option ) => ! option.value ); // The default option has '' value. const { editPost } = useDispatch( editorStore ); - const { getEditorSettings } = useSelect( editorStore ); const { createSuccessNotice } = useDispatch( noticesStore ); - const { setRenderingMode } = useDispatch( editorStore ); const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false ); return ( @@ -160,7 +173,7 @@ function PostTemplateDropdownContent( { onClose } ) {