wordpress - 在古腾堡编辑器中向父 .wp-block 元素添加一个类

Question

当古腾堡创建一个类时，它似乎是格式

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>

我希望能够向该顶部 div.wp-block 元素添加一个类，以便我可以在编辑器中正确设置我的块的样式。该类是基于属性动态生成的，因此我不能只使用块名称类。有没有一种干净的方法可以做到这一点？我可以使用 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

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

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

建议

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