Кнопки стилю в блокових темах 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. } }
}

Отже, що нам потрібно зробити, це визначити a button елемент.

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

Що button відповідає елементам HTML, які використовуються для розмітки елементів кнопки на інтерфейсі. Ці кнопки містять теги HTML, які можуть бути будь-яким із наших двох типів кнопок: окремим компонентом (тобто блоком кнопок) або компонентом, вкладеним в інший блок (наприклад, блоком Post Comment).

Замість того, щоб стилізувати кожен окремий блок, ми створюємо спільні стилі. Давайте змінимо фон і колір тексту за замовчуванням для обох типів кнопок у нашій темі. Є 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 ми можемо стилізувати a :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 клас у розмітці шаблону, блоку чи короткого коду. У цих випадках буде застосовано стилі, створені WordPress.

І можуть бути ситуації, коли ви не можете контролювати розмітку. Наприклад, якийсь блоковий плагін може бути надто самовпевненим і вільно застосовувати власний стиль. Саме тут зазвичай можна перейти до опції «Додатково» на панелі налаштувань блоку та застосувати там клас:

Підводячи підсумок

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

І не забуваймо три основні переваги використання theme.json:

1. Стилі застосовуються до кнопок як у зовнішньому вигляді, так і в редакторі блоків.
2. Ваш CSS буде сумісний із майбутніми оновленнями WordPress.
3. Згенеровані стилі однаково працюють як з блоковими, так і з класичними темами — немає потреби нічого дублювати в окремій таблиці стилів.

Якщо ви використовували theme.json стилів у ваших проектах, будь ласка, поділіться своїм досвідом і думками. Я з нетерпінням чекаю будь-яких коментарів і відгуків!

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