Gutenberg 13.0 adiciona seleção de texto em vários blocos, nova variação de grupo de pilha e blocos de capa em destaque

Publicados: 2022-04-15

O Gutenberg 13.0 chegou hoje cedo ao diretório de plugins do WordPress. É um dos lançamentos mais pesados ​​ultimamente, contendo os recursos finais que devem ser enviados com o WordPress 6.0.

Os recursos mais proeminentes incluem seleção de texto parcial em vários blocos, blocos de capa com imagens em destaque, uma variação de pilha para grupos e criação de página baseada em padrões. E há muito mais para cavar.

Eu cobri muitos dos itens caros neste post. No entanto, para entender a escala completa do lançamento, confira os tickets vinculados no anúncio de lançamento do Gutenberg 13.0.

Outros destaques notáveis ​​incluem suporte de espaçamento para o bloco de colunas, otimização de fontes da web, duotones para espaços reservados de logotipo do site e imagem em destaque de postagem e alinhamentos verticais para blocos com controles flexíveis.

Seleção de texto parcial

WordPress aberto para um post com vários parágrafos. O texto é selecionado em dois blocos de parágrafo diferentes.
Selecionando texto em dois blocos.

Os usuários agora podem selecionar texto em vários blocos Rich Text, como Parágrafo, Título, Lista e Citação. No passado, destacar texto parcial criava automaticamente uma seleção de vários blocos, o que normalmente não é desejável.

A alteração suporta pressionar a tecla Enter para excluir o texto selecionado e criar um novo bloco, Backspace para remover e mesclar para trás e Del para remover e mesclar para frente. A digitação substituirá o texto selecionado pela nova entrada.

Cobri esse novo recurso em um post detalhado no mês passado.

Variações de pilha e grupo

Editor de postagem do WordPress com três blocos de grupo. O primeiro é o padrão. A segunda é a variação Row. A terceira é uma variação empilhada.
Bloco de grupo seguido de variações de linha e pilha.

O Gutenberg 13.0 apresenta uma nova variação de pilha para o bloco Group. A alteração cria três variações ao todo, contando a saída padrão e a Linha.

À primeira vista, Stack e o bloco Group padrão podem não parecer muito diferentes. Afinal, ambos são contêineres para conteúdo empilhado verticalmente. No entanto, a variação Stack é tecnicamente um flexbox em vez de um layout de fluxo. Não tenho certeza de como isso funcionará para os usuários finais que podem não entender imediatamente a distinção. No entanto, esta deve ser uma ferramenta bem-vinda para a construção de layouts mais avançados em temas.

A variação Stack encapsula inteiramente quaisquer blocos aninhados, desabilitando seus controles de alinhamento (por exemplo, alinhar à direita, alinhar amplo, etc.). No entanto, a própria Pilha possui controles de justificação para alinhar o conteúdo à esquerda, à direita e ao centro.

Editor de postagens do WordPress. Um bloco Pilha/Grupo contém uma Imagem, um Título e um Parágrafo. Eles são alinhados à direita do contêiner.
Variação de pilha com conteúdo justificado à direita.

Uma configuração que pode parecer pouco clara é o controle rotulado “Permitir quebrar em várias linhas”. Há pelo menos um caso de uso potencial para isso. É possível que um layout empilhado também seja horizontal se houver uma altura definida. No entanto, nenhum controle de altura desse tipo é mostrado atualmente na interface do usuário.

A variação de linha também é muito melhorada ao inseri-la pela primeira vez. Agora há um indicador claro de que os blocos recém-inseridos são dispostos horizontalmente.

Juntamente com a seleção parcial de texto, os usuários podem colocar rapidamente os blocos selecionados em um Grupo, Linha ou Pilha por meio da barra de ferramentas.

Bloco de capa + imagem em destaque

Visualização de postagem única do WordPress no front-end. O site e o cabeçalho do post têm uma imagem de fundo atrás deles que se estende por toda a página.
Usando uma imagem em destaque dentro do bloco de capa para cabeçalhos de postagem única.

Agora há uma nova alternância “Usar imagem em destaque” na barra de ferramentas ao inserir uma capa no editor. Ativá-lo vincula os dados da imagem ao bloco.

Às vezes é difícil escolher favoritos quando novos recursos estão chegando tão rápido quanto se pode testá-los. No entanto, usar imagens em destaque nos blocos de capa é facilmente uma das coisas que mais me entusiasmam. Já tenho muitas ideias rolando na minha cabeça, algumas das quais compartilhei ao cobrir esse recurso na semana passada.

