Editor: Operate on template CPT posts and add a default template with post title and content blocks.

lib/blocks.php

@@ -28,6 +28,8 @@ function gutenberg_reregister_core_block_types() {
 		'shortcode.php'       => 'core/shortcode',
 		'search.php'          => 'core/search',
 		'tag-cloud.php'       => 'core/tag-cloud',
+		'post-title.php'      => 'core/post-title',
+		'post-content.php'    => 'core/post-content',
 	);
 
 	$registry = WP_Block_Type_Registry::get_instance();

lib/load.php

@@ -30,6 +30,7 @@
 
 require dirname( __FILE__ ) . '/compat.php';
 require dirname( __FILE__ ) . '/blocks.php';
+require dirname( __FILE__ ) . '/templates.php';
 require dirname( __FILE__ ) . '/client-assets.php';
 require dirname( __FILE__ ) . '/demo.php';
 require dirname( __FILE__ ) . '/widgets.php';

lib/templates.php

@@ -0,0 +1,98 @@
+<?php
+/**
+ * Register Gutenberg core block editor templates.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers Gutenberg core block editor templates.
+ */
+function gutenberg_register_templates() {
+	register_post_type(
+		'wp_template',
+		array(
+			'labels'       => array(
+				'name' => __( 'Templates', 'gutenberg' ),
+			),
+			'show_in_rest' => true,
+		)
+	);
+
+	$template_query = new WP_Query(
+		array(
+			'post_type' => 'wp_template',
+			'name'      => 'single-post',
+		)
+	);
+
+	$template;
+	if ( ! $template_query->have_posts() ) {
+		$template_id = wp_insert_post(
+			array(
+				'post_type'    => 'wp_template',
+				'post_name'    => 'single-post',
+				'post_content' => '<!-- wp:post-title /--><!-- wp:post-content --><!-- wp:paragraph --><p></p><!-- /wp:paragraph --><!-- /wp:post-content -->',
+			)
+		);
+		$template    = get_post( $template_id );
+	} else {
+		$template = $template_query->get_posts();
+		$template = $template[0];
+	}
+
+	if ( isset( $_GET['gutenberg-demo'] ) ) {
+		ob_start();
+		echo '<!-- wp:post-title /--><!-- wp:post-content -->';
+		include gutenberg_dir_path() . 'post-content.php';
+		echo '<!-- /wp:post-content -->';
+		$template->post_content = ob_get_clean();
+	}
+
+	$post_type_object                = get_post_type_object( 'post' );
+	$post_type_object->template_post = $template;
+}
+add_action( 'init', 'gutenberg_register_templates' );
+
+/**
+ * Filters the block editor settings object to add the post's template post.
+ *
+ * @param array    $editor_settings The block editor settings object.
+ * @param \WP_Post $post            The post object.
+ *
+ * @return array The maybe modified block editor settings object.
+ */
+function gutenberg_filter_block_editor_settings( $editor_settings, $post ) {
+	$post_type_object = get_post_type_object( get_post_type( $post ) );
+	if ( ! empty( $post_type_object->template_post ) ) {
+		$editor_settings['templatePost'] = $post_type_object->template_post;
+	}
+	return $editor_settings;
+}
+add_filter( 'block_editor_settings', 'gutenberg_filter_block_editor_settings', 10, 2 );
+
+/**
+ * Filters template inclusion in pages to hijack the `single.php` template
+ * and load the Gutenberg editable counterpart instead.
+ *
+ * @param string $template The included template file name.
+ *
+ * @return string The passed in file name unless the process is hijacked.
+ */
+function gutenberg_filter_template_include( $template ) {
+	if ( ! preg_match( '/single\.php$/', $template ) ) {
+		return $template;
+	}
+
+	$template_query = new WP_Query(
+		array(
+			'post_type' => 'wp_template',
+			'name'      => 'single-post',
+		)
+	);
+	$template       = $template_query->get_posts();
+	$template       = $template[0];
+	echo wp_head() . apply_filters( 'the_content', $template->post_content ) . wp_footer();
+	exit;
+}
+add_filter( 'template_include', 'gutenberg_filter_template_include' );

packages/block-library/src/index.js

@@ -62,6 +62,10 @@ import * as tagCloud from './tag-cloud';
 
 import * as classic from './classic';
 
