Trabalhando com Propriedades e Pares de Valores-chave no theme.json

Compreender a estrutura e as propriedades do arquivo theme.json é fundamental para o desenvolvimento de temas de bloco. Esse arquivo funciona como o principal centro de configuração de todos os temas baseados em blocos.

Seja construindo um tema do zero, personalizando um tema existente, desenvolvendo uma variação de estilo ou trabalhando em um tema filho (child theme), compreender como trabalhar com o theme.json é essencial.

Felizmente, o JSON (JavaScript Object Notation) é um formato legível por humanos com uma estrutura hierárquica que organiza as informações de propriedades gerais a específicas. No contexto do theme.json, a familiaridade com CSS (Cascading Style Sheets) é mais relevante do que um conhecimento aprofundado de JavaScript.

Este artigo tem como objetivo detalhar as propriedades primárias e secundárias (aninhadas) no arquivo theme.json, focando nas propriedades principais de configurações e estilos. Esses são os elementos principais do arquivo e forneceremos explicações detalhadas e exemplos de código para cada um deles.

Estamos construindo sobre os fundamentos apresentados no nosso artigo anterior, Liberando o poder do theme.json: Personalizando seu tema de WordPress como um profissional, particularmente na seção Trabalhando com as propriedades do arquivo theme.json.

Como os estilos são renderizados em um tema de bloco

O WordPress usa um processo interno em cascata para renderizar estilos de um site. Quando várias fontes definem a mesma configuração ou estilo, o WordPress precisa determinar qual delas tem prioridade. Abaixo está a ordem de prioridade que o WordPress segue para decidir quais estilos serão aplicados:

1. Núcleo do WordPress – O arquivo de fallback theme.json está no diretório wp-includes. Esse arquivo é atualizado com as principais versões do WordPress e não deve ser editado.
2. Tema – O principal arquivo theme.json usado pelos desenvolvedores de temas para definir as configurações, os estilos e outras propriedades do tema.
3. Variações de estilo – Se um tema incluir variações de estilo, cada uma terá seu próprio arquivo theme.json armazenado no subdiretório de estilos do tema.
4. Tema filho (child theme) – Assim como nos temas clássicos, um child theme pode modificar um tema principal (parent theme) sem alterar seus arquivos (opcional).
5. Variações de estilo do tema filho (child theme) – Semelhante às variações de estilo regulares, child theme pode ter seu próprio arquivo theme.json em seu subdiretório de estilos (opcional).
6. Estilos criados pelo usuário – São estilos personalizados adicionados por meio de editores do WordPress (para páginas, artigos ou para o site como um todo) e armazenados no banco de dados.

A ordem em cascata garante que os estilos das fontes de maior prioridade substituam os das fontes de menor prioridade. Por exemplo, as configurações no arquivo theme.json do tema substituirão o núcleo do WordPress theme.json. Da mesma forma, a variação de estilo de um tema filho (child theme) precederá a variação de estilo do tema principal (parent theme).

Os estilos criados pelo usuário (6) têm a prioridade mais alta, substituindo todos os outros estilos na cascata.

Neste artigo, nosso foco é o arquivo theme.json localizado no diretório raiz de qualquer tema de bloco do WordPress.

Uma referência para as propriedades primárias e seus valores-chave

Vamos explorar os sete objetos de nível superior em theme.json, que agrupamos em três seções para facilitar a compreensão das informações.

Algumas definições antes de começarmos

Ao trabalhar com o theme.json, você provavelmente encontrará definições diferentes para componentes importantes. Para maior clareza, veja como os definimos neste artigo:

1. Seções – Agrupamentos de opções de nível superior (também chamados de “objetos de nível superior” em alguns artigos).
2. Objetos – Os principais elementos do arquivo theme.json, como settings e styles.
3. Propriedades – Os componentes dentro dos objetos. Por exemplo, o objeto settings contém 12 propriedades diferentes.
4. Pares de chave-valor – As propriedades são compostas por pares de chave-valor. Uma “chave” representa um atributo da propriedade e está entre aspas. Um “valor” pode ser um booleano, string ou array.

