Изменение или добавление классов к отдельным компонентам в основных блоках wordpress

У меня возникают трудности с изменением или добавлением дополнительных классов к отдельным компонентам блоков wordpress. По сути, я просто хочу добавить класс или классы к некоторым частям, которые составляют некоторые из основных блоков wordpress, чтобы делать такие вещи, как добавление стиля начальной загрузки.

Примером этого может быть блок галереи изображений. Он работает достаточно хорошо для моих целей, но я могу захотеть сделать что-то вроде добавления класса «img-fluid» или «img-thumbnail» к изображениям, находящимся в этой галерее.

Я просмотрел документацию по фильтрам блоков, и я чувствую, что мой ответ будет лежать где-то там, просто я пока не знаю где.

Я пробовал использовать blocks.getBlockDefaultClassName, но это добавляет имя класса ко всему блоку, а не к отдельным частям, составляющим этот блок (например, изображениям в моем примере галереи).

Это пример, который они приводят в документации:

 // Our filter function
function setBlockCustomClassName( className, blockName ) {
    return blockName === 'core/code' ?
        'my-plugin-code' :
        className;
}

// Adding the filter
wp.hooks.addFilter(
    'blocks.getBlockDefaultClassName',
    'my-plugin/set-block-custom-class-name',
    setBlockCustomClassName
);

Мне кажется, что blocks.getSaveContent.extraProps может делать то, что мне нужно, но я не знаю, как это использовать. Пример, который они используют, выглядит так:

function addBackgroundColorStyle( props ) {
    return lodash.assign( props, { style: { backgroundColor: 'red' } } );
}

wp.hooks.addFilter(
    'blocks.getSaveContent.extraProps',
    'my-plugin/add-background-color-style',
    addBackgroundColorStyle
);

Но даже если бы мне пришлось добавить дополнительное свойство, такое как имя класса, я бы подумал, что тогда мне нужно будет изменить фактические функции сохранения и редактирования (я предполагаю, используя больше фильтров блоков), чтобы затем использовать это имя класса при отображении этих частей ( в данном случае - изображения), и я тоже не знаю, как это сделать.

Мы будем благодарны за любые мысли или предложения по этому поводу.


reactjs javascript wordpress wordpress-gutenberg gutenberg-blocks
person P Rohrman    schedule 22.05.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Есть два вида изменений: одно - структурное изменение, второе - изменение стиля. В вашем сценарии вам нужно изменить стиль, но на самом деле вы ищете структурные изменения. Вы можете написать свой собственный CSS, который будет обрабатывать стили вашего блока в редакторе и во внешнем интерфейсе.

Это хуки, которые вам нужны для постановки ваших стилей в enqueue_block_editor_assets (ставьте в очередь только ваши стили в бэкэнд-редакторе) и enqueue_block_assets (ставьте свои стили в очередь как на бэкэнде, так и во внешнем интерфейсе).

person Mehmood Ahmad    schedule 24.05.2019
comment
Ну, я хочу изменить фактические имена классов или добавить дополнительные имена классов к элементам, чтобы я мог использовать стиль начальной загрузки. Для меня не имеет смысла воссоздавать определенный стиль начальной загрузки и помещать его в мой CSS под другим именем - тем более, что я использую бутстрап в других частях сайта. Вот почему я ищу способ просто добавить дополнительные имена классов к элементам внутри основных блоков. - person P Rohrman; 28.05.2019
comment
К сожалению, изображения внутри блоков галереи не являются блоками (поскольку они находятся в блоке столбцов), поэтому вам нужно написать свой собственный блок, поскольку никакой фильтр не может вам в этом помочь. С другой стороны, вы можете добавить блок столбцов и добавлять на него изображения, если это служит вашей цели. - person Mehmood Ahmad; 29.05.2019