O lançamento do WordPress 6.4 está programado para 7 de novembro, e chegou a hora de explorarmos os recursos e aprimoramentos mais notáveis que serão enviados com a nova versão do WordPress.

As adições mais interessantes incluem Hooks de Blocos, organização aprimorada de padrões, uma paleta de comandos redesenhada e aprimorada, alterações nas páginas de anexos, um efeito de lightbox em imagens e várias melhorias no fluxo de trabalho de escrita.

O carregamento aprimorado de templates, as estratégias refinadas de carregamento de scripts e outros aprimoramentos de desempenho farão com que seu site WordPress seja executado mais rapidamente, enquanto os aprimoramentos da Exibição de lista e várias atualizações na interface de usuário do administrador a tornarão mais útil e acessível.

O WordPress 6.4 também traz um novo tema padrão com vários padrões e templates prontos para uso que simplificarão seu processo de edição.

Isso é muita coisa, não é? Portanto, não espere mais e vamos descobrir o que há de novo no WordPress 6.4.

Hooks de bloco

Os Hooks de Blocos (anteriormente chamados de blocos de inserção automática) permitem que os plugins interajam automaticamente com o editor Gutenberg.

Mais precisamente, graças aos Hooks de Blocos, um bloco pode ser colocado automaticamente em uma posição específica quando outro bloco é adicionado ao conteúdo.

Dois princípios orientam a forma como os Hooks de Blocos devem funcionar:

  • O usuário não deve ser solicitado a inserir o bloco no editor manualmente, e a inserção do bloco no frontend deve ocorrer imediatamente após a ativação do plugin que fornece o bloco com hook. A desativação do plugin deve remover automaticamente o bloco.
  • O bloco deve estar visível no editor, e o usuário deve poder controlar a inserção automática.

Para levar em conta ambos os princípios e preservar as informações contidas no código, os blocos associados funcionam apenas em templates e partes de template não modificados e em padrões fornecidos por temas, copiados do Diretório de Padrões ou registrados com a função register_block_pattern. Eles não funcionarão em conteúdo de artigo, templates e partes de template modificados e padrões gerados pelo usuário.

Além disso, a nota para desenvolvedores adverte:

A partir do WordPress 6.4, você não pode inserir automaticamente blocos que tenham uma função de salvar, ou ocorrerão erros de validação de bloco. Em termos coloquiais, isso significa que os Hooks de Blocos funcionam com blocos dinâmicos, não com blocos estáticos.

Leia mais sobre blocos estáticos e dinâmicos.

Você pode implementar os Hooks de Blocos de duas maneiras: usando o arquivo block.json ou o novo filtro hooked_block_types.

Como conectar blocos via block.json

O uso do block.json é a maneira mais rápida e fácil de conectar um bloco de terceiros, mas não oferece grande flexibilidade, o que significa que um bloco inserido automaticamente por meio do block.json será anexado a todas as instâncias do destino incondicionalmente.

Você pode adicionar blocos com hook usando a nova propriedade blockHooks, que recebe um objeto de pares de chave/valor em que a chave é o nome do bloco ao qual você deseja se conectar e o valor especifica sua posição em relação ao bloco de destino.

Você pode definir uma das seguintes posições:

  • before o bloco de destino
  • after o bloco de destino
  • firstChild do bloco de contêiner de destino
  • lastChild do bloco de contêiner de destino

Por exemplo, você pode conectar um bloco a cada bloco Spacer usando blockHooks desta forma:

{
	blockHooks: {
		'core/spacer': 'after'
	}
}

Quando você usa firstChild ou lastChild com block.json, um novo painel Plugins no inspetor de blocos lista os blocos que estão programados para serem inseridos automaticamente, com opções para ativar/desativar a inserção automática de blocos.