Quando mencionamos “por padrão”, estamos nos referindo às configurações padrão no arquivo theme.json do núcleo, localizado em wp-includes/theme.json.

Por fim, “usuários” refere-se a qualquer pessoa que use o admin do WordPress e que possa modificar as configurações nos editores de site, página ou artigo.

Visão geral da sintaxe

1. Booleans não são delimitados por aspas.
2. Strings são delimitadas por aspas duplas.
3. Arrays são envolvidos por colchetes [].
4. Objetos são delimitados por chaves {}, contendo várias propriedades ou objetos aninhados.
5. Vírgulas são usadas para separar múltiplos pares de chave-valor dentro de um objeto.

Aqui está um exemplo de sintaxe típica:

{
    "house": {
        "rooms": "kitchen"
    }
}

Agrupando as propriedades

Organizamos as propriedades em três seções para facilitar a navegação:

1. Propriedades básicas
2. Propriedades de configurações e estilos
3. Propriedades de templates e padrões

Para simplificar os exemplos, às vezes omitimos os delimitadores externos dos objetos. Em vez de mostrar a estrutura completa:

{
    "settings": {
        "appearanceTools": false,
        "background": {
            "backgroundImage": true
        }
    }
}

Podemos encurtá-la para:

"appearanceTools": false,
"background": {
    "backgroundImage": true
}

Propriedades básicas

No início de um arquivo theme.json, você normalmente encontrará duas propriedades principais: $schema e version. Essas propriedades são geralmente colocadas na parte superior do arquivo. A versão atual do schema é 3, introduzida com o WordPress 6.6.

"$schema": "https://schemas.wp.org/wp/6.6/theme.json", "version": 3

Propriedades de configurações e estilos

Se você estiver familiarizado com temas clássicos, considere a propriedade de configurações como recursos e funções que geralmente seriam definidos no arquivo functions.php e expostas na seção Aparência > Personalizado do administrador do WordPress.

Os estilos, por outro lado, são semelhantes às propriedades CSS que costumavam residir no arquivo styles.css, controlando o layout e o design do tema.

Configurações

Com exceção das propriedades block e elements, todas as outras configurações são globais. Como muitas dessas configurações são booleanas, elas funcionam como alternadores para ativar ou desativar um recurso da interface do usuário.

É importante observar que nem todas as chaves se aplicam a todos os contextos. Por exemplo, não é possível permitir que os usuários definam uma altura mínima para um bloco de parágrafos.

Ferramentas de aparência

Essas configurações podem ser ativadas coletivamente ou individualmente usando "appearanceTools": true.

A ativação desse recurso expõe várias opções de interface do usuário no editor do WordPress, economizando o tempo dos desenvolvedores. Por padrão, essas ferramentas estão desativadas ("appearanceTools": false).

As chaves em appearanceTools incluem:

• background
  • backgroundImage – Permite que o usuário adicione uma imagem de fundo aos blocos.
  • backgroundSize – Define como a imagem de fundo é dimensionada (cobrir, conter, etc.).
• border
  • color – Permite a seleção de cores para as bordas.
  • style – Permite que o usuário escolha o estilo da borda (sólida, tracejada, pontilhada, etc.).
  • width – Controla a espessura da borda.
  • radius – Permite que os usuários definam cantos arredondados ajustando o raio da borda.
• color
  • link – Permite que você defina uma cor para os links dentro do conteúdo.
  • heading – Permite que os usuários definam cores para as tags de título (<h1>, <h2>, etc.).
  • button – Controla a cor dos botões no tema.
  • caption – Permite definir uma cor personalizada para as legendas.
• dimensions
  • aspectRatio – Permite que os usuários controlem a relação entre largura e altura dos blocos.
  • minHeight – Permite definir uma altura mínima para os blocos.
• position
  • sticky – Permite que o usuário torne um bloco aderente, o que significa que ele permanece fixo no lugar durante a rolagem.
• spacing
  • blockGap – Controla o espaçamento entre os blocos.
  • margin – Permite que os usuários ajustem as margens em torno de um bloco.
  • padding – Controla o preenchimento dentro de um bloco, definindo o espaço entre o conteúdo e a borda.
