Nested block editor

[Lovor01]

This is actually developer help question, I asked it at wordpress stack exchange, but without proper answer.

I want to have nested block editor as a 'window' inside another block editor. Parent block editor would serve to edit page content, while nested block editor would serve to edit content of certain custom post type.

This is what I attempted, and editor does appear, but it seems it is not connected with post content. Is it possible to do what I had in mind?

/**
 * Component for entering biography
 */

import { BlockEditorProvider, BlockList, WritingFlow, ObserveTyping } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { useState, useEffect, useSelect } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { EntityProvider, useEntityBlockEditor, useEntityId  } from '@wordpress/core-data';

// const TABLE = 'tla_mit_lecturers_biography';


const BiographyModal = ({ name, showButton, postID, setPostID }) => {
    const [ isOpen, setIsOpen ] = useState(false);
    const [ blocks, onInput, onChange ] = useEntityBlockEditor(
        'postType',
        'biographies',
        { id: postID }
    );
    const retrievedID = useEntityId( 'postType', 'biographies' );
    useEffect(() => setPostID(retrievedID), [retrievedID])
    const editorSettings = {
        allowedBlockTypes: ['core/paragraph']
    }

    const editorInstance =
            // <EntityProvider
            //  kind="postType"
            //  type="biographies"
            //  id={postID}
            // >
                <BlockEditorProvider
                    value={ blocks }
                    onChange={ onChange }
                    onInput={ onInput }
                    // selection={ selection }
                    settings={ editorSettings }
                    useSubRegistry={ true }
                >
                    <WritingFlow>
                        <ObserveTyping>
                            <BlockList />
                        </ObserveTyping>
                    </WritingFlow>
                </BlockEditorProvider>;
            // </EntityProvider>;

    const modal =
        <div className="biography-modal">
            <h3>{ `Životopis ${ name }` }</h3>
            {editorInstance}
            <Button isDefault onClick={ () => setIsOpen(false) }>
                Završi
            </Button>
        </div>;


    return (
        <div className="biography-module">
            {
                (showButton || isOpen) &&
                <Button isDefault disabled={isOpen} onClick={ () => setIsOpen( true ) }>Uredi životopis</Button>
            }
            { isOpen && modal }
        </div>
    )
}

export default BiographyModal;

[talldan]

Seems like it should work, except I don't understand what is happening with this bit:

const retrievedID = useEntityId( 'postType', 'biographies' );
useEffect(() => setPostID(retrievedID), [retrievedID])

Is it needed? I think your component should know what the id is via the prop rather than setting it itself. This might be where it's going wrong.

useEntityId will also only work within an EntityProvider (you'd need a parent component implementing this so that the hook can access the react context).

[Lovor01]

useEffect(() => setPostID(retrievedID), [retrievedID])
PostID is in fact attribute of the block in which this edditor is embedded. This is a part where Id of the custom post type (that is, post in embedded editor - a child post) should be saved in attribute of the containing block of the main post. Namely, upon instancing new embedded editor, ID of the custom post type which this editor creates is not known in advance. This is done to keep ID, so the child custom post type in embedded editor could be retreived again.
In the Edit function of the block in parent post I have this:

			<Biography
				showButton={ isSelected }
				name={ attributes.Name + ' ' + attributes.Lastname }
				postID={ attributes.biographyPostId }
				setPostID={ biographyPostId => setAttributes({ biographyPostId }) }
			/>

[talldan]

It makes sense to store the id in an attribute, much like how a reusable block works with its ref attribute. I personally don't think you need the two lines I mentioned though. useEntityBlockEditor is perfectly happy to work with your attribute value directly and it doesn't need to be updated via a react effect.

As I mentioned, for useEntityId to be useful you need an EntityProvider somewhere higher in the component hierarchy with a matching kind and type. The idea is something like this. Say I'm making a post editor for editing a specific post, I might wrap the whole thing in an EntityProvider:

// postId is 12
<EntityProvider kind="postType" type="post" id={ postId }>
    <Editor />
</EntityProvider>

Somewhere within Editor, say I want to build a component that updates the post title, but I need to know the id of the post. This is where useEntityId comes in useful, it'll return the id of the matching EntityProvider I defined at the root of my editor:

// postId is 12
const postId = useEntityId( 'postType', 'post' );
// ...
<TextControl
    onChange={ ( value ) => editEntityRecord( 'postType', 'post', postId, { title: value } );
    // ...
/>

Without an EntityProvider, useEntityId will return undefined and in your code the effect will immediately set the postID to undefined, and I don't think that's what you want.

What you could do is drop the use of useEntityId and EntityProvider entirely. Alternatively you could just wrap your whole block in an EntityProvider in the edit function, and also not pass an id to useEntityBlockEditor as it'll then work using your EntityProvider id.

[Lovor01]

Ok, I understand my mistake. From what you can see in the code, I attempted placing EntityProvider in the code (now commented out). However, it must be higher in the hierarchy so useEntityId can pull Id from it. I'll try your sollution and many thanks for clearing this out.

[Lovor01]

OK, it works now, however, I am still missing one thing - if post is not created yet, nested editor does not create it upon first save - it has to have post ID in advance? But what if user opens editor and then closes the empty editor - post should not be created immediately? I would like it to function just like main editor - post is created only upon save.
How to solve this?

And another thing - I cannot use main editor's inserter? I must provide separate instance for the nested editor?

[talldan]

I would like it to function just like main editor - post is created only upon save.

I don't really have an answer for this, you'd need to experiment. Most of the examples in Gutenberg now (reusable block, template part) create a post up front. It might be that you can make your block work using a normal implementation of inner blocks until the user wants to save for the first time, at which point you make the entity save the current inner blocks and switch it over to using the entity block editor.

And another thing - I cannot use main editor's inserter? I must provide separate instance for the nested editor?

That should work. Check the reusable block and template part blocks for examples:

• https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/block
• https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/template-part

[Lovor01]

I took another road - creating custom post type, so edit is no longer embedded because of time involved, but I'll sure come back to this, it looks promising and I love idea of nested editors. Thanks for help!