在块编辑器中删除面板(元框)

时间：2019-06-03 作者：Christine Cooper

当Block Editor 被添加到WordPress中，自定义和核心元框成为传统，即使用remove_meta_box() 删除编辑后屏幕上显示的元框/面板时，此功能不起作用。

那么，我们如何删除Excerpt 无法使用时的面板remove_meta_box() 不再

4 个回复

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

这个remove_meta_box() 该函数将不会与块编辑器一起使用，因为它们现在是面板，工作方式不同。目前没有关于如何禁用面板的文档，但是，让我们跳舞吧。

我们希望避免通过CSS隐藏面板，并依赖JSAPI。

我们需要使用JS函数removeEditorPanel() 将完全移除面板及其所有控件：

// remove excerpt panel
wp.data.dispatch( \'core/edit-post\').removeEditorPanel( \'post-excerpt\' );

以下是面板ID的（不完整）列表：

taxonomy-panel-category - Category 面板
taxonomy-panel-CUSTOM-TAXONOMY-NAME - Custom taxonomy 面板如果您的分类是topic, 然后taxonomy-panel-topic 工作
taxonomy-panel-post_tag - Tags 面板featured-image - Featured image 面板
post-link - Permalink 面板
page-attributes - Page attributes 面板
post-excerpt - 邮递excerpt 面板
discussion-panel - Discussions 面板
template - Template 添加WP 5.9的面板

完整代码functions.php 或自定义插件）：

function cc_gutenberg_register_files() {
    // script file
    wp_register_script(
        \'cc-block-script\',
        get_stylesheet_directory_uri() .\'/js/block-script.js\', // adjust the path to the JS file
        array( \'wp-blocks\', \'wp-edit-post\' )
    );
    // register block editor script
    register_block_type( \'cc/ma-block-files\', array(
        \'editor_script\' => \'cc-block-script\'
    ) );

}
add_action( \'init\', \'cc_gutenberg_register_files\' );

JS文件(block-script.js):

wp.data.dispatch( \'core/edit-post\').removeEditorPanel( \'taxonomy-panel-category\' ) ; // category
wp.data.dispatch( \'core/edit-post\').removeEditorPanel( \'taxonomy-panel-TAXONOMY-NAME\' ) ; // custom taxonomy
wp.data.dispatch( \'core/edit-post\').removeEditorPanel( \'taxonomy-panel-post_tag\' ); // tags
wp.data.dispatch( \'core/edit-post\').removeEditorPanel( \'featured-image\' ); // featured image
wp.data.dispatch( \'core/edit-post\').removeEditorPanel( \'post-link\' ); // permalink
wp.data.dispatch( \'core/edit-post\').removeEditorPanel( \'page-attributes\' ); // page attributes
wp.data.dispatch( \'core/edit-post\').removeEditorPanel( \'post-excerpt\' ); // Excerpt
wp.data.dispatch( \'core/edit-post\').removeEditorPanel( \'discussion-panel\' ); // Discussion
wp.data.dispatch( \'core/edit-post\').removeEditorPanel( \'template\' ); // Template

其他面板怎么样

在某些面板上，可以通过CSS隐藏面板。例如，要隐藏Revisions 面板，我们可以使用：

.components-panel__body.edit-post-last-revision__panel {
    display:none !important;
}

edit-post-last-revision__panel

因此，注册您的块样式：

wp_register_style(
    \'cc-block-style\',
    get_stylesheet_directory_uri() .\'/inc/block-style.css\', // adjust file path
    array( \'wp-edit-blocks\' )
);

register_block_type( \'cc/ma-block-files\', array(
    \'editor_style\' => \'cc-block-style\',
) );

block-style.css

SO网友:Philipp

补充Christine Coopers答案https://wordpress.stackexchange.com/a/339437/31140

如何删除非核心元框

如果要删除由主题或插件添加的面板，请执行以下操作：

查找PANEL-ID 通过检查HTML代码：
运行jQuery(\'.postbox\') 在浏览器JS控制台中您需要识别正确的框并复制元素ID。meta-box-<PANEL-ID>

示例

// Remove the DIVI meta-box:
var boxId = \'et_settings_meta_box_gutenberg\';
wp.data.dispatch( \'core/edit-post\').removeEditorPanel( \'meta-box-\' + boxId );

// Remove an ACF meta-box:
var boxId = \'acf-group_5d9b020a3db4e\';
wp.data.dispatch( \'core/edit-post\').removeEditorPanel( \'meta-box-\' + boxId );

如何移除核心面板参见Christine Coopers的答案https://wordpress.stackexchange.com/a/339437/31140

SO网友:Krzysztof Chodera

从块编辑器隐藏meta\\u框并显示它们only 在经典编辑器中添加参数__back_compat_meta_box 添加元框时设置为true

add_meta_box( \'my-meta-box\', \'My Meta Box\', \'my_meta_box_callback\',
    null, \'normal\', \'high\',
    array(
        \'__back_compat_meta_box\' => true,
    )
);

SO网友:Makoto

这个对我有用。

function remove_post_support() {
    remove_post_type_support(\'post\',\'excerpt\');     
}
add_action(\'init\',\'remove_post_support\');

小码农CODE

在块编辑器中删除面板(元框)

如何删除非核心元框

示例

相关推荐

打印包含分类和Metabox值的术语