Usando um sistema de design com o WordPress Block Editor Pt. 1: tema.json

Publicados: 2022-12-15

Em nosso post de blog anterior, mostramos como você pode importar seu sistema de design do Figma para o theme.json de um tema do WordPress. Ao fazer isso, você pode garantir consistência contínua em suas propriedades digitais.

Nossa nova série de duas partes se baseia nessa base, mostrando como você pode usar tokens de design importados de theme.json no editor de blocos. Isso permitirá que você organize melhor seu site WordPress para refletir seu sistema de design. Existem dois objetivos principais:

  • Entenda as partes de theme.json relevantes para sistemas de design
  • Modifique e estenda theme.json para utilizar o sistema de design importado

Entendendo o theme.json

theme.json é um arquivo de configuração que permite configurar e tematizar o editor de bloco, alterar configurações de bloco e criar as bases para desenvolver um tema de bloco inteiro.

Destina-se a permitir que você controle as configurações e estilos globais do seu site WordPress. Cada novo site WordPress VIP vem com o tema Twenty Twenty-Three, um tema de bloco. Este tema é um ótimo ponto de partida para experimentar um tema de bloco leve e entender alguns dos controles poderosos disponíveis em theme.json.

Modificando theme.json

Vamos começar com o theme.json usado em nosso post de blog anterior. Observe a seção personalizada, onde nossa ferramenta de ponte pode inserir e atualizar um sistema de design do Figma. Esta é a seção principal onde você faz referência aos vários componentes do seu sistema de design (tokens de design) para realmente usar o theme.json de forma eficaz.

A seguir, veremos dicas e estratégias para que você aproveite tudo o que o theme.json tem a oferecer.

Armazenando tokens de design

Embora a localização de seus tokens de design possa ser personalizada usando a ferramenta de ponte, eles sempre devem ser mantidos na seção personalizada de configurações. Este é o local padrão da ferramenta ponte e não deve ser alterado. Isso os mantém devidamente organizados em um único local e pode ajudar a evitar conflitos com as seções de temas personalizados existentes.

Usando tokens de design

Vejamos um exemplo de uso da seção personalizada de theme.json. Aqui temos um trecho que definimos como cor de texto primária verde e fundo preto:

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

Isso nos permite fazer referência a essas duas cores em qualquer lugar dentro do theme.json usando:

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

O trecho a seguir garante que, por padrão, a menos que especificado de outra forma, cada bloco terá um fundo preto com texto verde:

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

O esquema para qualquer chave que você deseja referenciar em suas configurações personalizadas é:

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

O benefício é que você pode fazer referência a todos os seus tokens de design usando essas chaves enquanto possui um local central onde o valor real é gerenciado.

Melhores Práticas

  • Use as variáveis ​​de token de design geradas pelo WordPress (por exemplo, var(--wp--custom--text--primary) ) para referenciar tokens em qualquer lugar. Observe o snippet fornecido acima, onde fazemos referência à cor personalizada primária e de fundo, em vez de usar o próprio valor real. Isso garante que, quando você deseja atualizar propriedades como a cor do texto, você precisa alterar apenas um único local, pois os outros locais são simplesmente referências.
  • Os tokens de design inseridos no theme.json também podem ser acessados ​​com CSS fora do theme.json, usando a mesma referência de chave mostrada acima. Isso se aplica ao desenvolvimento de blocos e outros componentes usados ​​em um tema. Eles não devem ser usados ​​apenas no theme.json e devem ser reutilizados em qualquer CSS personalizado.

Recomendamos seguir essas duas práticas recomendadas para manter theme.json como uma única fonte de verdade. Isso permitirá que você atualize facilmente os tokens de design, especialmente quando usar ferramentas automatizadas como a ferramenta de ponte do WordPress VIP que se conecta ao Figma.

Modifique os estilos do editor e do bloco

Os trechos acima são uma ótima maneira de mergulhar na personalização da maneira como os blocos são estilizados. Por exemplo, você pode alterar o estilo padrão de um bloco, bem como quais predefinições estão disponíveis para escolha no editor de blocos. Isso é útil quando você deseja ser mais granular e ditar exatamente como serão os blocos integrados usados ​​em seu site.

