Block Library: Implement Post block and Post blocks editing.

lib/blocks.php

@@ -32,6 +32,7 @@ function gutenberg_reregister_core_block_types() {
 		'tag-cloud.php'           => 'core/tag-cloud',
 		'site-title.php'          => 'core/site-title',
 		'template-part.php'       => 'core/template-part',
+		'post.php'                => 'core/post',
 		'post-title.php'          => 'core/post-title',
 		'post-content.php'        => 'core/post-content',
 		'post-author.php'         => 'core/post-author',

lib/compat.php

@@ -125,3 +125,75 @@ function gutenberg_get_post_from_context() {
 	}
 	return get_post();
 }
+
+/**
+ * Shim that hooks into `pre_render_block` so as to override `render_block`
+ * with a function that passes `render_callback` the block object as an
+ * argument and adds support for block context attributes.
+ *
+ * @param string $pre_render The pre-rendered content. Defaults to null.
+ * @param array  $block      The block being rendered.
+ * @param array  $context    The block context.
+ *
+ * @return string String of rendered HTML.
+ */
+function gutenberg_provide_render_callback_with_block_object( $pre_render, $block, $context = array() ) {
+	global $post;
+
+	$source_block = $block;
+	/** This filter is documented in src/wp-includes/blocks.php */
+	$block         = apply_filters( 'render_block_data', $block, $source_block );
+	$block_type    = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	$is_dynamic    = $block['blockName'] && null !== $block_type && $block_type->is_dynamic();
+	$block_content = '';
+	$index         = 0;
+
+	if ( ! is_array( $block['attrs'] ) ) {
+		$block['attrs'] = array();
+	}
+
+	$block['context'] = array();
+	$next_context     = $context;
+	if ( $block_type ) {
+		if ( isset( $block_type->context ) ) {
+			foreach ( $block_type->context as $attribute_name => $block_names ) {
+				$block_names = is_array( $block_names ) ? $block_names : array( $block_names );
+				foreach ( $block_names as $block_name ) {
+					if ( isset( $context[ $block_name ][ $attribute_name ] ) ) {
+						$block['context'][ $attribute_name ] = $context[ $block_name ][ $attribute_name ];
+					}
+				}
+			}
+		}
+		if ( isset( $block_type->attributes ) ) {
+			foreach ( $block_type->attributes as $attribute_name => $attribute_config ) {
+				if ( isset( $attribute_config['context'] ) && $attribute_config['context'] && isset( $block['attrs'][ $attribute_name ] ) ) {
+					if ( ! isset( $next_context[ $block['blockName'] ] ) ) {
+						$next_context[ $block['blockName'] ] = array();
+					}
+					$next_context[ $block['blockName'] ][ $attribute_name ] = $block['attrs'][ $attribute_name ];
+				}
+			}
+		}
+	}
+
+	foreach ( $block['innerContent'] as $chunk ) {
+		if ( is_string( $chunk ) ) {
+			$block_content .= $chunk;
+		} else {
+			$inner_block    = $block['innerBlocks'][ $index++ ];
+			$block_content .= gutenberg_provide_render_callback_with_block_object( null, $inner_block, $next_context );
+		}
+	}
+
+	if ( $is_dynamic ) {
+		$global_post = $post;
+
+		$prepared_attributes = $block_type->prepare_attributes_for_render( $block['attrs'] );
+		$block_content       = (string) call_user_func( $block_type->render_callback, $prepared_attributes, $block_content, $block );
+		$post                = $global_post;
+	}
+	/** This filter is documented in src/wp-includes/blocks.php */
+	return apply_filters( 'render_block', $block_content, $block );
+}
+add_filter( 'pre_render_block', 'gutenberg_provide_render_callback_with_block_object', 10, 2 );

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

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import { castArray } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext, useMemo } from '@wordpress/element';
+
+const context = {};
+const getContext = ( blockName, attributeName ) => {
+	if ( ! context[ blockName ] ) {
+		context[ blockName ] = {};
+	}
+	if ( ! context[ blockName ][ attributeName ] ) {
+		context[ blockName ][ attributeName ] = createContext();
+	}
+	return context[ blockName ][ attributeName ];
+};
+
+function Providers( { blockType, blockAttributes, children } ) {
+	if ( blockType ) {
+		for ( const [ attributeName, attributeConfig ] of Object.entries(
+			blockType.attributes
+		) ) {
+			if (
+				attributeConfig.context &&
+				blockAttributes[ attributeName ] !== undefined
+			) {
+				const Provider = getContext( blockType.name, attributeName )
+					.Provider;
+				children = (
+					<Provider value={ blockAttributes[ attributeName ] }>
+						{ children }
+					</Provider>
+				);
+			}
+		}
+	}
+
+	return children;
+}
+
+function BlockContext( {
+	blockType,
+	blockAttributes,
+	Component,
+	...componentProps
+} ) {
+	const blockContext = {};
+	if ( blockType.context ) {
+		for ( const [ attributeName, blockNameOrBlockNames ] of Object.entries(
+			blockType.context
+		) ) {
+			const blockNames = castArray( blockNameOrBlockNames );
+			for ( const blockName of blockNames ) {
+				// eslint-disable-next-line react-hooks/rules-of-hooks
+				const contextValue = useContext(
+					getContext( blockName, attributeName )
+				);
+				if ( contextValue !== undefined ) {
+					blockContext[ attributeName ] = contextValue;
+				}
+			}
+		}
+	}
+	return (
+		<Providers blockType={ blockType } blockAttributes={ blockAttributes }>
+			<Component
+				{ ...componentProps }
+				context={ useMemo(
+					() => blockContext,
+					Object.values( blockContext )
+				) }
+			/>
+		</Providers>
+	);
+}
+BlockContext.Providers = Providers;
+export default BlockContext;

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

