Стилизация кнопок в блочных темах WordPress

Немного назад, в то время как, Ганеш Дахал написал пост здесь, на CSS-Tricks. отвечая на твит, в котором спрашивали о добавлении теней CSS к блокам и элементам WordPress. Там есть много отличных вещей, которые используют новые функции, представленные в WordPress 6.1, которые предоставляют элементы управления для применения теней к вещам непосредственно в редакторе блоков и пользовательском интерфейсе редактора сайта.

Ганеш кратко коснулся элементов кнопок в этом посте. Я хочу продолжить и углубиться в подходы к стилизации кнопок в блочных темах WordPress. В частности, мы собираемся взломать новый theme.json файл и разбить различные подходы к стилизации кнопок в схеме.

Почему кнопки, спросите вы? Это хороший вопрос, так что давайте начнем с него.

Различные типы кнопок

Когда мы говорим о кнопках в контексте редактора блоков WordPress, мы должны различать два разных типа:

1. Дочерние блоки внутри блока кнопок
2. Кнопки, вложенные в другой блок (например, в блок «Форма комментариев к публикации»).

Если мы добавим оба этих блока в шаблон, по умолчанию они будут выглядеть одинаково.

Но разметка сильно отличается:

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

Как мы видим, имена тегов HTML различаются. Это общие классы — .wp-block-button и .wp-element-button — которые обеспечивают единообразие стилей между двумя кнопками.

Если бы мы писали CSS, мы бы выбрали эти два класса. Но, как мы знаем, блочные темы WordPress имеют другой способ управления стилями, и это через theme.json . Ганеша также подробно рассказал об этом., и вам было бы неплохо прочитать его статью.

Итак, как мы определяем стили кнопок в theme.json без написания фактического CSS? Давай сделаем это вместе.

Создание базовых стилей

theme.json представляет собой структурированный набор схем, записанных в парах свойство:значение. Свойства верхнего уровня называются «разделами», и мы будем работать с styles раздел. Здесь находятся все инструкции по стилю.

Особое внимание мы уделим elements в styles. Этот селектор предназначен для элементов HTML, которые являются общими для блоков. Это базовая оболочка, с которой мы работаем:

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

Итак, что нам нужно сделать, это определить button элемент.

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

То, что button соответствует элементам HTML, которые используются для разметки элементов кнопок на внешнем интерфейсе. Эти кнопки содержат HTML-теги, которые могут быть одним из двух типов кнопок: отдельным компонентом (т. е. блоком кнопок) или компонентом, вложенным в другой блок (например, блок «Пост-комментарий»).

Вместо того, чтобы стилизовать каждый отдельный блок, мы создаем общие стили. Давайте продолжим и изменим фон и цвет текста по умолчанию для обоих типов кнопок в нашей теме. Есть color объект там, который, в свою очередь, поддерживает background и text свойства, где мы устанавливаем значения, которые мы хотим:

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

Это изменяет цвет обоих типов кнопок:

Если открыть DevTools и посмотреть на CSS, который WordPress генерирует для кнопок, мы увидим, что .wp-element-button класс добавляет стили, которые мы определили в theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

Это наши цвета по умолчанию! Далее мы хотим дать пользователям визуальную обратную связь, когда они взаимодействуют с кнопкой.

Реализация стилей интерактивных кнопок

Так как это сайт, посвященный CSS, держу пари, что многие из вас уже знакомы с интерактивными состояниями ссылок и кнопок. Мы можем :hover наведите на них курсор мыши, внесите их в :focus, нажмите на них, чтобы сделать их :active. Черт, есть даже :visited состояние, чтобы дать пользователям визуальную индикацию того, что они нажимали это раньше.

Это Псевдоклассы CSS и мы используем их для таргетинга взаимодействия со ссылкой или кнопкой.

В CSS мы могли бы стилизовать :hover заявить так:

a:hover { /* Styles */
}

