Gutenberg 8.3 atualiza categorias de bloco, inclui seletor de bloco pai e adiciona novos controles de design

Ontem, a equipe do Gutenberg lançou a versão 8.3 do plugin em andamento por trás do editor de blocos. Embora grande parte do foco da equipe esteja na próxima edição completa do site, esta atualização inclui vários recursos voltados para o usuário, como um conjunto reorganizado de categorias de bloco, um seletor de bloco pai, um controle de espaçamento e opções de cores de links.

Um aprimoramento menor inclui a capacidade de filtrar o bloco Últimas postagens por autor. O controle de nível para o bloco Heading também mudou. Em vez de selecionar o nível na barra lateral de opções do bloco, o seletor de nível agora está localizado na barra de ferramentas do editor.

No Gutenberg 8.2, pressionar a tecla Enter no campo de legenda para um bloco de imagem criava um novo parágrafo. Na versão 8.3, esse recurso foi estendido a todos os blocos com legendas.

A equipe corrigiu mais de 20 correções de bugs na versão mais recente. No geral, a nova atualização do plugin parece ser sólida após um dia de uso. No entanto, algumas das adições experimentais, como o novo controle de preenchimento, podem merecer alguma preocupação. Os autores de temas precisam começar a testar isso, fornecer feedback e garantir que o desenvolvimento esteja indo na direção certa.

Novas categorias de blocos

A equipe de Gutenberg renomeou e reorganizou as categorias de blocos. A nova lista parece fazer mais sentido e está melhor consolidada em grupos próprios:

• Texto
• meios de comunicação
• Projeto
• Widgets
• Incorporações

Embora eu seja fã dos novos nomes de categorias, acho as categorias inúteis para qualquer propósito prático neste momento. Desde que Gutenberg deixou cair a interface com abas no insersor de blocos, parecia uma grande parede de blocos. Meus olhos naturalmente pulam pelos nomes das categorias enquanto eu percorro e percorro e percorro a lista de blocos disponíveis para encontrar aquele bloco específico de que preciso. Eu quase sempre uso comandos de barra de teclado para inserir blocos. Nos casos em que não tenho, não é uma experiência de usuário ideal e as novas categorias não ajudam muito.

Selecionar bloco pai

Uma das experiências mais frustrantes em Gutenberg é tentar selecionar um bloco pai em um cenário de bloco aninhado. Com muita frequência, os usuários sentem que estão clicando aleatoriamente na esperança de atingir o ponto ideal onde podem realmente navegar até o bloco que precisam editar. É um exercício de frustração nos melhores momentos.

A equipe de Gutenberg deu um passo – um pequeno passo – para aliviar essa dor. Ao passar o mouse sobre o botão “alterar tipo ou estilo de bloco” na barra de ferramentas do editor, um novo botão aparece para selecionar o bloco pai.

Não tenho certeza se esta é a maneira correta de lidar com o problema. Eu gostaria de ver alguns experimentos com algum tipo de botão de seta que aparece sem passar o mouse. Por enquanto, estou convencido de que a equipe está tentando resolver o problema e espero que futuras iterações melhorem a navegação dentro de blocos aninhados.

Esse recurso parece não funcionar quando o modo da barra de ferramentas superior está ativado. Para aqueles que usam este modo, a melhor maneira de selecionar um bloco pai é através da navegação de navegação na parte inferior do editor.

Controle de espaçamento/preenchimento experimental

Os autores de temas agora podem adicionar suporte para um controle de preenchimento experimental via add_theme_support( 'experimental-custom-spacing' ) . Quando suportado, o usuário final verá uma nova guia Espaçamento na barra lateral de opções de bloco para o bloco Capa, que deve estar disponível para outros blocos no futuro. Por padrão, os usuários podem controlar o preenchimento para todos os quatro lados de um bloco com um único valor. Eles também podem “desvincular” o preenchimento e controlar os valores superior, inferior, esquerdo e direito individualmente.

Presumivelmente, a equipe de Gutenberg estenderá esse recurso de espaçamento para incluir também um controle de margem. Seria o movimento natural e que espero que leve à morte do bloco Spacer com o qual os usuários tiveram que conviver nos últimos dois anos.

No entanto, não estou convencido de permitir que os usuários finais controlem o preenchimento com valores explícitos. A alteração aleatória dos valores de preenchimento quebrará o ritmo vertical que muitos autores de temas dedicam tempo para calcular meticulosamente. Ao usar valores de pixel (o padrão), os usuários certamente terão problemas com os tamanhos de tela do tablet e do celular. Essencialmente, ele criará uma bagunça completa de espaçamento.

Não sou contra a ideia. Eu quero que isso seja feito antes que isso chegue ao WordPress. Os autores de temas devem ser capazes de registrar classes nomeadas que são tratadas por meio da folha de estilo. Isso remonta à ideia do WordPress ter uma estrutura de design. Crie um conjunto de classes utilitárias para espaçamento (oh, olá, Tailwind). Deixe que os autores do tema definam o espaçamento com base em seu design. Deixe os usuários escolherem entre eles. Em seguida, forneça uma opção personalizada para aqueles momentos em que os usuários desejam resolver o problema com as próprias mãos. Nesse ponto, eles tomaram uma decisão explícita de romper com o fluxo de design que o autor do tema escolheu.

Cores dos links

Um dos obstáculos mais difíceis que os autores de temas tiveram que enfrentar ao estilizar o editor de blocos é descobrir o que fazer com as cores dos links quando o usuário altera a cor de fundo de um bloco. Os usuários há muito tempo controlam a cor do texto nesse cenário. No entanto, as cores dos links podem se tornar rapidamente inacessíveis ou simplesmente feias. Os autores de temas com visão de futuro estilizariam essas cores de link para que herdassem a cor do texto, mas essa nem sempre é a solução ideal.

É aí que entram as cores de link controladas pelo usuário. Para adicionar suporte para cores de link personalizadas, os autores do tema devem optar pelo recurso via add_theme_support( 'experimental-link-color' ) . Isso adicionará um novo seletor de cores para os blocos Parágrafo, Título, Grupo, Colunas e Mídia e Texto.

Incapaz de fazer esse recurso funcionar com a chamada de função de suporte ao tema, tive que pesquisar um pouco o código para encontrar o problema. Para que os autores de temas adicionem suporte para cores de link, eles também devem definir seus links padrão, conforme mostrado no seguinte trecho de código CSS:

 a { color: var( --wp--style--color--link, #000 ); }

O WordPress definirá automaticamente a --wp--style--color--link . Para maior especificidade, os autores de temas também podem direcionar .has-link-color a .