Os desenvolvedores de temas do WordPress podem usar um arquivo theme.json para simplificar um processo que costumava depender muito do PHP. No entanto, você ainda pode usar suas habilidades em HTML, JavaScript e PHP para criar seus temas, e o CSS não é exceção. Na verdade, você usa propriedades personalizadas de CSS em theme.json. Isso pode aprimorar o estágio do design e oferecer maior flexibilidade.
Neste guia, abordamos as propriedades personalizadas do CSS para explorar como elas funcionam com o WordPress e o theme.json. Mas, antes disso, vamos resumir o theme.json, a edição completa de sites (FSE) e como o CSS se encaixa nessa nova abordagem de design.
Como o theme.json funciona com o WordPress
O arquivo theme.json apareceu pela primeira vez no WordPress 5.8. É uma maneira revolucionária de projetar temas WordPress, usando a sintaxe JSON para criar um arquivo de configuração. O WordPress lê esse arquivo e aplica os resultados sem a necessidade de muito PHP, CSS ou JavaScript.
As configurações e estilos globais do FSE controlam vários aspectos visuais do seu tema. Podem incluir paletas de cores e tipografia típicas, mas também opções de layout e estilos individuais de Blocos e elementos.
Embora o FSE seja intuitivo, poderoso, adaptável e fácil de usar, o theme.json pode ajudar a preencher a lacuna entre as funções de usuário final e desenvolvedor. Quase todas as opções que o theme.json oferece a você também são visíveis no Editor de Site.
O uso do theme.json oferece muitas vantagens ao criar temas para o WordPress. Há alguns motivos para isso:
- Você tem um local central para a configuração do design do seu tema, o que facilita o gerenciamento e a atualização.
- Há menos camadas de abstração entre a experiência do frontend, o Editor de Sites e a base de código de um tema.
- O uso do
theme.jsonoferece compatibilidade com o futuro do desenvolvimento e do design no WordPress. - A funcionalidade integrada do WordPress significa que você reduz a necessidade de o usuário aplicar CSS personalizado.
Vamos dar uma olhada em como o theme.json se relaciona com as configurações e estilos globais do FSE.
Uma introdução às configurações e aos estilos globais do FSE
O FSE representa uma nova era de desenvolvimento de temas WordPress, e as configurações e os estilos globais estão na vanguarda. Isso permite que os usuários personalizem quase todos os aspectos da aparência de um site por meio da funcionalidade do Editor de Sites.
Aqui, você pode ajustar aspectos do layout do seu tema com opções que costumavam exigir CSS ou um plugin de construtor de páginas de terceiros. A modificação de margens, preenchimento e bordas são exemplos, mas há muitos outros.
Você pode até mesmo ativar ou desativar grande parte dessa funcionalidade em theme.json (ou no próprio arquivo block.json de um bloco). Isso permite a personalização da interface do usuário juntamente com o design geral do site.
Entretanto, as opções que você tem à disposição, embora amplas, podem não atender a todas as necessidades. Isso será especialmente verdadeiro se você criar um tema do zero. Essa é uma tarefa que as propriedades personalizadas do CSS podem ajudar a resolver.
Entendendo as propriedades personalizadas do CSS
Em PHP, JavaScript e em quase todas as linguagens de programação, as variáveis armazenam os valores de vários elementos em seu código. Por exemplo, você pode armazenar valores como nomes, datas e números e usá-los em todo o programa.
As variáveis CSS3 — ou propriedades personalizadas de CSS, como as chamamos neste artigo — são compatíveis com a maioria dos navegadores atuais. O Internet Explorer não é compatível com elas, nem o Opera Mini. Ainda assim, todos os principais players são compatíveis.
As propriedades personalizadas do CSS permitem que você armazene valores para reutilizá-los em toda a sua folha de estilo. É uma maneira eficiente de criar CSS mais dinâmico e flexível. Você pode atualizar várias regras de estilo alterando um único valor.
O conceito de variáveis CSS não é totalmente novo. Pré-processadores como o Sass usam funcionalidade semelhante. Por exemplo, veja o seguinte código Sass:
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-colorIsso processa em CSS típico:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}No entanto, as propriedades personalizadas do CSS levam isso diretamente para o navegador. Isso oferece algumas vantagens:
- Atualizações dinâmicas. Ao contrário da maioria das variáveis de pré-processador, você pode atualizar as propriedades personalizadas do CSS “em tempo real” usando JavaScript.
- Natureza em cascata. As propriedades personalizadas seguirão a cascata do CSS, o que lhe dará maior flexibilidade e um estilo mais coerente com o contexto.
As propriedades personalizadas também terão melhor desempenho, pois reduzem a redundância de código. Folhas de estilo menores significam tempos de carregamento mais rápidos.
A sintaxe das propriedades personalizadas de CSS
Assim como as variáveis típicas do pré-processador, a sintaxe das propriedades personalizadas do CSS é simples. Ela usa hífens duplos em vez de cifrões para especificar uma propriedade:
:root {
--primary-color: #007bff;
}A partir daí, você usa a função var() para atribuir essas propriedades aos elementos:
.button {
background-color: var(--primary-color);
}Observe que você também pode atribuir propriedades personalizadas usando a propriedade @. Entretanto, como você entenderá em breve, o WordPress simplifica todo esse processo.
Onde você pode usar as propriedades personalizadas de CSS
Versatilidade é a ordem do dia quando se trata de propriedades personalizadas de CSS. Com o WordPress e o theme.json, você tem algumas maneiras de usá-las:
- Predefinições: Você pode definir predefinições de cor, fonte e espaçamento.
- Estilos de Bloco: Blocos Individuais podem usar propriedades personalizadas para manter um estilo consistente.
- Estilos globais: As propriedades personalizadas são de grande valia para o design de todo o site.
Você pode criar propriedades totalmente personalizadas para qualquer finalidade que desejar. Vejamos um exemplo prático de como usar as propriedades personalizadas em seu arquivo theme.json:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"line-height": {
"body": 1.5,
"heading": 1.2
}
}
},
"styles": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--body)"
},
"blocks": {
"core/heading": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--heading)"
}
}
}
}
}Aqui, definimos uma predefinição de cor e usamos a propriedade custom para definir os valores de line-height para os cabeçalhos e o corpo das páginas. O WordPress gerará propriedades CSS para os elementos que você definir usando custom. Mais adiante, podemos atribuir essas propriedades personalizadas a vários estilos, configurações, Blocos e outros.
Os benefícios de usar as propriedades personalizadas de CSS
Talvez você já tenha ideias sobre como as propriedades personalizadas de CSS podem ajudá-lo a desenvolver temas. Mesmo assim, você deve observar muitos benefícios.
Já falamos sobre modularidade e reutilização. Todos os valores comuns que você definir como propriedades personalizadas promoverão a consistência e reduzirão a redundância. Essa redundância se traduzirá em melhor desempenho potencial para o seu tema.
Para o usuário final, as propriedades personalizadas oferecem várias vantagens:
- Personalização simplificada. Os usuários e proprietários de sites podem personalizar um tema sem a necessidade de conhecimentos complexos de CSS. Depois que você expõe as variáveis por meio de
theme.json, os usuários podem acessar as configurações por meio do Editor de Site. - Melhor compatibilidade com o FSE. As propriedades personalizadas se alinham aos princípios do FSE, permitindo que você crie designs de temas mais flexíveis e dinâmicos.
- Manutenção e atualizações mais fáceis. Se você precisar atualizar valores comuns em todo o seu tema, uma propriedade personalizada significa alterá-los em apenas um lugar. Isso simplifica a manutenção e torna as atualizações e os ajustes mais fáceis de gerenciar.
De modo geral, as propriedades personalizadas podem melhorar o fluxo de trabalho de desenvolvimento do tema. Além disso, determiná-las é mais simples do que usar variáveis CSS típicas.
Como definir propriedades personalizadas de CSS em theme.json
Vamos abordar os aspectos práticos da definição e do uso de propriedades personalizadas de CSS em theme.json. A primeira etapa é aprender a escrevê-las.
Convenções de sintaxe e nomenclatura
O WordPress oferece a propriedade custom para ajudar nas definições. Ela é um pouco mais fácil de usar que a propriedade @ ou as definições em pseudoclasses, e usa o formato padrão de chave/valor:
{
"settings": {
"custom": {
"property-name": "value"
}
}
}Nos bastidores, o WordPress processará essa definição e gerará uma propriedade personalizada de CSS usando hífens duplos:
--wp--custom--<custom-element>--wp--custom-- sempre fará parte de sua propriedade CSS e não usará maiúsculas e minúsculas. Por exemplo, se você definir lineHeight como uma propriedade personalizada, o WordPress a transformará em “kebab case:”
--wp--custom--line-heightQuando se trata de convenções de nomenclatura, você pode usar camel case se desejar, embora recomendemos kebab case para os nomes de suas propriedades personalizadas. Isso é consistente com as convenções de nomenclatura do WordPress, melhora a legibilidade e reduz os erros de processamento.
Observação: as propriedades personalizadas de CSS usam hífens duplos porque o Grupo de Trabalho de CSS da W3C também quer incentivar você a usar o Sass (que usa cifrões para definir propriedades). Dessa forma, você tem a opção de ambos para aprimorar seus designs.
O WordPress já define algumas propriedades personalizadas — ou, pelo menos, os temas têm essa opção. Isso significa que você verá variáveis CSS em theme.json sem uma declaração explícita:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "var(--wp--preset--color--primary)",
"name": "Primary"
}
]
},
"custom": {
"spacing": {
"small": "1rem",
"medium": "2rem",
"large": "3rem"
}
}
},
"styles": {
"spacing": {
"blockGap": "var(--wp--custom--spacing--medium)"
}
}
}Neste exemplo, definimos uma cor primária usando uma cor predefinida existente. Em seguida, definimos algumas propriedades de espaçamento personalizadas e as configuramos usando var().
Isso significa que não precisamos codificar os valores em theme.json. Além disso, os usuários podem atualizar esses valores no Editor de Site e fazer com que se propaguem por todo o tema.
Predefinições vs propriedades personalizadas
Obviamente, o theme.json também permite estabelecer predefinições para cores, tamanhos de fonte e outros elementos comuns de tema. Por outro lado, você pode usar propriedades personalizadas para qualquer valor que queira reutilizar em todo o tema.
A maior diferença aqui está nas convenções de nomenclatura e na acessibilidade. Os usuários não poderão acessar as propriedades personalizadas no Editor de Sites sem que você trabalhe mais. Com as predefinições, o WordPress gerará CSS com aparência semelhante à forma como você processa as propriedades personalizadas:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"fontFamily": {
"base": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"headings": "'Helvetica Neue', Helvetica, Arial, sans-serif"
}
}
}
}Depois que o WordPress processa isso, você pode ver as diferenças inerentes:
--wp--preset--primary: #007bff;
--wp--custom--font-family--base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
--wp--custom--font-family--headings: "'Helvetica Neue', Helvetica, Arial, sans-serif";Observe que o aninhamento de outras propriedades usará hífens duplos, mesmo após a conversão de maiúsculas e minúsculas para maiúsculas.
CSS global e específico do Bloco versus propriedades personalizadas de CSS
Com o WordPress clássico, você usaria CSS adicional e personalizado no frontend para projetar elementos dentro do seu tema. Isso ainda acontece com theme.json e FSE, embora a abordagem seja diferente das propriedades personalizadas de CSS.
Se você visitar o Editor de Sites e for à tela Estilos, verá a seção CSS adicional. Ela funciona de forma semelhante ao painel CSS personalizado nas instalações clássicas de WordPress:
Isso representa uma maneira de adicionar personalização global de CSS a um tema. No entanto, é realmente uma maneira de dar aos usuários a capacidade de adicionar CSS. Você também pode usá-la para fazer pequenas alterações que não justifiquem uma folha de estilo inteira.
Em theme.json, você usa a propriedade css para definir qualquer CSS extra que queira adicionar:
{
"version": 3,
"styles": {
"css": "margin: 0"
}
}Observe que você não precisa usar ponto e vírgula no final das instruções de CSS. Você também pode definir CSS personalizado para Blocos:
{
"version": 2,
"styles": {
"blocks": {
"core/post-title": {
"css": "letter-spacing: 1px;"
}
}
}
}Sempre que definir CSS como esse em theme.json, você o verá em qualquer campo CSS adicional do Editor de Sites. Entretanto, lembre-se de que nada do que você declarar usando css é uma propriedade CSS personalizada.
Usando o seletor (&) (E comercial)
Assim como o Sass, o WordPress também suporta o seletor “E comercial”, com algumas diferenças. Nesse caso, ele é uma ótima maneira de direcionar elementos e propriedades aninhados. Isso pode ser relevante se você optar por declarar propriedades personalizadas de CSS para Blocos individuais.
Por exemplo, veja o seguinte:
…
"styles": {
"blocks": {
"core/table": {
"css": "color:#333 & th{ background:#f5f5f5; }"
}
…Isso define uma cor de texto e uma cor em segundo plano para o elemento de cabeçalho da tabela. Depois que o WordPress o processa, você obtém um CSS limpo e simples:
.wp-block-table > table {
color: #333;
}
.wp-block-table > table th {
background: #f5f5f5;
}Os seletores com E comercial são excelentes se você deseja estender o CSS que deseja. Uma maneira compreensível de pensar no seletor é que ele ajuda a separar seus elementos CSS. Veja o seguinte, por exemplo:
{
"version": 3,
"styles": {
"blocks": {
"core/avatar": {
"css": "& img {border-radius: 999px}"
}
}
}
}Isso adiciona um raio de borda a um avatar e gera o CSS como você esperaria:
.wp-block-image img {
border-radius: 999px;
}No entanto, sem o E comercial, o WordPress juntaria suas declarações:
…
.wp-block-imageimg
…Usar o seletor “E comercial” para suas propriedades personalizadas de CSS será algo que você fará regularmente.
O papel da Kinsta no suporte ao desenvolvimento moderno de WordPress
Sua escolha de hospedagem é tão importante quanto qualquer linguagem de codificação, pré-processador ou outro elemento técnico. Sem um provedor de hospedagem de qualidade ao seu lado, você não poderá se beneficiar do desempenho e do conjunto de ferramentas do theme.json ou do FSE.
A Kinsta pode ser fundamental para todo o seu fluxo de trabalho, graças às nossas ferramentas de desenvolvimento. Você pode começar com o DevKinsta — nosso ambiente de desenvolvimento local que usa contêineres de Docker para isolar sua instalação de WordPress:
Uma funcionalidade útil é a capacidade do DevKinsta de enviar e receber dados entre sua máquina local e os ambientes de teste da Kinsta:
Isso permite que você teste seus temas em um ambiente semelhante ao de produção antes de começar a distribuí-los. Ao trabalhar com propriedades personalizadas de CSS, você pode garantir que elas funcionem em diferentes contextos. A API da Kinsta pode dar suporte ao seu pipeline de CI/CD quando você estiver pronto para entrar em produção.
Outros aspectos da arquitetura da Kinsta ajudarão você em toda a sua configuração de desenvolvimento. Por exemplo, a Kinsta oferece suporte ao Git, o que facilita o controle de versão dos arquivos do seu tema, incluindo theme.json. Para iterar propriedades personalizadas ou simplesmente experimentar diferentes configurações, você vai querer saber que tem uma opção de reversão.
Por fim, se você optar por usar seu tema em um servidor Kinsta, nosso Edge Caching aumenta o desempenho do theme.json em até 80%. Com um site que funciona rapidamente, independentemente do navegador do usuário, você garante que os elementos personalizadas adicionados sejam exibidos prontamente.
Resumo
Assim como o theme.json é um poderoso arquivo de configuração para a criação de temas flexíveis e de fácil manutenção no WordPress, as propriedades personalizadas de CSS são cruciais para o fluxo de trabalho. É assim que você criará e declarará o CSS para elementos que o Editor de Sites não alcança. Elas também serão fundamentais se você criar seus próprios blocos ou simplesmente quiser desenvolver temas exclusivos para WordPress com o máximo de profundidade de personalização. Além disso, você também tem a opção de compartilhar esse CSS com os usuários por meio do Editor de Sites.
As propriedades personalizadas de CSS farão parte do seu fluxo de trabalho de desenvolvimento de temas? Caso positivo, como você as usará? Compartilhe suas ideias na seção de comentários abaixo!
Deixe um comentário