Edit Site: Load root template in block editor.

WordPress · Dec 12, 2019 · fa7a8cb · fa7a8cb
1 parent c54fd1b
commit fa7a8cb
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
@@ -24,7 +24,9 @@
 		"@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/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",

diff --git a/packages/edit-site/src/components/block-editor/index.js b/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,34 @@ 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( ( { blocks: blocksForSerialization = nextBlocks } ) =>
+			serialize( blocksForSerialization )
+		);
+	}, [] );
 	return (
 		<BlockEditorProvider
 			settings={ settings }
 			value={ blocks }
 			onInput={ setBlocks }
-			onChange={ setBlocks }
+			onChange={ setContent }
 		>
 			<BlockEditorKeyboardShortcuts />
 			<Sidebar.InspectorFill>

diff --git a/packages/edit-site/src/components/editor/index.js b/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 );