Добавьте класс к родительскому элементу .wp-block в редакторе Гутенберга. - PullRequest
Новая
       10

Добавьте класс к родительскому элементу .wp-block в редакторе Гутенберга.

0 голосов
/ 22 февраля 2019

Когда Гутенберг создает класс, кажется, он имеет формат 

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, но он достаточно быстро перезаписывается.

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Вы можете добавить класс в своем представлении редактирования блока, используя 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 напрямую.

0 голосов
/ 22 февраля 2019

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)
...