WordPress React предоставляет множество инструментов для кастомизации блоков. Один из таких инструментов — blocks.getBlockDefaultClassName. Этот фильтр позволяет изменять стандартные CSS-классы блоков, которые следуют шаблону wp-block-{название}. Использование этого фильтра открывает двери для индивидуальной стилизации блоков.
Этот фильтр предоставляет возможность заменить стандартное название CSS-класса блока на свое собственное. Например, у блока с именем core/gallery стандартный класс будет wp-block-core-gallery. Однако с помощью фильтра можно установить свой собственный класс в зависимости от условий и логики.
Пример использования: Изменение класса для блока кода
Рассмотрим пример, в котором мы изменяем класс для блока core/code на свой собственный:
/**
* Функция для установки пользовательского класса.
*
* @param {string} className - Текущее название класса.
* @param {string} blockName - Имя блока.
* @return {string} Новое название класса.
*/
function setCustomClassName( className, blockName ) {
return blockName === 'core/code' ? 'custom-code-class' : className;
}
// Применяем фильтр.
wp.hooks.addFilter(
'blocks.getBlockDefaultClassName',
'my-custom-plugin/set-custom-class-name',
setCustomClassName
);
Пример использования: Стилизация списка блоков
Вы можете захотеть установить особые классы для нескольких блоков сразу. Используйте условие, чтобы проверить названия блоков и задать соответствующие классы:
function setCustomClassesForBlocks( className, blockName ) {
const blockClasses = {
'core/paragraph': 'custom-paragraph-class',
'core/image': 'custom-image-class',
'core/quote': 'custom-quote-class'
};
return blockClasses[blockName] || className;
}
wp.hooks.addFilter(
'blocks.getBlockDefaultClassName',
'multi-blocks-custom-classes',
setCustomClassesForBlocks
);
Важно помнить: применение пользовательских классов требует также обновления CSS-стилей, чтобы они правильно отображались на сайте.
Стиль и поддержка наследуемых классов
Иногда бывает важно сохранить наследуемые стили от стандартных классов, даже если вы применили свой. Рассмотрите возможность добавления новых классов поверх существующих:
function inheritAndAddCustomClass( className, blockName ) {
if ( blockName === 'core/heading' ) {
return `${className} additional-custom-heading-class`;
}
return className;
}
wp.hooks.addFilter(
'blocks.getBlockDefaultClassName',
'heading-custom-classes',
inheritAndAddCustomClass
);
В данном примере стандартный класс сохраняется, а к нему добавляется дополнительный для возможности добавления новых стилей без потери существующих.
Заключение
Фильтр blocks.getBlockDefaultClassName — это мощный инструмент для кастомизации внешнего вида блоков в WordPress. Он позволяет разработчикам тонко настраивать стилизацию, обеспечивая уникальный дизайн. Использование этого фильтра требует понимания структуры блоков, но открывает расширенные возможности для персонализации.