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

在GutenBurg块中添加扩展

2 个答案: