Block Library: Implement Post blocks context client-side.

lib/compat.php

@@ -177,7 +177,7 @@ function gutenberg_provide_render_callback_with_block_object( $pre_render, $bloc
 		}
 		if ( isset( $block_type->attributes ) ) {
 			foreach ( $block_type->attributes as $attribute_name => $attribute_config ) {
-				if ( $attribute_config['context'] && isset( $block['attrs'][ $attribute_name ] ) ) {
+				if ( isset( $attribute_config['context'] ) && $attribute_config['context'] && isset( $block['attrs'][ $attribute_name ] ) ) {
 					if ( ! isset( $next_context[ $block['blockName'] ] ) ) {
 						$next_context[ $block['blockName'] ] = array();
 					}

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

@@ -27,9 +27,12 @@ function Providers( { blockType, blockAttributes, children } ) {
 			attributeConfig.context &&
 			blockAttributes[ attributeName ] !== undefined
 		) {
-			const Provider = getContext( blockType.name, attributeName ).Provider;
+			const Provider = getContext( blockType.name, attributeName )
+				.Provider;
 			children = (
-				<Provider value={ blockAttributes[ attributeName ] }>{ children }</Provider>
+				<Provider value={ blockAttributes[ attributeName ] }>
+					{ children }
+				</Provider>
 			);
 		}
 	}
@@ -49,7 +52,9 @@ function BlockContext( {
 			const blockNames = castArray( blockNameOrBlockNames );
 			for ( const blockName of blockNames ) {
 				// eslint-disable-next-line react-hooks/rules-of-hooks
-				const contextValue = useContext( getContext( blockName, attributeName ) );
+				const contextValue = useContext(
+					getContext( blockName, attributeName )
+				);
 				if ( contextValue !== undefined ) {
 					blockContext[ attributeName ] = contextValue;
 				}
@@ -60,7 +65,10 @@ function BlockContext( {
 		<Providers blockType={ blockType } blockAttributes={ blockAttributes }>
 			<Component
 				{ ...componentProps }
-				context={ useMemo( () => blockContext, Object.values( blockContext ) ) }
+				context={ useMemo(
+					() => blockContext,
+					Object.values( blockContext )
+				) }
 			/>
 		</Providers>
 	);

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

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

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,11 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useEntityBlockEditor, useEntityId } from '@wordpress/core-data';
+import { useEntityBlockEditor } from '@wordpress/core-data';
 import { InnerBlocks } from '@wordpress/block-editor';
 
-function PostContentInnerBlocks() {
-	const [ blocks, onInput, onChange ] = useEntityBlockEditor( 'postType', 'post' );
+function PostContentInnerBlocks( { postType, postId } ) {
+	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		postType,
+		{
+			id: postId,
+		}
+	);
 	return (
 		<InnerBlocks
 			__experimentalBlocks={ blocks }
@@ -15,9 +21,9 @@ function PostContentInnerBlocks() {
 	);
 }
 
-export default function PostContentEdit() {
-	if ( ! useEntityId( 'postType', 'post' ) ) {
+export default function PostContentEdit( { context: { postType, postId } } ) {
+	if ( ! postType || ! postId ) {
 		return 'Post Content Placeholder';
 	}
-	return <PostContentInnerBlocks />;
+	return <PostContentInnerBlocks postType={ postType } postId={ postId } />;
 }

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,12 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useEntityProp, useEntityId } from '@wordpress/core-data';
+import { useEntityProp } from '@wordpress/core-data';
 import { RichText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
-function PostTitleInput() {
-	const [ title, setTitle ] = useEntityProp( 'postType', 'post', 'title' );
+function PostTitleInput( { postType, postId } ) {
+	const [ title, setTitle ] = useEntityProp(
+		'postType',
+		postType,
+		'title',
+		postId
+	);
 	return (
 		<RichText
 			tagName="h2"
@@ -18,9 +23,9 @@ function PostTitleInput() {
 	);
 }
 
-export default function PostTitleEdit() {
-	if ( ! useEntityId( 'postType', 'post' ) ) {
+export default function PostTitleEdit( { context: { postType, postId } } ) {
+	if ( ! postType || ! postId ) {
 		return 'Post Title Placeholder';
 	}
-	return <PostTitleInput />;
+	return <PostTitleInput postType={ postType } postId={ postId } />;
 }

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

@@ -1,4 +1,14 @@
 {
 	"name": "core/post",
-	"category": "layout"
+	"category": "layout",
+	"attributes": {
+		"postType": {
+			"type": "string",
+			"context": true
+		},
+		"postId": {
+			"type": "string",
+			"context": true
+		}
+	}
 }

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

@@ -2,35 +2,33 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { EntityProvider } from '@wordpress/core-data';
 import { InnerBlocks } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import PostPlaceholder from './placeholder';
 
-export default function PostEdit( { attributes: { postId }, setAttributes } ) {
+export default function PostEdit( {
+	attributes: { postType, postId },
+	setAttributes,
+} ) {
 	const loaded = useSelect(
 		( select ) => {
-			if ( ! postId ) {
+			if ( ! postType || ! postId ) {
 				return false;
 			}
 			return Boolean(
-				select( 'core' ).getEntityRecord( 'postType', 'post', postId )
+				select( 'core' ).getEntityRecord( 'postType', postType, postId )
 			);
 		},
-		[ postId ]
+		[ postType, postId ]
 	);
-	if ( postId ) {
+	if ( postType && postId ) {
 		if ( ! loaded ) {
 			return null;
 		}
-		return (
-			<EntityProvider kind="postType" type="post" id={ postId }>
-				<InnerBlocks />
-			</EntityProvider>
-		);
+		return <InnerBlocks />;
 	}
 	return <PostPlaceholder setAttributes={ setAttributes } />;
 }

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

@@ -1,15 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useEntityBlockEditor, EntityProvider } from '@wordpress/core-data';
+import { useEntityBlockEditor } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { BlockPreview } from '@wordpress/block-editor';
 import { useState, useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { Placeholder, TextControl, Button } from '@wordpress/components';
 
-function PostPreview() {
-	const [ blocks ] = useEntityBlockEditor( 'postType', 'post' );
+function PostPreview( { postType, postId } ) {
+	const [ blocks ] = useEntityBlockEditor( 'postType', postType, {
+		id: postId,
+	} );
 	return (
 		<div className="wp-block-post__placeholder-preview">
 			<div className="wp-block-post__placeholder-preview-title">
@@ -21,41 +23,57 @@ function PostPreview() {
 }
 
 export default function PostPlaceholder( { setAttributes } ) {
+	const [ postType, setPostType ] = useState( 'post' );
 	const [ postId, setPostId ] = useState();
 	const preview = useSelect(
 		( select ) => {
-			if ( ! postId ) {
+			if ( ! postType || ! postId ) {
 				return null;
 			}
-			const post = select( 'core' ).getEntityRecord( 'postType', 'post', postId );
+			const post = select( 'core' ).getEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
 			if ( post ) {
-				return (
-					<EntityProvider kind="postType" type="post" id={ postId }>
-						<PostPreview />
-					</EntityProvider>
-				);
+				return <PostPreview postType={ postType } postId={ postId } />;
 			}
 		},
-		[ postId ]
+		[ postType, postId ]
+	);
+	const choosePost = useCallback(
+		() => setAttributes( { postType, postId } ),
+		[ postType, postId ]
 	);
-	const choosePostId = useCallback( () => setAttributes( { postId } ), [ postId ] );
 	return (
 		<Placeholder
 			icon="media-document"
 			label={ __( 'Post' ) }
 			instructions={ __( 'Choose a post by post ID.' ) }
 		>
 			<div className="wp-block-post__placeholder-input-container">
+				<TextControl
+					label={ __( 'Post Type' ) }
+					placeholder={ __( 'post' ) }
+					value={ postType }
+					onChange={ setPostType }
+					className="wp-block-post__placeholder-input"
+				/>
 				<TextControl
 					label={ __( 'Post ID' ) }
 					placeholder={ __( '1' ) }
 					value={ postId }
 					onChange={ setPostId }
 					help={ preview === undefined && __( 'Post not found.' ) }
+					className="wp-block-post__placeholder-input"
 				/>
 			</div>
 			{ preview }
-			<Button isPrimary disabled={ ! postId || ! preview } onClick={ choosePostId }>
+			<Button
+				isPrimary
+				disabled={ ! postType || ! postId || ! preview }
+				onClick={ choosePost }
+			>
 				{ __( 'Choose' ) }
 			</Button>
 		</Placeholder>

packages/block-library/src/post/editor.scss

@@ -4,6 +4,10 @@
 	width: 100%;
 }
 
+.wp-block-post__placeholder-input {
+	margin: 5px;
+}
+
 .wp-block-post__placeholder-preview {
 	margin-bottom: 15px;
 	width: 100%;