Estilizando botões em temas de bloco do WordPress

A pouco tempo atrás, Ganesh Dahal escreveu um post aqui no CSS-Tricks respondendo a um tweet que perguntava sobre a adição de sombras de caixa CSS em blocos e elementos do WordPress. Há muitas coisas excelentes que aproveitam os novos recursos fornecidos no WordPress 6.1 que fornecem controles para aplicar sombras às coisas diretamente no editor de blocos e na interface do usuário do editor de sites.

Ganesh tocou brevemente nos elementos do botão naquele post. Quero pegar isso e me aprofundar nas abordagens para estilizar botões em temas de bloco do WordPress. Especificamente, vamos abrir um novo theme.json arquivo e detalhar várias abordagens para estilizar botões no esquema.

Por que botões, você pergunta? Essa é uma boa pergunta, então vamos começar com ela.

Os diferentes tipos de botões

Quando falamos de botões no contexto do WordPress Block Editor, temos que distinguir entre dois tipos diferentes:

1. Blocos filhos dentro do bloco Buttons
2. Botões que estão aninhados dentro de outro bloco (por exemplo, o bloco Post Comments Form)

Se adicionarmos esses dois blocos a um modelo, eles terão a mesma aparência por padrão.

Mas a marcação é muito diferente:

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

Como podemos ver, os nomes das tags HTML são diferentes. São as classes comuns - .wp-block-button e .wp-element-button — que garantem um estilo consistente entre os dois botões.

Se estivéssemos escrevendo CSS, teríamos como alvo essas duas classes. Mas, como sabemos, os temas de blocos do WordPress têm uma maneira diferente de gerenciar estilos, e é por meio do theme.json arquivo. Ganesh também cobriu isso em grande detalhe, e você faria bem em ler o artigo dele.

Então, como definimos estilos de botão em theme.json sem escrever CSS real? Vamos fazê-lo juntos.

Criando os estilos básicos

theme.json é um conjunto estruturado de esquema escrito em pares propriedade:valor. As propriedades de nível superior são chamadas de "seções" e vamos trabalhar com as styles seção. É aqui que vão todas as instruções de estilo.

Vamos nos concentrar especificamente no elements no styles. Este seletor tem como alvo os elementos HTML que são compartilhados entre os blocos. Este é o shell básico com o qual estamos trabalhando:

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

Então, o que precisamos fazer é definir um button elemento.

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

Êxtase button corresponde a elementos HTML usados ​​para marcar elementos de botão no front-end. Esses botões contêm tags HTML que podem ser um dos nossos dois tipos de botão: um componente autônomo (ou seja, o bloco Button) ou um componente aninhado em outro bloco (por exemplo, o bloco Post Comment).

Em vez de estilizar cada bloco individual, criamos estilos compartilhados. Vamos em frente e alterar o plano de fundo padrão e a cor do texto para ambos os tipos de botões em nosso tema. Há um color objeto ali dentro que, por sua vez, suporta background e text properties onde definimos os valores que queremos:

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

Isso altera a cor de ambos os tipos de botão:

Se abrirmos o DevTools e dermos uma olhada no CSS que o WordPress gera para os botões, veremos que o .wp-element-button classe adiciona os estilos que definimos em theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

Essas são as nossas cores padrão! Em seguida, queremos fornecer feedback visual aos usuários quando eles interagirem com o botão.

Implementando estilos de botões interativos

Como este é um site sobre CSS, aposto que muitos de vocês já estão familiarizados com os estados interativos de links e botões. Pudermos :hover o cursor do mouse sobre eles, tabule-os em :focus, clique neles para fazê-los :active. Caramba, tem até um :visited state para dar aos usuários uma indicação visual de que eles clicaram antes.

Essas são pseudo-classes CSS e nós os usamos para segmentar as interações de um link ou botão.

Em CSS, podemos estilizar um :hover estado assim:

a:hover { /* Styles */
}

In theme.json, vamos estender nossa declaração de botão existente com essas pseudoclasses.

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

Observe a natureza “estruturada” disso. Estamos basicamente seguindo um esboço:

Agora temos uma definição completa dos estilos padrão e interativo do nosso botão. Mas e se quisermos estilizar certos botões que estão aninhados em outros blocos?

Botões de estilo aninhados em blocos individuais

Vamos imaginar que queremos que todos os botões tenham nossos estilos base, com uma exceção. Queremos que o botão enviar do bloco Post Comment Form seja azul. Como conseguiríamos isso?

Este bloco é mais complexo que o bloco Button porque tem mais partes móveis: o formulário, as entradas, o texto instrutivo e o botão. Para direcionar o botão neste bloco, temos que seguir o mesmo tipo de estrutura JSON que fizemos para o button elemento, mas aplicado ao bloco Post Comment Form, que é mapeado para o core/post-comments-form elemento:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

Observe que não estamos mais trabalhando em elements não mais. Em vez disso, estamos trabalhando dentro blocks que é reservado para configurar blocos reais. Os botões, por outro lado, são considerados um elemento global, pois podem ser aninhados em blocos, embora também estejam disponíveis como um bloco autônomo.

A estrutura JSON oferece suporte a elementos dentro de elementos. Então, se há um button elemento no bloco Post Comment Form, podemos direcioná-lo no core/post-comments-form quadra:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

Esse seletor significa que não estamos apenas direcionando um bloco específico — estamos direcionando um elemento específico que está contido nesse bloco. Agora temos um conjunto padrão de estilos de botão que são aplicados a todos os botões no tema e um conjunto de estilos que se aplicam a botões específicos contidos no bloco Formulário de comentário de postagem.

O CSS gerado pelo WordPress tem como resultado um seletor mais preciso:

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

E se quisermos definir diferentes estilos interativos para o botão Post Comment Form? É o mesmo que fizemos para os estilos padrão, apenas aqueles são definidos dentro do core/post-comments-form quadra:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

E os botões que não estão em blocos?

O WordPress gera e aplica automaticamente as classes certas para produzir esses estilos de botão. Mas e se você usar um tema WordPress “híbrido” que suporte blocos e edição de site completo, mas também contenha modelos PHP “clássicos”? E se você criar um bloco personalizado ou até mesmo um código de acesso herdado que contenha botões? Nenhum deles é tratado pelo Motor de Estilo WordPress!

Sem problemas. Em todos esses casos, você adicionaria o .wp-element-button class no modelo, bloco ou marcação de shortcode. Os estilos gerados pelo WordPress serão então aplicados nessas instâncias.

E pode haver algumas situações em que você não tem controle sobre a marcação. Por exemplo, algum plug-in de bloco pode ser um pouco obstinado e aplicar liberalmente seu próprio estilo. Normalmente, é aí que você pode ir para a opção “Avançado” no painel de configurações do bloco e aplicar a classe lá:

Resumindo

Ao escrever “CSS” em theme.json pode parecer estranho no começo, descobri que isso se torna uma segunda natureza. Como o CSS, há um número limitado de propriedades que você pode aplicar de forma ampla ou restrita usando os seletores corretos.

E não vamos esquecer as três principais vantagens de usar theme.json:

1. Os estilos são aplicados aos botões na visualização frontal e no editor de blocos.
2. Seu CSS será compatível com futuras atualizações do WordPress.
3. Os estilos gerados funcionam tanto com temas de blocos quanto com temas clássicos — não há necessidade de duplicar nada em uma folha de estilo separada.

Se você usou theme.json estilos em seus projetos, compartilhe suas experiências e pensamentos. Estou ansioso para ler quaisquer comentários e feedback!

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
• Fonte: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/