Разработка дочерних тем WordPress на основе блоков с помощью одного файла JSON

Опубликовано: 2021-10-26

С того момента, как я открыл свой первый магазин тем в 2008 году и по сей день, как человек, который просто возится, мой план всегда состоял в том, чтобы создать единую тему в форме CSS Zen Garden. Это был проект, который Дэйв Ши запустил в начале 2000-х, чтобы показать, как дизайнеры могут управлять сайтом с помощью одного только CSS. HTML останется прежним, но дизайн может быть любым.

Я достиг этой цели несколько раз с несколькими проектами. Технически все, что мне когда-либо было нужно, — это архитектурно обоснованная разметка в теме WordPress и настраиваемый CSS в дочерней теме.

Концепция была простой, но со временем мое видение изменилось. Я хотел создать что-то, что сделало бы разработку дочерних тем такого типа еще проще. Поэтому я создал собственные системы, чтобы обойти отсутствие в WordPress инструментов в области дизайна тем. Не хочу хвастаться, но мне показалось, что я создал несколько удобных методов. Они позволили разработчикам дочерних тем вставлять значения в файлы конфигурации, такие как имена семейств шрифтов и цветовые коды. Большинство из них также могут быть перезаписаны конечными пользователями через настройщик.

К 2018 году я уже усердно работал над тем, что станет моим выдающимся произведением, лучшей темой WordPress, которую я когда-либо создавал. Я также планировал, что это будет мой последний. Я уже давно подумывал выйти из игры. Но это был проект, который я должен был довести до конца.

Затем новый редактор блоков взорвал все. Я работал с ним в течение нескольких месяцев до его запуска, но я знал, что разработка темы никогда не будет прежней. Проект Gutenberg продолжит развиваться и изменит будущее WordPress.

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

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

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

Больше всего меня волнует то, что будило меня каждое утро 13 лет назад: детские темы.

Блочные дочерние темы частично работали в плагине Gutenberg уже несколько месяцев. Однако функция, которую я с нетерпением ждал больше всего, была готова только неделю назад. Новый патч позволяет дочерней теме перезаписывать отдельные значения родительского файла theme.json . По сути, два файла объединяются, при этом дочерний файл имеет приоритет.

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

Увидев эту землю в разрабатываемой версии Гутенберга, я первым делом загрузил пользовательскую тему, с которой я баловался. Это проект, который я создавал для развлечения и собственного назидания.

Один демонстрационный пост с черным текстом на белом фоне.
Один просмотр сообщения родительской темы.

Затем я создал новый проект в своем редакторе кода. Я добавил необходимый файл style.css и подключил соответствующие поля заголовка. Я не нуждался бы в этом сверх того. Дизайн моей дочерней темы будет полностью зависеть от другой функции.

Я добавил theme.json на корневой уровень дочерней темы и начал получать больше удовольствия от создания тем за долгое время.

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

Дочерняя тема в осеннем стиле с коричневыми и оранжевыми цветами, отображающая один пост.
Просмотр одной записи дочерней темы.

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

Как я уже сказал, я уже создавал такие методы дочерней темы (я использовал PHP вместо JSON). Однако это намного мощнее, потому что основано на стандартной блочной системе, а не на чем-то специальном, которое когда-либо использовало лишь горстка людей.

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

Допустим, я установил блочную тему и сделал несколько настроек цвета. А теперь представьте, что я хочу перепутать это, когда наступит Рождество — добавьте несколько цветов и найдите праздничный праздничный шрифт. Когда я внесу эти изменения, моего старого дизайна больше не будет по окончании сезона, потому что пользовательские настройки сохраняются на основе активной темы. Я мог бы, конечно, записать все свои старые настройки и вернуть их обратно позже. Однако выполнение этого через дочернюю тему означает, что я могу просто переключать темы в любое время. Мои старые настройки останутся нетронутыми.

Возможно, это очень крайний случай. Кто сейчас вносит сезонные изменения в свой дизайн, верно?

Захватывающая часть заключается в том, что я могу делиться дочерними темами, созданными с помощью одного файла JSON, с другими.

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

Я также вижу будущее без дочерних тем, которое по-прежнему будет иметь те же преимущества, что и совместное использование элементов дизайна.

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

Я представляю себе будущее, в котором WordPress может иметь устанавливаемые цветовые палитры, подобные тем, что предлагает Color Lovers. Просто просмотрите каталог, установите и измените цветовую схему, не находя новую тему. Что-то похожее на недавний плагин Adrian может служить той же цели для шрифтов. Это то, что сообщество может захотеть рассмотреть в будущем. В этот момент не должно быть никаких идей.

На данный момент я счастлив иметь в своем распоряжении всю мощь детской тематики. Изменения должны появиться в Gutenberg 11.8 на этой неделе и в WordPress 5.9 позже в этом году.