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..99039a7d786313 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 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/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/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..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
@@ -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 ffb9c5446d7963..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,
- 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 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/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
index b7683f242a6198..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 ).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 c8ceb089cf0f5d..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,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 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..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,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 fdf9cbe55dbca7..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,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 (
{
- 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 2aac8f90a02189..3d731a500b9d17 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 } ) {
{
- setRenderingMode( 'template-only' );
+ editTemplate.onClick();
onClose();
createSuccessNotice(
__(
@@ -172,10 +185,7 @@ function PostTemplateDropdownContent( { onClose } ) {
{
label: __( 'Go back' ),
onClick: () =>
- setRenderingMode(
- getEditorSettings()
- .defaultRenderingMode
- ),
+ getEditorSettings().goBack(),
},
],
}
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..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
@@ -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 } = 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( '' );
@@ -86,15 +90,21 @@ export default function CreateNewTemplateModal( { onClose } ) {
),
] );
- await createTemplate( {
+ const newTemplate = await createTemplate( {
slug: cleanForSlug( title || DEFAULT_TITLE ),
content: newTemplateContent,
title: title || DEFAULT_TITLE,
} );
setIsBusy( false );
+ const editTemplate = getPostLinkProps
+ ? getPostLinkProps( {
+ postId: newTemplate.id,
+ postType: 'wp_template',
+ } )
+ : {};
+ 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 fc49339c2c13ff..84af26378d444d 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' || shouldRenderTemplate
? { 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 {
@@ -200,7 +192,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
// 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( () => {
diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js
index a0330321bac8f7..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' );
@@ -576,11 +582,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 ) =>
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;
};
/**
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,
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();