• typography
  • lineHeight – Permite que os usuários ajustem a altura da linha (espaço entre linhas de texto) para melhorar a legibilidade.

Exemplo: Se você quiser que os usuários adicionem uma imagem de fundo e mantenham outras ferramentas de aparência desativadas, use:

"appearanceTools": false,
"background": {
    "backgroundImage": true
}

Blocos

A propriedade blocks permite que os usuários habilitem configurações por bloco, que podem substituir as configurações globais.

Exemplo: Se appearanceTools estiver definido como false, mas você ainda quiser expor controles de borda para um bloco, use:

"border": {
    "color": true,
    "style": true,
    "width": true,
    "radius": true
}

Cor

Essa propriedade permite que os usuários definam opções de cores, como cor de fundo, cor do texto ou gradientes.

Chaves na propriedade color:

• background – Controla a cor de fundo de blocos ou elementos.
• custom – Ativa ou desativa a capacidade dos usuários de selecionar cores personalizadas.
• customDuotone – Permite que os usuários apliquem filtros duotônicos personalizados às imagens.
• customGradient – Ativa opções de gradiente personalizadas.
• defaultDuotone – Oferece opções de filtros duotônicos padrão para imagens.
• defaultGradient – Define as opções de gradiente padrão disponíveis para os usuários.
• defaultPalette – Controla a paleta de cores padrão do tema.
• duotone – Permite filtros duotônicos em imagens.
• gradient – Habilita opções de gradiente para fundos ou outros elementos.
• link – Define a cor dos links no tema.
• text – Controla as opções de cores de texto.
• heading – Define as cores dos cabeçalhos (por exemplo, h1, h2, etc.).
• button – Controla as opções de cores dos botões.
• caption – Define a cor da legenda para elementos de mídia.

Vamos explorar alguns exemplos:

Exemplo 1: Se quiser desativar o seletor de cores para os usuários, você pode usar o seguinte:

"color": {
    "custom": false
}

Exemplo 2: Para definir cores de tema primárias e secundárias personalizadas, você pode usar esta configuração:

"color": {
   "palette": [
       { "slug": "primary", "color": "#0000ff", "name": "Primary" },
       { "slug": "secondary", "color": "#ff0000", "name": "Secondary" }
   ]
}

Dimensões

Essa propriedade fornece opções para controlar as dimensões do bloco, como largura, altura e proporção.

Chaves na propriedade dimensions:

• aspectRatio – Permite que os usuários definam ou bloqueiem a relação de aspecto de um bloco (por exemplo, 16:9, 4:3).
• defaultAspectRatios – Define as relações de aspecto padrão para os blocos.
• minHeight – Permite que você defina uma altura mínima para os blocos.

Por exemplo, para permitir que os usuários definam uma altura mínima para os blocos suportados, use o seguinte:

"dimensions": {
    "minHeight": true
}

Layout

A propriedade layout permite que os usuários definam opções relacionadas ao layout, como a largura do conteúdo e se os usuários podem personalizar o layout. Isso permite que os usuários definam opções de layout com essas chaves:

• contentSize – Define a largura padrão dos blocos.
• wideSize⁣ – Define a largura dos blocos quando a opção de alinhamento amplo é selecionada.
• allowEditing – Determina se os usuários podem editar as opções de layout.
• allowCustomContentAndWideSize – Permite a personalização de contentSize e wideSize.

Exemplo: Configure as opções de layout com larguras padrão e ampla para blocos:

    "contentSize": "620px",
    "wideSize": "1000px"
}

Lightbox

A propriedade lightbox permite que os usuários ativem o recurso “Expand on click” para imagens, abrindo-as em uma visualização maior quando clicadas.

Chaves na propriedade lightbox:

• enabled – Ativa ou desativa o recurso de lightbox.
• allowEditing – Permite que os usuários alternem a configuração da lightbox.

Exemplo: Para permitir que os usuários alternem o recurso de lightbox para imagens, use esta configuração:

