Question

古腾堡（Gutenberg）创建类时，它的格式似乎是

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可能会出现问题。

在gutenberg编辑器中将类添加到父.wp-block元素

2 个答案:

建议