Gutenberg 12.5 apresenta variações de estilos globais, preserva o estilo dos botões adjacentes e adiciona transparência alfa aos seletores de cores

O Gutenberg 12.5 chegou ao diretório de plugins do WordPress hoje cedo. Já fiquei empolgado com pelo menos um novo aprimoramento, variações de estilos globais. No entanto, esta é uma atualização robusta com vários recursos centrados no desenvolvedor e no usuário.

Com o WordPress 5.9 agora disponível, parece que todas as mãos estão de volta ao convés enquanto nos preparamos para o lançamento do 6.0 em maio. Na semana passada, cobri o roteiro inicial, e alguns dos itens dessa lista já estão nesta última atualização do Gutenberg de alguma forma ou moda.

Variações de estilos globais

Os autores de temas agora podem criar várias variações de theme.json e colocá-las na pasta /styles de seus temas. Em seguida, os usuários podem alternar entre as várias predefinições para algo que melhor lhes convier.

O novo recurso promete ser um dos destaques do lançamento do WordPress 6.0, e o tema padrão Twenty Twenty-Two acabará por enviar várias variações próprias.

Eu mergulhei no recurso com mais detalhes em um post na semana passada. O líder do projeto Gutenberg, Matias Ventura, expandiu isso nos comentários:

Conseguir isso no início do ciclo para que possamos resolver a experiência e a mecânica. Espero que seja realmente bom em algumas iterações. Estou particularmente ansioso para romper a parede de pacotes de temas, já que todas essas variações são inerentemente compatíveis com todos os temas de blocos disponíveis!

Embora eu compartilhe o entusiasmo de Ventura com o recurso, não tenho certeza se podemos quebrar a barreira do tema com o 6.0. A ideia aqui é que tais variações seriam intercambiáveis ​​entre os temas. Não vejo isso acontecendo, dado o estado atual do sistema global de estilos.

A maior parte do theme.json é padronizada, mas muitos autores usam a propriedade settings.custom . Isso permite que eles definam qualquer número de valores personalizados, que geralmente são referenciados por meio da folha de estilo do tema.

Há também aquele pequeno problema de não ter um esquema de nomenclatura padrão para recursos como cores e tipografia.

Como nenhuma dessas coisas será sempre a mesma entre dois temas, alternar as variações nem sempre será bonito. É um objetivo elevado, e talvez valha a pena tentar ver o que é possível. No entanto, o conceito parece a busca de abandonar completamente o sistema de temas por um padrão gigante de cortador de biscoitos.

A troca de variação é melhor deixar para temas individuais. Permita que os autores de temas que constroem seus sistemas personalizados com base no theme.json gerenciem a experiência e as expectativas do usuário. Devemos nos concentrar na construção de ferramentas para ajudá-los a executar sua visão sem nos preocuparmos com um usuário “instalando” sua variação JSON dentro de um projeto totalmente diferente.

Novos botões preservam o estilo dos botões adjacentes

O WordPress torna relativamente fácil duplicar um Button, mas ele fica oculto nas opções suspensas na barra de ferramentas. Essa é uma ação de dois cliques em comparação com simplesmente pressionar o ícone “+” para inserir um novo bloco de botão. Antes do Gutenberg 12.5, isso resultaria no novo tratamento de estilo padrão. É um daqueles pequenos aborrecimentos até você começar a trabalhar com vários botões ao mesmo tempo.

A versão mais recente duplica automaticamente o estilo do bloco Button adjacente ao inserir o próximo. Esta é uma experiência muito melhor.

No entanto, isso não nos leva tão longe quanto precisamos ir. O que acontece se você decidir alterar o design de cada botão mais tarde? Você tem muito trabalho pela frente para modificar cada um. Há um ticket aberto para copiar um estilo para todos os outros no grupo de blocos Botões.

Os usuários podem adicionar cores transparentes

Os usuários podem finalmente controlar a transparência alfa de cores personalizadas no nível do bloco. O recurso funciona para opções de cores de texto, plano de fundo, link e borda. Essa melhoria fecha um ticket aberto pela primeira vez em outubro de 2019.

Existem alguns seletores de cores onde não está ativado. Isso inclui a seção de paleta personalizada no painel de estilos globais e as cores relacionadas ao ícone para o bloco de links sociais. O mesmo vale para a cor de sobreposição do bloco Cover, mas ela possui um controle de opacidade separado.

Postar opção de tamanho de imagem em destaque

O Gutenberg 12.5 introduz uma nova opção que permite configurar o bloco Post Featured Image para usar um WordPress ou tamanho de imagem definido por tema. Parece uma mudança trivial, mas é um salto para a temática de bloco.

Os autores do tema estão filtrando o gancho post_thumbnail_size para lidar com isso. No entanto, esse método fica complicado ao lidar com várias consultas de postagem com tamanhos de imagem variados.

Eu só mencionei isso por um ano. Escrevi sobre isso várias vezes, tentando fazer com que qualquer um ouvisse. Se quisermos que mais designers embarquem no trem de desenvolvimento de temas baseados em blocos, eles precisam controlar as imagens em destaque. Muitos layouts dependem de dimensionamento específico para ter a melhor aparência.

Agora, se pudéssemos usar a imagem em destaque dentro dos blocos Capa e Mídia e Texto…

Copiar todo o conteúdo do editor do site

Hoje eu aprendi que existe um botão “Copiar todo o conteúdo” no menu de opções do editor de posts. Não sei há quanto tempo está lá, mas isso é meio legal. Eu tenho tentado desnecessariamente selecionar todo o conteúdo - às vezes com uma medida de sucesso - por meio da tela de conteúdo. Mesmo aqueles de nós que passam quase todas as horas acordados no editor podem aprender um novo truque de vez em quando.

Essa opção de conteúdo de cópia agora foi adicionada ao editor do site como parte de uma iniciativa para trazer paridade de recursos entre os dois editores.

Visualização de código no editor do site

Continuando com a paridade de recursos entre os editores de postagem e do site, os usuários agora podem alternar para a visualização de código no editor do site.

Tecnicamente, isso é chamado de “editor de código”, mas há dragões à frente para quem tentar editar qualquer coisa. Pelo menos se eles esperam algo diferente da temida mensagem “este bloco contém conteúdo inesperado ou inválido”. Eu navegaria em águas mais calmas e o evitaria por qualquer coisa além de ler ou copiar.