"blocks": {
    "core/image": {
        "lightbox": {
            "allowEditing": true
        }
    }
}

Position

A propriedade position permite que os usuários controlem a posição dos blocos, como, por exemplo, tornar um bloco fixo na página.

Exemplo: Tornar um bloco fixo:

"position": {
    "sticky": true
}

Shadow

Essa propriedade permite que os usuários apliquem efeitos de sombra aos blocos, usando predefinições ou sombras personalizadas.

Teclas da propriedade shadow:

• defaultPresets — Ativa ou desativa as predefinições de sombras padrão.
• presets — Permite que os usuários definam predefinições de sombras personalizadas.

Aqui está um exemplo em que as sombras padrão são desativadas e uma sombra personalizada chamada “Natural” é definida:

"shadow": {
    "defaultPresets": false,
    "presets": [
        { "name": "Natural", "slug": "natural", "shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)" }
    ]
}

Os números indicam as etapas de clique realizadas no editor do site para demonstrar a interface do usuário. A etapa final mostra a sombra “Natural”.

Spacing

Essa propriedade define como o espaçamento (preenchimento, margem, espaço) é controlado no editor.

Teclas na propriedade spacing:

• blockGap – Controla o espaço entre os blocos.
• margin – Permite que os usuários definam as margens em torno dos blocos.
• padding – Fornece opções para definir o preenchimento dentro dos blocos.
• units – Define as unidades disponíveis para espaçamento (por exemplo, px, rem).
• customSpacingSize – Permite que os usuários definam tamanhos de espaçamento personalizados.
• spacingSizes – Define uma gama de tamanhos de espaçamento predefinidos.
• spacingScale – Permite o dimensionamento de unidades de espaçamento.

Exemplo: Para limitar os usuários a duas unidades de medida (pixels e rem) para preenchimento, margens, larguras e alturas, e para expor os controles de espaçamento no editor do site, defina appearanceTools como true e configure desta forma:

"spacing": {
    "units": ["px", "rem"]
}

Typography

Essa propriedade controla as configurações relacionadas a texto do seu tema, como tamanho da fonte, peso e altura da linha.

Teclas na propriedade typography:

• defaultFontSizes – Define os tamanhos de fonte padrão disponíveis para os usuários.
• customFontSize – Ativa ou desativa a capacidade de definir tamanhos de fonte personalizados.
• fontStyle – Controla o estilo da fonte (por exemplo, normal, itálico).
• fontWeight – Permite que os usuários definam o peso da fonte (por exemplo, negrito, claro).
• fluid – Permite a tipografia fluida, ajustando o tamanho da fonte dinamicamente com base no tamanho da tela.
• letterSpacing – Controla o espaçamento entre as letras.
• lineHeight – Define a altura de cada linha de texto.
• textAlign – Permite o controle do alinhamento do texto (por exemplo, esquerda, centro, direita).
• textDecoration – Fornece opções de decoração de texto (por exemplo, sublinhado).
• writingMode – Define o modo de escrita do texto (por exemplo, horizontal ou vertical).

Exemplo: Para desativar os tamanhos de fonte personalizados e as opções ropCap, use o seguinte:

"typography": {
    "customFontSize": false,
    "dropCap": false
}

Nesse caso, as duas teclas destacadas não aparecerão no editor.

Alinhamentos com reconhecimento de preenchimento raiz

Quando definida como true, essa propriedade garante que os alinhamentos de blocos largos ou de largura total estejam cientes do preenchimento aplicado ao elemento raiz da página (por exemplo, <html> ou <body>), garantindo o alinhamento adequado mesmo quando o preenchimento é aplicado.

Exemplo:

"useRootPaddingAwareAlignments": true

Quando definida como true, você também deve definir os valores de preenchimento superior, direito, inferior e esquerdo da raiz como um estilo. (Mais informações sobre propriedades de estilo abaixo).

"spacing": {
    "padding": {
        "top": "0",
        "right": "100px",
        "bottom": "0",
        "left": "100px"
    }
}

