Добавьте класс к родительскому элементу .wp-block в редакторе 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, но он достаточно быстро перезаписывается.


wordpress wordpress-gutenberg gutenberg-blocks
person Simon    schedule 21.02.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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)
person Rice_Crisp    schedule 22.02.2019

arrow_upward
0
arrow_downward

Вы можете добавить класс в представление редактирования блока, используя className, который присутствует в this.props, className будет печатать класс в следующем формате wp-blocks-[block_name]

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

Предположение

Всегда старайтесь управлять DOM через React вместо того, чтобы напрямую манипулировать DOM, потому что React управляет своим собственным состоянием, и проблемы могут возникать, напрямую манипулируя DOM.

person Mehmood Ahmad    schedule 22.02.2019
comment
Это изменило бы класс внутреннего div, а не родительский элемент div.wp-block. - person sbnc.eu; 25.05.2021