Gutenberg 11.3 Introduz o Painel de Dimensões, Adiciona Suporte para Preenchimento de Botões e Acelera o Insersor

Hoje cedo, o Gutenberg 11.3 chegou ao diretório de plugins do WordPress. A atualização mais recente apresenta um novo painel de dimensões para alternar as opções de bloco relacionadas ao espaçamento. O bloco Button agora suporta o controle de preenchimento e o bloco Post Featured Image tem novas configurações de largura e altura.

Um dos destaques do lançamento foi uma melhoria na velocidade de abertura e busca dentro do insersor. O tempo de abertura caiu mais de 200 ms, de 370,35 ms para 137,28 ms. A velocidade de busca passou de 190,37 ms para 67,24 ms.

A versão mais recente inclui uma biblioteca de seletor de cores simplificada. Visualizações avançadas para links, um recurso introduzido no Gutenberg 10.9 para URLs externos, agora funciona com links de sites internos.

Os autores de temas devem aproveitar a especificidade reduzida das folhas de estilo do editor redefinido e clássico. Essas mudanças sempre tornam um pouco mais fácil para os autores do tema combinar o editor e o estilo do front-end.

Painel de dimensão para controles de espaçamento

O Gutenberg 11.3 apresenta um novo painel Dimensões para blocos que suportam controles de margem ou preenchimento. O recurso adiciona um botão de reticências ( ... ) no lugar da seta típica da guia abrir/fechar. Os usuários podem selecionar quais controles desejam usar.

O objetivo de longo prazo é limpar a interface, expondo apenas os controles que o usuário realmente precisa. Como essas necessidades são subjetivas, permitir que os usuários as ativem/desativem é o caminho ideal a seguir.

As desvantagens atuais são duas. Depois de escolher exibir controles de margem ou preenchimento, o próprio painel não pode ser recolhido. Isso agrava o problema que o novo recurso tenta resolver – organizar a interface da barra lateral. Para mim, pelo menos, sempre quero acesso rápido aos controles de espaçamento. No entanto, nem sempre preciso deles mostrados.

A segunda questão é que a escolha do usuário sobre o que exibir não parece estar armazenada. Cada vez que você trabalha com um bloco, você deve selecionar quais controles devem aparecer.

O novo painel Dimensões é apenas uma parte do processo de conversão de dimensionamento (largura e altura), espaçamento (preenchimento e margem) e controles relacionados para blocos. O trabalho em direção a uma solução mais completa ainda está em andamento. Presumivelmente, a equipe de desenvolvimento abordará esses problemas e outros em versões futuras. No entanto, aqueles que executam o plug-in Gutenberg em produção devem esperar esquisitices com o uso.

O plugin Block Visibility tem a versão mais amigável de tal controle de alternância no momento. Ainda não é uma solução perfeita, mas funciona um pouco melhor do que o que está atualmente em Gutenberg.

Preenchimento do bloco de botões

Não é nenhum segredo que eu não gosto do preenchimento padrão do bloco Button ao usar o tema TT1 Blocks (versão baseada em bloco do Twenty Twenty-One). Fiz uma de minhas missões apontá-lo rotineiramente, chegando ao ponto de me recusar a usar o bloqueio na última chamada para testes como parte do Programa de Extensão FSE.

Um botão grande nem sempre é a escolha estilística errada em uma página da web. O contexto é importante e, de alguma forma, continuo a encontrar cenários em que preciso de algo um pouco mais reduzido. O controle sobre o preenchimento do bloco Button está na minha lista de desejos há meses, e a equipe de desenvolvimento do Gutenberg entregou.

A partir da versão 11.3, os usuários podem controlar o preenchimento de blocos de Button individuais. Agora ele aparecerá como uma opção no novo painel Dimensões mencionado anteriormente.

Oração respondida. Agora, vamos avançar para adicionar controles de preenchimento a todos os blocos.

O único problema em potencial que alguns usuários podem encontrar é manter o espaçamento consistente ao usar vários blocos Button juntos. A maneira mais fácil de fazer isso é adicionar e estilizar o primeiro e, em seguida, duplicá-lo para criar outros com o mesmo espaçamento. Este não é um problema novo; aplica-se a todas as opções de Button onde os usuários desejam consistência dentro de um grupo.

Controles de dimensão de imagem em destaque

O bloco Post Featured Image finalmente recebeu uma atualização pequena, mas útil. No passado, usuários e autores de temas tinham apenas uma única opção de decidir se deveriam vinculá-lo à postagem. Agora, eles podem controlar a largura e a altura da imagem.

Se um usuário definir uma altura para a imagem, o editor revelará uma opção “Escala” separada com as seguintes opções:

• Capa (padrão)
• Conter
• Alongamento

O que essas opções realmente fazem? Essa seria uma boa pergunta. Mesmo como alguém no ciclo de web design e desenvolvimento por quase duas décadas, às vezes eu esqueço e preciso procurá-los. Eles são valores para a propriedade CSS object-fit e provavelmente confundirão os usuários em muitos casos.

Cobrir e conter permitem que a imagem caiba dentro da caixa do elemento contido, mantendo sua proporção (sem esticar a imagem). A diferença é que o valor da capa será recortado se não couber e o valor contido poderá ser colocado em letterbox. Um valor de extensão preencherá seu contêiner independentemente da proporção.

Dependendo da proporção da imagem em seu contêiner, cada um dos valores pode essencialmente exibir a mesma coisa na tela. Ou, eles podem fornecer resultados muito diferentes. Acoplar esses controles de dimensões com alinhamentos amplos e completos (também opções relacionadas à largura) também pode resultar em alguns experimentos imprevisíveis.

O designer de temas em mim quer desabilitar completamente a interface do usuário e apresentar algo um pouco mais controlado: um seletor de tamanho de imagem.

Tal seletor não deve ser confundido com controles de largura e altura. Os autores de temas do WordPress registram tamanhos de imagem personalizados há anos. O principal caso de uso para isso foram as imagens em destaque. Os usuários podem usar esses tamanhos com os blocos Image e Últimas postagens atuais. No entanto, eles ainda não têm essa opção com Post Featured Image.

Estou no campo que acredita que os controles de tamanho de imagem deveriam ter sido a primeira adição ao bloco. É uma parte tão integral do design do tema WordPress que não pode ser deixado de fora, e tenho lutado - ou pelo menos irritante - para garantir que os autores do tema possam controlar as imagens em destaque por meio de tamanhos personalizados.

Felizmente, há um tíquete aberto para suporte de tamanho de imagem personalizado. Entre outros recursos ainda ausentes, é um bloqueador para muitos autores de temas que desejam dar o salto para temas de bloco.

Existem muitos casos de uso para as novas opções, como cortar automaticamente as imagens em destaque de uma grade de postagem em um quadrado. Estou esperando impacientemente um conjunto mais robusto de ferramentas para o bloco Post Featured Image.