在 GutenBerg 块中添加扩展

Question

我想在 inspectControl 中添加一些扩展，我该如何添加。请检查图片以便更好地理解。 Extensions Like this

这是我正在使用的代码，但这个代码不起作用。你能检查一下是什么问题吗。我没有找到关于此的任何文档。请参考文档或教程，并请使用此代码。

registerBlockType( 'hwb/grid-column',  {
title: __( 'Column' ),
parent: [ 'hwb/grid' ],
description: __( 'A single column within a grid block.' ),
icon: getIcon( 'block-grid-column' ),
category: 'mycategory',
supports: {
        styles: true,
        spacings: true,
        display: true,
        scrollReveal: true,
    },

// Other code like edit and save functions
}

Answer 1

"supports" 属性仅支持开箱即用的这些值：https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-registration/#supports-optional

如果您想创建新的侧边栏面板，那么您将需要在您的编辑功能中使用 InspectorControls 组件，并且您放入其中的任何内容都会出现在侧边栏中。像这样：

const { PanelBody } = wp.components
const { InspectorControls } = wp.editor
const { Fragment } = wp.element

edit(props) {
  return (
    <Fragment>
      <InspectorControls>
        <PanelBody title="Panel Heading">
          <p>I will be in the sidebar</p>
        </PanelBody>
      </InspectorControls>
      <p>I will be in the main content area.</p>
    </Fragment>
  )
}

https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbars-and-inspector/

Answer 2

这些不是核心扩展，而不是由 GhostKit
创建的您可以在您的插件中启用。

启用 GhostKit 扩展（间距）

<?php
registerBlockType( 'my/block', {
    title: 'My block',
    ghostkit: {
        supports: {
            spacings: true,
        },
    },
    ...
} );

更多信息GhostKit Spacing Extension

在 GutenBerg 块中添加扩展

Add extensions in GutenBurg blocks

wordpress

wordpress-gutenberg

gutenberg-blocks