Использование системы дизайна с редактором блоков WordPress Pt. 1: тема.json

Опубликовано: 2022-12-15

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

Наша новая серия из двух частей основана на этом фундаменте и показывает, как можно использовать импортированные токены дизайна из theme.json в редакторе блоков. Это позволит вам лучше организовать свой сайт WordPress, чтобы отразить вашу систему дизайна. Есть две ключевые цели:

Понимание частей theme.json, относящихся к дизайн-системам.
Измените и расширьте theme.json, чтобы использовать импортированную систему дизайна.

Понимание theme.json

theme.json — это файл конфигурации, который позволяет вам настраивать и темировать редактор блоков, изменять настройки блоков и создавать основу для разработки всей темы блока.

Он предназначен для того, чтобы вы могли контролировать глобальные настройки и стили для вашего сайта WordPress. Каждый новый VIP-сайт WordPress по умолчанию поставляется с блочной темой Twenty Twenty-Three. Эта тема — отличная отправная точка для экспериментов с облегченной блочной темой и понимания некоторых мощных элементов управления, доступных в theme.json.

Изменение theme.json

Давайте начнем с файла theme.json, использованного в нашем предыдущем сообщении в блоге. Обратите внимание на пользовательский раздел, где наш инструмент моста может вставлять и обновлять дизайн-систему из Figma. Это ключевой раздел, в котором вы ссылаетесь на различные компоненты вашей дизайн-системы (дизайнерские токены), чтобы эффективно использовать theme.json.

Ниже мы рассмотрим советы и стратегии, чтобы вы могли воспользоваться всем, что может предложить theme.json.

Хранение токенов дизайна

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

Использование токенов дизайна

Давайте посмотрим на пример использования пользовательского раздела theme.json. Здесь у нас есть фрагмент, в котором мы определили основной цвет текста — зеленый, а фон — черный:

 "settings": { "custom": { "text": { "primary": "#00FF00", “background”: “000000” } } } }

Это позволяет нам ссылаться на эти два цвета в любом месте в файле theme.json, используя:

 var(--wp--custom--text--primary) and var(--wp--custom--text--background)

Следующий фрагмент гарантирует, что по умолчанию, если не указано иное, каждый блок будет иметь черный фон с зеленым текстом на нем:

 "styles": { "color": { "text": "var(--wp--custom--text--primary)", “background”: “var(--wp--custom--text--background)” } }

Схема для любого ключа, на который вы хотите сослаться из ваших пользовательских настроек:

 var(--wp--custom–<location to the value with -- as a separator between each key>)

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

Лучшие практики

Используйте сгенерированные WordPress переменные токенов дизайна (например, var(--wp--custom--text--primary) ) для вездесущих ссылок на токены. Обратите внимание на приведенный выше фрагмент, где мы ссылаемся на основной и фоновый пользовательский цвет, а не используем само фактическое значение. Это гарантирует, что когда вы захотите обновить такие свойства, как цвет текста, вам придется изменить только одно местоположение, так как другие местоположения являются просто ссылками.
Маркеры дизайна, вставленные в theme.json, также доступны с помощью CSS за пределами theme.json, используя ту же ссылку на ключ, показанную выше. Это относится к разработке блоков и другим компонентам, используемым в теме. Они не предназначены для использования только в файле theme.json и должны использоваться повторно в любом пользовательском CSS.

Мы рекомендуем следовать обоим этим рекомендациям, чтобы файл theme.json оставался единым источником достоверной информации. Это позволит вам легко обновлять токены дизайна, особенно когда вы используете автоматизированные инструменты, такие как инструмент моста WordPress VIP, который подключается к Figma.

Изменить редактор и стили блоков

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

В файле theme.json есть два ключевых места:

Настройки и settings.blocks — позволяет настраивать параметры, обычно доступные в редакторе блоков, и индивидуальные настройки для отдельных типов блоков.
Стили и styles.blocks — позволяет определять предустановленные стили для всего редактора блоков и настройки для каждого блока.

Например, вот как сделать так, чтобы все заголовки имели зеленый (основной) цвет по умолчанию и дополнительный цвет:

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }, "styles": { "blocks": { “core/heading”: { “color”: { "text": "var(--wp--custom--text--primary)" } } } }

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

Предупреждение о стиле

Используйте разделы styles и styles.blocks файла theme.json только для стилизации блоков, где это возможно. Не используйте стили CSS для переопределения стилей основных блоков, если в этом нет крайней необходимости. Переопределения CSS для стилей блоков, как правило, нестабильны — обновления редактора блоков могут изменить стиль и структуру, что приведет к поломке этих стилей.

Настройка на блок

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

Давайте продолжим с другим примером настроек цвета, в котором те же принципы применяются к другим настраиваемым свойствам, таким как цвет, типографика и интервал. Чтобы отключить возможность изменять цвет текста по умолчанию везде, кроме блоков заголовков, вот как можно настроить theme.json:

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “color”: { “text”: false }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }

В этом примере показано, как настроить глобальные параметры с помощью параметров настройки, а параметры, специфичные для блока, — с помощью раздела блоков в настройках. Это также относится к глобальному стилю (доступному в корневом свойстве стилей) и стилю, специфичному для блока (в файле styles.blocks).

Простой предустановленный шаблон

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

 { "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "settings": { "appearanceTools": true, "border": { "color": false, "radius": false, "style": false, "width": false }, "color": { "text": false, "background": false, "link": false, "custom": false, "defaultPalette": false, "defaultGradients": false, "defaultDuotone": false, "customGradient": false, "customDuotone": false, "palette": [ // Design system palette colors... ], "gradients": [ // Design system gradients... ] }, "spacing": { "margin": false, "padding": false, "units": ["rem", "%"] }, "typography": { "customFontSize": false, "fontStyle": false, "fontWeight": false, "letterSpacing": false, "lineHeight": false, "textDecoration": false, "textTransform": false, "dropCap": false, "fontFamilies": [], "fontSizes": [] } } }

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

В заключении

Theme.json — это мощный инструмент для организации токенов глобального дизайна, установки глобальных стилей темы и настройки отдельных блоков. Использование всех функций, которые редактор блоков предоставляет для настройки, делает реализацию системы проектирования централизованной и совместимой со встроенным редактором блоков.

Во второй части нашей серии мы рассмотрим более продвинутые советы, помимо theme.json, по управлению встроенными типами и стилями блоков в дизайн-системе.

Полезные ссылки

Что такое Theme.json?
Глобальные настройки и стили (theme.json)

Авторы

Алек Гитчес, старший разработчик программного обеспечения в Automattic

Корпоративный разработчик WordPress и энтузиаст систем проектирования, живущий в Тайбэе, Тайвань.

Гопал Кришнан, старший разработчик программного обеспечения в Automattic

Гопал работает над раздельным предложением WordPress от WordPress VIP, проявляя интерес к системам дизайна и Гутенбергу. Он живет в Сиднее, Австралия, и недавно переехал из Канады.