在 gutenberg 编辑器中向父 .wp-block 元素添加 class

Question

当 Gutenberg 创建 class 时，它的格式似乎是

div.wp-block
    div.editor-block-list__insertion-point
    div.editor-block-list__block-edit
        div.editor-block-contextual-toolbar
        div
            <your actual block html goes here>

我希望能够将 class 添加到顶部 div.wp-block 元素，以便我可以在编辑器中正确设置我的块的样式。 class 是根据属性动态生成的，所以我不能只使用块名称 class。有没有一种干净的方法可以做到这一点？我可以使用 javascript DOM 破解它，但它很快就会被覆盖。

Answer 1

https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/#editor-blocklistblock

const { createHigherOrderComponent } = wp.compose

const withCustomClassName = createHigherOrderComponent((BlockListBlock) => {
  return props => {
    return <BlockListBlock { ...props } className={ 'my-custom-class' } />
  }
}, 'withCustomClassName')
wp.hooks.addFilter('editor.BlockListBlock', 'my-plugin/with-custom-class-name', withCustomClassName)

Answer 2

您可以使用 this.props 中存在的 className 在块编辑视图中添加 class，className 将在下面打印 class格式 wp-blocks-[block_name]

edit( { className } ) { // using destructing from JavaScript ES-6
  return <div className={ className }></div>
}

建议

始终尝试通过 React 寻找操纵 DOM 而不是直接操纵 DOM 因为 React 管理它自己的状态并且直接操纵 DOM 可能会出现问题。

在 gutenberg 编辑器中向父 .wp-block 元素添加 class

Add a class to the parent .wp-block element in gutenberg editor

wordpress

wordpress-gutenberg

gutenberg-blocks

建议