Розкопайте приховані скарби в темі блоку Wabi WordPress – WP Tavern

Розкопайте приховані скарби в темі блоку Wabi WordPress – WP Tavern


Майже 19 років займаючись веб-дизайном, є дні, коли нічого не відчувається свіжим. Однак є також моменти, коли ви дивитеся на підхід іншого веб-розробника до проблем і відчуваєте, що існує цілий світ можливостей, у які вам ще належить крокувати. І рідко це щось складне. Найкращі розробники роблять це простим, а Wabi Rich Tabor усіяний маленькими хитрощами, завдяки яким перегляд коду блокової теми WordPress знову стає захоплюючим.

Раніше сьогодні каталог тем WordPress охопив 50 блокових тем. Проте мене більше цікавило, що чекає в черзі на огляд. Табор подав свій проект менше ніж за 24 години тому, але я все одно розгорнув його. Мені довелося побачити, що побудував один із найбільш плідних авторів з розробки блокових тем. Хоча він зробив внесок у тему GoDaddy’s Go до того, як влаштувався на роботу в Extendify, це була перша тема з його особистого облікового запису.

Я люблю занурюватися в теми, де я можу чогось навчитися. Це найкращий спосіб, який я можу описати Вабі.

Це в першу чергу орієнтоване на блогерів і письменників. У ньому представлений тип дизайну, який оцінять ті, хто хоче, щоб ніщо не переважало їх вміст. Однак у ньому достатньо химерності, щоб не бути абсолютно нудною чорно-білою справою.

Однією з унікальних особливостей Wabi є вибір кольору акценту для кожного повідомлення. Елемент керування розташований під панеллю «Статус і видимість» на бічній панелі публікації та дозволяє користувачам вибирати з палітри кольорів теми. Цей акцент в основному використовується для фону за заголовком і областю заголовка публікації. Однак його посипають навколо різних інших елементів і блоків.

Відкрити редактор WordPress.  На бічній панелі є "акцентний колір" селектор.
Вибір кольору після акценту.

Я ще не бачив, щоб тема блоку використовувала власні метадані публікації. Імовірно, це тому, що небагато розробників знають, як створювати компоненти на бічній панелі посту, покладаючись на стару систему мета-боксів протягом багатьох років. JavaScript, пов’язаний з акцентами теми, структурований достатньо добре, щоб інші теми могли розрізнити його та створити подібні функції у своєму дизайні. Якщо для когось це було перешкодою в розробці блокової теми, варто глибоко зануритися в лише 117 рядків JavaScript, які використовуються для створення цієї функції.

Приємним штрихом, доданим Табором до колірної палітри глобальних стилів, був власний фон для кольору акценту. Замість того, щоб показувати суцільне коло, це конічний градієнт усіх доступних варіацій.

Редактор сайту WordPress з панеллю глобальних стилів, відкритою для розділу палітри.  Колір акценту показує коло кольорів замість одного.
Колір акцентних кольорів у палітрі.

Ця деталь може здатися незначною, але це візуальний сигнал, що цей колір відрізняється від інших. Користувачі все ще можуть редагувати його, щоб встановити значення за замовчуванням, але вони також можуть замінити його для кожної публікації.

У дописі про створення спеціального стилю блоку на початку цього тижня я сказав, що ця функція недостатньо використана під час створення тем WordPress. Багато хто не просували його вперед з унікальними варіантами дизайну для користувачів. Wabi включає трохи більше дюжини користувальницьких стилів, але я не бачив таких, які він пропонує для блоків зображень і відео.

Тема реєструє стилі внизу праворуч, нижній лівий і центральний. Кожен змінює положення зображення в межах свого <figure> контейнер, як показано на наступному знімку екрана:

Галерея з трьох зображень автомобілів, кожне зображення унікально розташоване в контейнері внизу праворуч, по центру та зліва.
Стилі блоку зображення та колір акцентів.

Стилі не відрізняються особливою складністю. Вони є простими поворотами, щоб надати трохи візуального ефекту oomph чого іноді не вистачає в текстових публікаціях у блозі. І вони унікальні, те, що ви не зможете створити за допомогою основних інструментів проектування. На додаток до функції колір фону за медіа використовує колір акценту теми.

Саме такого творчого мислення щодо стилів блоків я очікую від авторів тем. Я не думаю, що інші на це не здатні, але будівництво проектів з блоків іноді вимагає підходу до дизайну по-новому.

Wabi також підтримує глобальні варіації стилю, майбутня функція, яка, як очікується, з’явиться в WordPress 6.0. Щоб побачити його в дії, користувачі повинні активувати плагін Gutenberg.

Редактор сайту WordPress відкривається з темною колірною схемою.  Праворуч можна вибрати чотири картки різних стилів.
Темна варіація стилю.

Тема містить чотири варіанти стилю, включаючи стандартний. Кожен з них пропонує альтернативні колірні палітри, включаючи темну схему.

Вабі також включає 15 візерунків. Більшість із них є варіантами верхніх, нижніх колонтитулів і циклів дописів, але для того, щоб речі залишалися унікальними, існують також шаблони-довідники зі стилю.

Великий заголовок героя, за яким слідує розділ із шістьма акцентними кольорами.  Після цього в розділі відображається алфавіт у розділі типографіки.
Шаблони керівництва в стилі Вабі.

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

Тема досить добре працює для ведення блогу. З ним вміст публікації можна читати, і він щедро використовує пробіл. У цьому відділі від мене не надходитимуть жодних скарг.

Мені тільки цікаво, які ще маленькі скарби зберігає Вабі, які мені ще належить відкрити.

Джерело: https://wptavern.com/unearthing-hidden-treasures-in-the-wabi-wordpress-block-theme

Related posts