如何更改 WP Gutenberg 的类别组件面板？答案

【问题标题】：How to change WP Gutenberg's category components panel?如何更改 WP Gutenberg 的类别组件面板？
【发布时间】：2019-06-14 06:46:27
【问题描述】：

在 Gutenberg 编辑器中，我尝试修改类别面板（右侧是我选择帖子所在类别的面板）。如果该类别具有子类别，则不应将帖子添加到该类别。由于类别是静态的，因此可以使用 category-id。

我的想法是使用enqueue_block_editor_assets 并添加一些javascript 来通过元素的ID 禁用复选框。这不起作用，找不到元素:-(

到目前为止，这是我无法正常工作的代码：

functions.php:

function gutenberg_enqueue()
{
    wp_enqueue_script(
        'gutenberg-additions-script',
        get_stylesheet_directory_uri().'/gutenberg-additions.js',
        array(), true, true
    );
}
add_action('enqueue_block_editor_assets', 'gutenberg_enqueue', 999);

（我用get_stylesheet_directory_uri()，因为我是儿童主题）

gutenberg-additions.js：

window.onload = function () {
    var cat1 = document.getElementById('editor-post-taxonomies-hierarchical-term-1');
    if (cat1 != null) {
        cat1.disabled = true;
    }

【问题讨论】：

标签： wordpress wordpress-gutenberg

【解决方案1】：

欢迎来到 Stackoverflow。在gutenberg github directory 中有一个例子。它是用旧的 es5 语法编写的，但应该很容易转移到 esnext。它使用editor.PostTaxonomyType 过滤器来编辑分类组件。

var el = wp.element.createElement;

function customizeProductTypeSelector( OriginalComponent ) {
    return function( props ) {
        if ( props.slug === 'product-type' ) {
            return el(
                'div',
                {},
                'Product Type Selector'
            );
        } else {
            return el(
                OriginalComponent,
                props
            );
        }
    }
};

wp.hooks.addFilter(
    'editor.PostTaxonomyType',
    'my-custom-plugin',
    customizeProductTypeSelector
);

如果您需要更多信息，也请阅读this github issue 上的 cmets。

【讨论】：