如何为标题块添加检查器控件？

问题描述

标题块定义了3个检查器控件：

但是在块定义中没有InspectorControls标签：

https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/heading/edit.js

富文本控件中也没有InspectorControls定义。

如何添加标题块的检查器控件？

解决方法

InspectorControls是一个 slot ，它为插件/块开发人员提供了一种轻松地将内容添加/插入UI的方法。

可以合理地预期“标题栏”源还将包含InspectorControls， 但是，鉴于InspectorControls使用useDisplayBlockControls，那么如何添加/添加它们的地方就变得不那么明显了。

深入了解定义了“阻止”组件的侧边栏（packages/edit-post/src/components/sidebar/settings-sidebar/index.js），我们发现实际上使用了 BlockInspector ：

{ sidebarName === 'edit-post/block' && <BlockInspector /> }

这最终导致gutenberg/packages/block-editor/src/components/block-inspector/以及BlockInspector 包含 InspectorControls插槽的启示。

    ...
    <InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
        <div>
            <AdvancedControls
                slotName={ InspectorAdvancedControls.slotName }
                bubblesVirtually={ bubblesVirtually }
            />
        </div>
    ...

参考：packages/block-editor/src/components/block-inspector/index.js

该块显示其支持的属性的控件，例如，标题：显示“印刷术”，“颜色”和“高级>定制css”。