Remove template-only mode from editor and edit-post packages (#57700)

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
WordPress · Jan 25, 2024 · b421fb7 · b421fb7
1 parent ecda32e
commit b421fb7
Show file tree

Hide file tree

Showing 35 changed files with 274 additions and 270 deletions.
diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md
@@ -1404,13 +1404,12 @@ _Returns_
 Returns an action used to set the rendering mode of the post editor. We support multiple rendering modes:
 
 -   `all`: This is the default mode. It renders the post editor with all the features available. If a template is provided, it's preferred over the post.
--   `template-only`: This mode renders the editor with only the template blocks visible.
 -   `post-only`: This mode extracts the post blocks from the template and renders only those. The idea is to allow the user to edit the post/page in isolation without the wrapping template.
 -   `template-locked`: This mode renders both the template and the post blocks but the template blocks are locked and can't be edited. The post blocks are editable.
 
 _Parameters_
 
--   _mode_ `string`: Mode (one of 'template-only', 'post-only', 'template-locked' or 'all').
+-   _mode_ `string`: Mode (one of 'post-only', 'template-locked' or 'all').
 
 ### setTemplateValidity
 

diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
@@ -4,10 +4,10 @@ iframe[name="editor-canvas"] {
 	display: block;
 }
 
-iframe[name="editor-canvas"]:not(.has-history) {
+iframe[name="editor-canvas"]:not(.has-editor-padding) {
 	background-color: $white;
 }
 
-iframe[name="editor-canvas"].has-history {
+iframe[name="editor-canvas"].has-editor-padding {
 	padding: $grid-unit-60 $grid-unit-60 0;
 }
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
@@ -252,7 +252,6 @@ export default function ReusableBlockEdit( {
 		? getPostLinkProps( {
 				postId: ref,
 				postType: 'wp_block',
-				canvas: 'edit',
 		  } )
 		: {};
 

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -64,7 +64,6 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 		hasBlockSelection,
 		hasActiveMetaboxes,
 		hasFixedToolbar,
-		isEditingTemplate,
 		isPublishSidebarOpened,
 		showIconLabels,
 		hasHistory,
@@ -78,8 +77,6 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			hasHistory: !! select( editorStore ).getEditorSettings().goBack,
-			isEditingTemplate:
-				select( editorStore ).getRenderingMode() === 'template-only',
 			isPublishSidebarOpened:
 				select( editPostStore ).isPublishSidebarOpened(),
 			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
@@ -150,14 +147,14 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				<div
 					className={ classnames( 'edit-post-header__center', {
 						'is-collapsed':
-							isEditingTemplate &&
+							hasHistory &&
 							hasBlockSelection &&
 							! isBlockToolsCollapsed &&
 							hasFixedToolbar &&
 							isLargeViewport,
 					} ) }
 				>
-					{ ( isEditingTemplate || hasHistory ) && <DocumentBar /> }
+					{ hasHistory && <DocumentBar /> }
 				</div>
 			</motion.div>
 			<motion.div

diff --git 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 ).getRenderingMode() === 'template-only',
-			mode: select( editPostStore ).getEditorMode(),
-		} ),
-		[]
-	);
+	const { shortcut, isRichEditingEnabled, isCodeEditingEnabled, mode } =
+		useSelect(
+			( select ) => ( {
+				shortcut: select(
+					keyboardShortcutsStore
+				).getShortcutRepresentation( 'core/edit-post/toggle-mode' ),
+				isRichEditingEnabled:
+					select( editorStore ).getEditorSettings()
+						.richEditingEnabled,
+				isCodeEditingEnabled:
+					select( editorStore ).getEditorSettings()
+						.codeEditingEnabled,
+				mode: select( editPostStore ).getEditorMode(),
+			} ),
+			[]
+		);
 	const { switchEditorMode } = useDispatch( editPostStore );
 
-	if ( isEditingTemplate ) {
-		return null;
-	}
-
 	let selectedMode = mode;
 	if ( ! isRichEditingEnabled && mode === 'visual' ) {
 		selectedMode = 'text';

diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
@@ -15,21 +15,18 @@ import { sidebars } from '../settings-sidebar';
 const { Tabs } = unlock( componentsPrivateApis );
 
 const SettingsHeader = () => {
-	const { documentLabel, isTemplateMode } = useSelect( ( select ) => {
-		const { getPostTypeLabel, getRenderingMode } = select( editorStore );
+	const { documentLabel } = useSelect( ( select ) => {
+		const { getPostTypeLabel } = select( editorStore );
 
 		return {
 			// translators: Default label for the Document sidebar tab, not selected.
 			documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ),
-			isTemplateMode: getRenderingMode() === 'template-only',
 		};
 	}, [] );
 
 	return (
 		<Tabs.TabList>
-			<Tabs.Tab tabId={ sidebars.document }>
-				{ isTemplateMode ? __( 'Template' ) : documentLabel }
-			</Tabs.Tab>
+			<Tabs.Tab tabId={ sidebars.document }>{ documentLabel }</Tabs.Tab>
 			<Tabs.Tab tabId={ sidebars.block }>
 				{ /* translators: Text label for the Block Settings Sidebar tab. */ }
 				{ __( 'Block' ) }

diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -48,7 +48,7 @@ export const sidebars = {
 const SidebarContent = ( {
 	sidebarName,
 	keyboardShortcut,
-	isTemplateMode,
+	isEditingTemplate,
 } ) => {
 	// Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we
 	// need to forward the `Tabs` context so it can be passed through the
@@ -77,7 +77,7 @@ const SidebarContent = ( {
 		>
 			<Tabs.Context.Provider value={ tabsContextValue }>
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
-					{ ! isTemplateMode && (
+					{ ! isEditingTemplate && (
 						<>
 							<PostStatus />
 							<PluginDocumentSettingPanel.Slot />
@@ -90,7 +90,7 @@ const SidebarContent = ( {
 							<MetaBoxes location="side" />
 						</>
 					) }
-					{ isTemplateMode && <TemplateSummary /> }
+					{ isEditingTemplate && <TemplateSummary /> }
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
 					<BlockInspector />
@@ -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 = () => {
 			<SidebarContent
 				sidebarName={ sidebarName }
 				keyboardShortcut={ keyboardShortcut }
-				isTemplateMode={ isTemplateMode }
+				isEditingTemplate={ isEditingTemplate }
 			/>
 		</Tabs>
 	);

diff --git a/packages/edit-post/src/components/sidebar/template-summary/index.js b/packages/edit-post/src/components/sidebar/template-summary/index.js
@@ -4,16 +4,12 @@
 import { Icon, layout } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { Flex, FlexItem, FlexBlock, PanelBody } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
+import { store as editorStore } from '@wordpress/editor';
 
 function TemplateSummary() {
 	const template = useSelect( ( select ) => {
-		const { getEditedPostTemplate } = select( editPostStore );
-		return getEditedPostTemplate();
+		const { getCurrentPost } = select( editorStore );
+		return getCurrentPost();
 	}, [] );
 
 	if ( ! template ) {

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -30,6 +30,7 @@ export default function VisualEditor( { styles } ) {
 		renderingMode,
 		isBlockBasedTheme,
 		hasV3BlocksOnly,
+		isEditingTemplate,
 	} = useSelect( ( select ) => {
 		const { isFeatureActive } = select( editPostStore );
 		const { getEditorSettings, getRenderingMode } = select( editorStore );
@@ -43,6 +44,8 @@ export default function VisualEditor( { styles } ) {
 			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
 				return type.apiVersion >= 3;
 			} ),
+			isEditingTemplate:
+				select( editorStore ).getCurrentPostType() === 'wp_template',
 		};
 	}, [] );
 	const hasMetaBoxes = useSelect(
@@ -74,12 +77,11 @@ export default function VisualEditor( { styles } ) {
 	const isToBeIframed =
 		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
 			! hasMetaBoxes ) ||
-		renderingMode === 'template-only';
+		isEditingTemplate;
 
 	return (
 		<div
 			className={ classnames( 'edit-post-visual-editor', {
-				'is-template-mode': renderingMode === 'template-only',
 				'has-inline-canvas': ! isToBeIframed,
 			} ) }
 		>

diff --git a/packages/edit-post/src/components/welcome-guide/index.js b/packages/edit-post/src/components/welcome-guide/index.js
@@ -12,23 +12,28 @@ 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,
 		};
 	}, [] );
 
 	if ( ! isActive ) {
 		return null;
 	}
 
-	return isTemplateMode ? <WelcomeGuideTemplate /> : <WelcomeGuideDefault />;
+	return isEditingTemplate ? (
+		<WelcomeGuideTemplate />
+	) : (
+		<WelcomeGuideDefault />
+	);
 }
diff --git 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
@@ -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
@@ -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 (
 		<PreferenceToggleMenuItem
 			scope="core/edit-post"
-			name={ isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide' }
+			name={ isEditingTemplate ? 'welcomeGuideTemplate' : 'welcomeGuide' }
 			label={ __( 'Welcome Guide' ) }
 		/>
 	);