From f3bfce725c91f90481e625cbac8ead395217c318 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 22 Jan 2024 17:05:36 +1300 Subject: [PATCH 01/31] Resolve style conflict --- .../edit-post/src/components/header/index.js | 2 +- .../sidebar/settings-header/index.js | 9 +++------ .../sidebar/template-summary/index.js | 10 +++------- .../src/components/document-bar/index.js | 1 - .../src/components/editor-canvas/index.js | 7 ++++--- .../components/post-template/block-theme.js | 18 ++++++++++++++---- .../editor/src/components/provider/index.js | 8 ++++++-- 7 files changed, 31 insertions(+), 24 deletions(-) diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 050ee8103251f6..b0e0189d8d1b57 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -157,7 +157,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { isLargeViewport, } ) } > - { ( isEditingTemplate || hasHistory ) && } + { hasHistory && } { - 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/template-summary/index.js b/packages/edit-post/src/components/sidebar/template-summary/index.js index 30358038ffb5b6..6e770eac872a42 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/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index fdf9cbe55dbca7..948e8c256a1ab0 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -81,7 +81,6 @@ export default function DocumentBar() { const handleOnBack = () => { if ( isEditingTemplate ) { setRenderingMode( getEditorSettings().defaultRenderingMode ); - return; } if ( goBack ) { goBack(); diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index d6084ef922805e..ed4436e0af282b 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,8 @@ function EditorCanvas( { wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), deviceType: getDeviceType(), - hasHistory: !! editorSettings.goBack, + showEditorPadding: + !! editorSettings.goBack && postTypeSlug !== 'wp_template', }; }, [] ); const { isCleanNewPost } = useSelect( editorStore ); @@ -302,7 +303,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 dcd269af1a4315..a2eaca9986e296 100644 --- a/packages/editor/src/components/post-template/block-theme.js +++ b/packages/editor/src/components/post-template/block-theme.js @@ -24,10 +24,13 @@ const POPOVER_PROPS = { }; export default function BlockThemeControl( { id } ) { - const { isTemplateHidden } = useSelect( ( select ) => { - const { getRenderingMode } = unlock( select( editorStore ) ); + const { isTemplateHidden, getPostLinkProps } = useSelect( ( select ) => { + const { getRenderingMode, getEditorSettings } = unlock( + select( editorStore ) + ); return { isTemplateHidden: getRenderingMode() === 'post-only', + getPostLinkProps: getEditorSettings().getPostLinkProps, }; }, [] ); const { editedRecord: template, hasResolved } = useEntityRecord( @@ -38,7 +41,13 @@ export default function BlockThemeControl( { id } ) { const { getEditorSettings } = useSelect( editorStore ); const { createSuccessNotice } = useDispatch( noticesStore ); const { setRenderingMode } = useDispatch( editorStore ); - + const editTemplate = getPostLinkProps + ? getPostLinkProps( { + postId: template.wp_id, + postType: 'wp_template', + canvas: 'edit', + } ) + : {}; if ( ! hasResolved ) { return null; } @@ -58,8 +67,9 @@ export default function BlockThemeControl( { id } ) { <> { + onClick={ ( event ) => { setRenderingMode( 'template-only' ); + editTemplate.onClick( event ); onClose(); createSuccessNotice( __( diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index fc49339c2c13ff..7f7a51fb87b98e 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -214,8 +214,12 @@ export const ExperimentalEditorProvider = withRegistryProvider( // Sets the right rendering mode when loading the editor. useEffect( () => { - setRenderingMode( settings.defaultRenderingMode ?? 'post-only' ); - }, [ settings.defaultRenderingMode, setRenderingMode ] ); + setRenderingMode( + settings.defaultRenderingMode ?? post.type === 'wp_template' + ? 'template-only' + : 'post-only' + ); + }, [ settings.defaultRenderingMode, setRenderingMode, post.type ] ); if ( ! isReady ) { return null; From f35bc22f5bb10d9a246d2431b932fe53154fb9ed Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 22 Jan 2024 17:15:20 +1300 Subject: [PATCH 02/31] Remove use of `template-only` from post editor --- .../edit-post/src/components/header/index.js | 5 +---- .../components/header/mode-switcher/index.js | 2 +- .../sidebar/settings-sidebar/index.js | 14 +++++++------- .../src/components/visual-editor/index.js | 7 +++++-- .../src/components/welcome-guide/index.js | 17 +++++++++++------ packages/edit-post/src/editor.js | 18 ++++++++++++------ .../plugins/welcome-guide-menu-item/index.js | 6 +++--- packages/edit-post/src/store/actions.js | 9 --------- .../components/post-template/block-theme.js | 13 +------------ 9 files changed, 41 insertions(+), 50 deletions(-) diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index b0e0189d8d1b57..3074d5f0da88db 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,7 +147,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
{ // 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/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index fd9b4a6ff8bb6c..72237af3d645d1 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,12 @@ 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 9543fde1373082..1bd2815466d9bc 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 45bdd88318e499..ae733d2d3cd619 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -49,14 +49,13 @@ function Editor( { canUser, } = select( coreStore ); const { getEditorSettings } = select( editorStore ); - const isTemplate = [ - 'wp_template', - 'wp_template_part', - ].includes( currentPost.postType ); + const isTemplatePart = [ '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 ) { + if ( isTemplatePart ) { const posts = getEntityRecords( 'postType', currentPost.postType, @@ -84,7 +83,10 @@ function Editor( { 'preferredStyleVariations' ), template: - supportsTemplateMode && isViewable && canEditTemplate + supportsTemplateMode && + isViewable && + canEditTemplate && + currentPost.postType !== 'wp_template' ? getEditedPostTemplate() : null, post: postObject, @@ -94,12 +96,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 +119,7 @@ function Editor( { updatePreferredStyleVariations, getPostLinkProps, goBack, + defaultRenderingMode, ] ); if ( ! post ) { 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 e43f7910b5ffc6..c454fee8588dbd 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 b6d8e437ccabf8..db81fda2f1697f 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/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js index a2eaca9986e296..ff6471fee761c5 100644 --- a/packages/editor/src/components/post-template/block-theme.js +++ b/packages/editor/src/components/post-template/block-theme.js @@ -38,12 +38,11 @@ export default function BlockThemeControl( { id } ) { 'wp_template', id ); - const { getEditorSettings } = useSelect( editorStore ); const { createSuccessNotice } = useDispatch( noticesStore ); const { setRenderingMode } = useDispatch( editorStore ); const editTemplate = getPostLinkProps ? getPostLinkProps( { - postId: template.wp_id, + postId: template.id, postType: 'wp_template', canvas: 'edit', } ) @@ -77,16 +76,6 @@ export default function BlockThemeControl( { id } ) { ), { type: 'snackbar', - actions: [ - { - label: __( 'Go back' ), - onClick: () => - setRenderingMode( - getEditorSettings() - .defaultRenderingMode - ), - }, - ], } ); } } From 894ad663a484cb3c5e4691c8ed16e1e06a62b77c Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 9 Jan 2024 16:54:23 +1300 Subject: [PATCH 03/31] Remove some of the editor package template-only references --- .../src/components/document-bar/index.js | 26 +++---------------- .../components/post-template/block-theme.js | 1 - .../editor/src/components/provider/index.js | 12 ++------- 3 files changed, 6 insertions(+), 33 deletions(-) diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 948e8c256a1ab0..97e9c8a2cf779c 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,12 +63,7 @@ export default function DocumentBar() { }; }, [] ); - const { setRenderingMode } = useDispatch( editorStore ); - const handleOnBack = () => { - if ( isEditingTemplate ) { - setRenderingMode( getEditorSettings().defaultRenderingMode ); - } if ( goBack ) { goBack(); } @@ -89,9 +71,9 @@ export default function DocumentBar() { return ( ); } diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js index ff6471fee761c5..6ea7c46e37024e 100644 --- a/packages/editor/src/components/post-template/block-theme.js +++ b/packages/editor/src/components/post-template/block-theme.js @@ -67,7 +67,6 @@ export default function BlockThemeControl( { id } ) { { - setRenderingMode( 'template-only' ); editTemplate.onClick( event ); onClose(); createSuccessNotice( diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 7f7a51fb87b98e..a096793bf9e537 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -113,8 +113,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( const rootLevelPost = shouldRenderTemplate ? template : post; const defaultBlockContext = useMemo( () => { const postContext = - rootLevelPost.type !== 'wp_template' || - ( shouldRenderTemplate && mode !== 'template-only' ) + rootLevelPost.type !== 'wp_template' ? { postId: post.id, postType: post.type } : {}; @@ -125,14 +124,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( ? rootLevelPost.slug : undefined, }; - }, [ - mode, - post.id, - post.type, - rootLevelPost.type, - rootLevelPost?.slug, - shouldRenderTemplate, - ] ); + }, [ post.id, post.type, rootLevelPost.type, rootLevelPost.slug ] ); const { editorSettings, selection, isReady } = useSelect( ( select ) => { const { From 4fd79396b07ee406b814b16082ee7e0c8a85f139 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 10 Jan 2024 12:46:45 +1300 Subject: [PATCH 04/31] Remove remaining instances of template-only in editor package --- .../reference-guides/data/data-core-editor.md | 3 +- .../edit-post/src/hooks/use-post-history.js | 2 +- .../edit-template-blocks-notification.js | 27 ++++++++++++--- .../components/post-template/classic-theme.js | 34 ++++++++++--------- .../create-new-template-modal.js | 29 +++++++++++----- .../editor/src/components/provider/index.js | 6 ++-- packages/editor/src/store/actions.js | 3 +- 7 files changed, 67 insertions(+), 37 deletions(-) diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index be2276bbf03641..5cae4759654018 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/edit-post/src/hooks/use-post-history.js b/packages/edit-post/src/hooks/use-post-history.js index 02c34a26727b19..fe7252b7d270d5 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/editor/src/components/editor-canvas/edit-template-blocks-notification.js b/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js index 566311e20cadc2..aa66da2d7b3180 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,31 @@ 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', + canvas: 'edit', + } ) + : {}; const { getNotices } = useSelect( noticesStore ); const { createInfoNotice, removeNotice } = useDispatch( noticesStore ); - const { setRenderingMode } = useDispatch( editorStore ); const [ isDialogOpen, setIsDialogOpen ] = useState( false ); @@ -62,7 +79,7 @@ export default function EditTemplateBlocksNotification( { contentRef } ) { actions: [ { label: __( 'Edit template' ), - onClick: () => setRenderingMode( 'template-only' ), + onClick: () => editTemplate.onClick(), }, ], } @@ -98,7 +115,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/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js index 2aac8f90a02189..381c39f8a97914 100644 --- a/packages/editor/src/components/post-template/classic-theme.js +++ b/packages/editor/src/components/post-template/classic-theme.js @@ -63,12 +63,15 @@ function PostTemplateDropdownContent( { onClose } ) { selectedTemplateSlug, canCreate, canEdit, + currentTemplateId, + getPostLinkProps, } = 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 +91,23 @@ function PostTemplateDropdownContent( { onClose } ) { allowSwitchingTemplate && canCreateTemplates && editorSettings.supportsTemplateMode && - !! select( editorStore ).getCurrentTemplateId(), + !! _currentTemplateId, + currentTemplateId: _currentTemplateId, + getPostLinkProps: editorSettings.getPostLinkProps, }; }, [ allowSwitchingTemplate ] ); + const editTemplate = + getPostLinkProps && currentTemplateId + ? getPostLinkProps( { + postId: currentTemplateId, + postType: 'wp_template', + canvas: 'edit', + } ) + : {}; + const options = useMemo( () => Object.entries( { @@ -113,9 +127,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 +172,7 @@ function PostTemplateDropdownContent( { onClose } ) {

) } diff --git a/packages/editor/src/components/post-template/create-new-template-modal.js b/packages/editor/src/components/post-template/create-new-template-modal.js index 61b1b165aca272..b996f9c25ae1b2 100644 --- a/packages/editor/src/components/post-template/create-new-template-modal.js +++ b/packages/editor/src/components/post-template/create-new-template-modal.js @@ -23,15 +23,19 @@ import { store as editorStore } from '../../store'; const DEFAULT_TITLE = __( 'Custom Template' ); export default function CreateNewTemplateModal( { onClose } ) { - const defaultBlockTemplate = useSelect( - ( select ) => - select( editorStore ).getEditorSettings().defaultBlockTemplate, - [] + const { defaultBlockTemplate, getPostLinkProps, getTemplateId } = useSelect( + ( select ) => { + const { getEditorSettings, getCurrentTemplateId } = + select( editorStore ); + return { + defaultBlockTemplate: getEditorSettings().defaultBlockTemplate, + getPostLinkProps: getEditorSettings().getPostLinkProps, + getTemplateId: getCurrentTemplateId, + }; + } ); - const { createTemplate, setRenderingMode } = unlock( - useDispatch( editorStore ) - ); + const { createTemplate } = unlock( useDispatch( editorStore ) ); const [ title, setTitle ] = useState( '' ); @@ -90,11 +94,18 @@ export default function CreateNewTemplateModal( { onClose } ) { slug: cleanForSlug( title || DEFAULT_TITLE ), content: newTemplateContent, title: title || DEFAULT_TITLE, - } ); + } ).then( () => {} ); setIsBusy( false ); + const editTemplate = getPostLinkProps + ? getPostLinkProps( { + postId: getTemplateId(), + postType: 'wp_template', + canvas: 'edit', + } ) + : {}; + editTemplate.onClick(); cancel(); - setRenderingMode( 'template-only' ); }; return ( diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index a096793bf9e537..c842481e76d666 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -187,12 +187,14 @@ export const ExperimentalEditorProvider = withRegistryProvider( } ); } + // Not sure if the missing no dependencies here is deliberate or not so ignoring lint warning for now. + // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ); // Synchronizes the active post with the state useEffect( () => { setEditedPost( post.type, post.id ); - }, [ post.type, post.id ] ); + }, [ post.type, post.id, setEditedPost ] ); // Synchronize the editor settings as they change. useEffect( () => { @@ -208,7 +210,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( useEffect( () => { setRenderingMode( settings.defaultRenderingMode ?? post.type === 'wp_template' - ? 'template-only' + ? 'all' : 'post-only' ); }, [ settings.defaultRenderingMode, setRenderingMode, post.type ] ); diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index a0330321bac8f7..3b53deff6e0c08 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -576,11 +576,10 @@ export function updateEditorSettings( settings ) { * 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. * - * @param {string} mode Mode (one of 'template-only', 'post-only', 'template-locked' or 'all'). + * @param {string} mode Mode (one of 'post-only', 'template-locked' or 'all'). */ export const setRenderingMode = ( mode ) => From 140f10afd409be9f5bb0a74940be541dc8ef59a8 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 22 Jan 2024 17:16:35 +1300 Subject: [PATCH 05/31] Put back some template checks as probably not relevant to pattern editing, etc. --- packages/edit-post/src/components/header/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 3074d5f0da88db..115b35a0295975 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -64,6 +64,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { hasBlockSelection, hasActiveMetaboxes, hasFixedToolbar, + isEditingTemplate, isPublishSidebarOpened, showIconLabels, hasHistory, @@ -77,6 +78,8 @@ function Header( { setEntitiesSavedStatesCallback } ) { !! select( blockEditorStore ).getBlockSelectionStart(), hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), hasHistory: !! select( editorStore ).getEditorSettings().goBack, + isEditingTemplate: + select( editorStore ).getCurrentPostType() === 'wp_template', isPublishSidebarOpened: select( editPostStore ).isPublishSidebarOpened(), hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ), @@ -147,7 +150,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
Date: Wed, 10 Jan 2024 12:55:33 +1300 Subject: [PATCH 06/31] remove test code --- .../src/components/post-template/create-new-template-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-template/create-new-template-modal.js b/packages/editor/src/components/post-template/create-new-template-modal.js index b996f9c25ae1b2..a9f248650be155 100644 --- a/packages/editor/src/components/post-template/create-new-template-modal.js +++ b/packages/editor/src/components/post-template/create-new-template-modal.js @@ -94,7 +94,7 @@ export default function CreateNewTemplateModal( { onClose } ) { slug: cleanForSlug( title || DEFAULT_TITLE ), content: newTemplateContent, title: title || DEFAULT_TITLE, - } ).then( () => {} ); + } ); setIsBusy( false ); const editTemplate = getPostLinkProps From 27caa0b5ba95328794131e32c9ac42251e079e21 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 10 Jan 2024 14:10:52 +1300 Subject: [PATCH 07/31] Remove template-only from site editor --- .../edit-site/src/components/editor/index.js | 8 ++--- .../src/components/sidebar-edit-mode/index.js | 2 +- .../settings-header/index.js | 4 +-- .../src/components/welcome-guide/template.js | 4 +-- .../hooks/commands/use-edit-mode-commands.js | 30 +++++++++++++++---- 5 files changed, 33 insertions(+), 15 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index ffb9c5446d7963..ea8a2794b8983e 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -102,7 +102,7 @@ export default function Editor( { isLoading } ) { contextPost, editorMode, canvasMode, - renderingMode, + currentPostType, blockEditorMode, isRightSidebarOpen, isInserterOpen, @@ -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 { getCurrentPostType, isInserterOpened, isListViewOpened } = select( editorStore ); const _context = getEditedPostContext(); @@ -134,7 +134,7 @@ export default function Editor( { isLoading } ) { : undefined, editorMode: getEditorMode(), canvasMode: getCanvasMode(), - renderingMode: getRenderingMode(), + currentPostType: getCurrentPostType(), blockEditorMode: __unstableGetEditorMode(), isInserterOpen: isInserterOpened(), isListViewOpen: isListViewOpened(), @@ -269,7 +269,7 @@ export default function Editor( { isLoading } ) { { const { isEditingPage, entityType } = useSelect( ( select ) => { const { getEditedPostType, isPage } = select( editSiteStore ); - const { getRenderingMode } = select( editorStore ); + const { getCurrentPostType } = select( editorStore ); return { - isEditingPage: isPage() && getRenderingMode() !== 'template-only', + isEditingPage: isPage() && getCurrentPostType() !== 'wp_template', entityType: getEditedPostType(), }; } ); diff --git a/packages/edit-site/src/components/welcome-guide/template.js b/packages/edit-site/src/components/welcome-guide/template.js index 073a19c2d6efdc..0e699e6b4b242a 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 0265329f40b095..b6ae70d342489f 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 @@ -43,17 +43,35 @@ const { useHistory } = unlock( routerPrivateApis ); function usePageContentFocusCommands() { const { record: template } = useEditedEntityRecord(); - const { isPage, canvasMode, renderingMode } = useSelect( ( select ) => { + const { + isPage, + canvasMode, + getPostLinkProps, + templateId, + currentPostType, + } = useSelect( ( select ) => { const { isPage: _isPage, getCanvasMode } = unlock( select( editSiteStore ) ); - const { getRenderingMode } = select( editorStore ); + const { getCurrentPostType, getEditorSettings, getCurrentTemplateId } = + select( editorStore ); return { isPage: _isPage(), canvasMode: getCanvasMode(), - renderingMode: getRenderingMode(), + getPostLinkProps: getEditorSettings().getPostLinkProps, + templateId: getCurrentTemplateId(), + currentPostType: getCurrentPostType(), }; }, [] ); + + const editTemplate = getPostLinkProps + ? getPostLinkProps( { + postId: templateId, + postType: 'wp_template', + canvas: 'edit', + } ) + : {}; + const { setRenderingMode } = useDispatch( editorStore ); if ( ! isPage || canvasMode !== 'edit' ) { @@ -62,7 +80,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 +90,7 @@ function usePageContentFocusCommands() { ), icon: layout, callback: ( { close } ) => { - setRenderingMode( 'template-only' ); + editTemplate.onClick(); close(); }, } ); @@ -129,7 +147,7 @@ function useManipulateDocumentCommands() { const isEditingPage = useSelect( ( select ) => select( editSiteStore ).isPage() && - select( editorStore ).getRenderingMode() !== 'template-only', + select( editorStore ).getCurrentPostType() !== 'wp_template', [] ); From 6294d72d6edfc83dd9c3f522b6fd5169feecb350 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 10 Jan 2024 16:13:53 +1300 Subject: [PATCH 08/31] Get the new template id when creating a template in site editor --- packages/edit-site/src/components/routes/link.js | 2 +- .../components/post-template/create-new-template-modal.js | 6 +++--- packages/editor/src/store/private-actions.js | 1 + 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/routes/link.js b/packages/edit-site/src/components/routes/link.js index 9ee60b5ef8b9e8..1e358328942e68 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/editor/src/components/post-template/create-new-template-modal.js b/packages/editor/src/components/post-template/create-new-template-modal.js index a9f248650be155..8b7020113a4486 100644 --- a/packages/editor/src/components/post-template/create-new-template-modal.js +++ b/packages/editor/src/components/post-template/create-new-template-modal.js @@ -23,7 +23,7 @@ import { store as editorStore } from '../../store'; const DEFAULT_TITLE = __( 'Custom Template' ); export default function CreateNewTemplateModal( { onClose } ) { - const { defaultBlockTemplate, getPostLinkProps, getTemplateId } = useSelect( + const { defaultBlockTemplate, getPostLinkProps } = useSelect( ( select ) => { const { getEditorSettings, getCurrentTemplateId } = select( editorStore ); @@ -90,7 +90,7 @@ export default function CreateNewTemplateModal( { onClose } ) { ), ] ); - await createTemplate( { + const newTemplate = await createTemplate( { slug: cleanForSlug( title || DEFAULT_TITLE ), content: newTemplateContent, title: title || DEFAULT_TITLE, @@ -99,7 +99,7 @@ export default function CreateNewTemplateModal( { onClose } ) { setIsBusy( false ); const editTemplate = getPostLinkProps ? getPostLinkProps( { - postId: getTemplateId(), + postId: newTemplate.id, postType: 'wp_template', canvas: 'edit', } ) diff --git a/packages/editor/src/store/private-actions.js b/packages/editor/src/store/private-actions.js index 0d7c0a2186421b..936d0bd5bf4471 100644 --- a/packages/editor/src/store/private-actions.js +++ b/packages/editor/src/store/private-actions.js @@ -59,6 +59,7 @@ export const createTemplate = ], } ); + return savedTemplate; }; /** From 3dc8b2a688947721f92549fac9be7d2d9f06cb07 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 11 Jan 2024 09:32:11 +1300 Subject: [PATCH 09/31] Fix broken string --- packages/editor/src/components/post-template/classic-theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js index 381c39f8a97914..b55e2e18b1f209 100644 --- a/packages/editor/src/components/post-template/classic-theme.js +++ b/packages/editor/src/components/post-template/classic-theme.js @@ -184,7 +184,7 @@ function PostTemplateDropdownContent( { onClose } ) { ); } } > - { __( 'Edit templatess' ) } + { __( 'Edit templates' ) }

) } From dcd6f0bc303b78f1eed5ad81e0eab5f5151b794b Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 11 Jan 2024 09:47:26 +1300 Subject: [PATCH 10/31] Fix breadcrumb label --- packages/edit-site/src/components/editor/index.js | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index ea8a2794b8983e..402004c6035186 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, - currentPostType, 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 { getCurrentPostType, 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(), - currentPostType: getCurrentPostType(), 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 && ( ) } From cce8dec1aab57f4b755d046c766ede5dac5b5979 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 11 Jan 2024 10:13:55 +1300 Subject: [PATCH 11/31] Remove unused class --- packages/edit-post/src/components/visual-editor/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 72237af3d645d1..74dffb35fcd273 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -82,7 +82,6 @@ export default function VisualEditor( { styles } ) { return (
From 6f381ae756c27914dad70c0241c697c4036179a3 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 22 Jan 2024 17:22:11 +1300 Subject: [PATCH 12/31] remove hasHistory checks from header bar --- packages/edit-post/src/components/header/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 115b35a0295975..3074d5f0da88db 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 ).getCurrentPostType() === 'wp_template', isPublishSidebarOpened: select( editPostStore ).isPublishSidebarOpened(), hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ), @@ -150,7 +147,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
Date: Thu, 11 Jan 2024 11:02:06 +1300 Subject: [PATCH 13/31] Use the router in the site editor instead of getPostLinkProps --- .../hooks/commands/use-edit-mode-commands.js | 50 ++++++++----------- 1 file changed, 22 insertions(+), 28 deletions(-) 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 b6ae70d342489f..221cae60d8fc64 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,39 +38,33 @@ 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, - getPostLinkProps, - templateId, - currentPostType, - } = useSelect( ( select ) => { - const { isPage: _isPage, getCanvasMode } = unlock( - select( editSiteStore ) - ); - const { getCurrentPostType, getEditorSettings, getCurrentTemplateId } = - select( editorStore ); - return { - isPage: _isPage(), - canvasMode: getCanvasMode(), - getPostLinkProps: getEditorSettings().getPostLinkProps, - templateId: getCurrentTemplateId(), - currentPostType: getCurrentPostType(), - }; - }, [] ); + 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 editTemplate = getPostLinkProps - ? getPostLinkProps( { - postId: templateId, - postType: 'wp_template', - canvas: 'edit', - } ) - : {}; + const { onClick: editTemplate } = useLink( { + postType: 'wp_template', + postId: templateId, + } ); const { setRenderingMode } = useDispatch( editorStore ); @@ -90,7 +84,7 @@ function usePageContentFocusCommands() { ), icon: layout, callback: ( { close } ) => { - editTemplate.onClick(); + editTemplate(); close(); }, } ); From 36a610024ebe0b49e4d806f81d9a44f678f33704 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 22 Jan 2024 17:23:42 +1300 Subject: [PATCH 14/31] Set the default rendering mode in the post editor --- packages/editor/src/components/provider/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index c842481e76d666..94b29298eb0e04 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -208,11 +208,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( // Sets the right rendering mode when loading the editor. useEffect( () => { - setRenderingMode( - settings.defaultRenderingMode ?? post.type === 'wp_template' - ? 'all' - : 'post-only' - ); + setRenderingMode( settings.defaultRenderingMode ?? 'post-only' ); }, [ settings.defaultRenderingMode, setRenderingMode, post.type ] ); if ( ! isReady ) { From db8b1dcc66bd45aa6e5d208f77e04e4fc203113e Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 16 Jan 2024 12:38:01 +0800 Subject: [PATCH 15/31] Enable the code editor mode option for template mode in the post editor --- .../components/header/mode-switcher/index.js | 41 ++++++++----------- 1 file changed, 16 insertions(+), 25 deletions(-) diff --git a/packages/edit-post/src/components/header/mode-switcher/index.js b/packages/edit-post/src/components/header/mode-switcher/index.js index b1a5d6c59222db..1ca01a4b024f81 100644 --- a/packages/edit-post/src/components/header/mode-switcher/index.js +++ b/packages/edit-post/src/components/header/mode-switcher/index.js @@ -29,33 +29,24 @@ const MODES = [ ]; function ModeSwitcher() { - const { - shortcut, - isRichEditingEnabled, - isCodeEditingEnabled, - isEditingTemplate, - mode, - } = useSelect( - ( select ) => ( { - shortcut: select( - keyboardShortcutsStore - ).getShortcutRepresentation( 'core/edit-post/toggle-mode' ), - isRichEditingEnabled: - select( editorStore ).getEditorSettings().richEditingEnabled, - isCodeEditingEnabled: - select( editorStore ).getEditorSettings().codeEditingEnabled, - isEditingTemplate: - select( editorStore ).getCurrentPostType() === 'wp_template', - 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'; From 116c392f04eacb1881bb3275677a520680311ed6 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 16 Jan 2024 14:45:37 +0800 Subject: [PATCH 16/31] Remove randomly added dependency --- packages/editor/src/components/provider/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 94b29298eb0e04..3944ecbb1a11af 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -209,7 +209,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( // Sets the right rendering mode when loading the editor. useEffect( () => { setRenderingMode( settings.defaultRenderingMode ?? 'post-only' ); - }, [ settings.defaultRenderingMode, setRenderingMode, post.type ] ); + }, [ settings.defaultRenderingMode, setRenderingMode ] ); if ( ! isReady ) { return null; From eca8305102d55bbe421d406cbc0f5a1091a3c13b Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 16 Jan 2024 15:15:37 +0800 Subject: [PATCH 17/31] Use post type label for document tab title --- .../settings-header/index.js | 48 ++++++------------- 1 file changed, 14 insertions(+), 34 deletions(-) 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 3f14207c184937..43fe644e15d0d8 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,14 @@ 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'; +// 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 { getCurrentPostType } = select( editorStore ); - - return { - isEditingPage: isPage() && getCurrentPostType() !== 'wp_template', - 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 +32,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 +50,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 }
  • From 0819e6bbe49354b5d28361331c62db8d5c3ba45e Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 16 Jan 2024 15:22:57 +0800 Subject: [PATCH 18/31] Show the editor padding whenever a goBack is set --- packages/editor/src/components/editor-canvas/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index ed4436e0af282b..27b46408e0cf3c 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -138,8 +138,7 @@ function EditorCanvas( { wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), deviceType: getDeviceType(), - showEditorPadding: - !! editorSettings.goBack && postTypeSlug !== 'wp_template', + showEditorPadding: !! editorSettings.goBack, }; }, [] ); const { isCleanNewPost } = useSelect( editorStore ); From ef5539a7e65a8db202e4a49921cfe87827867ed3 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 22 Jan 2024 16:11:51 +1300 Subject: [PATCH 19/31] Add the goBack link back into the edit template modal --- .../components/post-template/block-theme.js | 29 +++++++++++++------ 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js index 6ea7c46e37024e..ae57b891de4f05 100644 --- a/packages/editor/src/components/post-template/block-theme.js +++ b/packages/editor/src/components/post-template/block-theme.js @@ -24,15 +24,19 @@ const POPOVER_PROPS = { }; export default function BlockThemeControl( { id } ) { - const { isTemplateHidden, getPostLinkProps } = useSelect( ( select ) => { - const { getRenderingMode, getEditorSettings } = unlock( - select( editorStore ) - ); - return { - isTemplateHidden: getRenderingMode() === 'post-only', - getPostLinkProps: getEditorSettings().getPostLinkProps, - }; - }, [] ); + const { isTemplateHidden, getPostLinkProps, goBack } = useSelect( + ( select ) => { + const { getRenderingMode, getEditorSettings } = unlock( + select( editorStore ) + ); + return { + isTemplateHidden: getRenderingMode() === 'post-only', + getPostLinkProps: getEditorSettings().getPostLinkProps, + goBack: getEditorSettings().goBack, + }; + }, + [] + ); const { editedRecord: template, hasResolved } = useEntityRecord( 'postType', 'wp_template', @@ -47,6 +51,7 @@ export default function BlockThemeControl( { id } ) { canvas: 'edit', } ) : {}; + if ( ! hasResolved ) { return null; } @@ -75,6 +80,12 @@ export default function BlockThemeControl( { id } ) { ), { type: 'snackbar', + actions: [ + { + label: __( 'Go back' ), + onClick: () => goBack(), + }, + ], } ); } } From cd0d7b958c09241228a8f825bd15cf8dee9c9f40 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 22 Jan 2024 16:21:22 +1300 Subject: [PATCH 20/31] Return getEditorSettings from useSelect instead of goBack as goBack not defined at this point --- .../src/components/post-template/block-theme.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js index ae57b891de4f05..c609edeb84dd81 100644 --- a/packages/editor/src/components/post-template/block-theme.js +++ b/packages/editor/src/components/post-template/block-theme.js @@ -24,15 +24,14 @@ const POPOVER_PROPS = { }; export default function BlockThemeControl( { id } ) { - const { isTemplateHidden, getPostLinkProps, goBack } = useSelect( + const { isTemplateHidden, getPostLinkProps, getEditorSettings } = useSelect( ( select ) => { - const { getRenderingMode, getEditorSettings } = unlock( - select( editorStore ) - ); + const { getRenderingMode, getEditorSettings: _getEditorSettings } = + unlock( select( editorStore ) ); return { isTemplateHidden: getRenderingMode() === 'post-only', - getPostLinkProps: getEditorSettings().getPostLinkProps, - goBack: getEditorSettings().goBack, + getPostLinkProps: _getEditorSettings().getPostLinkProps, + getEditorSettings: _getEditorSettings, }; }, [] @@ -83,7 +82,8 @@ export default function BlockThemeControl( { id } ) { actions: [ { label: __( 'Go back' ), - onClick: () => goBack(), + onClick: () => + getEditorSettings().goBack(), }, ], } From 73ede7f42f7bba5ab1277d8adf90347501627ae7 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 22 Jan 2024 16:46:39 +1300 Subject: [PATCH 21/31] Add goBack link back for classic themes --- .../editor/src/components/post-template/classic-theme.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/editor/src/components/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js index b55e2e18b1f209..226ec787338a56 100644 --- a/packages/editor/src/components/post-template/classic-theme.js +++ b/packages/editor/src/components/post-template/classic-theme.js @@ -65,6 +65,7 @@ function PostTemplateDropdownContent( { onClose } ) { canEdit, currentTemplateId, getPostLinkProps, + getEditorSettings, } = useSelect( ( select ) => { const { canUser, getEntityRecords } = select( coreStore ); @@ -94,6 +95,7 @@ function PostTemplateDropdownContent( { onClose } ) { !! _currentTemplateId, currentTemplateId: _currentTemplateId, getPostLinkProps: editorSettings.getPostLinkProps, + getEditorSettings: select( editorStore ).getEditorSettings, }; }, [ allowSwitchingTemplate ] @@ -180,6 +182,13 @@ function PostTemplateDropdownContent( { onClose } ) { ), { type: 'snackbar', + actions: [ + { + label: __( 'Go back' ), + onClick: () => + getEditorSettings().goBack(), + }, + ], } ); } } From 78b9d2d9efe1738543fd9e382125d6a2ea9b5369 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 22 Jan 2024 17:29:39 +1300 Subject: [PATCH 22/31] Fix editor padding --- packages/block-editor/src/components/block-canvas/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss index 631024b7c3aec1..c431b5ca00b0fe 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; } From dbf7abc58886290ac09c178754ecf4a3516f3de4 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 23 Jan 2024 12:25:11 +1300 Subject: [PATCH 23/31] Remove uncalled branch --- packages/edit-post/src/editor.js | 35 ++++++++------------------------ 1 file changed, 8 insertions(+), 27 deletions(-) diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index ae733d2d3cd619..99039a7d786313 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -42,35 +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 isTemplatePart = [ 'wp_template_part' ].includes( - currentPost.postType + + const postObject = getEntityRecord( + 'postType', + currentPost.postType, + currentPost.postId ); - // Ideally the initializeEditor function should be called using the ID of the REST endpoint. - // to avoid the special case. - let postObject; - if ( isTemplatePart ) { - const posts = getEntityRecords( - 'postType', - currentPost.postType, - { - wp_id: currentPost.postId, - } - ); - postObject = posts?.[ 0 ]; - } else { - postObject = getEntityRecord( - 'postType', - currentPost.postType, - currentPost.postId - ); - } + const supportsTemplateMode = getEditorSettings().supportsTemplateMode; const isViewable = From a749611e1f3c2e1a48b5c1ce98b0fab7853dae38 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 23 Jan 2024 14:00:57 +1300 Subject: [PATCH 24/31] Fix issue with page content not showing in site editor page editor --- packages/editor/src/components/provider/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 3944ecbb1a11af..417f69309682dd 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -113,7 +113,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( const rootLevelPost = shouldRenderTemplate ? template : post; const defaultBlockContext = useMemo( () => { const postContext = - rootLevelPost.type !== 'wp_template' + rootLevelPost.type !== 'wp_template' || shouldRenderTemplate ? { postId: post.id, postType: post.type } : {}; From d6bebab08dc6dda6d6f22ab5b3652d2b945dd86a Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 23 Jan 2024 16:14:28 +1300 Subject: [PATCH 25/31] Get the back options working in the site editor --- .../components/block-editor/back-button.js | 9 ++++-- .../block-editor/site-editor-canvas.js | 31 ++++++++++++------- .../block-editor/use-post-link-props.js | 6 +++- .../components/post-template/block-theme.js | 30 +++++++++--------- 4 files changed, 46 insertions(+), 30 deletions(-) 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 acd9cf7028e658..71616266602270 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 3bba8cc26d01f3..e946068ea1d848 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 dd023053931224..abb0e88f438e7b 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 }, + state + ); }; } diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js index c609edeb84dd81..2b393eb11e3f71 100644 --- a/packages/editor/src/components/post-template/block-theme.js +++ b/packages/editor/src/components/post-template/block-theme.js @@ -24,18 +24,19 @@ const POPOVER_PROPS = { }; export default function BlockThemeControl( { id } ) { - const { isTemplateHidden, getPostLinkProps, getEditorSettings } = useSelect( - ( select ) => { + const { isTemplateHidden, getPostLinkProps, getEditorSettings, hasGoBack } = + useSelect( ( select ) => { const { getRenderingMode, getEditorSettings: _getEditorSettings } = unlock( select( editorStore ) ); + const editorSettings = _getEditorSettings(); return { isTemplateHidden: getRenderingMode() === 'post-only', - getPostLinkProps: _getEditorSettings().getPostLinkProps, + getPostLinkProps: editorSettings.getPostLinkProps, getEditorSettings: _getEditorSettings, + hasGoBack: editorSettings.hasOwnProperty( 'goBack' ), }; - }, - [] - ); + }, [] ); + const { editedRecord: template, hasResolved } = useEntityRecord( 'postType', 'wp_template', @@ -54,7 +55,14 @@ export default function BlockThemeControl( { id } ) { if ( ! hasResolved ) { return null; } - + const notificationAction = hasGoBack + ? [ + { + label: __( 'Go back' ), + onClick: () => getEditorSettings().goBack(), + }, + ] + : undefined; return ( - getEditorSettings().goBack(), - }, - ], + actions: notificationAction, } ); } } From 79bb9ea387f34c0daa32a58b9883578e5dc3861a Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 23 Jan 2024 16:51:44 +1300 Subject: [PATCH 26/31] Remove `wp_template` check that isn't needed now. --- packages/edit-site/src/components/sidebar-edit-mode/index.js | 5 +---- packages/editor/src/components/post-template/block-theme.js | 2 ++ 2 files changed, 3 insertions(+), 4 deletions(-) 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 f3f2e4d1e1dce9..edd48ee69d361b 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 ).getCurrentPostType() !== 'wp_template', + isEditingPage: select( editSiteStore ).isPage(), }; }, [] ); const { enableComplementaryArea } = useDispatch( interfaceStore ); diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js index 2b393eb11e3f71..ad183e6ddfa802 100644 --- a/packages/editor/src/components/post-template/block-theme.js +++ b/packages/editor/src/components/post-template/block-theme.js @@ -55,6 +55,8 @@ export default function BlockThemeControl( { id } ) { 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 ? [ { From 02201cb5ace0d6032ea3eec2fbfe091d033e9c05 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 24 Jan 2024 11:19:13 +1300 Subject: [PATCH 27/31] Fix e2e tests --- .../specs/editor/various/post-editor-template-mode.spec.js | 2 ++ test/e2e/specs/site-editor/pages.spec.js | 5 ++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js index 6d6a36eab9b1d9..af43afb97f3e8c 100644 --- a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js +++ b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js @@ -57,6 +57,7 @@ test.describe( 'Post Editor Template mode', () => { ); // Save changes. + await page.click( 'role=button[name="Back"i]' ); await page.click( 'role=button[name="Publish"i]' ); await page.click( 'role=button[name="Save"i]' ); @@ -249,6 +250,7 @@ class PostEditorTemplateMode { } async saveTemplateWithoutPublishing() { + await this.page.click( 'role=button[name="Back"i]' ); await this.page.click( 'role=button[name="Publish"i]' ); const editorPublishRegion = this.page.locator( 'role=region[name="Editor publish"i]' diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js index a04359730421b5..9c582c5edb397b 100644 --- a/test/e2e/specs/site-editor/pages.spec.js +++ b/test/e2e/specs/site-editor/pages.spec.js @@ -141,13 +141,16 @@ test.describe( 'Pages', () => { .getByRole( 'button', { name: 'Move down', exact: true } ) .click(); + await editor.canvas + .getByRole( 'textbox', { name: 'Site title text' } ) + .click( { force: true } ); await editor.canvas .getByRole( 'textbox', { name: 'Site title text' } ) .fill( 'New Site Title' ); // Go back to page editing focus. await page - .getByRole( 'region', { name: 'Editor top bar' } ) + .getByRole( 'region', { name: 'Editor content' } ) .getByRole( 'button', { name: 'Back' } ) .click(); From 016058f882c36bde439d49574484beb90e2a9eda Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 24 Jan 2024 12:51:32 +1300 Subject: [PATCH 28/31] Disable autosaving of templates in post editor --- packages/editor/src/store/actions.js | 8 +++++++- packages/editor/src/store/selectors.js | 12 ++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 3b53deff6e0c08..8d716a04346dae 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -313,8 +313,14 @@ export const trashPost = export const autosave = ( { local = false, ...options } = {} ) => async ( { select, dispatch } ) => { + const post = select.getCurrentPost(); + + // Currently template autosaving is not supported. + if ( post.type === 'wp_template' ) { + return; + } + if ( local ) { - const post = select.getCurrentPost(); const isPostNew = select.isEditedPostNew(); const title = select.getEditedPostAttribute( 'title' ); const content = select.getEditedPostAttribute( 'content' ); diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js index 107ffe4dd4625c..f7bf1f58bba395 100644 --- a/packages/editor/src/store/selectors.js +++ b/packages/editor/src/store/selectors.js @@ -373,6 +373,12 @@ export const getAutosaveAttribute = createRegistrySelector( } const postType = getCurrentPostType( state ); + + // Currently template autosaving is not supported. + if ( postType === 'wp_template' ) { + return false; + } + const postId = getCurrentPostId( state ); const currentUserId = select( coreStore ).getCurrentUser()?.id; const autosave = select( coreStore ).getAutosave( @@ -592,6 +598,12 @@ export const isEditedPostAutosaveable = createRegistrySelector( } const postType = getCurrentPostType( state ); + + // Currently template autosaving is not supported. + if ( postType === 'wp_template' ) { + return false; + } + const postId = getCurrentPostId( state ); const hasFetchedAutosave = select( coreStore ).hasFetchedAutosaves( postType, From a613541b544ea46c9e063db05339c0479d78e195 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 25 Jan 2024 09:41:42 +1300 Subject: [PATCH 29/31] Code tidy ups --- .../src/components/sidebar-edit-mode/settings-header/index.js | 2 -- packages/editor/src/components/post-template/classic-theme.js | 2 +- packages/editor/src/components/provider/index.js | 2 -- 3 files changed, 1 insertion(+), 5 deletions(-) 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 43fe644e15d0d8..b3bbf0dd035788 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,8 +17,6 @@ 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 postTypeLabel = useSelect( diff --git a/packages/editor/src/components/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js index 226ec787338a56..dec8e71ec2a891 100644 --- a/packages/editor/src/components/post-template/classic-theme.js +++ b/packages/editor/src/components/post-template/classic-theme.js @@ -193,7 +193,7 @@ function PostTemplateDropdownContent( { onClose } ) { ); } } > - { __( 'Edit templates' ) } + { __( 'Edit template' ) }

    ) } diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 417f69309682dd..84af26378d444d 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -187,8 +187,6 @@ export const ExperimentalEditorProvider = withRegistryProvider( } ); } - // Not sure if the missing no dependencies here is deliberate or not so ignoring lint warning for now. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ); // Synchronizes the active post with the state From a04ff70af18805a4e3d7a82df7f6213df3dea57a Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 25 Jan 2024 09:49:36 +1300 Subject: [PATCH 30/31] Pull the setting of the canvas mode back into the site editor --- .../src/components/block-editor/use-post-link-props.js | 2 +- .../editor-canvas/edit-template-blocks-notification.js | 1 - packages/editor/src/components/post-template/block-theme.js | 1 - packages/editor/src/components/post-template/classic-theme.js | 1 - .../src/components/post-template/create-new-template-modal.js | 1 - 5 files changed, 1 insertion(+), 5 deletions(-) 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 abb0e88f438e7b..3fee876ceb96d5 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 @@ -17,7 +17,7 @@ export function usePostLinkProps() { return ( params, state ) => { return getPostLinkProps( history, - { ...params, focusMode: true }, + { ...params, focusMode: true, canvas: 'edit' }, state ); }; 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 aa66da2d7b3180..01947e453aa112 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 @@ -46,7 +46,6 @@ export default function EditTemplateBlocksNotification( { contentRef } ) { ? getPostLinkProps( { postId: templateId, postType: 'wp_template', - canvas: 'edit', } ) : {}; const { getNotices } = useSelect( noticesStore ); diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js index ad183e6ddfa802..a6a102e8470187 100644 --- a/packages/editor/src/components/post-template/block-theme.js +++ b/packages/editor/src/components/post-template/block-theme.js @@ -48,7 +48,6 @@ export default function BlockThemeControl( { id } ) { ? getPostLinkProps( { postId: template.id, postType: 'wp_template', - canvas: 'edit', } ) : {}; diff --git a/packages/editor/src/components/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js index dec8e71ec2a891..3d731a500b9d17 100644 --- a/packages/editor/src/components/post-template/classic-theme.js +++ b/packages/editor/src/components/post-template/classic-theme.js @@ -106,7 +106,6 @@ function PostTemplateDropdownContent( { onClose } ) { ? getPostLinkProps( { postId: currentTemplateId, postType: 'wp_template', - canvas: 'edit', } ) : {}; diff --git a/packages/editor/src/components/post-template/create-new-template-modal.js b/packages/editor/src/components/post-template/create-new-template-modal.js index 8b7020113a4486..f11aa612bb2419 100644 --- a/packages/editor/src/components/post-template/create-new-template-modal.js +++ b/packages/editor/src/components/post-template/create-new-template-modal.js @@ -101,7 +101,6 @@ export default function CreateNewTemplateModal( { onClose } ) { ? getPostLinkProps( { postId: newTemplate.id, postType: 'wp_template', - canvas: 'edit', } ) : {}; editTemplate.onClick(); From c1a902f2f75e8786077677ab438fe474fd6fcce8 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 25 Jan 2024 09:57:06 +1300 Subject: [PATCH 31/31] Remove another reference to canvas: edit --- packages/block-library/src/block/edit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index c53f52bfb703e9..e028cb5837a6ef 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -212,7 +212,6 @@ export default function ReusableBlockEdit( { ? getPostLinkProps( { postId: ref, postType: 'wp_block', - canvas: 'edit', } ) : {};