Aplicando a configuração useRootPaddingAwareAlignements juntamente com o preenchimento à direita e à esquerda do corpo (como no código acima), você obtém o seguinte resultado.

Styles

A propriedade styles permite que você aplique estilos CSS à raiz (padrão), a elementos específicos ou a blocos individuais em seu tema.

Estilos de plano de fundo

Você pode controlar as propriedades relacionadas ao plano de fundo, como imagens, posicionamento e anexos.

Chaves comuns para plano de fundo:

• backgroundImage – Define a imagem de fundo para o bloco ou elemento.
• backgroundPosition – Define a posição da imagem de fundo (por exemplo, centro, canto superior direito).
• backgroundRepeat – Especifica se a imagem de fundo se repete (por exemplo, repetir, não repetir).
• backgroundSize – Controla o tamanho da imagem de fundo (por exemplo, capa, conter).
• backgroundAttachment – Especifica se a imagem de fundo é fixa ou se rola com a página.

Por exemplo, você pode definir uma imagem de fundo para o seu tema:

"background": {
   "backgroundImage": {
       "url": "https://joyofwp.com/wp-content/uploads/2024/09/dots.png"
   }
}

Bloquear estilos específicos

Você pode aplicar estilos específicos, como sombra, tipografia e bordas, a blocos individuais.

Teclas para borda:

• color – Define a cor da borda.
• radius – Define o raio da borda para cantos arredondados.
• style – Especifica o estilo da borda (por exemplo, sólido, pontilhado).
• width – Controla a largura da borda.
• top, right, bottom, left – Permite que você defina estilos de borda individuais para cada lado.

Por exemplo, o seguinte define uma borda vermelha sólida de 20px em toda a página:

"border": {
   "color": "#ff0000",
   "width": "20px",
   "style": "solid"
}

Você também pode atribuir CSS personalizado a um bloco, elemento ou raiz específicos.
Por exemplo, o código abaixo aplica uma cor de texto vermelha a um bloco de tabela:

"border": {
   "color": "#ff0000",
   "width": "20px",
   "style": "solid"
}

Estilos de cores

A propriedade color permite que você controle as configurações de cor de fundo, gradiente e texto.

Teclas para color:

• background – Define a cor de fundo do bloco ou elemento.
• gradient – Define um gradiente de fundo para o bloco.
• text – Controla a cor do texto.

O exemplo abaixo define um plano de fundo preto com texto branco em cada elemento de cada página:

"color": {
   "background": "#000000",
   "text": "#ffffff"
}

CSS

A propriedade css permite que você anexe estilos personalizados a classes específicas, permitindo um controle mais granular sobre os estilos do tema.

Exemplo: Aplique estilos personalizados a wp-block-template-parts e wp-block-button e adicione um efeito de foco para o botão:

"css": ".wp-block-template-part { background-color: #777777; padding: 20px; } .wp-block-button__link:hover { background-color: #ffffff; color: #000000; }"

Como você pode ver, as partes do modelo do cabeçalho e do rodapé são atribuídas a background-color e padding, enquanto o estado de foco do botão tem um fundo branco com texto preto.

Dimensões

A propriedade dimensions permite que você controle a largura, a altura e a proporção dos blocos.

Chaves para dimensões:

• aspectRatios – Define relações de aspecto personalizadas para elementos.
• minHeight – Define a altura mínima dos blocos.

Exemplo: Criar uma relação de aspecto personalizada de 3:7 para um bloco de imagem:

"blocks": {
   "core/image": {
       "dimensions": {
           "aspectRatio": "custom"
       }
   }
}

No entanto, somente o que foi mencionado acima não é suficiente. Você deve registrar o estilo “personalizado” nas seções de configurações.

"dimensions": {
   "defaultAspectRatios": true,
   "aspectRatios": [
       {
           "name": "Custom Ratio 3:7",
           "slug": "custom",
           "ratio": "3/7"
       }
   ]
}

Aqui você pode ver que a opção “Custom Ratio” foi adicionada. Se você preferir remover as sete proporções de aspecto padrão, remova "defaultAspectRatios":true da seção de configurações.

