Gutenberg编辑器添加自定义类别作为自定义块的包装器

时间：2018-09-29 作者：fefe

正如我们所知，通过Gutenberg提供的API，我们可以创建一个自定义块

const { registerBlockType } = wp.blocks;

registerBlockType( \'my-namespace/my-block\', {

})
但如何在gutenberg editor中围绕自定义块创建包装器（类似类别的布局）？假设我想为我的自定义元素设置一个收集器，如滑块、图库。。。

2 个回复
最合适的回答,由SO网友:fefe 整理而成

深入研究文档，我得到了以下结果。

在古腾堡有一种方法可以围绕给定的类别对自定义块进行分组，因此我们有了该方法block_categories_all. 因此，通过过滤器，您可以使用自定义类别扩展默认类别。

以下是我的示例：

add_filter( \'block_categories_all\', function( $categories, $post ) {
    return array_merge(
        $categories,
        array(
            array(
                \'slug\'  => \'my-slug\',
                \'title\' => \'my-title\',
            ),
        )
    );
}, 10, 2 );
您可以在the provided API.

SO网友:Aamer Shahzad

可以使用block_categories 滤器将代码放入functions.php 或your-plugin.php 文件Explained here in WordPress Gutenberg Handbook

function my_plugin_block_categories( $categories, $post ) {
    if ( $post->post_type !== \'post\' ) {
        return $categories;
    }
    return array_merge(
        $categories,
        array(
            array(
                \'slug\' => \'my-category\',
                \'title\' => __( \'My category\', \'my-plugin\' ),
                \'icon\'  => \'wordpress\',
            ),
        )
    );
}
add_filter( \'block_categories\', \'my_plugin_block_categories\', 10, 2 );
要使用svg图标，可以替换js中的图标。定义您的图标。

const icon = <svg className=\'components-panel__icon\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' aria-hidden=\'true\' role=\'img\' focusable=\'false\' xmlns=\'http://www.w3.org/2000/svg\'>
    <rect fill="#ffffff" x="0" y="0" width="20" height="20"/>
    <rect fill="#1163EB" x="2" y="2" width="16" height="16" rx="16"/>
</svg>;
并使用替换图标updateCategory 功能来自wp.blocks; 正在添加类components-panel__icon 将添加6px 图标左侧的空格。

( function() {
    wp.blocks.updateCategory( \'my-category\', { icon: icon } );
} )();

结束
标签： categories   customization   editor   block-editor   小码农  

相关推荐

清理`wp_EDITOR()；`数据库、编辑和显示的值

我正在使用的自定义实例wp_editor(); 允许对与Post对象关联的Post Meta进行富文本编辑。我想执行与post_content 这些字段的值。Here\'s what I\'ve come up with: 请让我知道这是否是一种可行的方法，或者在这三个步骤中我是否应该做更多的工作，或者是否有更好或更简单的方法。On save_post:$value = wp_filter_post_kses( sanitize_post_field( \'post_content\', $value,