Inserção automática ativada
Inserção automática ativada (Fonte da imagem PR #52969)

Como conectar blocos usando hooked_block_types

Uma maneira mais flexível de associar blocos a um alvo é usando o novo filtro hooked_block_types. Ele permite que você associe blocos de forma incondicional, assim como o método block.json, ou com base em uma condição – por exemplo, associando um bloco a um alvo dependendo do template, parte do template ou padrão onde ele está localizado.

A função de callback para hooked_block_types aceita quatro parâmetros:

  • $hooked_blocks – Um array de blocos conectados.
  • $position – Pode ser before, after, first_child, ou last_child.
  • $anchor_block – O nome do bloco de ancoragem.
  • $context – O template de bloco, a parte do template ou o padrão ao qual o bloco âncora pertence.

Para obter mais informações técnicas sobre Hooks de Blocos, consulte a nota do desenvolvedor.

Aprimoramentos no sistema de padrões

Os padrões de blocos são uma poderosa ferramenta de design que pode ser usada em seu conteúdo ou templates, permitindo que você crie estruturas complexas de blocos sem complicações. Você pode usar os padrões fornecidos pelo seu tema de bloco ou pode adicionar mais padrões copiando do Diretório de Padrões.

Você também pode criar seus padrões do zero na interface do editor de sites/artigos. E se você se sentir confortável com a codificação, poderá adicionar padrões ao seu tema atual – ou um child theme – com um arquivo .php. Atualmente, os padrões são tão importantes no WordPress que publicamos um guia detalhado sobre tudo o que você precisa saber sobre padrões de blocos.

Criar padrão no WordPress 6.3
Criar padrão no WordPress 6.3

Dito isso, vamos descobrir o que há de novo no sistema de padrões com o WordPress 6.4.

Em primeiro lugar, as categorias de padrões. Na versão anterior do WordPress, quando você criava um novo padrão, só podia definir o nome e o tipo do padrão, sincronizado ou não sincronizado.

A partir do WordPress 6.4, você também pode adicionar uma categoria ao seu padrão para que ele possa ser identificado mais facilmente no site e no editor de publicações.

Criar padrão no WordPress 6.4.
Criar padrão no WordPress 6.4.

Também é possível alterar as categorias quando você edita o padrão.

Edição de categorias de padrão.
Edição de categorias de padrão.

Além disso, a aba Synced patterns (Padrões sincronizados) do inseridor de blocos foi removida, e agora você pode acessar todos os seus padrões na mesma aba Patterns (Padrões).

Abas do inseridor de blocos no WordPress 6.3 vs WordPress 6.4
Abas do inseridor de blocos no WordPress 6.3 vs WordPress 6.4

Também é mais fácil importar ou exportar padrões como JSON a partir do editor do site.

Exportar padrão como JSON a partir do editor do site.
Exportar padrão como JSON a partir do editor do site.

Outras alterações aprimoram a compatibilidade de padrões com temas clássicos e preparam o caminho para futuras implementações.

Twenty Twenty-Four

Twenty Twenty-Four é o novo tema padrão do WordPress que vem com o WordPress 6.4. É um tema WordPress multifuncional, porém minimalista, adaptado para três casos de uso principais: proprietários de pequenas empresas, fotógrafos e artistas, e escritores e blogueiros.

O Twenty Twenty-Four não adiciona funcionalidade ao seu site. Ele é mais uma coleção de templates e padrões que, combinados, permitem que você crie uma grande variedade de sites.

Além disso, ele fornece muito conteúdo padrão com vários exemplos reais de estruturas de página que você pode editar e personalizar de acordo com suas necessidades.

Temos um artigo completo que aborda o novo tema Twenty Twenty-Four. Dê uma olhada nele para ver mais de perto.

Novas ferramentas e recursos de design

Com o WordPress 6.4, várias ferramentas e recursos de design foram incorporados ao núcleo. Os mais interessantes incluem:

Controles de cores para o bloco de conteúdo

O bloco de Conteúdo é um elemento integrante do bloco Loop de Consulta e é particularmente útil quando você precisa personalizar a aparência do conteúdo em um loop de consulta.

O bloco de Conteúdo está disponível no bloco Loop de Consulta.
O bloco de Conteúdo está disponível no bloco Loop de Consulta.

Ele está disponível no editor de artigos quando você está editando um Loop de Consulta e no editor do site quando está criando ou editando um template.

Com o WordPress 6.4, o bloco de Conteúdo foi aprimorado e agora suporta cores para texto, fundo e links.

Configurações de cor para o bloco de Conteúdo.
Configurações de cor para o bloco de Conteúdo.

Suporte ao bloco de imagens de fundo

Um novo suporte ao bloco de imagens de fundo foi adicionado ao WordPress 6.4, com o bloco Grupo ativado por padrão.

Controle de imagem de fundo para um bloco de grupo no WordPress 6.4.
Controle de imagem de fundo para um bloco de grupo no WordPress 6.4.

Quando um tema está usando o recurso appearanceTools no theme.json, um painel Fundo exibe o controle de imagem de fundo correspondente, que também mostra uma visualização da imagem de fundo.

A definição de uma imagem de fundo adiciona a propriedade background-image ao elemento div do bloco, juntamente com uma declaração background-size: cover que garante que a imagem cubra o bloco de grupo.

Você tem duas maneiras de adicionar suporte à imagem de fundo aos seus temas. A primeira e mais fácil é você optar pela propriedade appearanceTools. Isso habilita várias ferramentas de design, inclusive imagens de fundo.

Se precisar de um controle mais granular sobre as ferramentas de design, você poderá usar a propriedade backgroundImage em seu theme.json dessa forma:

{
	"settings": {
		"background": {
			"backgroundImage": true
		}
	}
}

Efeito Lightbox nas imagens

Um novo botão de alternância Expandir ao clicar no painel Configurações da imagem do bloco permite que você ative/desative o efeito lightbox em suas imagens. Esta é a primeira iteração dessa funcionalidade, que deverá ser aprimorada em versões futuras.

O botão Expandir ao clicar ativa a exibição de lightbox nas imagens.
O botão Expandir ao clicar ativa a exibição de lightbox nas imagens.

O efeito lightbox também funciona com filtros de dois tons, mas é um pouco confuso quando se trata de galerias de imagens. No momento em que este artigo foi escrito, não era possível ativar o efeito lightbox no nível da galeria e você deveria ativar o recurso em imagens individuais.

Para implementar esse recurso nas versões anteriores do WordPress, você precisava usar um plugin. Agora ele faz parte do núcleo e isso significa menos código de terceiros para o seu site do WordPress.

Orientação vertical do texto

Uma nova opção de orientação de texto permite que os temas ofereçam suporte a texto vertical. Se o seu tema for compatível com esse recurso, você poderá ativar o texto vertical da direita para a esquerda nas configurações de tipografia.

Configuração da orientação vertical.
Configuração da orientação vertical.

Esse recurso é desativado por padrão. Os desenvolvedores de temas podem adicionar suporte à orientação do texto adicionando uma nova configuração writingMode ao seu theme.json:

{
	settings: {
		"typography": {
			"writingMode": true
		}
	}
}

Você também pode definir um comportamento padrão diferente para blocos específicos. O exemplo a seguir mostra como você pode definir a orientação vertical-rl para todos os blocos de parágrafo:

{
	"styles": {
		"blocks": {
			"core/paragraph": {
				"typography": {
					"writingMode": "vertical-rl"
				}
			},
		}
	}
}

Aprimoramentos para o bloco de notas de rodapé

O WordPress 6.4 também apresenta alguns aprimoramentos para o bloco Notas de rodapé. Agora ele oferece suporte a cores de link, plano de fundo e texto. Ele também oferece controles para tipografia, dimensões e bordas.

Configurações de cor, tipografia, dimensões e borda para o bloco Notas de rodapé.
Configurações de cor, tipografia, dimensões e borda para o bloco Notas de rodapé.

Os controles de cor de texto e de link são expandidos por padrão. Os demais controles estão recolhidos ao carregar a página.

Botões permitidos no bloco de navegação

Os botões agora fazem parte da lista de elementos internos permitidos do bloco Navegação.

Transforme um item de menu em um botão no WordPress 6.4.
Transforme um item de menu em um botão no WordPress 6.4.

Ao criar um novo item de menu, você pode transformá-lo facilmente em um botão na barra de ferramentas do bloco.

Um botão no bloco Navegação.
Um botão no bloco Navegação.

Aprimoramentos na interface do usuário e no fluxo de trabalho

O WordPress 6.4 também apresenta várias melhorias na interface do editor, aprimorando a experiência de edição e simplificando o fluxo de trabalho. Nossas alterações favoritas incluem:

Paleta de comandos aprimorada

Introduzida pela primeira vez no WordPress 6.3, a paleta de comandos permite que você execute ações usadas com frequência na interface do Editor do site. O WordPress 6.4 marca um novo passo à frente com uma atualização do design e alguns aprimoramentos adicionais.

A paleta de comandos no WordPress 6.3.
A paleta de comandos no WordPress 6.3.
A paleta de comandos no WordPress 6.4.
A paleta de comandos no WordPress 6.4.

As imagens abaixo mostram um exemplo do comportamento diferente da paleta de comandos no WordPress 6.3 e 6.4.

Pesquisa de padrões no WordPress 6.3
Pesquisa de padrões no WordPress 6.3
Pesquisa de padrões no WordPress 6.4
Pesquisa de padrões no WordPress 6.4

Esta versão também adiciona alguns novos comandos e melhora a consistência e a nomenclatura. Os novos comandos incluem transformações de blocos e as opções de duplicar, copiar, remover e inserir antes/depois.

Uma mudança sutil na atualização é a remoção de ações descritivas do início de muitos comandos para melhorar a capacidade de busca e a clareza de cada comando.

Pesquisando por
Pesquisando por “open” no WordPress 6.3.
Pesquisando por
Pesquisando por “open” no WordPress 6.4.

A nova versão também adiciona comandos de seleção de blocos. Para ver isso em ação, selecione alguns blocos no Editor de Site e pressione cmd + k (MacOS) ou ctrl + k (Windows) e digite uma chave de pesquisa como “transform”. Você verá as seguintes sugestões:

Comandos de seleção de blocos.
Comandos de seleção de blocos.

Você pode executar vários comandos em uma seleção de blocos. Por exemplo, você pode agrupar alguns blocos:

Criando um grupo de relógios a partir de uma seleção.
Criando um grupo de relógios a partir de uma seleção.

E você também pode desagrupá-los.

Um comando para desagrupar blocos.
Um comando para desagrupar blocos.

No momento em que este texto foi escrito, os comandos de seleção de blocos incluíam Adicionar antes, Adicionar depois, Excluir, Duplicar, Mover para, Agrupar, Desagrupar e Transformar em.

Visualização de lista aprimorada

A visualização de lista permite que você navegue pelo conteúdo da página e execute várias ações em blocos, grupos e padrões. Essas ações incluem Copiar, Duplicar, Agrupar e muito mais. Isso é particularmente útil em estruturas complexas de blocos aninhados, pois permite que você expanda e recolha grupos de itens e execute várias ações em blocos, grupos e padrões individuais.

Visualização de lista no WordPress 6.3.
Visualização de lista no WordPress 6.3.
Visualização de lista no WordPress 6.4.
Visualização de lista no WordPress 6.4.

A partir do WordPress 6.4, você também pode renomear um grupo de blocos, visualizar imagens para blocos de Galeria e Imagem, duplicar blocos usando o atalho cmd + shift + d (ctrl + shift + d no Windows).

Renomeando um bloco de grupo na visualização de lista.
Renomeando um bloco de grupo na visualização de lista.

Barras de ferramentas capturadas

Ao editar blocos com vários elementos internos, trabalhar com os blocos internos pode ser complicado. Isso é particularmente verdadeiro no caso do bloco Navegação.

Antes do WordPress 6.4, ao selecionar blocos internos, a barra de ferramentas do bloco era movida para uma posição diferente na tela. Esse comportamento levava a uma experiência de usuário ruim para blocos como Navegação e Lista.

Desde o WordPress 6.4, a barra de ferramentas do bloco interno é fixada à posição do bloco principal. Assim, ao alternar a seleção entre blocos adjacentes, a barra de ferramentas permanece estática na mesma localização do bloco principal.

A barra de ferramentas do bloco de Lista.
A barra de ferramentas do bloco de Lista.
Uma barra de ferramentas de bloco de item de lista.
Uma barra de ferramentas de bloco de item de lista.

A barra de ferramentas capturada está atualmente implementada nos blocos de Navegação, Lista e Citação.

Aprimoramentos de desempenho e outras alterações para desenvolvedores

Mais de 100 atualizações de desempenho foram incorporadas ao núcleo, juntamente com várias alterações para os desenvolvedores de temas. Vamos explorar algumas alterações interessantes.

Estratégias de carregamento de scripts

As estratégias de carregamento de scripts foram introduzidas no WordPress 6.3 e fornecem uma maneira de evitar que um script seja carregado em uma ordem inesperada na árvore de dependência de scripts usando os atributos async e defer.

Com o WordPress 6.4, as estratégias de carregamento de scripts foram implementadas para scripts de frontend em temas principais e agrupados.

Além disso, a partir do WordPress 6.4, os scripts “carregados com o atributo defer foram movidos do rodapé para o head para que sejam descobertos mais cedo enquanto o documento está sendo carregado e possam ser executados mais cedo quando o documento for carregado”.

Outras alterações melhoram a segurança do núcleo e a capacidade de manutenção. Para obter uma visão geral mais técnica do carregamento de scripts, consulte a nota do desenvolvedor do WP 6.4.

Alterações nas páginas de anexos

A partir do WordPress 6.4, as páginas de anexos para novas instalações do WordPress estão totalmente desativadas.

Antes do WordPress 6.4, o WordPress criava automaticamente uma página de anexo para cada arquivo multimídia carregado. Mas isso não fazia sentido em muitos sites. Essas páginas são indexadas pelos mecanismos de pesquisa e podem levar a uma experiência ruim para os usuários.

A partir do WordPress 6.4, uma opção do banco de dados wp_attachment_pages_enabled controla o comportamento das páginas de anexo.

Essa opção é definida como 1 para sites existentes (páginas de anexo ativadas) e 0 para novos sites (páginas de anexo desativadas) a partir do WordPress 6.4.

Os administradores do site podem alterar esse valor por meio do WP CLI:

wp option set wp_attachment_pages_enabled 0|1

Ou visitando wp-admin/options.php em seu site e alterando o valor da opção wp_attachment_pages_enabled.

Alterando a opção para ativar páginas anexas.
Alterando a opção para ativar páginas anexas.

Componente ProgressBar

Um componente horizontal básico ProgressBar foi introduzido para substituir o componente Spinner usado anteriormente para carregar conteúdo no editor do site.

O novo componente da barra de progresso no editor do site.
O novo componente da barra de progresso no editor do site.

Padrões de carregamento no WordPress 6.4

Antes do WordPress 6.4, a função _register_theme_block_patterns() era usada para registrar quaisquer padrões que o tema ativo pudesse fornecer em seu diretório de padrões. Devido às extensas operações de arquivo exigidas por essa função, seu uso levou a um problema de sobrecarga de recursos, particularmente perceptível com temas que fornecem toneladas de padrões, como o Twenty Twenty-Four.

Para resolver esse problema, o WordPress 6.4 introduziu uma nova função _wp_get_block_patterns() que armazena padrões em um cache temporário. Graças à nova função, as solicitações subsequentes não precisam de pesquisas de arquivos, resultando em melhorias significativas no desempenho.

Os desenvolvedores podem ignorar o cache de padrões ativando o modo de desenvolvimento de um tema, atualizando o número da versão do tema, trocando o tema ou chamando o método WP_Theme::delete_caches().

Menos verificações de existência de arquivos

Anteriormente, algumas funções na API de temas executavam várias verificações de existência de arquivos em um child theme antes de retornar ao tema principal.

Isso não era o ideal porque essas funções não consideravam se o tema atual era um child theme ou não.

Para evitar verificações inúteis de existência de arquivos, várias funções e métodos da API de temas foram atualizados e agora verificam se o diretório da folha de estilo do tema atual corresponde ao diretório do template antes de prosseguir com as verificações de existência de arquivos.

Isso deve levar a melhorias significativas no desempenho, especialmente com temas que não são child themes.

Outras melhorias de desempenho envolvem as funções get_block_theme_folders() e the_header_image_tag().

Nova função de opções

As opções são carregadas automaticamente por padrão. Quando um site tem muitas opções, isso pode causar lentidão no tempo de resposta do servidor e bugs. Para evitar esse comportamento, os desenvolvedores de plugins agora podem aproveitar várias novas funções que permitem aos desenvolvedores gerenciar opções, melhorar o desempenho e definir um comportamento padrão diferente.

Duas funções permitem que você busque várias opções com uma única consulta ao banco de dados.

prime_options() permite que você busque várias opções com uma única consulta ao banco de dados. Os valores das opções são armazenados no cache para que as chamadas subsequentes para get_option() não exijam consultas adicionais ao banco de dados.

prime_options() a função “Cache” recebe uma array de nomes de opções e não retorna nenhum valor de opção, pois sua única responsabilidade é atualizar o cache relevante.

prime_options_by_group() funciona de forma semelhante ao prime_options(), mas para um grupo de opções específico.

Duas outras funções permitem definir valores de carregamento automático de opções.

wp_set_option_autoload_values() pode ser usada para definir o valor de carregamento automático para uma única opção.

wp_set_options_autoload_values() pode ser usada para definir valores de carregamento automático para várias opções.

Alterações adicionais para desenvolvedores

As alterações adicionais para os desenvolvedores incluem:

  • Substituição de tags de estilo codificadas por wp_add_inline_style() (consulte a nota do desenvolvedor)
  • Valores configuráveis de viewport mínimo e máximo para tipografia fluida em theme.json (consulte a nota do desenvolvedor)
  • Desativar controles de layout em theme.json (consulte a nota do desenvolvedor)
  • Definir o modo de edição de blocos usando o novo hook useBlockEditingMode (consulte a nota do desenvolvedor)
  • A função wp_get_loading_optimization_attributes() foi aprimorada e novos filtros foram introduzidos para controlar os atributos de otimização de carregamento (consulte a nota do desenvolvedor)
  • Uma nova API registerInserterMediaCategory permite que os desenvolvedores de plugins registrem categorias de mídia de inserção personalizadas e ofereçam mais opções aos usuários. A API só permite adicionar categorias personalizadas de mídia de inserção, mas não oferece controle sobre as categorias principais, exceto a categoria Openverse (consulte a nota do desenvolvedor)
  • Duas novas funções wp_get_admin_notice() e wp_admin_notice() “reduzem a carga de manutenção, incentivam a consistência e permitem a filtragem de argumentos e mensagens para todos os avisos de administração” (consulte a nota do desenvolvedor)
  • WP_Query o sistema de cache WP_Term_Query foi aprimorado, reduzindo as consultas ao banco de dados e melhorando a eficiência geral (consulte a nota do desenvolvedor)
  • A marcação das páginas de login e registro foi aprimorada para otimizar sua estrutura e oferecer aos desenvolvedores mais flexibilidade nas personalizações (consulte a nota do desenvolvedor)

Resumo

A terceira versão do WordPress 2023 traz muitos recursos novos, novas ferramentas de design e várias melhorias na interface do usuário, correções de bugs e outras pequenas alterações.

Ela também apresenta um novo tema padrão multifuncional leve com vários padrões e templates que você pode personalizar para seus casos de uso específicos.

Agora, é com você: Você já teve a chance de testar o WordPress 6.4? Se você quiser testar e/ou contribuir com o WordPress, recomendamos nosso pacote de desenvolvimento local gratuito para WordPress, o DevKinsta.

E você, quais novidades da versão 6.4 mais chamaram sua atenção? Deixe seu comentário abaixo.

Carlo Daniele Kinsta

Carlo é um apaixonado por webdesign e desenvolvimento frontend. Ele tem mais de 10 anos de experiência com WordPress e colaborou com diversas universidades e instituições educacionais na Itália e na Europa. Carlo já publicou inúmeros artigos e guias sobre WordPress, tanto em sites italianos quanto internacionais, além de revistas impressas. Você pode seguir ele no LinkedIn e no X.