Editor: Introduce a new dynamic templates mode and add basic post title and content blocks.

lib/blocks.php

@@ -53,6 +53,8 @@ function gutenberg_reregister_core_block_types() {
 		'social-link.php'     => gutenberg_get_registered_social_link_blocks(),
 		'tag-cloud.php'       => 'core/tag-cloud',
 		'site-title.php'      => 'core/site-title',
+		'post-title.php'      => 'core/post-title',
+		'post-content.php'    => 'core/post-content',
 	);
 
 	$registry = WP_Block_Type_Registry::get_instance();

lib/template-loader.php

@@ -175,3 +175,60 @@ function gutenberg_viewport_meta_tag() {
 function gutenberg_strip_php_suffix( $template_file ) {
 	return preg_replace( '/\.php$/', '', $template_file );
 }
+
+/**
+ * Extends default editor settings to add the right template ID and enable editing modes.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+function gutenberg_template_loader_filter_block_editor_settings( $settings ) {
+	global $wp_query, $_wp_current_template_post;
+
+	// Run template resolution manually to trigger our override filters.
+	$tag_templates = array(
+		'is_embed'             => 'get_embed_template',
+		'is_404'               => 'get_404_template',
+		'is_search'            => 'get_search_template',
+		'is_front_page'        => 'get_front_page_template',
+		'is_home'              => 'get_home_template',
+		'is_privacy_policy'    => 'get_privacy_policy_template',
+		'is_post_type_archive' => 'get_post_type_archive_template',
+		'is_tax'               => 'get_taxonomy_template',
+		'is_attachment'        => 'get_attachment_template',
+		'is_single'            => 'get_single_template',
+		'is_page'              => 'get_page_template',
+		'is_singular'          => 'get_singular_template',
+		'is_category'          => 'get_category_template',
+		'is_tag'               => 'get_tag_template',
+		'is_author'            => 'get_author_template',
+		'is_date'              => 'get_date_template',
+		'is_archive'           => 'get_archive_template',
+	);
+	$template      = false;
+	// Loop through each of the template conditionals, and find the appropriate template file.
+	$post = get_post();
+	$wp_query->parse_query( 'p=' . $post->ID . '&preview=true' );
+	foreach ( $tag_templates as $tag => $template_getter ) {
+		if ( call_user_func( $tag ) ) {
+			$template = call_user_func( $template_getter );
+		}
+
+		if ( $template ) {
+			if ( 'is_attachment' === $tag ) {
+				remove_filter( 'the_content', 'prepend_attachment' );
+			}
+			break;
+		}
+	}
+	if ( ! $template ) {
+		$template = get_index_template();
+	}
+	$template = apply_filters( 'template_include', $template );
+
+	$settings['templateId']  = $_wp_current_template_post->ID;
+	$settings['editingMode'] = 'post-content';
+	return $settings;
+}
+add_filter( 'block_editor_settings', 'gutenberg_template_loader_filter_block_editor_settings' );

packages/base-styles/_z-index.scss

@@ -31,7 +31,7 @@ $z-layers: (
 	".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block
 	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
 	".wp-block-cover__video-background": 0, // Video background inside cover block.
-	".wp-block-site-title__save-button": 1,
+	".wp-block-custom-entity__save-button": 1,
 
 	// Active pill button
 	".components-button.is-button {:focus or .is-primary}": 1,

packages/block-editor/src/components/inner-blocks/index.js

@@ -37,7 +37,7 @@ class InnerBlocks extends Component {
 	}
 
 	componentDidMount() {
-		const { templateLock, block } = this.props;
+		const { block, templateLock, value, replaceInnerBlocks } = this.props;
 		const { innerBlocks } = block;
 		// Only synchronize innerBlocks with template if innerBlocks are empty or a locking all exists directly on the block.
 		if ( innerBlocks.length === 0 || templateLock === 'all' ) {
@@ -49,10 +49,22 @@ class InnerBlocks extends Component {
 				templateInProcess: false,
 			} );
 		}
+
+		// Set controlled blocks value from parent, if any.
+		if ( value ) {
+			replaceInnerBlocks( value );
+		}
 	}
 
 	componentDidUpdate( prevProps ) {
-		const { template, block, templateLock } = this.props;
+		const {
+			block,
+			templateLock,
+			template,
+			isLastBlockChangePersistent,
+			onInput,
+			onChange,
+		} = this.props;
 		const { innerBlocks } = block;
 
 		this.updateNestedSettings();
@@ -63,6 +75,14 @@ class InnerBlocks extends Component {
 				this.synchronizeBlocksWithTemplate();
 			}
 		}
+
+		// Sync with controlled blocks value from parent, if possible.
+		if ( prevProps.block.innerBlocks !== innerBlocks ) {
+			const resetFunc = isLastBlockChangePersistent ? onInput : onChange;
+			if ( resetFunc ) {
+				resetFunc( innerBlocks );
+			}
+		}
 	}
 
 	/**
@@ -149,6 +169,7 @@ InnerBlocks = compose( [
 			getBlockListSettings,
 			getBlockRootClientId,
 			getTemplateLock,
+			isLastBlockChangePersistent,
 		} = select( 'core/block-editor' );
 		const { clientId } = ownProps;
 		const block = getBlock( clientId );
@@ -159,6 +180,7 @@ InnerBlocks = compose( [
 			blockListSettings: getBlockListSettings( clientId ),
 			hasOverlay: block.name !== 'core/template' && ! isBlockSelected( clientId ) && ! hasSelectedInnerBlock( clientId, true ),
 			parentLock: getTemplateLock( rootClientId ),
+			isLastBlockChangePersistent: isLastBlockChangePersistent(),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {

packages/block-library/src/editor.scss

@@ -36,7 +36,6 @@
 @import "./text-columns/editor.scss";
 @import "./verse/editor.scss";
 @import "./video/editor.scss";
-@import "./site-title/editor.scss";
 
 /**
  * Import styles from internal editor components used by the blocks.
@@ -57,3 +56,10 @@
 	margin-top: $default-block-margin;
 	margin-bottom: $default-block-margin;
 }
+
+.wp-block-custom-entity__save-button {
+	position: absolute;
+	right: 0;
+	top: 0;
+	z-index: z-index(".wp-block-custom-entity__save-button");
+}

packages/block-library/src/index.js

@@ -64,6 +64,8 @@ import * as socialLink from './social-link';
 
 // Full Site Editing Blocks
 import * as siteTitle from './site-title';
+import * as postTitle from './post-title';
+import * as postContent from './post-content';
 
 /**
  * Function to register an individual block.
@@ -182,7 +184,9 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 				...socialLink.sites,
 
 				// Register Full Site Editing Blocks.
-				...( __experimentalEnableFullSiteEditing ? [ siteTitle ] : [] ),
+				...( __experimentalEnableFullSiteEditing ?
+					[ siteTitle, postTitle, postContent ] :
+					[] ),
 			].forEach( registerBlock );
 		} :
 		undefined;

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

@@ -0,0 +1,4 @@
+{
+	"name": "core/post-content",
+	"category": "layout"
+}

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

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useEntityId,
+	useEntityProp,
+	__experimentalUseEntitySaving,
+} from '@wordpress/core-data';
+import { useMemo, useCallback } from '@wordpress/element';
+import { parse } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { InnerBlocks } from '@wordpress/block-editor';
+import { serializeBlocks } from '@wordpress/editor';
+
+export default function PostContentEdit() {
+	const postId = useEntityId( 'postType', 'post' );
+	const [ content, _setContent ] = useEntityProp( 'postType', 'post', 'content' );
+	const initialBlocks = useMemo( () => {
+		if ( postId && typeof content !== 'function' ) {
+			const parsedContent = parse( content );
+			return parsedContent.length ? parsedContent : undefined;
+		}
+	}, [] );
+	const [ blocks = initialBlocks, setBlocks ] = useEntityProp(
+		'postType',
+		'post',
+		'blocks'
+	);
+	const [ isDirty, isSaving, save ] = __experimentalUseEntitySaving(
+		'postType',
+		'post',
+		'content'
+	);
+	const saveContent = useCallback( () => {
+		_setContent( content( { blocks } ) );
+		save();
+	}, [ content, blocks ] );
+	const setContent = useCallback( () => {
+		_setContent( ( { blocks: blocksForSerialization = [] } ) =>
+			serializeBlocks( blocksForSerialization )
+		);
+	}, [] );
+	return postId ? (
+		<>
+			<Button
+				isPrimary
+				className="wp-block-custom-entity__save-button"
+				disabled={ ! isDirty || ! content }
+				isBusy={ isSaving }
+				onClick={ saveContent }
+			>
+				{ __( 'Update' ) }
+			</Button>
+			<div className="entry-content">
+				<InnerBlocks value={ blocks } onChange={ setBlocks } onInput={ setContent } />
+			</div>
+		</>
+	) : (
+		'Post Content Placeholder'
+	);
+}

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

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export default (
+	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path fill="none" d="M0 0h24v24H0V0z" />
+		<Path d="M3 15h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V9H3v2zm0-6v2h18V5H3z" />
+	</SVG>
+);

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

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

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

@@ -0,0 +1,38 @@
+<?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() {
+	// TODO: Without this temporary fix, an infinite loop can occur.
+	if ( is_admin() || defined( 'REST_REQUEST' ) ) {
+		return '';
+	}
+
+	if ( ! in_the_loop() ) {
+		rewind_posts();
+		the_post();
+	}
+
+	return '<div class="entry-content">' . apply_filters( 'the_content', str_replace( ']]>', ']]&gt;', get_the_content() ) ) . '</div>';
+}
+
+/**
+ * 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,4 @@
+{
+	"name": "core/post-title",
+	"category": "layout"
+}

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

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useEntityId,
+	useEntityProp,
+	__experimentalUseEntitySaving,
+} from '@wordpress/core-data';
+import { useCallback } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
+import { cleanForSlug } from '@wordpress/editor';
+
+const saveProps = [ 'title', 'slug' ];
+export default function PostTitleEdit() {
+	const postId = useEntityId( 'postType', 'post' );
+	const [ title, _setTitle ] = useEntityProp( 'postType', 'post', 'title' );
+	const [ , setSlug ] = useEntityProp( 'postType', 'post', 'slug' );
+	const [ isDirty, isSaving, save ] = __experimentalUseEntitySaving(
+		'postType',
+		'post',
+		saveProps
+	);
+	const setTitle = useCallback( ( value ) => {
+		_setTitle( value );
+		setSlug( cleanForSlug( value ) );
+	}, [] );
+	return postId ? (
+		<>
+			<Button
+				isPrimary
+				className="wp-block-custom-entity__save-button"
+				disabled={ ! isDirty || ! title }
+				isBusy={ isSaving }
+				onClick={ save }
+			>
+				{ __( 'Update' ) }
+			</Button>
+			<RichText
+				tagName="h1"
+				placeholder={ __( 'Title' ) }
+				value={ title }
+				onChange={ setTitle }
+				allowedFormats={ [] }
+			/>
+		</>
+	) : (
+		'Post Title Placeholder'
+	);
+}

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

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export default (
+	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path fill="none" d="M0 0h24v24H0V0z" />
+		<Path d="M5 4v3h5.5v12h3V7H19V4H5z" />
+	</SVG>
+);