Existem dois locais principais no theme.json:

  • Settings and settings.blocks—permite a personalização de configurações geralmente disponíveis no editor de blocos e configurações personalizadas para tipos de blocos individuais.
  • Estilos e estilos.blocos—permite a definição de estilo predefinido para todo o editor de blocos e personalizações por bloco.

Por exemplo, veja como garantir que todos os títulos tenham uma cor padrão verde (primária) e uma opção de cor secundária:

 "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)" } } } }

Isso configura cada bloco de cabeçalho para ter uma cor de texto verde primária e adiciona uma segunda opção de editor de bloco para alterar a cor para a cor secundária vermelha. Nota: Isso requer alguma repetição. O estilo especifica a cor primária padrão e a paleta combina a mesma cor com uma cor secundária para fornecer ambas as opções no editor de blocos.

Aviso de estilo

Use apenas as seções de estilos e styles.blocks do theme.json para estilizar seus blocos sempre que possível. Não use estilo CSS para substituir estilos de blocos principais, a menos que seja absolutamente necessário. As substituições de CSS para estilos de bloco geralmente não são estáveis ​​- as atualizações do editor de bloco podem alterar o estilo e a estrutura, fazendo com que esses estilos sejam interrompidos.

Customização por bloco

Embora o exemplo acima mostre como personalizar as configurações e o estilo de um bloco, também é possível desativar totalmente a personalização e limitar as opções do editor de blocos a blocos específicos. Isso é útil para controlar rigorosamente quais opções estão disponíveis para criar conteúdo, mantendo a aparência do sistema de design.

Vamos continuar com outro exemplo de configurações de cores em que os mesmos princípios se aplicam a outras propriedades configuráveis, como cor, tipografia e espaçamento. Para desativar a capacidade de alterar a cor do texto padrão em todos os lugares, exceto nos blocos de título, veja como o theme.json pode ser configurado:

 "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" } ] } } } }

Este exemplo mostra a definição de configurações globais por meio de configurações e configurações específicas de bloco por meio da seção de blocos em configurações. Isso também se aplica ao estilo global (disponível na propriedade de estilos raiz) e estilo específico de bloco (em estilos.blocos).

Modelo predefinido simples

Uma boa maneira de começar a criar o sistema de design é bloquear globalmente as configurações do editor de blocos. Depois disso, você pode ativar gradualmente as configurações para blocos individuais e controlar a aparência do seu sistema de design sem ser sobrecarregado pelas opções de personalização. Para começar, aqui está um conjunto simples de configurações que o sistema de design do WordPress VIP usa para desativar globalmente todas as bordas, cores , tipografia e controles de espaçamento por padrão no editor:

 { "$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": [] } } }

Com esses padrões bloqueados, você pode usar settings.blocks para expor opções para blocos específicos no editor e limitar a personalização a configurações bem definidas.

Para concluir

Theme.json é uma ferramenta poderosa para organizar tokens de design globais, definir estilos de temas globais e personalizar blocos individuais. Aproveitar todos os recursos que o editor de blocos expõe para personalização torna a implementação do sistema de design centralizada e compatível com o editor de blocos integrado.

Na Parte 2 de nossa série, abordaremos dicas mais avançadas fora do theme.json para gerenciar tipos e estilos de blocos integrados em um sistema de design.

Links Úteis

  • O que é Theme.json?
  • Configurações e estilos globais (theme.json)

Autores

Alec Geatches, desenvolvedor de software sênior na Automattic

Desenvolvedor WordPress corporativo e entusiasta de sistemas de design morando em Taipei, Taiwan.

Gopal Krishnan, desenvolvedor de software sênior da Automattic

Gopal trabalha na oferta separada do WordPress VIP do WordPress, com interesse em sistemas de design e Gutenberg. Ele mora em Sydney, na Austrália, e recentemente se mudou do Canadá.