如何在古腾堡渲染额外的复选框？

Question

我想在裁剪图像旁边添加一个额外的复选框，但我不明白需要用 javascript 编写什么来渲染和处理它。我找不到解释这一点的文档。我试过写这样的代码，但是没有用：

function addListBlockClassName (settings, name) {
  if (name !== 'core/gallery') {
    return settings
  }

  // new checkbox
  settings.attributes.enableVoting = {
    default: false,
    type: 'boolean',
  }

  return settings
}

wp.hooks.addFilter(
  'blocks.registerBlockType',
  'my-plugin/class-names/list-block',
  addListBlockClassName
)

Answer 1

您可以使用InspectorControls 和Checkbox Control 在侧边栏添加额外的复选框

查看gallery block 并了解它们是如何通过使用InspectorControls 在侧边栏上实现的。这可能很复杂，因此为了更容易实现，您可以查看 Gutenberg 的其他核心模块。

而这个link可以帮助你了解如何使用CheckboxControl。

在上面的代码中，您只是添加了一个钩子，该钩子正在更改块库的默认类名，这不是您要问的。请注意，据我所知，除非您复制整个核心块并向其中添加其他功能，否则您无法编辑默认核心块（除了极少数内容）。