Фильтр blocks.getSaveContent.extraProps в WordPress служит для добавления дополнительных свойств к корневому элементу в функции save любого блока. Это мощный инструмент, который позволяет кастомизировать элементы, добавляя, например, className, id или другие допустимые атрибуты.
Этот фильтр предоставляет три параметра в коллбэк функции:
props(Object): текущие свойства элемента, которые мы можем модифицировать и вернуть.blockType(Object): объект определения типа блока.attributes(Object): атрибуты блока.
Пример: Добавление CSS-класса
Рассмотрим пример, в котором мы добавляем CSS-класс, чтобы изменить стиль элементов всех блоков.
function addCustomClassName( props, blockType, attributes ) {
return {
...props,
className: props.className ? props.className + ' custom-class' : 'custom-class'
};
}
wp.hooks.addFilter(
'blocks.getSaveContent.extraProps',
'custom-namespace/add-custom-class-name',
addCustomClassName
);
Этот код добавляет класс custom-class к каждому блоку. Такая функциональность может быть полезна для глобального применения стилей в блоках.
Обработка стилей через инлайн свойства
В следующем примере мы добавим инлайн стиль, изменяющий цвет текста всех блоков по умолчанию на синий.
function addTextColorStyle( props, blockType, attributes ) {
return {
...props,
style: {
...props.style,
color: 'blue'
}
};
}
wp.hooks.addFilter(
'blocks.getSaveContent.extraProps',
'custom-namespace/add-text-color-style',
addTextColorStyle
);
Важно помнить, что использование этого фильтра может вызвать ошибки валидации блока, если он изменяет существующий контент в следующем редактировании. Чтобы избежать таких ошибок, рекомендуется использовать серверную функцию
render_blockдля модификации содержимого поста.
Практическое руководство по созданию уникальных блоков
Вы можете использовать фильтр для более сложных манипуляций с элементами блока. Вот пример добавления пользовательского атрибута data-info:
function addDataAttribute( props, blockType, attributes ) {
return {
...props,
'data-info': 'additional-info'
};
}
wp.hooks.addFilter(
'blocks.getSaveContent.extraProps',
'custom-namespace/add-data-attribute',
addDataAttribute
);
Таким образом, мы добавляем атрибут data-info ко всем блокам, что может быть полезно при интеграции с JavaScript для клиентской обработки.
Заключение
Фильтр blocks.getSaveContent.extraProps предлагает широкие возможности для кастомизации блоков в WordPress. Умение работать с этим фильтром открывает двери для создания более адаптируемых и интерактивных элементов, улучшая качество и функциональность вашего контента.