Block Library: Add EntityProvider, controlled InnerBlocks and basic template blocks.

docs/designers-developers/developers/data/data-core-editor.md

@@ -192,6 +192,8 @@ _Related_
 
 <a name="getBlocksForSerialization" href="#getBlocksForSerialization">#</a> **getBlocksForSerialization**
 
+> **Deprecated** since Gutenberg 6.2.0.
+
 Returns a set of blocks which are to be used in consideration of the post's
 generated save content.
 
@@ -309,8 +311,7 @@ _Returns_
 
 <a name="getEditedPostContent" href="#getEditedPostContent">#</a> **getEditedPostContent**
 
-Returns the content of the post being edited, preferring raw string edit
-before falling back to serialization of block state.
+Returns the content of the post being edited.
 
 _Parameters_
 
@@ -740,6 +741,7 @@ Return true if the current post has already been published.
 _Parameters_
 
 -   _state_ `Object`: Global application state.
+-   _currentPost_ `?Object`: Explicit current post for bypassing registry selector.
 
 _Returns_
 
@@ -1041,10 +1043,6 @@ _Parameters_
 
 -   _edits_ `Object`: Post attributes to edit.
 
-_Returns_
-
--   `Object`: Action object.
-
 <a name="enablePublishSidebar" href="#enablePublishSidebar">#</a> **enablePublishSidebar**
 
 Returns an action object used in signalling that the user has enabled the
@@ -1178,10 +1176,6 @@ _Related_
 Returns an action object used in signalling that undo history should
 restore last popped state.
 
-_Returns_
-
--   `Object`: Action object.
-
 <a name="refreshPost" href="#refreshPost">#</a> **refreshPost**
 
 Action generator for handling refreshing the current post.
@@ -1240,10 +1234,6 @@ _Parameters_
 -   _blocks_ `Array`: Block Array.
 -   _options_ `?Object`: Optional options.
 
-_Returns_
-
--   `Object`: Action object
-
 <a name="resetPost" href="#resetPost">#</a> **resetPost**
 
 Returns an action object used in signalling that the latest version of the
@@ -1357,10 +1347,6 @@ Action generator for trashing the current post in the editor.
 
 Returns an action object used in signalling that undo history should pop.
 
-_Returns_
-
--   `Object`: Action object.
-
 <a name="unlockPostSaving" href="#unlockPostSaving">#</a> **unlockPostSaving**
 
 Returns an action object used to signal that post saving is unlocked.

docs/designers-developers/developers/data/data-core.md

@@ -217,6 +217,22 @@ _Returns_
 
 -   `?Object`: The entity record's save error.
 
+<a name="getRawEntityRecord" href="#getRawEntityRecord">#</a> **getRawEntityRecord**
+
+Returns the entity's record object by key,
+with its attributes mapped to their raw values.
+
+_Parameters_
+
+-   _state_ `Object`: State tree.
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _key_ `number`: Record's key.
+
+_Returns_
+
+-   `?Object`: Object with the entity's raw attributes.
+
 <a name="getRedoEdit" href="#getRedoEdit">#</a> **getRedoEdit**
 
 Returns the next edit from the current undo offset

lib/blocks.php

@@ -46,6 +46,26 @@ function gutenberg_reregister_core_block_types() {
 }
 add_action( 'init', 'gutenberg_reregister_core_block_types' );
 
