Раскопки скрытых сокровищ в теме блоков WordPress Wabi

Занимаясь веб-дизайном почти 19 лет, бывают дни, когда ничто не кажется свежим. Однако бывают моменты, когда вы смотрите на подход другого веб-разработчика к проблемам и чувствуете, что существует целый мир возможностей, в который вам еще только предстоит войти. И редко бывает что-то сложное. Лучшие разработчики делают его простым, а Wabi Рича Табора усеяна теми маленькими хитростями, которые делают изучение кода блочной темы WordPress снова захватывающим.

Ранее сегодня в каталоге тем WordPress было 50 блочных тем. Однако меня больше интересовало то, что ждало в очереди на рассмотрение. Табор отправил свой проект менее чем за 24 часа до этого, но я все равно его запустил. Я должен был увидеть, что построил один из самых плодовитых авторов по разработке блочных тем . Хотя он внес свой вклад в тему GoDaddy Go до того, как устроился на работу в Extendify, это была первая отправка темы из его личного аккаунта.

Я люблю погружаться в темы, где я могу чему-то научиться. Это лучший способ, которым я могу описать Ваби.

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

Одной из уникальных особенностей Wabi является выбор цвета акцента для каждого поста. Элемент управления находится на панели «Статус и видимость» на боковой панели сообщения и позволяет пользователям выбирать из цветовой палитры темы. Этот акцент в основном используется для фона за заголовком поста. Тем не менее, он разбросан вокруг различных других элементов и блоков.

Я еще не видел, чтобы тема блока использовала пользовательские метаданные поста. Вероятно, это связано с тем, что немногие разработчики знают, как создавать компоненты на боковой панели сообщений после того, как на протяжении многих лет полагались на старую систему метабоксов. JavaScript темы, связанный с акцентом, структурирован достаточно хорошо, чтобы другие тематоры могли разбирать его и создавать аналогичные функции в своих проектах. Если для кого-то это было задержкой в ​​​​разработке блочной темы, стоит глубоко погрузиться в всего лишь 117 строк JavaScript, использованных для создания этой функции.

Приятным штрихом, добавленным Табором в цветовую палитру глобальных стилей, стал собственный фон для акцентного цвета. Вместо того, чтобы показывать сплошной круг, это конический градиент всех доступных вариантов.

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

В сообщении о создании пользовательского стиля блока ранее на этой неделе я сказал, что эта функция недостаточно используется при создании тем WordPress. Многие не продвигали его вперед с уникальными вариантами дизайна для пользователей. Wabi включает в себя чуть более дюжины пользовательских стилей, но я не видел подобных тем, которые он предлагает для блоков изображений и видео.

Тема регистрирует стили «Внизу справа», «Внизу слева» и «По центру». Каждый может менять положение изображения в своем <figure>контейнере.

Стили не отличаются особой сложностью. Это простые повороты, чтобы предложить некоторую визуальную привлекательность , которой иногда может не хватать в текстовых сообщениях в блогах. И они уникальны, то, что вы не сможете создать с помощью основных инструментов проектирования. В довершение всего, цвет фона позади мультимедиа использует цвет акцента темы.

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

Wabi также поддерживает глобальные вариации стилей . Ожидается, что эта функция появится в WordPress 6.0. Чтобы увидеть его в действии, пользователи должны активировать плагин Gutenberg.

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

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

Пользователи могут просмотреть цветовую палитру и типографику темы, вставив их в сообщение. Они могут не понадобиться для использования во внешнем интерфейсе большинства сайтов, но они позволяют быстро взглянуть на общий стиль темы.

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

Мне только интересно, какие еще маленькие сокровища хранит Ваби, которые мне еще предстоит открыть.