Gutenberg 9.7 melhora a experiência do usuário, atualiza blocos reutilizáveis ​​e traz modelos de página para temas FSE

Publicados: 2021-01-08

O Gutenberg 9.7 chegou ontem com várias atualizações e melhorias. Os usuários devem esperar ver mudanças na interface para variações de blocos, transformações e padrões. Blocos reutilizáveis ​​estão sendo trabalhados após o que parecia ser um hiato. Os desenvolvedores agora também podem adicionar modelos de página personalizados aos seus temas WordPress baseados em blocos.

Esta versão teve o menor número de correções de bugs que eu vi em um tempo. A equipe de desenvolvimento empurrou apenas oito correções na atualização, o que poderia sinalizar que as coisas estavam mais estáveis ​​do que o normal após o lançamento do 9.6 algumas semanas atrás.

A maior parte do trabalho na versão 9.7 tratou de novos recursos e aprimoramentos. Como esperado, a Edição Completa do Site teve seu quinhão de tempo. No entanto, mesmo isso parecia um pouco atrasado para este lançamento. Muitas das atualizações são para a interface de pós-edição.

Melhorias na experiência do usuário

A equipe lançou várias atualizações sobre como os recursos funcionam no editor. Alguns deles podem parecer menores, mas melhoram a experiência geral do editor.

As variações de bloco receberam um aprimoramento bem-vindo. Variações são quando um bloco subjacente é usado para criar várias variações do mesmo bloco. Por exemplo, o bloco Incorporar tem YouTube, Twitter e outras variações. Nas versões anteriores, o inspetor de blocos na barra lateral e na navegação de blocos mostrava o nome genérico, ícone e descrição. No entanto, o Gutenberg 9.7 agora mostrará os detalhes da variação em uso.

Exemplo de uso da variação do bloco YouTube Embed e exibição de seus detalhes na barra lateral.
Variação do YouTube para o bloco Incorporar.

Ao transformar um bloco, os usuários podem ver uma prévia da aparência do bloco. Esta é uma pequena melhoria. No entanto, pode poupar algumas dores de cabeça antes de decidir transformar um bloco em outro.

Transformando uma Citação em uma Pullquote no editor de blocos.
Visualize ao transformar o bloco Quote em um Pullquote.

O Gutenberg 9.6 introduziu um recurso de arrastar e soltar para blocos no insersor. A equipe agora estendeu esse recurso para bloquear padrões. Este é apenas mais um degrau na escada para quem procura mais recursos de arrastar e soltar.

Blocos reutilizáveis ​​atualizados

Já faz um tempo desde que testei blocos reutilizáveis. O recurso aparentemente ficou em segundo plano em relação a outros recursos mais recentes no ano passado. Nunca me senti muito melhor do que um protótipo inicial. Ainda não há como gerenciá-los facilmente, a menos que você saiba onde procurar. No entanto, parece que a equipe de desenvolvimento do Gutenberg está desenvolvendo ativamente esse recurso quase esquecido.

Os usuários podem esperar mais em versões futuras. “Com base nessas mudanças, a interface do usuário para blocos reutilizáveis ​​provavelmente verá algumas iterações nas próximas semanas”, escreveu Riad Benguella no post de anúncio.

Fiz um teste inicial para ver como era o recurso no Gutenberg 9.7. Depois de clicar no botão “Adicionar a blocos reutilizáveis”, o editor fez um flash rápido. Em seguida, uma notificação apareceu na parte inferior da tela informando que o bloco reutilizável havia sido criado. Como eu não tinha o painel da barra lateral de opções de bloco aberto no momento, não vi como editar o título do bloco reutilizável. Meu pensamento imediato foi que a equipe pegou um recurso já incompleto e o tornou exponencialmente pior.

Após cavar mais, descobri que os usuários podem editar o título do bloco reutilizável na barra lateral de opções do bloco. No entanto, a equipe não parou por aí. Eles adicionaram várias melhorias ao recurso.

