古腾堡核心块 - 删除选项

Question

使用核心 WP Gutenberg 块非常棒，但在某些情况下，我想完善可用选项以改善客户的用户体验，并避免他们有太多选项。

例如，在标题块中，我想删除“级别”H1 和 H6，以及所有“对齐”选项。

在段落块中，我想禁用“字体大小”和“首字下沉”选项。

我查遍了 API 文档，但没有成功。

Answer 1

简短的回答：它（如何删除选项）取决于特定的核心块。

长答案：

在某些情况下，块的选项是专门硬编码的，除非您自己重写一个新块，否则您无法做到这一点。
有些人试图通过使用

display: none

等黑客手段来绕过这个问题，这样面板就不会显示，但这对辅助技术的用户不起作用，并且当编辑器使用的 css 发生变化时可能会中断。

删除标题块中的 h1 和 h6 就是一个例子。有一个现有功能请求来过滤标题块。

在其他情况下，有一些常见选项（填充、边距、字体大小、行高、颜色等排版设置）（例如，称为 “支持”，可在多个核心块中重复使用。

这些可以通过 theme.json 文件进行修改。

例如，如果您想仅在段落块中禁用首字下沉选项和字体大小选项，请将以下内容添加到您的 theme.json

    "settings": {
    "blocks": {
        "core/paragraph": {
            "typography": {
                "dropCap": false,
                "customFontSize": false,
                "fontSizes": []
            }
        }
    }
}

如果您想禁用所有核心块中的某些设置，您只需将这些声明向上移动一个级别，位于块特定列表之上，并具有以下内容，这将禁止用户使用默认双色调模式创建自己的双色调模式或渐变，你会：

"settings": {
    "color": {
        "customDuotone": false,
        "defaultDuotone": false,
        "customGradient": false,
        "defaultGradients": false,

包含所有这些内容的完整 theme.json 将如下所示：

{
"schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
    "appearanceTools": true,
    "color": {
        "custom": true,
        "customDuotone": false,
        "defaultDuotone": false,
        "customGradient": false,
        "defaultGradients": false,
        "gradients": []
    },
    "settings": {
        "blocks": {
            "core/paragraph": {
                "typography": {
                    "dropCap": false,
                    "customFontSize": false,
                    "fontSizes": []
                }
            }
        }
    }
}

}

您还可以使用 php 来限制其中一些设置

Answer 2

您可以使用

editor.BlockEdit

过滤器。我从手册中复制了示例并将其保留在这里。

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls } = wp.editor;
const { PanelBody } = wp.components;
 
const withInspectorControls =  createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        return (
            <Fragment>
                <BlockEdit { ...props } />
                <InspectorControls>
                    <PanelBody>
                        My custom control
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, "withInspectorControl" );
 
wp.hooks.addFilter( 'editor.BlockEdit', 'my-plugin/with-inspector-controls', withInspectorControls );

您要更改的是块

<Toolbar>

-组件。