Block Library: Implement Post blocks context client-side.

WordPress · Jan 19, 2020 · 1101065 · 1101065
1 parent ec65bc5
commit 1101065
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 39 deletions.
diff --git a/packages/block-library/src/post-content/block.json b/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"
+	}
 }
diff --git a/packages/block-library/src/post-content/edit.js b/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 } />;
 }
diff --git a/packages/block-library/src/post-title/block.json b/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"
+	}
 }
diff --git a/packages/block-library/src/post-title/edit.js b/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 } />;
 }
diff --git a/packages/block-library/src/post/block.json b/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
+		}
+	}
 }
diff --git a/packages/block-library/src/post/edit/index.js b/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 } />;
 }
diff --git a/packages/block-library/src/post/edit/placeholder.js b/packages/block-library/src/post/edit/placeholder.js
@@ -1,15 +1,15 @@
 /**
  * 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 +21,53 @@ 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 choosePostId = useCallback( () => setAttributes( { postId } ), [ postId ] );
+	const choosePost = useCallback( () => setAttributes( { postType, postId } ), [
+		postType,
+		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>

diff --git a/packages/block-library/src/post/editor.scss b/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%;