Estou ansioso para ver o que os autores e usuários do tema fazem com ele. Isso abre um novo mundo de possibilidades de layout para temas de bloco.

Variações Globais de Estilo

Editor de site WordPress com painel de estilos globais aberto. A seção "Estilos de navegação" é selecionada e mostra dois cartões, um claro e um escuro.
Variações de estilo global Claro e Escuro na barra lateral.

O trabalho continua no desenvolvimento do recurso de variações globais de estilo. Lançado pela primeira vez com o Gutenberg 12.5, ele permite que os autores de temas enviem vários arquivos /styles/*.json entre os quais os usuários podem alternar. Essencialmente, é um seletor de “skins” específico para o tema.

A atualização oferece suporte a um novo campo de title nos arquivos JSON para um rótulo amigável. Caso contrário, ele retorna ao nome do arquivo sem a extensão.

Quando um usuário passa o mouse sobre um cartão de estilo na interface do usuário, ele o vira para revelar o título e mais cores disponíveis para a variação. Infelizmente, a versão invertida da caixa puxa as primeiras quatro cores definidas pelo tema. Isso às vezes pode resultar em uma vitrine limpa e bonita da variação. Também pode ser uma monstruosidade que não fornece informações úteis ao usuário sobre o estilo em si.

Os autores de temas podem controlar isso manobrando suas definições de cores em seus arquivos *.json . Mas, é um hack, na melhor das hipóteses. Como essa metodologia não é oficial, não há garantia de que funcionará no futuro. Além disso, é uma maneira rápida de criar código desorganizado para quem gosta de manter as coisas organizadas.

Novos componentes de controle de borda

Exibição de livro de histórias do controle de caixa de borda. Ele mostra um controle com quatro conjuntos de configurações de cor e largura para as bordas superior, direita, inferior e esquerda.
Definindo bordas de blocos individuais.

O Gutenberg 13.0 introduziu novos componentes BorderControl e BorderBoxControl . Esta é uma revisão da implementação anterior da ferramenta de design de borda. Eventualmente, permitirá que os usuários definam a largura, o estilo e a cor da borda de todos os quatro lados para blocos que optam pelo suporte de borda. Além disso, os autores de temas terão o mesmo nível de controle refinado por meio theme.json .

Embora os novos componentes estejam disponíveis agora, o suporte a blocos não está previsto até o Gutenberg 13.1. Tecnicamente, ele já está integrado à versão de desenvolvimento do plugin.

Criar novas páginas com padrões

WordPress adicionar nova tela de página. Existe um modal de sobreposição com uma grade 2x2 de padrões de conteúdo do tema.
Modal de padrão ao adicionar uma nova página.

A criação de layouts de página complexos ficou mais simples. Ao adicionar uma nova página, um modal aparece na tela. Ele permite que os usuários selecionem a partir de uma lista de padrões de “conteúdo” para inserir na página. Isso pode ser tão simples quanto alguns blocos para criar um layout sobre/perfil. Ou pode ser um design de primeira página completo. A partir desse ponto, os usuários podem personalizar as partes específicas de seus sites.

Esse recurso depende dos autores do tema registrarem padrões personalizados para o tipo de bloco core/post-content . Caso contrário, os usuários verão apenas o editor padrão. Themers devem começar a experimentar como eles podem mostrar esse novo recurso, uma vez que chega ao lado do WordPress 6.0 no próximo mês.

Loop de consulta de comentários substitui o bloco de comentários de postagem

Editor de site WordPress com bloco de Loop de consulta de comentários personalizado, que exibe os comentários de uma postagem no front-end.
Comentários Bloco de Loop de Consulta no editor do site.

O bloco Post Comments existente foi preterido em favor do Loop de consulta de comentários mais recente e blocos associados. Ele ainda funcionará, como acontece com outros blocos obsoletos. No entanto, ele não aparecerá no insersor.

Comentários O Query Loop oferece um designer e uma experiência de usuário muito melhores. No entanto, ele ainda não possui paridade de recursos com a solução que está substituindo, pelo menos no Gutenberg 13.0.

Alguns dos problemas que observei em minha cobertura anterior, como o ID e as classes de comentários ausentes, já foram abordados no tronco. No entanto, ainda não há uma solução para o título “X responde ao Post”. Espero que isso e as rugas restantes sejam eliminadas nas próximas semanas. No entanto, os autores de temas que se baseiam na vanguarda devem estar atentos aos problemas existentes.