Ганеш Дахал написал пост на CSS-tricks, отвечая на твит, в котором спрашивалось о добавлении теней CSS-блоков на блоки и элементы WordPress. Там много отличного материала, который использует новые функции, предоставляемые в WordPress 6.1, которые предоставляют элементы управления для нанесения теней на объекты непосредственно в редакторе блоков и пользовательском интерфейсе редактора сайта.
Ганеш кратко коснулся элементов кнопок в этом посте. Я хочу подхватить это и углубиться в подходы к стилизации кнопок в блочных темах WordPress. В частности, мы собираемся раскрыть новый theme.json файл и разбить различные подходы к стилизации кнопок в схеме.
Почему кнопки, спросите вы? Это хороший вопрос, так что давайте начнем с этого.
Различные типы кнопок
Когда мы говорим о кнопках в контексте редактора блоков WordPress, мы должны различать два разных типа:
1. Дочерние блоки внутри блока кнопок
2. Кнопки, вложенные в другой блок (например, блок формы комментариев к сообщению)
Если мы добавим оба этих блока в шаблон, по умолчанию они будут выглядеть одинаково.
Но разметка сильно отличается:
Как мы можем видеть, имена HTML-тегов разные. Это общие классы — .wp-block-button и .wp-element-button, которые обеспечивают согласованный стиль между двумя кнопками.
Если бы мы писали CSS, мы бы нацелились на эти два класса. Но, как мы знаем, блочные темы WordPress имеют другой способ управления стилями, и это происходит через theme.json файл. Ганеш также очень подробно рассказал об этом, и вам не мешало бы прочитать его статью.
Итак, как мы определяем стили кнопок в theme.json без написания фактического CSS? Давайте вместе сделаем это.
Создание базовых стилей
theme.json - это структурированный набор схем, написанных в парах свойство: значение. Свойства верхнего уровня называются “разделы”, и мы будем работать с разделом стилей. Именно здесь содержатся все инструкции по стилизации.
Мы сосредоточимся конкретно на элементах в стилях. Этот селектор нацелен на HTML-элементы, которые являются общими для блоков. Это базовая оболочка, с которой мы работаем:
Итак, что нам нужно сделать, так это определить элемент button.
Button соответствует элементам HTML, которые используются для разметки кнопок во внешнем интерфейсе. Эти кнопки содержат HTML-теги, которые могут быть одним из двух наших типов кнопок: автономный компонент (т. е. Блок кнопок) или компонент, вложенный в другой блок (например, блок комментариев к публикации).
Вместо того чтобы стилизовать каждый отдельный блок, мы создаем общие стили. Давайте продолжим и изменим цвет фона и текста по умолчанию для обоих типов кнопок в нашей теме. Там есть цветной объект, который, в свою очередь, поддерживает свойства фона и текста, где мы устанавливаем нужные значения:
Эти изменения для обоих типов кнопок:
Если открыть DevTools и взглянуть на CSS, который WordPress генерирует для кнопок, мы увидим, что класс .wp-element-button добавляет стили, которые мы определили в theme.json:
Это наши цвета по умолчанию! Далее мы хотим предоставить пользователям визуальную обратную связь, когда они взаимодействуют с кнопкой.
Реализация стилей интерактивных кнопок
Я готова поспорить, что многие из вас уже знакомы с интерактивными состояниями ссылок и кнопок. Мы можем :hover на них курсор мыши, поместить их в :focus, щелкнуть по ним, чтобы сделать их :active. Черт возьми, есть даже состояние :visited, чтобы дать пользователям визуальное представление о том, что они нажимали на это раньше.
Это псевдоклассы CSS, и мы используем их для таргетинга на взаимодействия ссылки или кнопки.
В CSS мы могли бы оформить состояние :hover следующим образом:
В theme.json мы собираемся расширить наше существующее объявление кнопки с помощью этих псевдоклассов.
Обратите внимание на “структурированный” характер. Мы в основном следуем общему плану:
- Элементы:
-- Элемент:
--- Объект:
---- Свойство:
----- Значение
Теперь у нас есть полное определение стилей нашей кнопки по умолчанию и интерактивных стилей. Но что, если мы хотим стилизовать определенные кнопки, которые вложены в другие блоки?
Стилизация кнопок, вложенных в отдельные блоки
Давайте представим, что мы хотим, чтобы все кнопки имели наши базовые стили, за одним исключением. Мы хотим, чтобы кнопка отправки блока формы комментария к сообщению была синей. Как бы нам этого добиться?
Этот блок более сложный, чем блок кнопок, потому что в нем больше движущихся частей: форма, входные данные, инструктивный текст и кнопка. Чтобы настроить таргетинг на кнопку в этом блоке, мы должны следовать той же структуре JSON, что и для элемента button, но примененной к блоку формы Post Comment, который сопоставляется элементу core/post-comments-form:
Обратите внимание, что мы больше не работаем с элементами. Вместо этого мы работаем внутри блоков, которые зарезервированы для настройки реальных блоков. Кнопки, напротив, считаются глобальным элементом, поскольку они могут быть вложены в блоки, хотя они также доступны как отдельный блок.
Структура JSON поддерживает элементы внутри элементов. Итак, если в блоке формы Post Comment есть элемент button, мы можем настроить таргетинг на него в блоке core/post-comments-form:
Этот селектор означает, что мы нацелены не только на определенный блок, но и на определенный элемент, который содержится в этом блоке. Теперь у нас есть набор стилей кнопок по умолчанию, которые применяются ко всем кнопкам в теме, и набор стилей, которые применяются к определенным кнопкам, содержащимся в блоке формы комментариев к публикации.
В результате CSS, созданный WordPress, имеет более точный селектор:
А что, если мы хотим определить различные интерактивные стили для кнопки формы комментария к публикации? Это то же самое, что и для стилей по умолчанию, только они определены внутри блока core/post-comments-form:
А как насчет кнопок, которые не находятся в блоках?
WordPress автоматически генерирует и применяет правильные классы для вывода этих стилей кнопок. Но что, если вы используете “гибридную” тему WordPress, которая поддерживает блоки и редактирование всего сайта, но также содержит “классические” шаблоны PHP? Или что, если вы создали пользовательский блок или даже имеете устаревший шорткод, содержащий кнопки? Ни один из них не обрабатывается движком стиля WordPress!
Не беспокойся. Во всех этих случаях вы должны добавить класс .wp-element-button в разметку шаблона, блока или шорткода. Стили, созданные WordPress, затем будут применены в этих случаях.
Могут быть некоторые ситуации, когда вы не имеете никакого контроля над разметкой. Например, какой-нибудь блочный плагин может быть слишком самоуверенным и щедро применять свой собственный стиль. Именно здесь вы обычно можете перейти к опции “Дополнительно” на панели настроек блока и применить класс там:
Подведение итогов
Хотя написание «CSS» в theme.json может сначала показаться неудобным, я обнаружил, что это становится второй натурой. Как и в CSS, существует ограниченное количество свойств, которые вы можете применять либо широко, либо очень узко, используя правильные селекторы.
И давайте не будем забывать о трех основных преимуществах использования theme.json:
1. Стили применяются к кнопкам как в интерфейсном представлении, так и в редакторе блоков.
2. Ваш CSS будет совместим с будущими обновлениями WordPress.
3. Созданные стили работают как с блочными темами, так и с классическими темами — нет необходимости дублировать что-либо в отдельной таблице стилей.
Если вы использовали стили theme.json в ваших проектах, пожалуйста, поделитесь своим опытом и мыслями. Я с нетерпением жду любых комментариев и отзывов!
Перевод статьи Styling Buttons in WordPress Block Themes.
