O que há de novo no WordPress 5.8

Depois de assistir às apresentações no WordCamp Europe 2021 e, em particular, à conversa entre Matt Mullenweg e Matias Ventura que incluiu um vídeo das novidades que chegam até nós no editor de blocos, fiquei ansioso para experimentar esta nova versão do WordPress 5.8 que está prestes a ser lançado em meados de julho.

Por isso, instalei a versão 5.8-beta2 do WordPress para poder falar sobre os novos recursos que estão por vir. Tenha em mente que testei esta versão com o tema Twenty Twenty-one do WordPress.org e pode acontecer que alguns dos recursos mencionados, dependendo do tema que você instalou em seu site, não estejam disponíveis.

Blocos aninhados e padrões de bloco

Com a chegada do WordPress 5.5, o editor de blocos incluiu o conceito de padrões de blocos. A ideia de um padrão de bloco é muito simples: são seções pré-definidas ou trechos compostos por um grupo de blocos que você pode usar na criação de páginas e posts. Os padrões de bloco podem ser algo tão simples quanto uma seção exibindo dois botões ou uma seção de preços com layouts atraentes e complexos, ou até mesmo o layout de uma página inteira.

Muito trabalho está sendo feito para tornar a edição de blocos e padrões de blocos mais fácil e confortável. E, em particular, para agilizar a inserção e movimentação dos mesmos. Para começar, agora podemos, na lista de blocos e padrões que aparecem na barra de menu do lado esquerdo, selecioná-los e arrastá-los para a área da página para inseri-los.

Recentemente, também foi adicionado o ícone de arrastar (ícone de 6 pontos) para que pudéssemos mover qualquer bloco dentro do container onde ele está localizado.

Quando estiver em um bloco, pressione Esc para alternar para o modo de seleção e pressione Enter para retornar ao modo de edição.

No modo de seleção (lembre-se de pressionar Esc ), a navegação entre a estrutura de blocos é otimizada. Ao mover o mouse dentro de um bloco, podemos ver os limites de cada um dos blocos que ele contém. Dessa forma, fica mais fácil entender a estrutura e arrastar os blocos dentro do bloco pai.

E agora, com esta nova versão, quando você alterna para o modo de edição (pressione Enter ), ao mover um bloco os limites de seu container também são exibidos, para que o processo de selecionar, arrastar e soltar seja muito mais fácil e intuitivo.

Edição de imagem

Continuando com a ideia de melhorar a edição de blocos, um bloco crítico é o bloco do tipo imagem. Já vimos que agora podemos inserir imagens arrastando-as em blocos de tipo imagem, texto e mídia, ou em qualquer bloco de tipo contêiner, como uma coluna.

Mas a grande novidade é que podemos editar e modificar imagens inseridas no próprio editor, sem precisar ir à Biblioteca de Mídia .

Além dos ícones para centralizar e adicionar um link de imagem , com o WordPress 5.8 temos três novos ícones: Crop , Add Text e Duotone Filters .

Cortar imagem

Ao clicar no ícone de corte, aparecem três opções de menu adicionais: zoom , alterar a proporção e girar a imagem .

Como você pode ver, você não precisa mais ir à biblioteca de mídia para que sua imagem tenha a aparência que você precisa.

Filtros Duotônicos

Outro novo recurso que vem com o WordPress 5.8 é a capacidade de filtrar qualquer imagem em duotone. Selecione as duas cores do filtro que deseja aplicar na imagem e pronto, a imagem terá apenas dois tons.

Adicione texto

Este novo ícone, aquele que adiciona texto a uma imagem, equivale a transformar a imagem em um bloco tipo capa. E, claro, após essa alteração, você pode adicionar o texto que deseja ao bloco de capa, como fez no passado.

Além disso, como você pode ver nas propriedades do bloco, agora você também pode modificar o espaçamento e adicionar preenchimento ao texto, para que o texto fique exatamente onde você deseja que esteja na imagem. O preenchimento pode ser definido igual ou diferente para cada um dos 4 lados do texto.