+// Top-level template blocks.
+import * as postTitle from './post-title';
+import * as postContent from './post-content';
+
 /**
  * Function to register core blocks provided by the block editor.
  *
@@ -124,6 +128,10 @@ export const registerCoreBlocks = () => {
 		textColumns,
 		verse,
 		video,
+
+		// Register top-level template blocks.
+		postTitle,
+		postContent,
 	].forEach( ( block ) => {
 		if ( ! block ) {
 			return;

packages/block-library/src/post-content/block.json

@@ -0,0 +1,7 @@
+{
+	"name": "core/post-content",
+	"category": "common",
+	"supports": {
+		"multiple": false
+	}
+}

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

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function PostContentEdit() {
+	return <InnerBlocks templateLock={ false } />;
+}

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

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Post Content' ),
+	edit,
+};

packages/block-library/src/post-content/index.php

@@ -0,0 +1,30 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-content` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-content` block on the server.
+ *
+ * @return string Returns the filtered post content of the current post.
+ */
+function render_block_core_post_content() {
+	rewind_posts();
+	the_post();
+	return apply_filters( 'the_content', str_replace( ']]>', ']]&gt;', get_the_content() ) );
+}
+
+/**
+ * Registers the `core/post-content` block on the server.
+ */
+function register_block_core_post_content() {
+	register_block_type(
+		'core/post-content',
+		array(
+			'render_callback' => 'render_block_core_post_content',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_post_content' );

packages/block-library/src/post-title/block.json

@@ -0,0 +1,16 @@
+{
+	"name": "core/post-title",
+	"category": "common",
+	"attributes": {
+		"title": {
+			"type": "string",
+			"source": "post",
+			"attribute": "title"
+		},
+		"slug": {
+			"type": "string",
+			"source": "post",
+			"attribute": "slug"
+		}
+	}
+}

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

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { cleanForSlug } from '@wordpress/editor';
+import { RichText } from '@wordpress/block-editor';
+
+export default function PostTitleEdit( {
+	attributes: { title },
+	setAttributes,
+} ) {
+	return (
+		<RichText
+			value={ title }
+			onChange={ ( value ) => setAttributes( { title: value, slug: cleanForSlug( value ) } ) }
+			tagName="h1"
+			placeholder={ __( 'Title' ) }
+			formattingControls={ [] }
+		/>
+	);
+}

packages/block-library/src/post-title/index.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Post Title' ),
+	edit,
+};

packages/block-library/src/post-title/index.php

@@ -0,0 +1,30 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-title` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-title` block on the server.
+ *
+ * @return string Returns the filtered post title for the current post wrapped inside "h1" tags.
+ */
+function render_block_core_post_title() {
+	rewind_posts();
+	the_post();
+	return the_title( '<h1>', '</h1>', false );
+}
+
+/**
+ * Registers the `core/post-title` block on the server.
+ */
+function register_block_core_post_title() {
+	register_block_type(
+		'core/post-title',
+		array(
+			'render_callback' => 'render_block_core_post_title',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_post_title' );

packages/blocks/src/api/templates.js

@@ -54,12 +54,22 @@ export function synchronizeBlocksWithTemplate( blocks = [], template ) {
 		return blocks;
 	}
 
-	return map( template, ( [ name, attributes, innerBlocksTemplate ], index ) => {
+	return map( template, ( templateBlock, index ) => {
+		const [ name, attributes, _innerBlocksTemplate ] = Array.isArray( templateBlock ) ?
+			templateBlock :
+			[ templateBlock.name, templateBlock.attributes, templateBlock.innerBlocks ];
 		const block = blocks[ index ];
+		let innerBlocksTemplate = _innerBlocksTemplate;
 
-		if ( block && block.name === name ) {
-			const innerBlocks = synchronizeBlocksWithTemplate( block.innerBlocks, innerBlocksTemplate );
-			return { ...block, innerBlocks };
+		if ( block ) {
+			if ( block.name === name ) {
+				const innerBlocks = synchronizeBlocksWithTemplate( block.innerBlocks, innerBlocksTemplate );
+				return { ...block, innerBlocks };
+			}
+
+			if ( 'core/post-content' === name ) {
+				innerBlocksTemplate = blocks;
+			}
 		}
 
 		// To support old templates that were using the "children" format

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -16,6 +16,7 @@ import {
 	TableOfContents,
 	EditorHistoryRedo,
 	EditorHistoryUndo,
+	ToggleEditTemplatePost,
 } from '@wordpress/editor';
 
 function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter, isTextModeEnabled } ) {
@@ -45,6 +46,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter, isText
 					<BlockToolbar />
 				</div>
 			) }
+			<ToggleEditTemplatePost />
 		</NavigableToolbar>
 	);
 }

packages/edit-post/src/components/layout/index.js

@@ -56,6 +56,7 @@ function Layout( {
 	isSaving,
 	isMobileViewport,
 	isRichEditingEnabled,
+	isEditingTemplatePost,
 } ) {
 	const sidebarIsOpened = editorSidebarOpened || pluginSidebarOpened || publishSidebarOpened;
 
@@ -91,7 +92,9 @@ function Layout( {
 				<ManageBlocksModal />
 				<OptionsModal />
 				{ ( mode === 'text' || ! isRichEditingEnabled ) && <TextEditor /> }
-				{ isRichEditingEnabled && mode === 'visual' && <VisualEditor /> }
+				{ isRichEditingEnabled && mode === 'visual' && (
+					<VisualEditor withPostTitle={ ! isEditingTemplatePost } />
+				) }
 				<div className="edit-post-layout__metaboxes">
 					<MetaBoxes location="normal" />
 				</div>
@@ -135,16 +138,20 @@ function Layout( {
 }
 
 export default compose(
-	withSelect( ( select ) => ( {
-		mode: select( 'core/edit-post' ).getEditorMode(),
-		editorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened(),
-		pluginSidebarOpened: select( 'core/edit-post' ).isPluginSidebarOpened(),
-		publishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(),
-		hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
-		hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
-		isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
-		isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled,
-	} ) ),
+	withSelect( ( select ) => {
+		const editorSettings = select( 'core/editor' ).getEditorSettings();
+		return {
+			mode: select( 'core/edit-post' ).getEditorMode(),
+			editorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened(),
+			pluginSidebarOpened: select( 'core/edit-post' ).isPluginSidebarOpened(),
+			publishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(),
+			hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
+			hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
+			isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
+			isRichEditingEnabled: editorSettings.richEditingEnabled,
+			isEditingTemplatePost: editorSettings.editTemplatePost,
+		};
+	} ),
 	withDispatch( ( dispatch ) => {
 		const { closePublishSidebar, togglePublishSidebar } = dispatch( 'core/edit-post' );
 		return {