Post Editor: Rely on the editor store for the template mode state (#5…

…6716)

docs/reference-guides/data/data-core-edit-post.md

@@ -138,15 +138,9 @@ _Returns_
 
 ### isEditingTemplate
 
-Returns true if the template editing mode is enabled.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
+> **Deprecated**
 
--   `boolean`: Whether we're editing the template.
+Returns true if the template editing mode is enabled.
 
 ### isEditorPanelEnabled
 
@@ -438,15 +432,9 @@ _Parameters_
 
 ### setIsEditingTemplate
 
-Returns an action object used to switch to template editing.
-
-_Parameters_
-
--   _value_ `boolean`: Is editing template.
+> **Deprecated**
 
-_Returns_
-
--   `Object`: Action object.
+Returns an action object used to switch to template editing.
 
 ### setIsInserterOpened
 

packages/edit-post/src/components/header/document-actions/index.js

@@ -13,6 +13,7 @@ import {
 import { layout, chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -28,7 +29,7 @@ function DocumentActions() {
 		};
 	}, [] );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { setIsEditingTemplate } = useDispatch( editPostStore );
+	const { setRenderingMode } = useDispatch( editorStore );
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 
 	if ( ! template ) {
@@ -48,7 +49,7 @@ function DocumentActions() {
 				className="edit-post-document-actions__back"
 				onClick={ () => {
 					clearSelectedBlock();
-					setIsEditingTemplate( false );
+					setRenderingMode( 'post-only' );
 				} }
 				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
 			>

packages/edit-post/src/components/header/index.js

@@ -10,7 +10,11 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
+import {
+	PostSavedState,
+	PostPreviewButton,
+	store as editorStore,
+} from '@wordpress/editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -73,7 +77,8 @@ function Header( {
 			blockSelectionStart:
 				select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			isEditingTemplate: select( editPostStore ).isEditingTemplate(),
+			isEditingTemplate:
+				select( editorStore ).getRenderingMode() !== 'post-only',
 			isPublishSidebarOpened:
 				select( editPostStore ).isPublishSidebarOpened(),
 			hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ),

packages/edit-post/src/components/header/mode-switcher/index.js

@@ -44,7 +44,8 @@ function ModeSwitcher() {
 				select( editorStore ).getEditorSettings().richEditingEnabled,
 			isCodeEditingEnabled:
 				select( editorStore ).getEditorSettings().codeEditingEnabled,
-			isEditingTemplate: select( editPostStore ).isEditingTemplate(),
+			isEditingTemplate:
+				select( editorStore ).getRenderingMode() !== 'post-only',
 			mode: select( editPostStore ).getEditorMode(),
 		} ),
 		[]

packages/edit-post/src/components/layout/index.js

