Wordpress Гутенберг редактировать существующий контент в редакторе Гутенберга

Question

Вот мой пошаговый сценарий:

1. Создание нескольких постов с использованием Гутенберга, которые могут включать блоки любого типа / элементы
2. Создание страницы с использованием Гутенберга
3. Создайте пользовательский виджет (называемый load-post-widget) в Гутенберге, который при загрузке будет извлекать контент поста из существующих постов, отображаемых на странице.
4. Загрузка load-post-widget, загружающая контент поста, ДОЛЖНА быть редактируемый, как и любой другой контент поста, в режиме редактора Гутенберга.

Однако я не могу редактировать выбранный контент поста с помощью «load-post-widget», думаю, я не уверен, как вернуть содержимое сообщения, чтобы Гутенберг рассматривал его как редактируемую форму. Пожалуйста, помогите.

Qn: Как я могу представить любой post.content.raw как элемент реагирования, который можно редактировать с помощью Гутенберга.

Вот пример кода как на шаге 3:

registerBlockType( 'test/load-post-widget', {
    title: 'Load Post Widget',
    icon: 'smiley',
    category: 'widgets',

    edit: withSelect((select) => {
            return {  posts: select('core').getEntityRecords('postType', 'post')};
        })(({ posts, className }) => {
        if ( ! posts ) {
            return 'Loading...';
        }
        if ( posts && posts.length === 0 ) {
            return 'No posts';
        }
        let post = posts[0]; // hard coded as of now.

        // Option 1: This does not make the rendered post content/blocks editable
        return <div dangerouslySetInnerHTML={ { __html: post.content.raw } }></div> 
    } ),
} );

Answer 1

Легко, но понадобилось много времени, чтобы понять это! (скрыто в тысячах документов API в wp)

import {
    registerBlockType,
    parse,
    parseWithAttributeSchema,
    pasteHandler,
    rawHandler
} from '@wordpress/blocks';

apiFetch({ path: 'wp/v2/posts/${offerId}' }).then(postResponse => {
                console.log(' POSTS LIST :: ', postResponse);
                const htmlStr = postResponse.content.rendered;
                const blocks = pasteHandler({ plainText: htmlStr,  mode: 'AUTO', canUserUseUnfilteredHTML: true });
                wp.data.dispatch('core/editor').insertBlocks(blocks, 1, self.props.clientId);
            });