@@ -24,6 +24,7 @@ import { compose, pure, ifCondition } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import _BlockContext from './block-context';
 import BlockEdit from '../block-edit';
 import BlockInvalidWarning from './block-invalid-warning';
 import BlockCrashWarning from './block-crash-warning';
@@ -130,7 +131,10 @@ function BlockListBlock( {
 	// (InspectorControls, etc.) which are inside `BlockEdit` but not
 	// `BlockHTML`, even in HTML mode.
 	let blockEdit = (
-		<BlockEdit
+		<_BlockContext
+			blockType={ blockType }
+			blockAttributes={ attributes }
+			Component={ BlockEdit }
 			name={ name }
 			isSelected={ isSelected }
 			attributes={ attributes }

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

@@ -16,6 +16,7 @@ import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
 import RootContainer from './root-container';
 import useBlockDropZone from '../block-drop-zone';
+import BlockContext from './block-context';
 
 /**
  * If the block count exceeds the threshold, we disable the reordering animation
@@ -129,11 +130,13 @@ const ForwardedBlockList = forwardRef( BlockList );
 // This component needs to always be synchronous
 // as it's the one changing the async mode
 // depending on the block selection.
-export default forwardRef( ( props, ref ) => {
+BlockList = forwardRef( ( props, ref ) => {
 	const fallbackRef = useRef();
 	return (
 		<AsyncModeProvider value={ false }>
 			<ForwardedBlockList ref={ ref || fallbackRef } { ...props } />
 		</AsyncModeProvider>
 	);
 } );
+BlockList.BlockContext = BlockContext;
+export default BlockList;

packages/block-library/src/editor.scss

@@ -28,6 +28,7 @@
 @import "./navigation-link/editor.scss";
 @import "./nextpage/editor.scss";
 @import "./paragraph/editor.scss";
+@import "./post/editor.scss";
 @import "./post-excerpt/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./quote/editor.scss";

packages/block-library/src/index.js

@@ -65,6 +65,7 @@ import * as socialLink from './social-link';
 // Full Site Editing Blocks
 import * as siteTitle from './site-title';
 import * as templatePart from './template-part';
+import * as post from './post';
 import * as postTitle from './post-title';
 import * as postContent from './post-content';
 import * as postAuthor from './post-author';
@@ -197,6 +198,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 						? [
 								siteTitle,
 								templatePart,
+								post,
 								postTitle,
 								postContent,
 								postAuthor,

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

@@ -1,4 +1,8 @@
 {
 	"name": "core/post-content",
-	"category": "layout"
+	"category": "layout",
+	"context": {
+		"postType": "core/post",
+		"postId": "core/post"
+	}
 }

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

@@ -1,9 +1,30 @@
-export default function PostContentEdit() {
+/**
+ * WordPress dependencies
+ */
+import { useEntityBlockEditor } from '@wordpress/core-data';
+import { InnerBlocks } from '@wordpress/block-editor';
+
+function PostContentInnerBlocks( { postType, postId } ) {
+	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		postType,
+		{
+			id: postId,
+		}
+	);
 	return (
-		<p>
-			{
-				'Welcome to WordPress and the wonderful world of blocks. This content represents how a post would look when editing block templates.'
-			}
-		</p>
+		<InnerBlocks
+			__experimentalBlocks={ blocks }
+			onInput={ onInput }
+			onChange={ onChange }
+		/>
 	);
 }
+
+export default function PostContentEdit( { context: { postType, postId } } ) {
+	if ( ! postType || ! postId ) {
+		return 'Post Content Placeholder';
+	}
+
+	return <PostContentInnerBlocks postType={ postType } postId={ postId } />;
+}

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

@@ -8,16 +8,20 @@
 /**
  * Renders the `core/post-content` block on the server.
  *
+ * @param array $attributes The block attributes.
+ * @param array $content    The saved content.
+ * @param array $block      The parsed block.
+ *
  * @return string Returns the filtered post content of the current post.
  */
-function render_block_core_post_content() {
-	$post = gutenberg_get_post_from_context();
+function render_block_core_post_content( $attributes, $content, $block ) {
+	$post = isset( $block['context']['postId'] ) ? $block['context']['postId'] : gutenberg_get_post_from_context();
 	if ( ! $post ) {
 		return '';
 	}
 	return (
 		'<div class="entry-content">' .
-			apply_filters( 'the_content', str_replace( ']]>', ']]&gt;', get_the_content( $post ) ) ) .
+			apply_filters( 'the_content', str_replace( ']]>', ']]&gt;', get_the_content( null, false, $post ) ) ) .
 		'</div>'
 	);
 }
@@ -34,6 +38,10 @@ function register_block_core_post_content() {
 		array_merge(
 			$metadata,
 			array(
+				'context'         => array(
+					'postType' => 'core/post',
+					'postId'   => 'core/post',
+				),
 				'render_callback' => 'render_block_core_post_content',
 			)
 		)

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

@@ -1,4 +1,8 @@
 {
 	"name": "core/post-title",
-	"category": "layout"
+	"category": "layout",
+	"context": {
+		"postType": "core/post",
+		"postId": "core/post"
+	}
 }

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

@@ -1,3 +1,32 @@
-export default function PostTitleEdit() {
-	return <h2>{ 'Hello world!' }</h2>;
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { RichText } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+function PostTitleInput( { postType, postId } ) {
+	const [ title, setTitle ] = useEntityProp(
+		'postType',
+		postType,
+		'title',
+		postId
+	);
+	return (
+		<RichText
+			tagName="h2"
+			placeholder={ __( 'Post Title' ) }
+			value={ title }
+			onChange={ setTitle }
+			allowedFormats={ [] }
+		/>
+	);
+}
+
+export default function PostTitleEdit( { context: { postType, postId } } ) {
+	if ( ! postType || ! postId ) {
+		return 'Post Title Placeholder';
+	}
+
+	return <PostTitleInput postType={ postType } postId={ postId } />;
 }

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

@@ -8,10 +8,14 @@
 /**
  * Renders the `core/post-title` block on the server.
  *
+ * @param array $attributes The block attributes.
+ * @param array $content    The saved content.
+ * @param array $block      The parsed block.
+ *
  * @return string Returns the filtered post title for the current post wrapped inside "h1" tags.
  */
-function render_block_core_post_title() {
-	$post = gutenberg_get_post_from_context();
+function render_block_core_post_title( $attributes, $content, $block ) {
+	$post = isset( $block['context']['postId'] ) ? $block['context']['postId'] : gutenberg_get_post_from_context();
 	if ( ! $post ) {
 		return '';
 	}
@@ -30,6 +34,10 @@ function register_block_core_post_title() {
 		array_merge(
 			$metadata,
 			array(
+				'context'         => array(
+					'postType' => 'core/post',
+					'postId'   => 'core/post',
+				),
 				'render_callback' => 'render_block_core_post_title',
 			)
 		)