Estilos específicos de elementos

A propriedade elements permite que você aplique estilos a elementos HTML específicos, como links, botões ou cabeçalhos.

Por exemplo, o código abaixo desativa a decoração de texto (sublinhado) para todos os links:

"elements": {
   "link": {
       "typography": {
           "textDecoration": "none"
       }
   }
}

Filter

A propriedade filter permite que você aplique efeitos de filtro semelhantes aos do CSS (por exemplo, desfoque, brilho) a determinados blocos, como imagens.

Exemplo: Aplicar um filtro de desfoque e brilho a um bloco de imagem:

"blocks": {
   "core/image": {
       "filter": {
           "duotone": "blur(5px) brightness(0.8)"
       }
   }
}

Aqui, os efeitos de desfoque e brilho foram aplicados ao bloco de imagens. Outros valores de filtro disponíveis incluem:

• contrast – Ajusta o contraste do elemento.
• grayscale – Converte o elemento em escala de cinza.
• invert – Inverte as cores do elemento.
• opacity – Controla a transparência do elemento.
• saturate – Aumenta ou diminui a saturação das cores.
• sepia – Aplica um tom sépia ao elemento.

Contorno

A propriedade outline define estilos para contornos desenhados fora da borda do elemento, sem afetar o espaço do layout.

Chaves para contorno:

• color – Define a cor do contorno.
• offset – Controla o espaço entre a borda e o contorno.
• style – Especifica o estilo do contorno (por exemplo, pontilhado, sólido).
• width – Define a largura do contorno.

Exemplo: Aplicar um contorno pontilhado vermelho a um botão:

"elements": {
   "button": {
       "outline": {
           "color": "#ff0000",
           "style": "dotted",
           "width": "4px"
       }
   }
}

Estilos de sombra

A propriedade shadow permite que você aplique sombras de caixa aos blocos, acrescentando profundidade e ênfase aos elementos.

Exemplo: Aplicar uma sombra a todas as imagens:

"blocks": {
   "core/image": {
       "shadow": "0 10px 20px 0 rgb(0 0 225 / 0.50)"
   }
}

Estilos de espaçamento

A propriedade spacing gerencia os estilos de preenchimento, margem e espaço de bloco do seu tema.

Teclas para espaçamento:

• blockGap – Controla o espaço entre os blocos.
• margin – Define as margens ao redor dos blocos.
• padding – Controla o preenchimento dentro dos blocos.

Este exemplo abaixo define o preenchimento personalizado nos lados esquerdo e direito:

"spacing": {
   "padding": {
       "left": "min(6.5rem, 8vw)",
       "right": "min(6.5rem, 8vw)"
   }
}

Estilos de tipografia

A propriedade typography gerencia estilos de fonte, tamanhos e outras configurações relacionadas a texto.

Chaves comuns para tipografia:

• fontFamily – Define a família da fonte para o texto.
• fontSize – Define o tamanho da fonte.
• fontStyle – Especifica o estilo da fonte (por exemplo, itálico, normal).
• fontWeight – Controla o peso (espessura) da fonte.
• letterSpacing – Ajusta o espaçamento entre as letras.
• lineHeight – Define a altura da linha (espaçamento entre linhas de texto).
• textAlign – Define o alinhamento do texto (por exemplo, esquerda, centro, direita).
• textColumns – Controla o número de colunas de texto.
• textDecoration – Define a decoração do texto (por exemplo, sublinhado).
• writingMode – Define o modo de escrita (por exemplo, horizontal, vertical).
• textTransform – Controla a transformação do texto (por exemplo, maiúsculas, minúsculas).

Por exemplo, você pode definir que todos os cabeçalhos tenham um peso de fonte de 300 e um estilo itálico:

"blocks": {
   "core/heading": {
       "typography": {
           "fontWeight": "300",
           "fontStyle": "italic"
       }
   }
}

Propriedades de templates e padrões

Essas três propriedades de nível superior são usadas para registrar ativos personalizados no seu tema.

1. Templates personalizados

A propriedade templates é usada para registrar templates personalizados para vários tipos de artigos.