Editando o nome de um bloco reutilizável no editor do WordPress.
Editando o nome do bloco reutilizável no painel da barra lateral.

Blocos reutilizáveis ​​agora são editáveis ​​no próprio editor de postagem. Os usuários podem arrastar uma imagem para fora do bloco, por exemplo. A barra lateral do inspetor está disponível para os blocos internos. Blocos reutilizáveis ​​agora se parecem com qualquer outra parte do editor. Quaisquer edições serão refletidas em todas as instâncias dos blocos reutilizáveis ​​no site.

A grande diferença está em como eles são salvos.

Salvando a postagem e os blocos reutilizáveis ​​de uma só vez no editor de blocos.
Salvando um bloco reutilizável junto com o post.

Blocos reutilizáveis ​​agora fazem parte do sistema de salvamento de “múltiplas entidades”. Ao clicar no botão de atualização do editor, os usuários terão a opção de salvar a postagem inteira e/ou blocos reutilizáveis ​​individuais.

Modelos de “Página” personalizados para temas FSE

Os temas baseados em blocos agora suportam o que é tradicionalmente conhecido como modelos de página. Todos os tipos de postagem são tecnicamente compatíveis com o recurso. No entanto, a equipe parece estar aderindo à terminologia “página” após alguma discussão.

Demorou um pouco porque não há documentação existente e o exemplo original no ticket não refletia o resultado final do código que passou. No entanto, consegui descobrir como o recurso funciona. Para autores de temas que desejam testar esse recurso, use o código de exemplo a seguir para adicionar um modelo de “contato”. Coloque-o no nível raiz do arquivo experimental-theme.json do seu tema. Você também precisará acompanhá-lo com um block-templates/contact.html em seu tema.

 "pageTemplates": { "contact": { "title": "Contact", "postTypes": [ "page" ] } }

Esse recurso não faz nada particularmente inovador no momento. Ele simplesmente adiciona o modelo personalizado à seleção suspensa na tela de edição de postagem/página. É o equivalente ao sistema de template de página atual disponível para temas tradicionais.

Selecionando um modelo de página do editor de blocos.
Selecionando um modelo de página personalizado do tema FSE.

Embora este seja um bom desenvolvimento, os modelos de página tradicionais podem não fazer muito sentido no paradigma de tema de bloco. Não há como alterar a saída visual da página no editor com base no modelo selecionado — os usuários ainda devem visualizar a página no front-end para ver o resultado de sua aplicação. O sistema de blocos é sobre feedback visual instantâneo. Os modelos de página precisam ser repensados ​​para a nova era.

“Em termos de interface do usuário e integração com o modo de modelo, podemos fazer muito mais do que a antiga caixa de seleção”, disse Benguella, que foi o desenvolvedor por trás do pull request. “Nós podemos mostrar uma prévia de templates e oferecer um modal ou algo assim para as pessoas escolherem... Nós precisaríamos de algum pensamento de design e explorações lá. Este PR apenas define os requisitos técnicos para que funcione.”

Muitos, mas não todos, para os quais os templates de página eram necessários na última década agora podem ser substituídos por padrões de bloco.

A longo prazo, eu preferiria ver modelos de página que se comportassem mais como layouts de blocos pré-projetados. É assim que os modelos de bloco para tipos de postagem personalizados funcionam hoje. No entanto, isso está no nível do tipo de postagem, e não no nível da postagem individual.

Os modelos de página tradicionais são datados. Os temas raramente oferecem mais do que alguns. Um para remover a barra lateral. Um para mover a barra lateral para a esquerda ou direita. Outro para tornar a área de conteúdo da página mais ampla.

O que está claro é que precisamos de mais exploração sobre como serão os modelos de página do futuro. Eles são necessários no sistema de blocos? Existem maneiras melhores de lidar com os temas tradicionais para os quais eles estão sendo usados? Como eles funcionarão em uma interface que precisa de feedback visual?