Edit Site: Add template loading. (#19081)

* Edit Site: Add root template ID to editor settings.

* Edit Site: Load root template in block editor.

* Lib: Update demo block template.

* Lib: Rename demo block template.

* Edit Site: Serialize blocks on persistent changes.

* Edit Site: Add multiple entity saving functionality.

lib/demo-block-templates/index.html → lib/demo-block-templates/front-page.html

@@ -8,14 +8,14 @@
 
 	<!-- wp:column {"verticalAlignment":"center"} -->
 	<div class="wp-block-column is-vertically-aligned-center">
-		<!-- wp:navigation-menu {"customTextColor":"#353fff"} -->
+		<!-- wp:navigation {"customTextColor":"#353fff"} -->
 			<!-- wp:navigation-link {"label":"One"} /-->
 			<!-- wp:navigation-link {"label":"Two"} -->
 				<!-- wp:navigation-link {"label":"Sub 1"} /-->
 				<!-- wp:navigation-link {"label":"Sub 2"} /-->
 			<!-- /wp:navigation-link -->
 			<!-- wp:navigation-link {"label":"Three"} /-->
-		<!-- /wp:navigation-menu -->
+		<!-- /wp:navigation -->
 	</div>
 	<!-- /wp:column -->
 </div>

lib/edit-site-page.php

@@ -28,6 +28,7 @@ class="edit-site"
  * @param string $hook Page.
  */
 function gutenberg_edit_site_init( $hook ) {
+	global $_wp_current_template_id;
 	if ( 'gutenberg_page_gutenberg-edit-site' !== $hook ) {
 		return;
 	}
@@ -73,6 +74,12 @@ function gutenberg_edit_site_init( $hook ) {
 		$settings['fontSizes'] = $font_sizes;
 	}
 
+	// Get root template by trigerring `./template-loader.php`'s logic.
+	get_front_page_template();
+	get_index_template();
+	apply_filters( 'template_include', null );
+	$settings['templateId'] = $_wp_current_template_id;
+
 	// Initialize editor.
 	wp_add_inline_script(
 		'wp-edit-site',

lib/template-loader.php

@@ -114,7 +114,7 @@ function create_auto_draft_for_template_part_block( $block ) {
  * @return string Path to the canvas file to include.
  */
 function gutenberg_find_template( $template_file ) {
-	global $_wp_current_template_content, $_wp_current_template_hierarchy;
+	global $_wp_current_template_id, $_wp_current_template_content, $_wp_current_template_hierarchy;
 
 	// Bail if no relevant template hierarchy was determined, or if the template file
 	// was overridden another way.
@@ -149,15 +149,17 @@ function gutenberg_find_template( $template_file ) {
 	$higher_priority_block_template_priority = PHP_INT_MAX;
 	$block_template_files                    = glob( get_stylesheet_directory() . '/block-templates/*.html' ) ?: array();
 	if ( is_child_theme() ) {
-			$block_template_files = array_merge( $block_template_files, glob( get_template_directory() . '/block-templates/*.html' ) ?: array() );
+		$block_template_files = array_merge( $block_template_files, glob( get_template_directory() . '/block-templates/*.html' ) ?: array() );
 	}
 	if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing-demo' ) ) {
 		$block_template_files = array_merge( $block_template_files, glob( dirname( __FILE__ ) . '/demo-block-templates/*.html' ) ?: array() );
 	}
 	foreach ( $block_template_files as $path ) {
+		if ( ! isset( $slug_priorities[ basename( $path, '.html' ) ] ) ) {
+			continue;
+		}
 		$theme_block_template_priority = $slug_priorities[ basename( $path, '.html' ) ];
 		if (
-			isset( $theme_block_template_priority ) &&
 			$theme_block_template_priority < $higher_priority_block_template_priority &&
 			( empty( $current_template_post ) || $theme_block_template_priority < $slug_priorities[ $current_template_post->post_name ] )
 		) {
@@ -183,10 +185,6 @@ function gutenberg_find_template( $template_file ) {
 			$current_template_post = get_post(
 				wp_insert_post( $current_template_post )
 			);
-
-			foreach ( parse_blocks( $current_template_post->post_content ) as $block ) {
-				create_auto_draft_for_template_part_block( $block );
-			}
 		} else {
 			$current_template_post = new WP_Post(
 				(object) $current_template_post
@@ -195,6 +193,12 @@ function gutenberg_find_template( $template_file ) {
 	}
 
 	if ( $current_template_post ) {
+		if ( is_admin() ) {
+			foreach ( parse_blocks( $current_template_post->post_content ) as $block ) {
+				create_auto_draft_for_template_part_block( $block );
+			}
+		}
+		$_wp_current_template_id      = $current_template_post->ID;
 		$_wp_current_template_content = $current_template_post->post_content;
 	}
 

packages/edit-site/package.json

@@ -24,8 +24,11 @@
 		"@babel/runtime": "^7.4.4",
 		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/block-library": "file:../block-library",
+		"@wordpress/blocks": "file:../blocks",
 		"@wordpress/components": "file:../components",
+		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
+		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",

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

@@ -2,8 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useMemo, useState } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 import { uploadMedia } from '@wordpress/media-utils';
+import { useEntityProp } from '@wordpress/core-data';
+import { parse, serialize } from '@wordpress/blocks';
 import {
 	BlockEditorProvider,
 	BlockEditorKeyboardShortcuts,
@@ -39,13 +41,32 @@ export default function BlockEditor( { settings: _settings } ) {
 			},
 		};
 	}, [ canUserCreateMedia, _settings ] );
-	const [ blocks, setBlocks ] = useState( [] );
+	const [ content, _setContent ] = useEntityProp(
+		'postType',
+		'wp_template',
+		'content'
+	);
+	const initialBlocks = useMemo( () => {
+		if ( typeof content !== 'function' ) {
+			const parsedContent = parse( content );
+			return parsedContent.length ? parsedContent : undefined;
+		}
+	}, [] );
+	const [ blocks = initialBlocks, setBlocks ] = useEntityProp(
+		'postType',
+		'wp_template',
+		'blocks'
+	);
+	const setContent = useCallback( ( nextBlocks ) => {
+		setBlocks( nextBlocks );
+		_setContent( serialize( nextBlocks ) );
+	}, [] );
 	return (
 		<BlockEditorProvider
 			settings={ settings }
 			value={ blocks }
 			onInput={ setBlocks }
-			onChange={ setBlocks }
+			onChange={ setContent }
 		>
 			<BlockEditorKeyboardShortcuts />
 			<Sidebar.InspectorFill>

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

@@ -1,12 +1,14 @@
 /**
  * WordPress dependencies
  */
+import { useSelect } from '@wordpress/data';
 import {
 	SlotFillProvider,
 	DropZoneProvider,
 	Popover,
 	navigateRegions,
 } from '@wordpress/components';
+import { EntityProvider } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -17,17 +19,32 @@ import Sidebar from '../sidebar';
 import BlockEditor from '../block-editor';
 
 function Editor( { settings } ) {
-	return (
+	const template = useSelect(
+		( select ) =>
+			select( 'core' ).getEntityRecord(
+				'postType',
+				'wp_template',
+				settings.templateId
+			),
+		[]
+	);
+	return template ? (
 		<SlotFillProvider>
 			<DropZoneProvider>
-				<Notices />
-				<Header />
-				<Sidebar />
-				<BlockEditor settings={ settings } />
-				<Popover.Slot />
+				<EntityProvider
+					kind="postType"
+					type="wp_template"
+					id={ settings.templateId }
+				>
+					<Notices />
+					<Header />
+					<Sidebar />
+					<BlockEditor settings={ settings } />
+					<Popover.Slot />
+				</EntityProvider>
 			</DropZoneProvider>
 		</SlotFillProvider>
-	);
+	) : null;
 }
 
 export default navigateRegions( Editor );

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

@@ -3,6 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import SaveButton from '../save-button';
+
 export default function Header() {
 	return (
 		<div
@@ -14,6 +19,9 @@ export default function Header() {
 			<h1 className="edit-site-header__title">
 				{ __( 'Site Editor' ) } { __( '(beta)' ) }
 			</h1>
+			<div className="edit-site-header__actions">
+				<SaveButton />
+			</div>
 		</div>
 	);
 }

packages/edit-site/src/components/header/style.scss

@@ -31,3 +31,7 @@
 	font-size: 16px;
 	padding: 0 20px;
 }
+
+.edit-site-header__actions {
+	padding: 0 20px;
+}

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

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { useEffect, useState, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { EntitiesSavedStates } from '@wordpress/editor';
+
+export default function SaveButton() {
+	const [ , setStatus ] = useEntityProp( 'postType', 'wp_template', 'status' );
+	// Publish template if not done yet.
+	useEffect( () => setStatus( 'publish' ), [] );
+
+	const { isDirty, isSaving } = useSelect( ( select ) => {
+		const { getEntityRecordChangesByRecord, isSavingEntityRecord } = select(
+			'core'
+		);
+		const entityRecordChangesByRecord = getEntityRecordChangesByRecord();
+		const changedKinds = Object.keys( entityRecordChangesByRecord );
+		return {
+			isDirty: changedKinds.length > 0,
+			isSaving: changedKinds.some( ( changedKind ) =>
+				Object.keys(
+					entityRecordChangesByRecord[ changedKind ]
+				).some( ( changedName ) =>
+					Object.keys(
+						entityRecordChangesByRecord[ changedKind ][ changedName ]
+					).some( ( changedKey ) =>
+						isSavingEntityRecord( changedKind, changedName, changedKey )
+					)
+				)
+			),
+		};
+	} );
+	const disabled = ! isDirty || isSaving;
+
+	const [ isOpen, setIsOpen ] = useState( false );
+	const open = useCallback( setIsOpen.bind( null, true ), [] );
+	const close = useCallback( setIsOpen.bind( null, false ), [] );
+	return (
+		<>
+			<Button
+				isPrimary
+				aria-disabled={ disabled }
+				disabled={ disabled }
+				isBusy={ isSaving }
+				onClick={ disabled ? undefined : open }
+			>
+				{ __( 'Update' ) }
+			</Button>
+			<EntitiesSavedStates isOpen={ isOpen } onRequestClose={ close } />
+		</>
+	);
+}