Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FSE: Add entity editor to post content block #22473

Merged
merged 8 commits into from
May 19, 2020
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-library/src/post-content/block.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "core/post-content",
"category": "layout",
"context": [ "postId" ]
"context": [ "postId", "postType" ]
}
25 changes: 17 additions & 8 deletions packages/block-library/src/post-content/edit.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
export default function PostContentEdit() {
return (
<p>
{
'Welcome to WordPress and the wonderful world of blocks. This content represents how a post would look when editing block templates.'
}
</p>
);
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import PostContentInnerBlocks from './inner-blocks';

export default function PostContentEdit( { context: { postId, postType } } ) {
if ( postId && postType ) {
return (
<PostContentInnerBlocks postType={ postType } postId={ postId } />
);
}
return <p>{ __( 'This is a placeholder for post content.' ) }</p>;
}
20 changes: 20 additions & 0 deletions packages/block-library/src/post-content/inner-blocks.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/**
* WordPress dependencies
*/
import { useEntityBlockEditor } from '@wordpress/core-data';
import { InnerBlocks } from '@wordpress/block-editor';

export default function PostContentInnerBlocks( { postType, postId } ) {
const [ blocks, onInput, onChange ] = useEntityBlockEditor(
'postType',
postType,
{ id: postId }
);
return (
<InnerBlocks
value={ blocks }
onInput={ onInput }
onChange={ onChange }
/>
);
}
35 changes: 26 additions & 9 deletions packages/core-data/src/entity-provider.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,19 @@ export function useEntityId( kind, type ) {
* specified property of the nearest provided
* entity of the specified type.
*
* @param {string} kind The entity kind.
* @param {string} type The entity type.
* @param {string} prop The property name.
* @param {string} kind The entity kind.
* @param {string} type The entity type.
* @param {string} prop The property name.
* @param {string} [_id] An entity ID to use instead of the context-provided one.
*
* @return {[*, Function]} A tuple where the first item is the
* property value and the second is the
* setter.
*/
export function useEntityProp( kind, type, prop ) {
const id = useEntityId( kind, type );
export function useEntityProp( kind, type, prop, _id ) {
const providerId = useEntityId( kind, type );
const id = _id || providerId;
noahtallen marked this conversation as resolved.
Show resolved Hide resolved

const { value, fullValue } = useSelect(
( select ) => {
const { getEntityRecord, getEditedEntityRecord } = select( 'core' );
Expand Down Expand Up @@ -128,18 +131,31 @@ export function useEntityProp( kind, type, prop ) {
* @param {Object} [options.initialEdits] Initial edits object for the entity record.
* @param {string} [options.blocksProp='blocks'] The name of the entity prop that holds the blocks array.
* @param {string} [options.contentProp='content'] The name of the entity prop that holds the serialized blocks.
* @param {string} [options.id] An entity ID to use instead of the context-provided one.
*
* @return {[WPBlock[], Function, Function]} The block array and setters.
*/
export function useEntityBlockEditor(
noahtallen marked this conversation as resolved.
Show resolved Hide resolved
kind,
type,
{ initialEdits, blocksProp = 'blocks', contentProp = 'content' } = {}
{
initialEdits,
blocksProp = 'blocks',
contentProp = 'content',
id: _id,
} = {}
) {
const [ content, setContent ] = useEntityProp( kind, type, contentProp );
const providerId = useEntityId( kind, type );
const id = _id || providerId;
noahtallen marked this conversation as resolved.
Show resolved Hide resolved

const [ content, setContent ] = useEntityProp(
kind,
type,
contentProp,
id
);

const { editEntityRecord } = useDispatch( 'core' );
const id = useEntityId( kind, type );
const initialBlocks = useMemo( () => {
if ( initialEdits ) {
editEntityRecord( kind, type, id, initialEdits, {
Expand All @@ -157,7 +173,8 @@ export function useEntityBlockEditor(
const [ blocks = initialBlocks, onInput ] = useEntityProp(
kind,
type,
blocksProp
blocksProp,
id
);

const onChange = useCallback(
Expand Down