Editor: Persist user's 'Show Template' preference

packages/editor/src/components/post-template/block-theme.js

@@ -53,7 +53,9 @@ export default function BlockThemeControl( { id } ) {
 		id
 	);
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const { setRenderingMode } = useDispatch( editorStore );
+	const { setRenderingMode, setDefaultRenderingMode } = unlock(
+		useDispatch( editorStore )
+	);
 
 	const canCreateTemplate = useSelect(
 		( select ) =>
@@ -149,11 +151,11 @@ export default function BlockThemeControl( { id } ) {
 								isSelected={ ! isTemplateHidden }
 								role="menuitemcheckbox"
 								onClick={ () => {
-									setRenderingMode(
-										isTemplateHidden
-											? 'template-locked'
-											: 'post-only'
-									);
+									const newRenderingMode = isTemplateHidden
+										? 'template-locked'
+										: 'post-only';
+									setRenderingMode( newRenderingMode );
+									setDefaultRenderingMode( newRenderingMode );
 								} }
 							>
 								{ __( 'Show template' ) }

packages/editor/src/components/preview-dropdown/index.js

@@ -56,7 +56,9 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			templateId: getCurrentTemplateId(),
 		};
 	}, [] );
-	const { setDeviceType, setRenderingMode } = useDispatch( editorStore );
+	const { setDeviceType, setRenderingMode, setDefaultRenderingMode } = unlock(
+		useDispatch( editorStore )
+	);
 	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 
 	const handleDevicePreviewChange = ( newDeviceType ) => {
@@ -160,11 +162,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 								isSelected={ ! isTemplateHidden }
 								role="menuitemcheckbox"
 								onClick={ () => {
-									setRenderingMode(
-										isTemplateHidden
-											? 'template-locked'
-											: 'post-only'
-									);
+									const newRenderingMode = isTemplateHidden
+										? 'template-locked'
+										: 'post-only';
+									setRenderingMode( newRenderingMode );
+									setDefaultRenderingMode( newRenderingMode );
 								} }
 							>
 								{ __( 'Show template' ) }

packages/editor/src/components/provider/index.js

@@ -56,11 +56,6 @@ const NON_CONTEXTUAL_POST_TYPES = [
 	'wp_template_part',
 ];
 
-/**
- * These are rendering modes that the editor supports.
- */
-const RENDERING_MODES = [ 'post-only', 'template-locked' ];
-
 /**
  * Depending on the post, template and template mode,
  * returns the appropriate blocks and change handlers for the block editor provider.
@@ -183,37 +178,28 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 					getEditorSelection,
 					getRenderingMode,
 					__unstableIsEditorReady,
-				} = select( editorStore );
-				const {
-					getEntitiesConfig,
-					getPostType,
-					hasFinishedResolution,
-				} = select( coreStore );
-
-				const postTypeSupports = getPostType( post.type )?.supports;
-				const hasLoadedPostObject = hasFinishedResolution(
-					'getPostType',
-					[ post.type ]
-				);
-
-				const _defaultMode = Array.isArray( postTypeSupports?.editor )
-					? postTypeSupports.editor.find(
-							( features ) => 'default-mode' in features
-					  )?.[ 'default-mode' ]
-					: undefined;
-				const hasDefaultMode = RENDERING_MODES.includes( _defaultMode );
-
-				// Wait for template resolution when rendering in a `template-locked` mode.
+					getDefaultRenderingMode,
+				} = unlock( select( editorStore ) );
+				const { getEntitiesConfig } = select( coreStore );
+
+				const _defaultMode = getDefaultRenderingMode( post.type );
+				/**
+				 * To avoid content "flash", wait until rendering mode has been resolved.
+				 * This is important for the initial render of the editor.
+				 *
+				 * - Wait for template to be resolved if the default mode is 'template-locked'.
+				 * - Wait for default mode to be resolved otherwise.
+				 */
 				const hasResolvedMode =
-					hasLoadedPostObject && _defaultMode === 'template-locked'
+					_defaultMode === 'template-locked'
 						? hasTemplate
-						: true;
+						: _defaultMode !== undefined;
 
 				return {
 					editorSettings: getEditorSettings(),
 					isReady: __unstableIsEditorReady() && hasResolvedMode,
 					mode: getRenderingMode(),
-					defaultMode: hasDefaultMode ? _defaultMode : 'post-only',
+					defaultMode: _defaultMode,
 					selection: getEditorSelection(),
 					postTypeEntities:
 						post.type === 'wp_template'

packages/editor/src/store/private-actions.js

@@ -492,3 +492,36 @@ export const removeTemplates =
 				.createErrorNotice( errorMessage, { type: 'snackbar' } );
 		}
 	};
