По мере развития блочного редактора WordPress Gutenberg, разработчикам тем было предложено интегрировать его в свою работу. Но в некотором смысле сам редактор все еще находится в стадии разработки. Это привело к разочарованию.
Хотя включение некоторых функций было достаточно простым, есть проблемы. Одной из самых больших головных болей была настройка стилей блоков и настройка цветовых палитр по умолчанию.
Эти элементы должны быть объявлены и стилизованы в отдельных частях темы. Когда вам нужно внести изменения, это может означать редактирование нескольких файлов. А если вы переключитесь на новую тему, вам придется все воссоздавать с нуля.
Решение? Войдите в файл WordPress theme.json . Он призван стать универсальным местом для стилизации редактора блоков как на передней, так и на задней стороне.
Сегодня мы рассмотрим, на что способен theme.json и какую пользу он принесет разработчикам тем WordPress. Приступим!
Содержание статьи
Объединение стилей блоков и настроек по умолчанию под одной крышей
Согласно Руководству редактора блоков, смысл theme.json заключается в предоставлении «канонического способа определения настроек редактора блоков». На практике он предлагает разработчикам тем детальный контроль над тем, как стилизованы различные блоки и какие параметры доступны пользователям в серверной части.
Это позволяет установить общесайтовые значения по умолчанию для стилизации цветов, шрифтов и даже самого редактора. Но это также позволяет разработчикам идти глубже и управлять вещами для каждого блока.
С помощью theme.json можно учитывать одноразовые ситуации, когда один блок имеет другие значения по умолчанию, чем другие. Например, если вы хотите предоставить уникальный размер шрифта по умолчанию для блока Columns, вы можете сделать это в этом файле. Точно так же вы можете удалить параметры интервала из того же блока.
В результате получился редактор блоков, более тесно связанный с темой. Разработчикам больше не нужно соглашаться на стандартные настройки Гутенберга по умолчанию или искать неуклюжие обходные пути. Кроме того, они могут устанавливать параметры того, как пользователи могут манипулировать блоками, чтобы упростить обслуживание.
А теперь «волшебная» часть: WordPress прочитает настройки в вашем файле theme.json и выведет для вас необходимый CSS. Вам не нужно взламывать таблицу стилей и изменять только один файл. Насколько это круто?
Также есть некоторые преимущества в производительности. Обычно настройка стилей блоков в редакторе означает загрузку как исходной, так и отредактированной версии.
Как сказано в Руководстве: «… если тема и пользователь устанавливают размер шрифта для абзацев, мы ставим в очередь только стиль, исходящий от пользователя, а не тему». Меньшее количество строк CSS означает более быструю загрузку.
Предпосылки
Прежде чем мы начнем настраивать наш файл theme.json необходимо выполнить несколько требований:
Требуется WordPress 5.8 и выше.
Файл должен находиться в корневом каталоге вашей темы . Например: /wp-content/themes/mytheme/theme.json
Ожидается, что со временем количество доступных настроек будет увеличиваться, и некоторые из них экспериментальные . Таким образом, вам может потребоваться установить официальный плагин Gutenberg для доступа к определенным элементам.
Тем не менее, есть много вкусностей, с которыми можно поиграть! Давайте рассмотрим простой пример.
Создание файла Basic theme.json
Как видно из названия, файл theme.json написан в формате JSON. А если у вас есть базовый шаблон, его можно редактировать или добавлять в файл, следуя установленному синтаксису.
В конце концов, можно представить себе огромное количество шаблонов и генераторов кода для использования разработчиками. Для этой демонстрации мы использовали Gutenberg Theme.json Creator. Он предоставляет простой интерфейс для создания собственного файла.
Цели
Наша миссия будет заключаться в том, чтобы очистить цветовые варианты на нашем веб-сайте. По умолчанию существует слишком много возможных цветов, из которых пользователь может выбирать, включая создание собственных оттенков.
Это могло привести к непоследовательному пользовательскому интерфейсу. Поэтому мы масштабируем все до цветовой палитры нашего бренда.
Результат
Наш собственный файл theme.json работал должным образом. Настроенная нами упрощенная цветовая палитра заменила настройку по умолчанию. А возможность пользователя создавать собственные оттенки и градиенты была удалена из редактора блоков.
Кроме того, WordPress написал для нас все необходимые CSS. Таким образом, любые изменения цвета, которые мы производим в редакторе блоков, также отражаются во внешнем интерфейсе.
Продолжаем тему с theme.json
Мы только прикоснулись к возможностям theme.json . Если вы хотите расширить свои знания, воспользуйтесь этими полезными ресурсами:
Загрузка...
