Question

准备发布数据以将其导入网站时，我遇到了困难。我想将所有原始html转换为gutenberg准备好的块（例如 <p>hello world</p> ），以避免为每个帖子手动进行转换。现在发生了什么：

注册处理程序脚本和依赖项-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（实际上html并不是html的输出），然后将其粘贴到Gutenberg编辑器中。古腾堡将照顾自己的解析。

Gutenberg还提供了其他功能，其中支持从MS Word文档复制粘贴。

Answer 2

有一个小的助手功能，它首先将原始HTML转换为gutenberg块，然后将其序列化为可用于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');

转换为块

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;

}

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

2 个答案: