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

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,53 @@
+<?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();
+		include gutenberg_dir_path() . 'post-content.php';
+		$template->post_content = ob_get_clean();
+	}
+
+	$post_type_object           = get_post_type_object( 'post' );
+	$post_type_object->template = $template;
+}
+add_action( 'init', 'gutenberg_register_templates' );

packages/block-editor/src/components/block-list/index.js

@@ -262,17 +262,20 @@ export default compose( [
 			getMultiSelectedBlockClientIds,
 			hasMultiSelection,
 			getGlobalBlockCount,
+			getFirstAncestorWithZoomSupport,
 		} = select( 'core/block-editor' );
+		const selectedBlockClientId = getSelectedBlockClientId();
+		const zoomedBlockId = getFirstAncestorWithZoomSupport( selectedBlockClientId );
 
-		const { rootClientId } = ownProps;
+		const rootClientId = ownProps.rootClientId || zoomedBlockId;
 
 		return {
 			blockClientIds: getBlockOrder( rootClientId ),
 			selectionStart: getMultiSelectedBlocksStartClientId(),
 			selectionEnd: getMultiSelectedBlocksEndClientId(),
 			isSelectionEnabled: isSelectionEnabled(),
 			isMultiSelecting: isMultiSelecting(),
-			selectedBlockClientId: getSelectedBlockClientId(),
+			selectedBlockClientId,
 			multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
 			hasMultiSelection: hasMultiSelection(),
 			enableAnimation: getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,

packages/block-editor/src/store/selectors.js

@@ -1405,3 +1405,38 @@ export function __experimentalGetLastBlockAttributeChanges( state ) {
 function getReusableBlocks( state ) {
 	return get( state, [ 'settings', '__experimentalReusableBlocks' ], EMPTY_ARRAY );
 }
+
+/**
+ * Returns the first ancestor of the specified block, that supports zoom.
+ * Returns null if there isn't one.
+ *
+ * @param {Object} state    Editor state.
+ * @param {string} clientId The block's client ID.
+ *
+ * @return {?string} The zoom supporting ancestor's client ID or null if there isn't one.
+ */
+export const getFirstAncestorWithZoomSupport = createSelector(
+	( state, clientId ) => {
+		let ancestorClientId = clientId;
+		while ( ancestorClientId ) {
+			const blockName = getBlockName( state, ancestorClientId );
+			if ( ! blockName ) {
+				return null;
+			}
+
+			const blockType = getBlockType( blockName );
+			if ( ! blockType ) {
+				return null;
+			}
+
+			if ( hasBlockSupport( blockType, 'zoom', false ) ) {
+				return ancestorClientId;
+			}
+
+			ancestorClientId = getBlockRootClientId( state, ancestorClientId );
+		}
+
+		return ancestorClientId;
+	},
+	( state ) => [ state.blocks.byClientId, getBlockTypes(), state.blocks.parents ]
+);

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,8 @@
+{
+	"name": "core/post-content",
+	"category": "common",
+	"supports": {
+		"multiple": false,
+		"zoom": true
+	}
+}

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-title/block.json

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

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

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+export default function PostTitleEdit( {
+	attributes: { title },
+	setAttributes,
+} ) {
+	return (
+		<RichText
+			value={ title }
+			onChange={ ( value ) => setAttributes( { title: 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/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/visual-editor/index.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	PostTitle,
-	VisualEditorGlobalKeyboardShortcuts,
-} from '@wordpress/editor';
+import { VisualEditorGlobalKeyboardShortcuts } from '@wordpress/editor';
 import {
 	WritingFlow,
 	ObserveTyping,
@@ -30,7 +27,6 @@ function VisualEditor() {
 			<WritingFlow>
 				<ObserveTyping>
 					<CopyHandler>
-						<PostTitle />
 						<BlockList />
 					</CopyHandler>
 				</ObserveTyping>

packages/editor/src/store/actions.js

@@ -12,6 +12,7 @@ import { dispatch, select, apiFetch } from '@wordpress/data-controls';
 import {
 	parse,
 	synchronizeBlocksWithTemplate,
+	serialize,
 } from '@wordpress/blocks';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
@@ -170,9 +171,11 @@ export function* setupEditor( post, edits, template ) {
 	let blocks = parse( content );
 
 	// Apply a template for new posts only, if exists.
-	const isNewPost = post.status === 'auto-draft';
-	if ( isNewPost && template ) {
-		blocks = synchronizeBlocksWithTemplate( blocks, template );
+	if ( template ) {
+		blocks = synchronizeBlocksWithTemplate(
+			blocks,
+			template.post_content ? parse( template.post_content ) : template
+		);
 	}
 
 	yield resetPost( post );
@@ -474,11 +477,24 @@ export function* savePost( options = {} ) {
 		'getCurrentPost'
 	);
 
-	const editedPostContent = yield select(
+	let editedPostContent = yield select(
 		STORE_KEY,
 		'getEditedPostContent'
 	);
 
+	const template = ( yield select( STORE_KEY, 'getEditorSettings' ) ).template;
+	if ( template && template.post_content ) {
+		yield apiFetch( {
+			path: `/wp/v2/${ template.post_type }/${ template.ID }`,
+			method: 'PUT',
+			data: {
+				content: editedPostContent,
+			},
+		} );
+		const postContentBlock = ( yield select( STORE_KEY, 'getBlocksForSerialization' ) ).find( ( block ) => block.name === 'core/post-content' );
+		editedPostContent = postContentBlock ? serialize( postContentBlock.innerBlocks ) : '';
+	}
+
 	let toSend = {
 		...edits,
 		content: editedPostContent,

packages/editor/src/store/block-sources/index.js

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import * as post from './post';
 import * as meta from './meta';
 
-export { meta };
+export { post, meta };

packages/editor/src/store/block-sources/post.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { get, set } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { select } from '@wordpress/data-controls';
+
+/**
+ * Internal dependencies
+ */
+import { editPost } from '../actions';
+import { EDIT_MERGE_PROPERTIES } from '../constants';
+
+export function* getDependencies() {
+	return {
+		post: yield select( 'core/editor', 'getCurrentPost' ),
+		content: yield select( 'core/editor', 'getEditedPostContent' ),
+		edits: yield select( 'core/editor', 'getPostEdits' ),
+	};
+}
+
+export function apply( { attribute }, { post, content, edits } ) {
+	if ( 'content' === attribute ) {
+		return content;
+	}
+
+	if ( undefined === get( edits, attribute ) ) {
+		return get( post, attribute );
+	}
+
+	if ( EDIT_MERGE_PROPERTIES.has( attribute ) ) {
+		return {
+			...get( post, attribute ),
+			...get( edits, attribute ),
+		};
+	}
+
+	return get( edits, attribute );
+}
+
+export function* update( { attribute }, value ) {
+	yield editPost( set( {}, attribute, value ) );
+}