Experiment: Load the template when editing a page

lib/full-site-editing/template-loader.php

@@ -4,6 +4,9 @@
  *
  * @package gutenberg
  */
+function gutenberg_resolve_template_for_new_page( $query ) {
+	$query->set( 'post_status', 'auto-draft' );
+}
 
 /**
  * Adds necessary filters to use 'wp_template' posts instead of theme template files.
@@ -19,6 +22,15 @@ function gutenberg_add_template_loader_filters() {
 		}
 		add_filter( str_replace( '-', '', $template_type ) . '_template', 'gutenberg_override_query_template', 20, 3 );
 	}
+
+	if (
+		isset( $_GET['_wp-find-template'] ) &&
+		'true' === $_GET['_wp-find-template'] &&
+		isset( $_GET['post-new'] ) &&
+		'true' === $_GET['post-new']
+	) {
+		add_filter( 'pre_get_posts', 'gutenberg_resolve_template_for_new_page' );
+	}
 }
 
 add_action( 'wp_loaded', 'gutenberg_add_template_loader_filters' );

packages/block-library/src/post-content/edit.js

@@ -77,7 +77,12 @@ export default function PostContentEdit( {
 		contextPostId
 	);
 
-	if ( contextPostId && contextPostType && hasAlreadyRendered ) {
+	if (
+		contextPostId &&
+		contextPostType &&
+		'page' !== contextPostType &&
+		hasAlreadyRendered
+	) {
 		return <RecursionError />;
 	}
 

packages/core-data/src/resolvers.js

@@ -379,9 +379,10 @@ export function* getAutosave( postType, postId ) {
 /**
  * Retrieve the frontend template used for a given link.
  *
- * @param {string} link  Link.
+ * @param {string}  link  Link.
+ * @param {boolean} isNew If the template is for a newly created post/page.
  */
-export function* __experimentalGetTemplateForLink( link ) {
+export function* __experimentalGetTemplateForLink( link, isNew = false ) {
 	// Ideally this should be using an apiFetch call
 	// We could potentially do so by adding a "filter" to the `wp_template` end point.
 	// Also it seems the returned object is not a regular REST API post type.
@@ -390,6 +391,7 @@ export function* __experimentalGetTemplateForLink( link ) {
 		template = yield regularFetch(
 			addQueryArgs( link, {
 				'_wp-find-template': true,
+				'post-new': isNew,
 			} )
 		);
 	} catch ( e ) {

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

@@ -31,8 +31,9 @@ import {
 	__unstableIframe as Iframe,
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
 import { useRef } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import { Button, Spinner } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMergeRefs } from '@wordpress/compose';
 import { arrowLeft } from '@wordpress/icons';
@@ -84,18 +85,31 @@ export default function VisualEditor( { styles } ) {
 	const {
 		deviceType,
 		isTemplateMode,
+		postType,
 		wrapperBlockName,
 		wrapperUniqueId,
+		hasTemplateBeenFetched,
 	} = useSelect( ( select ) => {
 		const {
 			isEditingTemplate,
 			__experimentalGetPreviewDeviceType,
 		} = select( editPostStore );
-		const { getCurrentPostId, getCurrentPostType } = select( editorStore );
+		const { getCurrentPostId, getCurrentPostType, getCurrentPost } = select(
+			editorStore
+		);
 		const _isTemplateMode = isEditingTemplate();
 		let _wrapperBlockName;
+		const currentPostType = getCurrentPostType();
+		const post = getCurrentPost();
+
+		const isTemplateFetchingResolved = select(
+			coreStore
+		).hasFinishedResolution( '__experimentalGetTemplateForLink', [
+			post.link,
+			post.status === 'auto-draft',
+		] );
 
-		if ( getCurrentPostType() === 'wp_block' ) {
+		if ( currentPostType === 'wp_block' ) {
 			_wrapperBlockName = 'core/block';
 		} else if ( ! _isTemplateMode ) {
 			_wrapperBlockName = 'core/post-content';
@@ -104,8 +118,10 @@ export default function VisualEditor( { styles } ) {
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
 			isTemplateMode: _isTemplateMode,
+			postType: currentPostType,
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
+			hasTemplateBeenFetched: isTemplateFetchingResolved,
 		};
 	}, [] );
 	const hasMetaBoxes = useSelect(
@@ -224,25 +240,41 @@ export default function VisualEditor( { styles } ) {
 									animate={ { opacity: 1 } }
 								>
 									<WritingFlow>
-										{ ! isTemplateMode && (
-											<div className="edit-post-visual-editor__post-title-wrapper">
-												<PostTitle />
-											</div>
-										) }
+										{ ! isTemplateMode &&
+											'page' !== postType && (
+												<div className="edit-post-visual-editor__post-title-wrapper">
+													<PostTitle />
+												</div>
+											) }
 										<RecursionProvider>
-											<BlockList
-												__experimentalLayout={
-													themeSupportsLayout
-														? {
-																type: 'default',
-																// Find a way to inject this in the support flag code (hooks).
-																alignments: themeSupportsLayout
-																	? alignments
-																	: undefined,
-														  }
-														: undefined
-												}
-											/>
+											{ hasTemplateBeenFetched ? (
+												<BlockList
+													__experimentalLayout={
+														themeSupportsLayout
+															? {
+																	type:
+																		'default',
+																	// Find a way to inject this in the support flag code (hooks).
+																	alignments: themeSupportsLayout
+																		? alignments
+																		: undefined,
+															  }
+															: undefined
+													}
+												/>
+											) : (
+												<div
+													style={ {
+														height: '50vh',
+														display: 'flex',
+														justifyContent:
+															'center',
+														alignItems: 'center',
+													} }
+												>
+													<Spinner />
+												</div>
+											) }
 										</RecursionProvider>
 									</WritingFlow>
 								</motion.div>

packages/edit-post/src/editor.js

@@ -8,7 +8,9 @@ import { size, map, without, omit } from 'lodash';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
 import {
+	store as editorStore,
 	EditorProvider,
 	ErrorBoundary,
 	PostLockedModal,
@@ -55,10 +57,11 @@ function Editor( {
 			getEditedPostTemplate,
 		} = select( editPostStore );
 		const { getEntityRecord, getPostType, getEntityRecords } = select(
-			'core'
+			coreDataStore
 		);
-		const { getEditorSettings } = select( 'core/editor' );
+		const { getEditorSettings } = select( editorStore );
 		const { getBlockTypes } = select( blocksStore );
+
 		const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
 			postType
 		);
@@ -75,7 +78,6 @@ function Editor( {
 		}
 		const supportsTemplateMode = getEditorSettings().supportsTemplateMode;
 		const isViewable = getPostType( postType )?.viewable ?? false;
-
 		return {
 			hasFixedToolbar:
 				isFeatureActive( 'fixedToolbar' ) ||
@@ -171,7 +173,9 @@ function Editor( {
 						initialEdits={ initialEdits }
 						useSubRegistry={ false }
 						__unstableTemplate={
-							isTemplateMode ? template : undefined
+							isTemplateMode || 'page' === postType
+								? template
+								: undefined
 						}
 						{ ...props }
 					>

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

@@ -386,9 +386,10 @@ export const getEditedPostTemplate = createRegistrySelector(
 		}
 
 		const post = select( editorStore ).getCurrentPost();
-		if ( post.link && post.status !== 'auto-draft' ) {
+		if ( post.link ) {
 			return select( coreStore ).__experimentalGetTemplateForLink(
-				post.link
+				post.link,
+				post.status === 'auto-draft'
 			);
 		}