Pessoalmente, acho ótimo que você possa adicionar e realizar todas essas transformações diretamente no editor sem ir à biblioteca de mídia. Ainda assim, se você quiser otimizar suas imagens para SEO, temo que ainda precise ir à biblioteca.

Transformações de bloco

Assim como vimos como transformar um bloco de tipo imagem em tipo de capa, o editor de blocos agora incorpora outros tipos de transformações. Por exemplo, você pode selecionar três parágrafos e transformá-los em títulos, colunas, uma lista, etc. E antes de realizar a transformação, a nova aparência da transformação é visualizada.

Da mesma forma, você pode alterar um conjunto de blocos de tipo de imagem para um bloco de tipo galeria de imagens ou até mesmo um conjunto de botões etc.

O bloco de cobertura

Com todos esses novos recursos incluídos no próprio editor, o bloco de capa nos permite criar designs muito diferentes dos que tínhamos até agora. Por exemplo, agora podemos ter dois blocos de capa aninhados (com um preenchimento entre o filho e o pai) e cada um com sua própria cor, texto e foco.

O bloco de navegação

Outra grande novidade da visualização do editor de blocos no vídeo apresentado no WordCamp é o novo bloco de navegação. Vemos que este bloco não está incluído na versão beta instalada, mas você o encontrará na versão mais recente 10.8.1 do plugin Gutenberg.

Este bloco permite que você adicione em qualquer página, um menu de links para que seus visitantes possam ir para qualquer outra página. Não pretende ser um substituto para os menus de navegação que já conhecemos do WordPress, mas uma alternativa para quando você deseja inserir um menu adicional em uma página.

Além de indicar se deseja o menu horizontal ou vertical, você tem várias opções ao criar o menu:

• Crie-o a partir de um menu existente: você pode optar por exibir um menu que já criou em seu site.
• Criar vazio: isso cria um menu em branco para você adicionar manualmente cada link que deseja mostrar na navegação.
• Crie-o a partir de todas as páginas de nível superior – Isso adicionará automaticamente cada página existente em seu site como um link, que você poderá editar e reorganizar. Apenas páginas de nível superior são adicionadas aqui.

Para adicionar um novo link à navegação, você deve clicar no ícone + que permite escolher entre:

• Link da página: uma página em seu site.
• Link da postagem: uma postagem em seu site.
• Link da categoria: todos os posts com uma categoria específica.
• Link da tag: todas as postagens com uma tag específica.
• Link personalizado: um URL externo.
• Ícones sociais: ícones para redes sociais.
• Pesquisa: uma caixa de pesquisa para que os visitantes pesquisem seu conteúdo.

Depois de criar qualquer menu, você também tem a opção de alterar seu estilo (fonte, fonte e cor de fundo), adicionar submenus, mover itens etc.

Assim, com este bloco você pode criar designs de menus com muita facilidade.

Como você pode ver, esse novo tipo de bloco oferecerá muito mais possibilidades no design de nossas páginas e posts.

Modelo de Design

Outra grande mudança que nos chega com esta nova versão do editor WordPress é que o design do template está totalmente integrado ao editor de blocos. Dessa forma, você pode criar um modelo a partir de uma página criada, e também adiciona a opção de que na barra lateral esquerda você possa listar sua estrutura.

Podemos percorrer a estrutura do modelo e cada elemento é destacado no editor, para que seja muito fácil fazer alterações quando apropriado e você tenha uma visão rápida de todos os elementos aninhados em cada bloco de contêiner.

E tem mais…

E por fim, no vídeo apresentado no WordCamp Europe, também nos foi mostrada a opção de definir diretamente no editor de blocos estilos globais do tema para alterar a paleta de cores, tipografia, etc. Caso você ainda tenha dúvidas, com este novo Versão do WordPress 5.8 estamos cada vez mais perto do objetivo de não precisar de nenhum outro construtor de páginas para a criação das páginas do seu site.

Imagem em destaque por XPS no Unsplash .