删除块编辑器中的块样式

时间：2019-11-14 作者：Christine Cooper

块编辑器最近引入了块样式，如下所示：

如何禁用这些？

3 个回复

最合适的回答,由SO网友:Christine Cooper 整理而成

我们首先通过以下方式找出存在哪些块样式.getBlockTypes(). 这会将其转储到控制台：

wp.domReady(() => {
    // find blocks styles
    wp.blocks.getBlockTypes().forEach((block) => {
        if (_.isArray(block[\'styles\'])) {
            console.log(block.name, _.pluck(block[\'styles\'], \'name\'));
        }
    });
});

输出示例：

core/image (2) ["default", "rounded"]
core/quote (2) ["default", "large"]
core/button (2) ["fill", "outline"]
core/pullquote (2) ["default", "solid-color"]
core/separator (3) ["default", "wide", "dots"]
core/table (2) ["regular", "stripes"]
core/social-links (3) ["default", "logos-only", "pill-shape"]

有了这些信息，我们可以根据需要停用块样式。例如，如果要删除large 报价样式，我们可以在remove-block-styles.js:

wp.domReady(() => {
    wp.blocks.unregisterBlockStyle(\'core/quote\', \'large\');
} );

我们可以加载remove-block-styles.js 在主题中functions.php:

function remove_block_style() {
    // Register the block editor script.
    wp_register_script( \'remove-block-style\', get_stylesheet_directory_uri() . \'/remove-block-styles.js\', [ \'wp-blocks\', \'wp-edit-post\' ] );
    // register block editor script.
    register_block_type( \'remove/block-style\', [
        \'editor_script\' => \'remove-block-style\',
    ] );
}
add_action( \'init\', \'remove_block_style\' );

如果要删除所有块样式（如上所列），可以使用：

wp.domReady(() => {
    // image
    wp.blocks.unregisterBlockStyle(\'core/image\', \'rounded\');
    wp.blocks.unregisterBlockStyle(\'core/image\', \'default\');
    // quote
    wp.blocks.unregisterBlockStyle(\'core/quote\', \'default\');
    wp.blocks.unregisterBlockStyle(\'core/quote\', \'large\');
    // button
    wp.blocks.unregisterBlockStyle(\'core/button\', \'fill\');
    wp.blocks.unregisterBlockStyle(\'core/button\', \'outline\');
    // pullquote
    wp.blocks.unregisterBlockStyle(\'core/pullquote\', \'default\');
    wp.blocks.unregisterBlockStyle(\'core/pullquote\', \'solid-color\');
    // separator
    wp.blocks.unregisterBlockStyle(\'core/separator\', \'default\');
    wp.blocks.unregisterBlockStyle(\'core/separator\', \'wide\');
    wp.blocks.unregisterBlockStyle(\'core/separator\', \'dots\');
    // table
    wp.blocks.unregisterBlockStyle(\'core/table\', \'regular\');
    wp.blocks.unregisterBlockStyle(\'core/table\', \'stripes\');
    // social-links
    wp.blocks.unregisterBlockStyle(\'core/social-links\', \'default\');
    wp.blocks.unregisterBlockStyle(\'core/social-links\', \'logos-only\');
    wp.blocks.unregisterBlockStyle(\'core/social-links\', \'pill-shape\');
} );

主要学分至Per Søderlind 对于代码段。

SO网友:benpalmer

现在已更改为

wp.blocks.unregisterBlockStyle(\'core/image\', \'rounded\');

必须爱那些核心人物；）

SO网友:kraftner

The answer from Christine 已经让您走得很远了，但我看到了两种改进方法：

帮助您获取块样式列表的代码段仅列出块的默认样式，而不是当前注册的样式。因此，如果其他插件/代码添加了更多样式，那么它们将被忽略

1。获取块样式的真实当前列表：

_.forEach(wp.blocks.getBlockTypes(), function(blockType){
    let blockStyles = wp.data.select(\'core/blocks\').getBlockStyles(blockType.name);
    if(!_.isEmpty(blockStyles)){
        console.log(blockType.name, _.pluck(blockStyles, \'name\'));
    }
});

2。全部删除

_.forEach(wp.blocks.getBlockTypes(), function(blockType){
    let blockStyles = wp.data.select(\'core/blocks\').getBlockStyles(blockType.name);
    if(!_.isEmpty(blockStyles)){
        _.forEach(_.pluck(blockStyles, \'name\'), function(blockStyle){
                wp.blocks.unregisterBlockStyle(blockType.name, blockStyle);
        });        
    }
});

当然，你可以通过允许/不允许列表或任何其他需要的逻辑从这里获得更多创意，但我将把这作为练习留给读者

小码农CODE

删除块编辑器中的块样式

1。获取块样式的真实当前列表：

2。全部删除

相关推荐