+
+/**
+ * Set the default rendering mode preference for the current post type.
+ *
+ * @param {string} mode The rendering mode to set as default.
+ */
+export const setDefaultRenderingMode =
+	( mode ) =>
+	( { select, registry } ) => {
+		const postType = select.getCurrentPostType();
+		const theme = registry
+			.select( coreStore )
+			.getCurrentTheme()?.stylesheet;
+		const renderingModes =
+			registry
+				.select( preferencesStore )
+				.get( 'core', 'renderingModes' )?.[ theme ] ?? {};
+
+		if ( renderingModes[ postType ] === mode ) {
+			return;
+		}
+
+		const newModes = {
+			[ theme ]: {
+				...renderingModes,
+				[ postType ]: mode,
+			},
+		};
+
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core', 'renderingModes', newModes );
+	};

packages/editor/src/store/private-selectors.js

@@ -16,6 +16,7 @@ import {
 	verse,
 } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -34,6 +35,11 @@ const EMPTY_INSERTION_POINT = {
 	filterValue: undefined,
 };
 
+/**
+ * These are rendering modes that the editor supports.
+ */
+const RENDERING_MODES = [ 'post-only', 'template-locked' ];
+
 /**
  * Get the inserter.
  *
@@ -215,3 +221,54 @@ export const getPostBlocksByName = createRegistrySelector( ( select ) =>
 		() => [ select( blockEditorStore ).getBlocks() ]
 	)
 );
+
+/**
+ * Returns the default rendering mode for a post type by user preference or post type configuration.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} postType The post type.
+ *
+ * @return {string} The default rendering mode. Returns `undefined` while resolving value.
+ */
+export const getDefaultRenderingMode = createRegistrySelector(
+	( select ) => ( state, postType ) => {
+		const { getPostType, getCurrentTheme, hasFinishedResolution } =
+			select( coreStore );
+
+		// This needs to be called before `hasFinishedResolution`.
+		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+		const currentTheme = getCurrentTheme();
+		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+		const postTypeEntity = getPostType( postType );
+
+		// Wait for the post type and theme resolution.
+		if (
+			! hasFinishedResolution( 'getPostType', [ postType ] ) ||
+			! hasFinishedResolution( 'getCurrentTheme' )
+		) {
+			return undefined;
+		}
+
+		const theme = currentTheme?.stylesheet;
+		const defaultModePreference = select( preferencesStore ).get(
+			'core',
+			'renderingModes'
+		)?.[ theme ]?.[ postType ];
+		const postTypeDefaultMode = Array.isArray(
+			postTypeEntity?.supports?.editor
+		)
+			? postTypeEntity.supports.editor.find(
+					( features ) => 'default-mode' in features
+			  )?.[ 'default-mode' ]
+			: undefined;
+
+		const defaultMode = defaultModePreference || postTypeDefaultMode;
+
+		// Fallback gracefully to 'post-only' when rendering mode is not supported.
+		if ( ! RENDERING_MODES.includes( defaultMode ) ) {
+			return 'post-only';
+		}
+
+		return defaultMode;
+	}
+);

test/e2e/specs/site-editor/preload.spec.js

@@ -46,6 +46,9 @@ test.describe( 'Preload', () => {
 		expect( requests ).toEqual( [
 			// Seems to be coming from `enableComplementaryArea`.
 			'/wp/v2/users/me',
+			// There are two separate settings OPTIONS requests. We should fix
+			// so the one for canUser and getEntityRecord are reused.
+			'/wp/v2/settings',
 		] );
 	} );
 } );

test/native/integration-test-helpers/initialize-editor.js

@@ -38,7 +38,7 @@ export async function initializeEditor( props, { component } = {} ) {
 	resolutionSpy.mockImplementation( ( selectorName, args ) => {
 		// The mobile editor only supports the `post-only` rendering mode, so we
 		// presume a resolved `getPostType` selector to unblock editor rendering.
-		if ( 'getPostType' === selectorName ) {
+		if ( [ 'getPostType', 'getCurrentTheme' ].includes( selectorName ) ) {
 			return true;
 		}