来自 JSON 的古腾堡块渲染

Question

我正在尝试通过插件制作自定义古腾堡块。一切都很顺利，唯一的问题是当我从块菜单中 select 我的块时，它只是将 JSON 粘贴在前面。我更想要的是渲染这个 JSON 来制作方块。

我正在从 API 中获取块的内容。我也附上了我的代码。

function makeBlock(block, category){
    var jsonBlock = {
        "__file": "wp_export",
        "version": 2,
        "content": ""}
        ;
    $.ajax({
        type: "POST",
        url: document.location.origin+"/blocknets/wp-admin/admin-ajax.php",
        data: { 
            'action': 'makeBlocks',
            'id': block.id
        },
        dataType: "json",
        encode: true,
    }).done(function (resp) {
        // console.log(resp);
        jsonBlock.content = resp.data.content;
    });




    ( function ( blocks, element, data, blockEditor ) {
        var el = element.createElement,
            registerBlockType = blocks.registerBlockType,
            useSelect = data.useSelect,
            useBlockProps = blockEditor.useBlockProps;
    //  debugger;
        registerBlockType( 'custom-blocks/'+category+'-'+block.id, {
            apiVersion: 2,
            title: block.name,
            icon: 'megaphone',
            category: category,
            edit: ()=>{return jsonBlock.content},
            save: () => null
        } );
    } )(
        window.wp.blocks,
        window.wp.element,
        window.wp.data,
        window.wp.blockEditor
    );
}

紫色突出显示的是我的插件，黄色是它打印出来的内容。

我更想渲染这个 JSON。如果我只是将此 JSON 粘贴到代码编辑器中，它将如下所示。

谁能帮帮我？

Answer 1

编辑器视图中显示的jsonBlock.content是序列化的块内容。第一步是使用 React 中常见的 parse() to transform the content into valid blocks. Next, to render the blocks I found RawHTML can be used to render innerHTML from the block content. The <RawHTML/> component uses dangerouslySetInnerHTML 来渲染内部 HTML 内容。例如：

编辑()

const { parse } = wp.blockSerializationDefaultParser;
const { RawHTML } = wp.element;

export default function Edit({ attributes, setAttributes }) {

    // Example of serialized block content to mimic resp.data.content data
    var content = "<!-- wp:paragraph --><p>paragraph one</p><!-- /wp:paragraph --><!-- wp:paragraph --><p>then two</p><!-- /wp:paragraph -->";

    // Parse the serialized content into valid blocks using parse from @wordpress/block-serialization-default-parser
    var blocks = parse(content);

    // Iterate over each block to render innerHTML within RawHTML that sets up dangerouslySetInnerHTML for you..
    return blocks.map((block, index) => <RawHTML key={index}>{block.innerHTML}</RawHTML>);
}

铌。该示例包括在编辑器中解析和显示块内容，它不包括保存内容，因为您现有的 save() 函数设置为 null。

Answer 2

我能够使用以下编辑功能渲染所有块：

    edit: ()=>{
      window.wp.data.dispatch( 'core/block-editor' ).insertBlocks( window.wp.blocks.parse( jsonBlock.content));
      return null;
    }

来自 JSON 的古腾堡块渲染

Gutenberg Block Rendering from JSON

wordpress

wordpress-gutenberg

gutenberg-blocks