In theme.json, мы собираемся расширить наше существующее объявление кнопки с помощью этих псевдоклассов.

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

Обратите внимание на «структурированный» характер этого. Мы в основном следуем схеме:

Теперь у нас есть полное определение стиля нашей кнопки по умолчанию и интерактивного стиля. Но что, если мы хотим стилизовать определенные кнопки, вложенные в другие блоки?

Кнопки стилей, вложенные в отдельные блоки

Давайте представим, что мы хотим, чтобы все кнопки имели наши базовые стили, за одним исключением. Мы хотим, чтобы кнопка отправки блока формы публикации комментариев была синей. Как бы мы этого достигли?

Этот блок более сложен, чем блок Button, поскольку в нем больше движущихся частей: форма, ввод, текст с инструкциями и кнопка. Чтобы нацелить кнопку в этом блоке, мы должны следовать той же структуре JSON, что и для button элемента, но применяется к блоку формы комментария, который отображается на core/post-comments-form элемент:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

Обратите внимание, что мы больше не работаем в elements больше. Вместо этого мы работаем внутри blocks который зарезервирован для настройки фактических блоков. Кнопки, напротив, считаются глобальным элементом, поскольку они могут быть вложены в блоки, даже если они доступны и как отдельный блок.

Структура JSON поддерживает элементы внутри элементов. Итак, если есть button элемент в блоке формы комментария, мы можем настроить его в core/post-comments-form Блок:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

Этот селектор означает, что мы нацеливаемся не только на конкретный блок, но и на конкретный элемент, содержащийся в этом блоке. Теперь у нас есть набор стилей кнопок по умолчанию, которые применяются ко всем кнопкам в теме, и набор стилей, которые применяются к определенным кнопкам, содержащимся в блоке формы публикации комментариев.

В результате CSS, сгенерированный WordPress, имеет более точный селектор:

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

А что, если мы хотим определить различные интерактивные стили для кнопки «Форма комментариев»? Это то же самое, что и для стилей по умолчанию, только те, которые определены внутри core/post-comments-form Блок:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

Как насчет кнопок, которые не находятся в блоках?

WordPress автоматически генерирует и применяет правильные классы для вывода этих стилей кнопок. Но что, если вы используете «гибридную» тему WordPress, которая поддерживает блоки и полнофункциональное редактирование сайта, но также содержит «классические» шаблоны PHP? Или что, если вы создали собственный блок или даже унаследовали шорткод, содержащий кнопки? Ни один из них не обрабатывается Движок стиля WordPress!

Не волнуйтесь. Во всех этих случаях вы должны добавить .wp-element-button class в шаблоне, блоке или разметке шорткода. Затем в этих экземплярах будут применяться стили, сгенерированные WordPress.

И могут быть некоторые ситуации, когда вы не можете контролировать разметку. Например, какой-то блочный плагин может быть слишком самоуверенным и свободно применять свой собственный стиль. Здесь вы обычно можете перейти к опции «Дополнительно» на панели настроек блока и применить класс там:

Подведение итогов

При написании «CSS» в theme.json поначалу может показаться неловким, я обнаружил, что это становится второй натурой. Как и в CSS, существует ограниченное количество свойств, которые можно применять широко или очень узко с помощью правильных селекторов.

И давайте не будем забывать о трех основных преимуществах использования theme.json:

1. Стили применяются к кнопкам как во внешнем интерфейсе, так и в редакторе блоков.
2. Ваш CSS будет совместим с будущими обновлениями WordPress.
3. Сгенерированные стили работают как с блочными темами, так и с классическими темами — нет необходимости что-либо дублировать в отдельной таблице стилей.

Если вы использовали theme.json стили в своих проектах, поделитесь, пожалуйста, своим опытом и мыслями. Жду любых комментариев и отзывов!

• SEO-контент и PR-распределение. Получите усиление сегодня.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. Доступ здесь.
• Источник: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/