@@ -165,7 +165,8 @@ function Layout() {
 		const postTypeLabel = getPostTypeLabel();
 
 		return {
-			isTemplateMode: select( editPostStore ).isEditingTemplate(),
+			isTemplateMode:
+				select( editorStore ).getRenderingMode() !== 'post-only',
 			hasFixedToolbar:
 				select( editPostStore ).isFeatureActive( 'fixedToolbar' ),
 			sidebarIsOpened: !! (

packages/edit-post/src/components/sidebar/settings-header/index.js

@@ -18,12 +18,12 @@ const SettingsHeader = ( { sidebarName } ) => {
 	const openBlockSettings = () => openGeneralSidebar( 'edit-post/block' );
 
 	const { documentLabel, isTemplateMode } = useSelect( ( select ) => {
-		const postTypeLabel = select( editorStore ).getPostTypeLabel();
+		const { getPostTypeLabel, getRenderingMode } = select( editorStore );
 
 		return {
 			// translators: Default label for the Document sidebar tab, not selected.
-			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
-			isTemplateMode: select( editPostStore ).isEditingTemplate(),
+			documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ),
+			isTemplateMode: getRenderingMode() !== 'post-only',
 		};
 	}, [] );
 

packages/edit-post/src/components/sidebar/settings-sidebar/index.js

@@ -11,6 +11,7 @@ import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -63,7 +64,8 @@ const SettingsSidebar = () => {
 			return {
 				sidebarName: sidebar,
 				keyboardShortcut: shortcut,
-				isTemplateMode: select( editPostStore ).isEditingTemplate(),
+				isTemplateMode:
+					select( editorStore ).getRenderingMode() !== 'post-only',
 			};
 		},
 		[]

packages/edit-post/src/components/start-page-options/index.js

@@ -90,11 +90,11 @@ function StartPageOptionsModal( { onClose } ) {
 export default function StartPageOptions() {
 	const [ isClosed, setIsClosed ] = useState( false );
 	const shouldEnableModal = useSelect( ( select ) => {
-		const { isCleanNewPost } = select( editorStore );
-		const { isEditingTemplate, isFeatureActive } = select( editPostStore );
+		const { isCleanNewPost, getRenderingMode } = select( editorStore );
+		const { isFeatureActive } = select( editPostStore );
 
 		return (
-			! isEditingTemplate() &&
+			getRenderingMode() === 'post-only' &&
 			! isFeatureActive( 'welcomeGuide' ) &&
 			isCleanNewPost()
 		);

packages/edit-post/src/components/visual-editor/index.js

@@ -16,9 +16,9 @@ import {
 	__experimentalUseResizeCanvas as useResizeCanvas,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { useRef, useMemo, useEffect } from '@wordpress/element';
+import { useRef, useMemo } from '@wordpress/element';
 import { __unstableMotion as motion } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useMergeRefs } from '@wordpress/compose';
 import { store as blocksStore } from '@wordpress/blocks';
 
@@ -43,20 +43,16 @@ export default function VisualEditor( { styles } ) {
 		isBlockBasedTheme,
 		hasV3BlocksOnly,
 	} = useSelect( ( select ) => {
-		const {
-			isFeatureActive,
-			isEditingTemplate,
-			__experimentalGetPreviewDeviceType,
-		} = select( editPostStore );
-		const { getEditorSettings } = select( editorStore );
+		const { isFeatureActive, __experimentalGetPreviewDeviceType } =
+			select( editPostStore );
+		const { getEditorSettings, getRenderingMode } = select( editorStore );
 		const { getBlockTypes } = select( blocksStore );
-		const _isTemplateMode = isEditingTemplate();
 		const editorSettings = getEditorSettings();
 
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
 			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
-			isTemplateMode: _isTemplateMode,
+			isTemplateMode: getRenderingMode() !== 'post-only',
 			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
 			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
 				return type.apiVersion >= 3;
@@ -67,7 +63,6 @@ export default function VisualEditor( { styles } ) {
 		( select ) => select( editPostStore ).hasMetaBoxes(),
 		[]
 	);
-	const { setRenderingMode } = useDispatch( editorStore );
 	const desktopCanvasStyles = {
 		height: '100%',
 		width: '100%',
@@ -126,14 +121,6 @@ export default function VisualEditor( { styles } ) {
 		deviceType === 'Tablet' ||
 		deviceType === 'Mobile';
 
-	useEffect( () => {
-		if ( isTemplateMode ) {
-			setRenderingMode( 'all' );
-		} else {
-			setRenderingMode( 'post-only' );
-		}
-	}, [ isTemplateMode, setRenderingMode ] );
-
 	return (
 		<BlockTools
 			__unstableContentRef={ ref }

packages/edit-post/src/components/welcome-guide/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -12,8 +13,9 @@ import { store as editPostStore } from '../../store';
 
 export default function WelcomeGuide() {
 	const { isActive, isTemplateMode } = useSelect( ( select ) => {
-		const { isFeatureActive, isEditingTemplate } = select( editPostStore );
-		const _isTemplateMode = isEditingTemplate();
+		const { isFeatureActive } = select( editPostStore );
+		const { getRenderingMode } = select( editorStore );
+		const _isTemplateMode = getRenderingMode() !== 'post-only';
 		const feature = _isTemplateMode
 			? 'welcomeGuideTemplate'
 			: 'welcomeGuide';

packages/edit-post/src/editor.js

@@ -9,7 +9,7 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
-import { useMemo } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -142,6 +142,12 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 		keepCaretInsideBlock,
 	] );
 
+	// The default mode of the post editor is "post-only" mode.
+	const { setRenderingMode } = useDispatch( editorStore );
+	useEffect( () => {
+		setRenderingMode( 'post-only' );
+	}, [ setRenderingMode ] );
+
 	if ( ! post ) {
 		return null;
 	}

packages/edit-post/src/index.js

@@ -15,6 +15,7 @@ import {
 	registerLegacyWidgetBlock,
 	registerWidgetGroupBlock,
 } from '@wordpress/widgets';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -93,7 +94,7 @@ export function initializeEditor(
 		'removeTemplatePartsFromInserter',
 		( canInsert, blockType ) => {
 			if (
-				! select( editPostStore ).isEditingTemplate() &&
+				select( editorStore ).getRenderingMode() === 'post-only' &&
 				blockType.name === 'core/template-part'
 			) {
 				return false;
@@ -118,7 +119,7 @@ export function initializeEditor(
 			{ getBlockParentsByBlockName }
 		) => {
 			if (
-				! select( editPostStore ).isEditingTemplate() &&
+				select( editorStore ).getRenderingMode() === 'post-only' &&
 				blockType.name === 'core/post-content'
 			) {
 				return (

packages/edit-post/src/plugins/welcome-guide-menu-item/index.js

@@ -4,15 +4,11 @@
 import { useSelect } from '@wordpress/data';
 import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
+import { store as editorStore } from '@wordpress/editor';
 
 export default function WelcomeGuideMenuItem() {
 	const isTemplateMode = useSelect(
-		( select ) => select( editPostStore ).isEditingTemplate(),
+		( select ) => select( editorStore ).getRenderingMode() !== 'post-only',
 		[]
 	);
 

packages/edit-post/src/store/actions.js

@@ -513,14 +513,14 @@ export const setIsListViewOpened =
 /**
  * Returns an action object used to switch to template editing.
  *
- * @param {boolean} value Is editing template.
- * @return {Object} Action object.
+ * @deprecated
  */
-export function setIsEditingTemplate( value ) {
-	return {
-		type: 'SET_IS_EDITING_TEMPLATE',
-		value,
-	};
+export function setIsEditingTemplate() {
+	deprecated( "dispatch( 'core/edit-post' ).setIsEditingTemplate", {
+		since: '6.5',
+		alternative: "dispatch( 'core/editor').setRenderingMode",
+	} );
+	return { type: 'NOTHING' };
 }
 
 /**
@@ -530,8 +530,8 @@ export function setIsEditingTemplate( value ) {
  */
 export const __unstableSwitchToTemplateMode =
 	( newTemplate = false ) =>
-	( { registry, select, dispatch } ) => {
-		dispatch( setIsEditingTemplate( true ) );
+	( { registry, select } ) => {
+		registry.dispatch( editorStore ).setRenderingMode( 'all' );
 		const isWelcomeGuideActive = select.isFeatureActive(
 			'welcomeGuideTemplate'
 		);

packages/edit-post/src/store/reducer.js

@@ -153,20 +153,6 @@ export function listViewPanel( state = false, action ) {
 	return state;
 }
 
-/**
- * Reducer tracking whether template editing is on or off.
- *
- * @param {boolean} state
- * @param {Object}  action
- */
-function isEditingTemplate( state = false, action ) {
-	switch ( action.type ) {
-		case 'SET_IS_EDITING_TEMPLATE':
-			return action.value;
-	}
-	return state;
-}
-
 /**
  * Reducer tracking whether meta boxes are initialized.
  *
@@ -196,5 +182,4 @@ export default combineReducers( {
 	deviceType,
 	blockInserterPanel,
 	listViewPanel,
-	isEditingTemplate,
 } );

packages/edit-post/src/store/selectors.js

@@ -498,13 +498,15 @@ export function isListViewOpened( state ) {
 /**
  * Returns true if the template editing mode is enabled.
  *
- * @param {Object} state Global application state.
- *
- * @return {boolean} Whether we're editing the template.
+ * @deprecated
  */
-export function isEditingTemplate( state ) {
-	return state.isEditingTemplate;
-}
+export const isEditingTemplate = createRegistrySelector( ( select ) => () => {
+	deprecated( `select( 'core/edit-post' ).isEditingTemplate`, {
+		since: '6.5',
+		alternative: `select( 'core/editor' ).getRenderingMode`,
+	} );
+	return select( editorStore ).getRenderingMode() !== 'post-only';
+} );
 
 /**
  * Returns true if meta boxes are initialized.