javascript - 如何使用 wp-blocks api 将原始 html 转换/解析为 wp gutenberg block ？

Question

我在准备帖子数据以将其导入网站时遇到了困难。我想将所有原始 html 转换为 gutenberg 就绪 block (如 <!--wp:paragraph--> <p>hello world</p> <!--/wp:paragraph--> )，以避免每个帖子的手动转换。现在发生了什么:

注册处理程序脚本和依赖项 - wp_enqueue_script( 'filter', get_template_directory_uri() . '/js/article-filter.js', array('jquery', 'wp-blocks', 'wp-element'));

调用 rawHandler/pasteHandler - var gutblock = wp.blocks.rawHandler({
HTML: '<p class="content">Hello world </p>'
});

出现错误 - Cannot read property 'attributes' of undefined也许我在主要概念上被误解了或者做错了什么。

非常感谢您的帮助。

Answer 1

有一个小的辅助函数，它首先将原始 HTML 转换为 gutenberg block ，然后将其序列化为 gutenberg 就绪的帖子内容。

查询脚本

function load_admin_resources_footer() {
    wp_enqueue_script( 'filter', get_template_directory_uri() . '/js/article-filter.js', array('jquery', 'wp-blocks', 'wp-edit-post'));
}
add_action('admin_footer', 'load_admin_resources_footer');

转换为 block

var editholdy_is_activate = false;
function convert_to_gutenberg(content, remove_spaces = false) { // "'wp-blocks', 'wp-edit-post'" - should be setted as current script dependecies

    // initiate all built-in gutenberg blocks
    if (!editholdy_is_activate) {
        $('<div />').attr('id', 'editholdy').attr('style', 'display: none').appendTo('body');
            wp.editPost.initializeEditor('editholdy');
            editholdy_is_activate = true;
    }

    var gutblock = wp.blocks.rawHandler({ 
        HTML:  content,
    });

    var serelized = wp.blocks.serialize(gutblock);
    serelized = (remove_spaces) ? serelized.replace(/(\n|\r)/g, '') : serelized;

    return serelized;

}