Gutenberg 12.1 corrige a mudança de layout do anexo de bloco, adiciona visualizações de lista de modelos e aprimora estilos globais

Hoje cedo, o Gutenberg 12.1 chegou ao diretório de plugins do WordPress. A versão mais recente foi pesada em melhorias para a experiência do usuário, incluindo uma correção para a mudança de layout do anexador de blocos, novos recursos de estilos globais e exibição de lista de modelos aprimorada. Os autores de temas também têm um novo sinalizador para habilitar todas as ferramentas relacionadas à aparência.

O WordPress 5.9 estava programado para ser lançado hoje, mas foi adiado para 25 de janeiro de 2022. Os colaboradores precisavam de mais tempo para refinar o editor do site e as ferramentas relacionadas incluídas no lançamento. Até agora, eles estão usando o tempo extra corrigindo bugs e criando uma experiência geral melhor para o usuário.

Não há mais mudança de layout

Se essa fosse a única mudança no Gutenberg 12.1, eu teria sido o usuário mais feliz do mundo. Felizmente, existem outros itens interessantes, mas minha maior implicância em três anos de uso do editor de blocos foi corrigida.

O anexador de bloco (aqueles pequenos botões + ) na tela de conteúdo agora é mostrado usando o posicionamento fixo. Isso significa que quando você seleciona blocos, principalmente aqueles aninhados em outros, a tela não salta mais, muda o layout ou deixa espaços em branco em uma seção perfeita.

Eu sei, conversando com outras pessoas, que isso tem sido um ponto problemático ao construir layouts complexos no passado. Para alguns, eles não usariam o editor de blocos porque era muito irritante. Se você cair neste campo, vale a pena tentar mais uma vez. É uma melhoria acentuada na experiência do usuário.

Melhorias de estilos globais

Os usuários agora podem definir gradientes personalizados por meio da seção de paleta de cores na barra lateral de estilos globais. Estes estarão disponíveis em todo o site e não estão vinculados ao tema.

A paleta também mostra cores duotônicas na mesma seção de gradiente. No entanto, ainda não há uma opção para criar filtros duotônicos personalizados. É uma seção somente leitura.

O painel de estilos globais também divide as opções de tipografia entre texto e elementos de link, abrindo a porta para outros elementos HTML no futuro.

Os usuários provavelmente não devem alterar isso para links. Em vez disso, eles geralmente devem corresponder ao texto ao redor. Se tivermos decoração de texto ou opções semelhantes no futuro, a separação pode fazer mais sentido. No entanto, alterar configurações como o tamanho da fonte ou a altura da linha provavelmente seria prejudicial ao design.

Modelos e Vistas de Peças de Modelo

O Gutenberg 12.1 apresenta uma nova visualização de lista de modelos e peças de modelo do editor do site. A interface do usuário para esse recurso saltou ao longo das últimas versões de plug-in. A lista estava disponível no painel deslizante à esquerda no editor por meses. Em seguida, foi removido completamente em 11.9. Ele reapareceu entre essa versão e 12.0.

O painel agora foi reduzido para incluir três links para Site, Templates e Template Parts. O primeiro link abre o editor do site. Os outros exibem tabelas de modelos existentes.

Alternar entre as telas parece lento no momento. No entanto, esta é a versão 1.0 do editor do site que os usuários do WordPress em todo o mundo verão. Provavelmente vai mudar com o tempo. “A iteração atual do design favorece a simplicidade e a usabilidade”, escreveu Riad Benguella no post do anúncio. “As iterações que implementam a navegação do lado do cliente e a visualização em mosaico podem ser adicionadas no futuro.”

Não parece haver uma maneira de adicionar modelos personalizados, como uma categoria ou arquivo de autor. Clicar no botão “Adicionar novo” apresenta opções para um modelo de página inicial e pesquisa ao usar o tema Twenty Twenty-Two.

No entanto, adicionar uma nova peça de modelo é um processo muito mais refinado. Depois de clicar no botão para criar um, os usuários recebem uma sobreposição e um formulário, conforme mostrado na captura de tela a seguir:

Os usuários podem dar um nome personalizado e escolher entre três áreas permitidas: geral, cabeçalho e rodapé. Depois de criar uma nova peça, os usuários são levados ao editor.

Ao visualizar a lista de peças do modelo novamente, ela exibe o usuário que a criou e possui um menu suspenso de opções (botão de reticências). Atualmente, a única ação é excluir a parte.

Eu adoraria ver os modelos de nível superior receberem o mesmo tratamento que as partes do modelo ao criar um novo. Embora existam algumas pequenas diferenças entre eles, ambos são modelos no final do dia. A experiência do usuário se beneficiaria se os processos de criação fossem compatíveis.

A criação de modelos personalizados fora da lista padrão dessa tela também ajudaria os designers a criar temas visualmente a partir do editor do site.

Reserva de Navegação Vazia

A versão mais recente introduziu um substituto para o bloco de menu de navegação vazio. Por fim, se nenhum menu for encontrado, ele exibirá o bloco Lista de páginas. Dependendo de quantas páginas o site de um usuário tem, isso pode sair do controle rapidamente, conforme mostrado na captura de tela a seguir de Twenty Twenty-Two:

Os desenvolvedores de temas podem substituir esse fallback por meio do gancho de filtro block_core_navigation_render_fallback retornando um valor false ou um conjunto de blocos filho válidos para o pai Navigation. Autores de temas, convido-os a fazer uso generoso deste gancho de filtro.

Itens notáveis ​​do tema do bloco

Para desenvolvedores de temas de bloco, as pastas padrão relacionadas ao modelo foram renomeadas. Os nomes antigos continuarão funcionando, mas os autores devem atualizar o seguinte em seus temas:

• /block-templates renomeados para /templates
• /block-template-parts renomeado para /parts

Essa alteração limpa o diretório de temas de nível superior, mas também cria um caminho para mais padronização no futuro. Já existe um ticket aberto para /patterns e uma pasta /styles é possível.

O Gutenberg 12.1 também appearanceTools um sinalizador de AppearTools para theme.json , permitindo que os autores de temas ativem o suporte para todas as opções de borda, cor, espaçamento e tipografia atuais e futuras. Cobri isso com mais detalhes na postagem do Gutenberg 12.0, que marcou erroneamente o recurso como incluído na última versão.