• name – O nome do arquivo .html ou .php localizado no subdiretório templates.
• title – O título que será atribuído ao template para facilitar a identificação.
• postTypes – Especifica o tipo de conteúdo (por exemplo, artigos, páginas) que o template é usado para renderizar.

2. Partes do template

A propriedade templateParts é usada para definir partes reutilizáveis de templates (por exemplo, cabeçalhos, rodapés).

• name – O nome do arquivo .html ou .php localizado no subdiretório parts.
• title – O título dado à parte do template para facilitar a identificação.
• area – Especifica a qual parte da página a parte do template se aplica (por exemplo, header, footer, sidebar).

3. Patterns

A propriedade patterns permite que você registre um array de slugs de padrão do diretório de padrões do WordPress, tornando-os disponíveis no tema.

Veja a seguir como registrar um padrão:

"patterns": [
    "my-custom-pattern-slug"
]

Três exemplos práticos de como trabalhar com theme.json

Aqui estão algumas coisas que você pode querer fazer para um tema que está desenvolvendo.

1. Adicionar um padrão

Veja como você pode incluir dois padrões do diretório de padrões do WordPress. Aqui é mostrado o padrão “Fullscreen Cover Image Gallery”:

"patterns": [
   "fullscreen-cover-image-gallery",
   "hero-banner-with-overlap-images"
]

Observações:

• Os padrões extraídos do diretório Patterns não serão exibidos na seção Pattern do editor do site. Esses padrões estarão disponíveis somente por meio do Inserter.
• Neste exemplo, incluímos a propriedade de nível superior patterns (em comparação com settings e styles, que foram omitidas em exemplos anteriores por brevidade.

2. Adicionar uma fonte personalizada

Fizemos o download de dois arquivos de fonte (Roboto-Regular.ttf e Roboto-Bold.ttf) da biblioteca do Google Fonts e os carregamos no subdiretório assets/fonts/ do nosso tema.

O código a seguir registra as duas fontes, tornando-as disponíveis em todo o site:

"settings": {
   "typography": {
       "fontFamilies": [
           {
               "fontFamily": "Roboto",
               "name": "Roboto",
               "slug": "roboto",
               "fontFace": [
                   {
                       "fontFamily": "Roboto Regular",
                       "fontWeight": "400",
                       "fontStyle": "normal",
                       "src": [
                           "file./assets/fonts/Roboto-Regular.ttf"
                       ]
                   },
                   {
                       "fontFamily": "Roboto Bold",
                       "fontWeight": "700",
                       "fontStyle": "bold",
                       "src": [
                           "file./assets/fonts/Roboto-Bold.ttf"
                       ]      
                   }  
               ]
           }
       ]
   }
}

3. Configurando sua paleta de cores

Se quiser restringir os usuários a uma paleta de cores específica, você pode configurá-la da seguinte forma. Gradientes e duotones também podem ser configurados conforme suas preferências.

Exemplo:

"settings": {
   "color": {
       "custom": false,
       "defaultPalette": false,
       "palette": [
           {
               "slug": "primary",
               "color": "#1e8cbe",
               "name": "Primary"
           },
           {
               "slug": "secondary",
               "color": "#21759b",
               "name": "Secondary"
           },
           {
               "slug": "tertiary",
               "color": "#",
               "name": "Tertiary"
           },
           {
               "slug": "accent",
               "color": "#464646",
               "name": "Accent"
           }
       ]
   }
}

Você reconhece essas quatro cores? Elas fazem parte da história de cores do WordPress.

Resumo

Este artigo destaca o papel fundamental do theme.json no desenvolvimento de temas modernos do WordPress. Ao dominar o theme.json, você pode personalizar totalmente o design visual e a interface do usuário do seu tema sem precisar de substituições complexas de PHP ou CSS.

Entender como usar efetivamente propriedades como appearanceTools proporciona maior controle e eficiência ao criar ou refinar temas de WordPress, tornando esse arquivo uma ferramenta essencial para desenvolvedores que desejam criar temas flexíveis e fáceis de usar.