Я спіткнувся назустріч цей твіт від Ana Segota шукає спосіб додати CSS box-shadow до стану наведення кнопки в WordPress у theme.json файлу.
Вона запитує, тому що theme.json тут WordPress хоче, щоб ми почали переміщувати базові стилі для блокових тем. Традиційно ми робили будь-яку укладку style.css при роботі в «класичній» темі. Але з темою Twenty Twenty-Three (TT3) за замовчуванням, яка нещодавно постачалася з WordPress 6.1, усі її стилі переміщені на theme.json, ми все ближче й ближче до того, щоб зробити те саме з нашими власними темами. Я описав це дуже докладно в недавній статті.
Я кажу «все ближче й ближче», оскільки все ще є багато властивостей і селекторів CSS, які не підтримуються theme.json. Наприклад, якщо ви сподіваєтеся створити щось подібне perspective-origin in theme.json, цього просто не станеться — принаймні, поки я пишу це сьогодні.
Ана дивиться box-shadow і, на щастя для неї, ця властивість CSS підтримується theme.json починаючи з WordPress 6.1. Її твіт датований 1 листопада у той самий день, коли вийшла версія 6.1. Це не те, що підтримка властивості була головною функцією у випуску. Більші заголовки більше стосувалися інтервалів і методів компонування блоків і тем блоків.
Ось як ми можемо застосувати a box-shadow до певного блоку, скажімо, до блоку рекомендованих зображень theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"blocks" :{
"core/post-featured-image": {
"shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
}
}
}
}Цікаво, чи новий колірний синтаксис працює? Я також! Але коли я спробував — rgb(0 0 0 / 0.66) — Я нічого не отримав. Можливо, це вже в роботі або може використовуватися запит на отримання.
Легко, правда? Звичайно, це зовсім інше, ніж написання ванільного CSS style.css і потрібно трохи звикнути. Але це справді можливо з останнього випуску WordPress.
І, привіт, ми можемо зробити те саме з окремими «елементами», як-от кнопка. Кнопка сама по собі є блоком, але вона також може бути вкладеним блоком в інший блок. Отже, щоб застосувати a box-shadow глобально для всіх кнопок, ми б зробили щось подібне в theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}Але Ана хоче додати тіні до кнопок :hover стан. на щастя, підтримка стилізації інтерактивних станів для певних елементів, таких як кнопки та посилання, використовуючи псевдокласи — в тому числі :hover, :focus, :active та :visited — теж набув theme.json підтримка в WordPress 6.1.
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
":hover": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}
}Якщо ви використовуєте батьківську тему, ви можете перевизначити стилі теми в дочірній темі. Тут я повністю замінюю стилі кнопок TT3.
Переглянути повний код
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--tertiary)",
"text": "var(--wp--preset--color--contrast)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
},
"shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
":hover": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--base)"
}
}
}
}
}
}Ось як це виглядає:
Інший спосіб зробити це: спеціальні стилі
Нещодавно випущений Pixl тема блоку надає ще один приклад використання в реальному світі box-shadow майно в theme.json використовуючи альтернативний метод, який визначає спеціальні значення. В темі звичай box-shadow властивість визначається як .settings.custom.shadow:
{
"version": 2,
"settings": {
// etc.
"custom": {
// etc.
"shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
},
// etc.
}
}Потім, пізніше у файлі, звичайний shadow властивість викликається елементом кнопки:
{
"version": 2,
"settings": {
// etc.
},
"styles": {
"elements": {
"button": {
// etc.
"shadow": "var(--wp--custom--shadow) !important",
// etc.
":active": {
// etc.
"shadow": "2px 2px var(--wp--preset--color--primary) !important"
}
},
// etc.
}
}Я не зовсім впевнений щодо використання !important в цьому контексті. Я припускаю, що це спроба запобігти заміні цих стилів за допомогою глобального інтерфейсу користувача стилів у редакторі сайту, який має високу специфічність, ніж стилі, визначені в theme.json. Ось прикріплене посилання для отримання додаткової інформації з моєї попередньої статті про керування стилями тем блоків.
Оновлення: Виявляється, була ціла дискусія з цього приводу Запит на отримання #34689, де зазначається, що це було розглянуто в WordPress 5.9.
І є ще ...
На додаток до тіней, CSS outline також отримане майно theme.json підтримується в WordPress 6.1 і може застосовуватися до кнопок та їх інтерактивних станів. Це PR на GitHub показує гарний приклад.
"elements": {
"button": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
":hover": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
}
}
}Ви також можете знайти реальні приклади того, як outline власність творів в інших темах, в т.ч гучність, Block Canvas та Блокова база.
Підводячи підсумок
Хто знав, що можна так багато говорити про одну властивість CSS, коли мова заходить про блокування тем у WordPress 6.1? Ми побачили офіційно підтримувані методи встановлення a box-shadow на блоки та окремі елементи, включаючи інтерактивні стани елемента кнопки. Ми також перевірили, як ми можемо замінити тіні в дочірній темі. І, нарешті, ми зламали реальний приклад, який визначає та встановлює тіні в користувальницькій властивості.
Ви можете знайти більш детальні обговорення WordPress і його box-shadow реалізації в цьому PR на GitHub. Існує також Пропозиція GitHub для додавання інтерфейсу користувача безпосередньо в WordPress для встановлення значень тіні на блоках — ви можете перейти безпосередньо до анімованого GIF показуючи, як це буде працювати.
Якщо говорити про це, Джастін головастик нещодавно розробив блок, який відображає індикатор прогресу і вбудовані в нього елементи керування тінню коробки. Він демонструє це в цьому відео:
Більш детальна інформація
Якщо ви хочете заглибитися в box-shadow та інші властивості CSS, які підтримуються theme.json файл у блочній темі, ось кілька ресурсів, якими ви можете скористатися:
