Site Editor: Remove more initial PHP state (#23775)

lib/edit-site-page.php

@@ -145,18 +145,6 @@ function gutenberg_edit_site_init( $hook ) {
 	}
 	$settings['styles'] = gutenberg_get_editor_styles();
 
-	$settings['editSiteInitialState'] = array();
-
-	$settings['editSiteInitialState']['templateType'] = 'wp_template';
-	$settings['editSiteInitialState']['showOnFront']  = get_option( 'show_on_front' );
-	$settings['editSiteInitialState']['page']         = array(
-		'path'    => '/',
-		'context' => 'page' === $settings['editSiteInitialState']['showOnFront'] ? array(
-			'postType' => 'page',
-			'postId'   => get_option( 'page_on_front' ),
-		) : array(),
-	);
-
 	// This is so other parts of the code can hook their own settings.
 	// Example: Global Styles.
 	global $post;
@@ -225,3 +213,33 @@ function gutenberg_edit_site_init( $hook ) {
 	wp_enqueue_style( 'wp-format-library' );
 }
 add_action( 'admin_enqueue_scripts', 'gutenberg_edit_site_init' );
+
+/**
+ * Register a core site setting for front page information.
+ */
+function register_site_editor_homepage_settings() {
+	register_setting(
+		'general',
+		'show_on_front',
+		array(
+			'show_in_rest' => array(
+				'name' => 'show_on_front',
+			),
+			'type'         => 'string',
+			'description'  => __( 'What to show on the front page', 'gutenberg' ),
+		)
+	);
+
+	register_setting(
+		'general',
+		'page_on_front',
+		array(
+			'show_in_rest' => array(
+				'name' => 'page_on_front',
+			),
+			'type'         => 'number',
+			'description'  => __( 'The ID of the page that should be displayed on the front page', 'gutenberg' ),
+		)
+	);
+}
+add_action( 'rest_api_init', 'register_site_editor_homepage_settings', 10 );

packages/edit-site/src/components/editor/index.js

@@ -52,8 +52,7 @@ function Editor() {
 		deviceType,
 		sidebarIsOpened,
 		settings,
-		templateId,
-		templatePartId,
+		entityId,
 		templateType,
 		page,
 		template,
@@ -71,23 +70,32 @@ function Editor() {
 		const _templateId = getTemplateId();
 		const _templatePartId = getTemplatePartId();
 		const _templateType = getTemplateType();
+
+		// The currently selected entity to display. Typically template or template part.
+		let _entityId;
+		if ( _templateType ) {
+			_entityId =
+				_templateType === 'wp_template' ? _templateId : _templatePartId;
+		}
+
 		return {
 			isFullscreenActive: isFeatureActive( 'fullscreenMode' ),
 			deviceType: __experimentalGetPreviewDeviceType(),
 			sidebarIsOpened: !! _select(
 				'core/interface'
 			).getActiveComplementaryArea( 'core/edit-site' ),
 			settings: getSettings(),
-			templateId: _templateId,
-			templatePartId: _templatePartId,
 			templateType: _templateType,
 			page: getPage(),
-			template: _select( 'core' ).getEntityRecord(
-				'postType',
-				_templateType,
-				_templateType === 'wp_template' ? _templateId : _templatePartId
-			),
+			template: _templateType
+				? _select( 'core' ).getEntityRecord(
+						'postType',
+						_templateType,
+						_entityId
+				  )
+				: null,
 			select: _select,
+			entityId: _entityId,
 		};
 	}, [] );
 	const { editEntityRecord } = useDispatch( 'core' );
@@ -125,25 +133,26 @@ function Editor() {
 	// and Query Pagination blocks.
 	const blockContext = useMemo(
 		() => ( {
-			...page.context,
-			query: page.context.query || { categoryIds: [] },
+			...page?.context,
+			query: page?.context.query || { categoryIds: [] },
 			queryContext: [
-				page.context.queryContext || { page: 1 },
+				page?.context.queryContext || { page: 1 },
 				( newQueryContext ) =>
 					setPage( {
 						...page,
 						context: {
-							...page.context,
+							...page?.context,
 							queryContext: {
-								...page.context.queryContext,
+								...page?.context.queryContext,
 								...newQueryContext,
 							},
 						},
 					} ),
 			],
 		} ),
-		[ page.context ]
+		[ page?.context ]
 	);
+
 	return (
 		<>
 			<EditorStyles styles={ settings.styles } />
@@ -154,11 +163,7 @@ function Editor() {
 						<EntityProvider
 							kind="postType"
 							type={ templateType }
-							id={
-								templateType === 'wp_template'
-									? templateId
-									: templatePartId
-							}
+							id={ entityId }
 						>
 							<BlockContextProvider value={ blockContext }>
 								<FocusReturnProvider>

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

@@ -49,16 +49,20 @@ export default function Header( {
 			getTemplatePartId,
 			getTemplateType,
 			getPage,
-			getShowOnFront,
 		} = select( 'core/edit-site' );
+
+		const { show_on_front: _showOnFront } = select(
+			'core'
+		).getEditedEntityRecord( 'root', 'site' );
+
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
 			hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
 			templateId: getTemplateId(),
 			templatePartId: getTemplatePartId(),
 			templateType: getTemplateType(),
 			page: getPage(),
-			showOnFront: getShowOnFront(),
+			showOnFront: _showOnFront,
 		};
 	}, [] );
 

packages/edit-site/src/components/page-switcher/index.js

@@ -97,22 +97,25 @@ export default function PageSwitcher( {
 		].find( ( choice ) => choice.value === newPath );
 		onActivePageChange( { ...rest, path } );
 	};
+
 	const onPostSelect = ( post ) =>
 		onActivePageChange( {
 			type: 'post',
 			slug: post.slug,
 			path: getPathAndQueryString( post.url ),
 			context: { postType: post.type, postId: post.id },
 		} );
+
+	const activePath = activePage?.path;
 	return (
 		<DropdownMenu
 			icon={ null }
 			label={ __( 'Switch Page' ) }
 			toggleProps={ {
 				children:
 					[ ...pages, ...categories, ...posts ].find(
-						( choice ) => choice.value === activePage.path
-					)?.label || activePage.path,
+						( choice ) => choice.value === activePath
+					)?.label || activePath,
 			} }
 			menuProps={ { className: 'edit-site-page-switcher__menu' } }
 		>
@@ -121,21 +124,21 @@ export default function PageSwitcher( {
 					<MenuGroup label={ __( 'Pages' ) }>
 						<MenuItemsChoice
 							choices={ pages }
-							value={ activePage.path }
+							value={ activePath }
 							onSelect={ onPageSelect }
 						/>
 					</MenuGroup>
 					<MenuGroup label={ __( 'Categories' ) }>
 						<MenuItemsChoice
 							choices={ categories }
-							value={ activePage.path }
+							value={ activePath }
 							onSelect={ onPageSelect }
 						/>
 					</MenuGroup>
 					<MenuGroup label={ __( 'Posts' ) }>
 						<MenuItemsChoice
 							choices={ posts }
-							value={ activePage.path }
+							value={ activePath }
 							onSelect={ onPageSelect }
 						/>
 						<LinkControl

packages/edit-site/src/components/save-button/index.js

@@ -22,7 +22,6 @@ export default function SaveButton( { openEntitiesSavedStates } ) {
 			isSaving: some( dirtyEntityRecords, ( record ) =>
 				isSavingEntityRecord( record.kind, record.name, record.key )
 			),
-			templateType: select( 'core/edit-site' ).getTemplateType(),
 		};
 	} );
 

packages/edit-site/src/components/template-switcher/index.js

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRegistry, useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import {
 	Tooltip,
 	DropdownMenu,
@@ -16,7 +16,6 @@ import { Icon, home, plus, undo } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { findTemplate } from '../../utils';
 import TemplatePreview from './template-preview';
 import ThemePreview from './theme-preview';
 
@@ -69,20 +68,7 @@ export default function TemplateSwitcher( {
 		setThemePreviewVisible( () => false );
 	};
 
-	const registry = useRegistry();
-	const [ homeId, setHomeId ] = useState();
-
-	useEffect( () => {
-		findTemplate(
-			'/',
-			registry.__experimentalResolveSelect( 'core' ).getEntityRecords
-		).then(
-			( newHomeId ) => setHomeId( newHomeId ),
-			() => setHomeId( null )
-		);
-	}, [ registry ] );
-
-	const { currentTheme, template, templateParts } = useSelect(
+	const { currentTheme, template, templateParts, homeId } = useSelect(
 		( select ) => {
 			const {
 				getCurrentTheme,
@@ -96,6 +82,8 @@ export default function TemplateSwitcher( {
 				activeId
 			);
 
+			const { getHomeTemplateId } = select( 'core/edit-site' );
+
 			return {
 				currentTheme: getCurrentTheme(),
 				template: _template,
@@ -105,6 +93,7 @@ export default function TemplateSwitcher( {
 							template: _template.slug,
 					  } )
 					: null,
+				homeId: getHomeTemplateId(),
 			};
 		},
 		[ activeId ]
@@ -128,9 +117,11 @@ export default function TemplateSwitcher( {
 	} ) );
 
 	const overwriteSlug =
+		page &&
 		TEMPLATE_OVERRIDES[ page.type ] &&
 		page.slug &&
 		TEMPLATE_OVERRIDES[ page.type ]( page.slug );
+
 	const overwriteTemplate = () =>
 		onAddTemplate( {
 			slug: overwriteSlug,

packages/edit-site/src/index.js

@@ -54,10 +54,7 @@ const fetchLinkSuggestions = ( search, { perPage = 20 } = {} ) =>
 export function initialize( id, settings ) {
 	settings.__experimentalFetchLinkSuggestions = fetchLinkSuggestions;
 
-	const initialState = settings.editSiteInitialState;
-	delete settings.editSiteInitialState;
-	initialState.settings = settings;
-	registerEditSiteStore( initialState );
+	registerEditSiteStore( { settings } );
 
 	registerCoreBlocks();
 	if ( process.env.GUTENBERG_PHASE === 2 ) {

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

@@ -75,15 +75,13 @@ export function* addTemplate( template ) {
  * Removes a template, and updates the current page and template.
  *
  * @param {number} templateId The template ID.
- *
- * @return {Object} Action object used to set the current page and template.
  */
 export function* removeTemplate( templateId ) {
 	yield apiFetch( {
 		path: `/wp/v2/templates/${ templateId }`,
 		method: 'DELETE',
 	} );
-	return dispatch(
+	yield dispatch(
 		'core/edit-site',
 		'setPage',
 		yield select( 'core/edit-site', 'getPage' )
@@ -105,21 +103,59 @@ export function setTemplatePart( templatePartId ) {
 }
 
 /**
- * Resolves the template for a page and sets them.
+ * Updates the homeTemplateId state with the templateId of the page resolved
+ * from the given path.
  *
- * @param {Object} page         The page object.
- * @param {string} page.type    The page type.
- * @param {string} page.slug    The page slug.
- * @param {string} page.path    The page path.
- * @param {Object} page.context The page context.
+ * @param {number} homeTemplateId The template ID for the homepage.
+ */
+export function setHomeTemplateId( homeTemplateId ) {
+	return {
+		type: 'SET_HOME_TEMPLATE',
+		homeTemplateId,
+	};
+}
+
+/**
+ * Resolves the template for a page and displays both.
  *
- * @return {Object} Action object.
+ * @param {Object}  page         The page object.
+ * @param {string}  page.type    The page type.
+ * @param {string}  page.slug    The page slug.
+ * @param {string}  page.path    The page path.
+ * @param {Object}  page.context The page context.
+ *
+ * @return {number} The resolved template ID for the page route.
  */
 export function* setPage( page ) {
 	const templateId = yield findTemplate( page.path );
-	return {
+	yield {
 		type: 'SET_PAGE',
 		page,
 		templateId,
 	};
+	return templateId;
+}
+
+/**
+ * Displays the site homepage for editing in the editor.
+ */
+export function* showHomepage() {
+	const {
+		show_on_front: showOnFront,
+		page_on_front: frontpageId,
+	} = yield select( 'core', 'getEntityRecord', 'root', 'site' );
+
+	const page = {
+		path: '/',
+		context:
+			showOnFront === 'page'
+				? {
+						postType: 'page',
+						postId: frontpageId,
+				  }
+				: {},
+	};
+
+	const homeTemplate = yield* setPage( page );
+	yield setHomeTemplateId( homeTemplate );
 }