+/**
+ * Adds new block categories needed by the Gutenberg plugin.
+ *
+ * @param array $categories List of block categories.
+ *
+ * @return array List of block categories with the new categories added.
+ */
+function gutenberg_filter_block_categories( $categories ) {
+	return array_merge(
+		$categories,
+		array(
+			array(
+				'slug'  => 'theme',
+				'title' => __( 'Theme Blocks', 'gutenberg' ),
+			),
+		)
+	);
+}
+add_filter( 'block_categories', 'gutenberg_filter_block_categories' );
+
 /**
  * Registers a new block style.
  *

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

@@ -691,6 +691,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 		replaceBlocks,
 		toggleSelection,
 		setNavigationMode,
+		__unstableMarkLastChangeAsPersistent,
 	} = dispatch( 'core/block-editor' );
 
 	return {
@@ -744,6 +745,12 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 			}
 		},
 		onReplace( blocks, indexToSelect ) {
+			if (
+				blocks.length &&
+				! isUnmodifiedDefaultBlock( blocks[ blocks.length - 1 ] )
+			) {
+				__unstableMarkLastChangeAsPersistent();
+			}
 			replaceBlocks( [ ownProps.clientId ], blocks, indexToSelect );
 		},
 		onShiftSelection() {

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

@@ -44,7 +44,8 @@ class InnerBlocks extends Component {
 	}
 
 	componentDidMount() {
-		const { innerBlocks } = this.props.block;
+		const { block, value, replaceInnerBlocks } = this.props;
+		const { innerBlocks } = block;
 		// only synchronize innerBlocks with template if innerBlocks are empty or a locking all exists
 		if ( innerBlocks.length === 0 || this.getTemplateLock() === 'all' ) {
 			this.synchronizeBlocksWithTemplate();
@@ -55,10 +56,21 @@ class InnerBlocks extends Component {
 				templateInProcess: false,
 			} );
 		}
+
+		// Set controlled blocks value from parent, if any.
+		if ( value ) {
+			replaceInnerBlocks( value );
+		}
 	}
 
 	componentDidUpdate( prevProps ) {
-		const { template, block } = this.props;
+		const {
+			block,
+			template,
+			isLastBlockChangePersistent,
+			onInput,
+			onChange,
+		} = this.props;
 		const { innerBlocks } = block;
 
 		this.updateNestedSettings();
@@ -69,6 +81,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 );
+			}
+		}
 	}
 
 	/**
@@ -151,6 +171,7 @@ InnerBlocks = compose( [
 			getBlockListSettings,
 			getBlockRootClientId,
 			getTemplateLock,
+			isLastBlockChangePersistent,
 		} = select( 'core/block-editor' );
 		const { clientId } = ownProps;
 		const block = getBlock( clientId );
@@ -161,6 +182,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/index.js

@@ -62,6 +62,11 @@ import * as tagCloud from './tag-cloud';
 
 import * as classic from './classic';
 
+// Custom Entity Blocks
+import * as post from './post';
+import * as postTitle from './post-title';
+import * as postContent from './post-content';
+
 /**
  * Function to register an individual block.
  *
@@ -138,6 +143,11 @@ export const registerCoreBlocks = () => {
 		textColumns,
 		verse,
 		video,
+
+		// Register Custom Entity Blocks.
+		post,
+		postTitle,
+		postContent,
 	].forEach( registerBlock );
 
 	setDefaultBlockName( paragraph.name );

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

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

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

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { useMemo, useCallback } from '@wordpress/element';
+import { parse } from '@wordpress/blocks';
+import { InnerBlocks } from '@wordpress/block-editor';
+import { serializeBlocks } from '@wordpress/editor';
+
+export default function PostContentEdit() {
+	const [ content, setContent ] = useEntityProp( 'post', 'content' );
+	const initialBlocks = useMemo( () => parse( content ), [] );
+	const [ blocks = initialBlocks, setBlocks ] = useEntityProp( 'post', 'blocks' );
+	return (
+		<InnerBlocks
+			value={ blocks }
+			onChange={ setBlocks }
+			onInput={ useCallback( () => {
+				setContent( ( { blocks: blocksForSerialization = [] } ) =>
+					serializeBlocks( blocksForSerialization )
+				);
+			}, [] ) }
+		/>
+	);
+}

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

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

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

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { RichText } from '@wordpress/block-editor';
+import { cleanForSlug } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+
+export default function PostTitleEdit() {
+	const [ title, setTitle ] = useEntityProp( 'post', 'title' );
+	const [ , setSlug ] = useEntityProp( 'post', 'slug' );
+	return (
+		<RichText
+			value={ title }
+			onChange={ ( value ) => {
+				setTitle( value );
+				setSlug( cleanForSlug( value ) );
+			} }
+			tagName="h1"
+			placeholder={ __( 'Title' ) }
+			formattingControls={ [] }
+		/>
+	);
+}

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>
+);

packages/block-library/src/post-title/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 Title' ),
+	icon,
+	edit,
+};

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

@@ -0,0 +1,9 @@
+{
+	"name": "core/post",
+	"category": "theme",
+	"attributes": {
+		"postId": {
+			"type": "number"
+		}
+	}
+}