O Que há de Novo no WordPress 6.7: Modo Zoom Out, Meta boxes, API de Padrões de Blocos e Muito Mais

O WordPress 6.7 está chegando e é hora de analisar os novos recursos, as alterações e os aprimoramentos que a nova versão reserva para nós.

Essa versão inclui 87 aprimoramentos essenciais, solicitações de recursos e mais de 200 correções de bugs.

O WordPress 6.7 inclui oito versões do Gutenberg, da 18.6 até a 19.3. Nessa atualização, o editor de blocos recebe 445 melhorias, 464 correções de bugs e 55 aprimoramentos de acessibilidade.

Novas APIs poderosas para desenvolvedores são adicionadas ao núcleo. A interface do editor recebe várias adições e melhorias, incluindo ferramentas anteriormente acessíveis apenas através de código. Melhorias de usabilidade e novas ferramentas de design devem simplificar o processo de criação.

O WordPress 6.7 também apresenta um novo tema padrão, o Twenty Twenty-Five, que se beneficia dos recursos mais recentes incluídos na nova versão.

Entre as diversas novas adições e mudanças que chegam com o WordPress 6.7, selecionamos algumas que consideramos mais interessantes para desenvolvedores e usuários. Há muito a explorar, então descubra as novidades.

Modo Zoom Out

O WordPress 6.7 apresenta um novo modo Zoom Out para ajudar você a criar e editar conteúdo com foco em padrões em vez de blocos individuais. Isso permite que você trabalhe em um nível mais alto e oferece uma visão geral da página em construção.

As imagens a seguir mostram o novo recurso em ação. Um novo botão Toggle Zoom Out na barra de ferramentas superior permite que você ative e desative a visualização Zoom Out, permitindo que você trabalhe em padrões ou blocos individuais alternativamente.

Com o modo Zoom Out ativado, você pode executar várias ações no padrão selecionado. A barra de ferramentas do bloco oferece controles para Arrastar, Mover para cima/para baixo e Shuffle. A exibição de lista fornece links para que você execute várias ações, como Editar, Duplicar e Excluir o padrão selecionado.

Quando você trabalha com o Zoom Out ativado, o inseridor de blocos tem como padrão a aba Patterns. A visualização de lista também reflete o modo de edição e exibe padrões em vez de blocos.

Para obter uma lista mais abrangente de recursos e alterações relacionadas ao modo Zoom Out, consulte o problema de iteração do modo Zoom Out e as Notas do desenvolvedor para Zoom Out no WordPress 6.7.

Meta box no editor de artigos

Nas versões anteriores ao WordPress 6.7, as meta boxes impediam que o canvas do editor de artigos fosse carregado em um iframe. Isso limitava alguns benefícios, como o isolamento do CSS de blocos e temas em relação à interface do editor e a precisão das unidades CSS relativas para media queries e viewport. Em resumo, essa limitação impedia o uso do mesmo CSS nas visualizações do editor e do frontend.

A partir do WordPress 6.7, o conteúdo do editor e as meta boxes podem coexistir na interface do editor. Graças a uma nova exibição dividida, a tela do editor de artigos é carregada em um iframe mesmo quando o artigo/página atual tem uma ou mais meta box. De acordo com a nota do desenvolvedor:

Essa alteração garante uma experiência WYSIWYG consistente entre o Editor e as visualizações de frontend. Além disso, torna as meta boxes mais acessíveis do que antes, permitindo fazer referência visual a qualquer parte do conteúdo da postagem enquanto se trabalha com uma meta box, e vice-versa.

Essa implementação usa flex para tornar a visualização do conteúdo e a área da meta box roláveis.

Esse aprimoramento também traz várias alterações à interface do editor de artigos:

• A altura da área da meta box é limitada a 50% por padrão para evitar que ela ocupe muito espaço.
• A área de meta boxes pode ser recolhida ou redimensionada, dependendo da altura do viewport.
• O estado da altura redimensionada e o estado aberto/fechado são persistentes nas preferências do usuário.

Confira a nota do desenvolvedor para obter uma visão geral mais detalhada para os desenvolvedores.

Melhorias na API de vinculação de blocos

Introduzida pela primeira vez no WordPress 6.5, a API de Vinculação de Blocos (API Block Bindings) permite que você vincule os atributos de um bloco a uma fonte de dados externa. A primeira iteração da API de vinculação de blocos possibilitou que você vinculasse valores de campos personalizados aos atributos dos blocos Título, Parágrafo, Botão e Imagem. O WordPress 6.6 abriu as portas para um novo e poderoso recurso baseado na API Block Bindings: Substituições de padrão (Pattern Overrides).

O WordPress 6.7 nos traz novos recursos e aprimoramentos possibilitados pela API Block Bindings e uma nova interface padrão para gerenciar a meta fonte do artigo.

Nova interface de usuário de vinculação de blocos

Essa iteração oferece uma nova interface para o gerenciamento de vinculações de blocos a partir da barra lateral de configurações, usando a fonte de vinculação de blocos de meta artigos incorporada para blocos de título, parágrafo, botão e imagem.

Depois que você tiver registrado seus campos personalizados e selecionado um dos blocos compatíveis, um novo painel de atributos aparecerá na barra lateral de configurações do bloco. Quando você adiciona um ou mais campos de artigos personalizados, o painel Attributes fica interativo, permitindo que você conecte atributos de bloco aos seus campos personalizados.

Isso facilita a criação de vinculações sem a necessidade de adicionar código manualmente no Editor de Código.

Por padrão, somente os administradores podem criar e modificar vinculações. Os desenvolvedores podem substituir o comportamento padrão usando os filtros block_editor_settings_all ou map_meta_cap.

A nota do desenvolvedor alerta sobre duas limitações relacionadas à nova interface de atributos.

• Ainda não é possível conectar atributos de bloco a fontes de dados personalizadas nesta versão. Esse aprimoramento deverá ser implementado em uma versão futura.
• Uma segunda limitação está relacionada ao tipo de campos personalizados exibidos no painel de Atributos. Atualmente, apenas campos do tipo string ou rich text são suportados. Espera-se que versões futuras ampliem o suporte a outros tipos de campos personalizados.

Consulte a nota do desenvolvedor para ver um caso de uso interessante da API Block Bindings aprimorada com templates de artigos personalizados.

Novo atributo de rótulo para metadados de artigos

Um novo atributo label foi implementado para permitir que os desenvolvedores de plugins adicionem um rótulo personalizado para campos de meta artigos durante o registro. Agora você pode usar o seguinte código para registrar seus campos personalizados com rótulos:

register_post_meta( 
	'post', 
	'book_title', 
	array(
		'show_in_rest' => true,
		'type' => 'string',
		'single' => true,
		'sanitize_callback' => 'sanitize_text_field',
		'label' => __('Book title')
	)
);

Se definido, o rótulo será exibido no lugar da chave meta na interface de Vinculação de Blocos. A imagem a seguir mostra o painel de Atributos com rótulos personalizados:

Permissão para editar vinculações de bloco

Juntamente com a nova interface Block Bindings, uma nova configuração do editor canUpdateBlockBindings pode ser usada para determinar se a nova interface é interativa para os usuários. O padrão é um novo recurso edit_block_binding, definido como true para administradores e false para outros usuários.

Você pode alterar o comportamento padrão usando o filtro block_editor_settings_all.

Novas APIs e recursos para desenvolvedores

O WordPress 6.7 traz novos recursos para desenvolvedores utilizarem vinculações de blocos no editor.

Uma nova API de editor permite registrar fontes personalizadas definidas no servidor com valores bootstrap. Em resumo, você pode registrar fontes externas e renderizá-las na interface usando APIs de servidor.

O novo tema padrão, Twenty Twenty-Five, fornece um bom exemplo de uso de bootstrap de fontes com o padrão de Copyright. No arquivo functions.php do tema, você encontrará o seguinte código:

// Registers block binding sources.
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
	/**
	 * Registers the copyright block binding source.
	 *
	 * @since Twenty Twenty-Five 1.0
	 *
	 * @return void
	 */
	function twentytwentyfive_register_block_bindings() {
		register_block_bindings_source(
			'twentytwentyfive/copyright',
			array(
				'label'              => _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ),
				'get_value_callback' => 'twentytwentyfive_copyright_binding',
			)
		);
	}
endif;

// Registers block binding callback function for the copyright.
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
	/**
	 * Callback function for the copyright block binding source.
	 *
	 * @since Twenty Twenty-Five 1.0
	 *
	 * @return string Copyright text.
	 */
	function twentytwentyfive_copyright_binding() {
		$copyright_text = sprintf(
			/* translators: 1: Copyright symbol or word, 2: Year */
			esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
			'©',
			wp_date( 'Y' )
		);

		return $copyright_text;
	}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );

Esse código exibe automaticamente “© YEAR” na interface, conforme mostrado na imagem a seguir.

Observe que o parágrafo na tela de bloco não é dinâmico e mostra apenas o rótulo da fonte.

Para verificar a marcação desse bloco, você precisa criar uma cópia do padrão Copyright do Twenty Twenty-Five e abrir a cópia no editor de código:

<!-- wp:paragraph {
	"metadata":{
		"bindings":{
			"content":{
				"source":"twentytwentyfive/copyright"
			}
		}
	},
	"className":"copyright",
	"textColor":"primary",
	"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->

Você pode ler mais sobre os novos recursos de vinculação de blocos em Block Bindings na nota de desenvolvimento da versão 6.7.

Adições às visualizações de dados

O Data Views é uma interface de usuário aprimorada para coleções de templates, padrões, páginas e muito mais. Também é um componente e uma API que permite que você renderize conjuntos de dados no editor do site usando diferentes tipos de layouts, como tabela, grade, lista, etc.

As visualizações de dados foram introduzidas pela primeira vez no WordPress 6.5 e aprimoradas no WordPress 6.6. Agora, o WordPress 6.7 adiciona novos recursos e aprimoramentos que os tornam mais flexíveis e funcionais.

A partir do WordPress 6.7, um ícone de engrenagem é exibido no canto superior direito da visualização de grade. Quando você clica nesse ícone, um painel Appearance mostra uma série de opções de visualização. Aqui, você pode classificar os elementos na visualização, ajustar a densidade da grade, definir o número de elementos por página e selecionar as propriedades do elemento a serem exibidas na visualização.

Um botão de alternância permite que os usuários mostrem/ocultem os filtros de visualização, melhorando a experiência em telas estreitas.

Quando você define um ou mais filtros, o botão de alternância de filtros mostra o número de filtros ativos.

Outras alterações nas visualizações de dados incluem proporção de aspecto configurável, opções de visualização de dados fora de um menu e muito mais.

Bloco Query Loop aprimorado

O bloco Query Loop é um dos blocos mais poderosos e complexos. Ele deve oferecer o máximo de funcionalidade e possibilidades de personalização e, ao mesmo tempo, permanecer intuitivo e fácil de usar. Com o WordPress 6.7, o Query Loop recebe vários aprimoramentos e adições que o tornam mais versátil e fácil de usar.

O controle anterior de configuração Inherit query from template foi alterado e agora deve ser mais intuitivo e direto.

Ao editar um modelo, o painel de configurações do Query Loop exibe um controle de Tipo de consulta. As imagens a seguir mostram as opções de configuração para os dois tipos de consulta diferentes: Padrão e Personalizada.

A detecção de contexto também foi aprimorada. O bloco Query tem uma configuração inherit definida como true por padrão. Em uma única página, isso não tem efeito sobre os resultados da consulta, e o controle correspondente foi removido com o WordPress 6.7.

Por outro lado, em um template de arquivo ou índice, o conteúdo do bloco de consulta depende do tipo de solicitação. Isso significa que a página de arquivo de uma categoria específica exibe o conteúdo atribuído a essa categoria por padrão, independentemente de outras configurações definidas explicitamente pelo usuário, como o número de publicações.

Você pode encontrar uma lista abrangente de problemas envolvendo o bloco Query Loop aqui.

Adições ao gerenciamento de mídia

Com o WordPress 6.7, o gerenciamento de mídia se torna mais funcional e eficiente. De tamanhos automáticos para imagens de carregamento lento, até suporte mais amplo para imagens de fundo, confira algumas das melhorias no gerenciamento de mídia que chegam na versão 6.7.

Tamanhos automáticos para imagens com carregamento lento

A definição de um valor padrão para sizes permite que o navegador identifique o arquivo de imagem a ser usado com base no valor do atributo srcset. Dessa forma, o navegador sabe a largura da imagem com antecedência, antes que o layout da página seja conhecido.

A especificação HTML permite que as imagens omitam o atributo sizes ou o definam explicitamente como auto ou uma string que comece com auto:

O termo auto representa uma largura calculada ao analisar o atributo sizes. Se estiver presente, deve ser a primeira entrada e todo o valor <source-size-list> deve ser a string auto (ASCII sem distinção entre maiúsculas e minúsculas) ou começar com a string auto, (também sem distinção de maiúsculas e minúsculas).

Com o WordPress 6.7, o atributo auto é adicionado automaticamente no início do atributo sizes para qualquer imagem com carregamento lento. Isso resulta em uma melhoria de desempenho no carregamento da página.

Os desenvolvedores podem corrigir o valor do atributo sizes usando a nova função wp_img_tag_add_auto_sizes().

Aprimoramentos na biblioteca de fontes

O WordPress 6.7 também traz alguns aprimoramentos úteis para a biblioteca de fontes. Primeiro, as fontes agora são agrupadas por fonte (Tema e Personalizada), facilitando a compreensão da origem de cada fonte em um relance.

Um novo botão da opção Selecionar tudo economiza alguns cliques quando você pesquisa uma fonte no Google Fonts.

Outras alterações incluem uma nova mensagem Nenhuma fonte instalada quando as fontes não estão disponíveis e um estado aprimorado Nenhuma fonte instalada quando as fontes estão instaladas, mas não ativadas.

Suporte ao formato HEIC

O formato HEIC (High Efficiency Image Container) é uma variante atualizada do HEIF (High Efficiency Image Format), usado pela Apple em todos os iPhones e iPads com iOS 11 ou posterior. Esse formato garante que os usuários do iOS aproveitem ao máximo as câmeras 4K e tenham arquivos menores.

No WordPress 6.7, os uploads de imagens HEIC são automaticamente convertidos para JPEG no servidor, quando possível. Essa adição permite que os usuários visualizem imagens HEIC na Biblioteca de mídia e as usem em artigos e páginas, mesmo que o navegador não ofereça suporte a HEIC.

Novas e aprimoradas ferramentas de design

Com o WordPress 6.7, os designers têm acesso a novas e poderosas ferramentas de design, incluindo suporte estendido a blocos, predefinições de tamanho de fonte e muito mais.

Suporte para imagens de fundo nos blocos de Verso, Citação e Conteúdo de artigos

O WordPress 6.7 traz novos controles de interface do usuário para gerenciar imagens de fundo para alguns blocos dentro dos estilos globais. Esses blocos incluem Verso, Citação e Conteúdo de artigo.

A definição de uma imagem de fundo em estilos globais se aplica a todo o site. Depois de adicionar uma imagem de fundo para um bloco, você só precisa personalizar as configurações para instâncias individuais do mesmo bloco para personalizar sua aparência.

Você pode usar esse recurso no bloco de Conteúdo de Artigos para envolver o conteúdo de artigos e páginas em templates. A captura de tela a seguir mostra um exemplo de como usar a imagem de fundo.

Suporte adicional para blocos

Além do suporte para imagens de fundo nos blocos de Verso, Citação e Conteúdo de Artigos, o WordPress 6.7 traz novos recursos para vários blocos que serão bem recebidos por designers e desenvolvedores de temas.

O suporte para bordas foi estendido a muitos blocos, incluindo botões, categorias, galeria, título, texto de mídia, parágrafo, título de artigos, citação e muitos outros.

Esta versão também adiciona suporte a cores para botões, itens de lista e comentários mais recentes.

O WordPress 6.7 ainda traz uma adição muito esperada por designers e desenvolvedores de temas: o suporte para sombra no bloco de Grupo.

Predefinições de tamanho de fonte

O WordPress 6.7 apresenta uma nova interface de usuário para controlar as predefinições de tamanho de fonte na interface Estilos Globais. Isso permite que os usuários substituam os padrões do tema e criem, editem, removam e apliquem predefinições de tamanho de fonte usando o editor.

Essa atualização também inclui a opção de ativar a tipografia fluida e definir valores fluidos personalizados.

Para experimentar você mesmo, abra a interface Styles (Estilos) e navegue até Font Sizes (Tamanhos de fonte) > Font Size Presets (Predefinições de tamanho de fonte). Um novo painel exibirá a lista das predefinições de tamanho de fonte disponíveis. Clique na predefinição que você escolher e faça as edições.

Todas as alterações serão aplicadas em todo o seu site.

Melhorias na interface do usuário e outros recursos de edição

O WordPress 6.7 apresenta mais alterações na interface do usuário e recursos que melhoram a experiência de edição. Vamos examinar alguns deles.

O botão Publicar mudou de posição

Os botões Cancelar e Publicar no painel de verificação de pré-publicação mudaram de posição, de modo que agora você pode publicar o artigo sem mover o cursor na página.

Nomes de blocos personalizados no inspetor de blocos

No WordPress 6.7, quando você define um nome de bloco personalizado, ele agora também aparece no inspetor de blocos. No WordPress 6.6, o inspetor de blocos mostrava o nome padrão do bloco (por exemplo, Título).

Desativar o modal Escolher um padrão

Agora você pode desativar o modal Choose a pattern (Escolher um padrão) que aparece quando você cria uma nova página. Para desativar essa funcionalidade, abra Preferências no menu Opções e desative a opção Mostrar padrões iniciais.

Vinculação automática de número de telefone

O campo de link adiciona automaticamente tel: quando você adiciona um número de telefone.

Permitir arrastar e soltar várias imagens no bloco de Imagem

Agora você pode soltar várias imagens em um bloco de imagem e convertê-lo em um bloco de galeria.

Novos recursos e APIs para desenvolvedores

O WordPress 6.7 apresenta várias novas APIs para que os desenvolvedores adicionem mais funcionalidades aos seus plugins. Uma nova API de opções de visualização foi adicionada, e outras APIs foram ampliadas com novos recursos, como a API de HTML e a API de interatividade. Vamos explorar algumas delas.

API de opções de pré-visualização

A nova API Preview Options (API de Opções de Pré-visualização) permite que desenvolvedores de plugins expandam o menu suspenso de Pré-visualização no editor de artigos/páginas. A API introduz um novo componente, PluginPreviewMenuItem, que os plugins podem usar para adicionar itens de menu personalizados, com títulos e ações de clique personalizadas, ao menu de pré-visualização.

Os desenvolvedores de plugins podem adicionar opções de visualização personalizadas ao editor do WordPress para uma série de coisas, como:

• Pré-visualizações de formato personalizado (pense em publicação de mídia social)
• Pré-visualizações de artigos ou páginas com restrições para funções específicas de usuário
• Modos de pré-visualização adicionais, como modo escuro, emails, etc.

Dependendo das propriedades fornecidas, é possível usar os itens de menu de pré-visualização personalizados como botões ou links.

Aqui está um exemplo da nota do desenvolvedor de como você pode usar a nova API:

import { __ } from '@wordpress/i18n';
import { PluginPreviewMenuItem } from '@wordpress/editor';
import { registerPlugin } from '@wordpress/plugins';

function onPreviewClick() {
	// Handle preview action
}

const CustomPreviewMenuItem = () => (
	<PluginPreviewMenuItem
		onClick={ onPreviewClick }
	>
		{ __( 'Your menu item label' ) }
	</PluginPreviewMenuItem>
);

registerPlugin( 'custom-preview-menu-item', {
	render: CustomPreviewMenuItem,
} );

Nova API de Registro de Templates para Plugins

Antes do WordPress 6.7, a única opção para adicionar templates de blocos personalizados era por meio de um tema. O registro de um template de bloco usando um plugin era impossível, a menos que você usasse soluções complicadas.

Graças à nova API de registro de templates, agora você pode registrar templates de blocos personalizados usando um plugin. A nova API oferece duas novas funções para registrar e cancelar o registro de um template: register_block_template() e unregister_block_template().

Seu uso é bastante simples. Você só precisa passar alguns parâmetros para a função:

$template_name: O nome do template na forma de plugin_uri//template_name (observe o //)
$args: uma array com os seguintes argumentos:

• title
• description
• content
• post_types

Para obter uma visão geral mais detalhada da nova API e dos exemplos de uso, consulte a nota do desenvolvedor e o pull request original.

Novas APIs de registro de tipo de bloco

Uma nova função wp_register_block_metadata_collection() registra um tipo de bloco de um arquivo de manifesto, se ele existir, em vez de ler e analisar o arquivo block.json diretamente. Isso é particularmente útil quando um plugin registra vários tipos de bloco, pois evita a leitura e a análise do block.json para cada tipo de bloco.

Observe que essa nova função não substitui as funções register_block_type() e register_block_type_from_metadata() existentes. Seu uso é opcional, mas recomendado para plugins que registram vários blocos para melhorar o desempenho.

Consulte a nota do desenvolvedor para uma visão completa da nova API e um exemplo de uso.

Opções de nível de cabeçalho

Graças a um novo atributo levelOptions, os desenvolvedores podem especificar quais níveis de cabeçalho devem aparecer na interface suspensa dos blocos Heading, Site Title, Site Tagline, Query Title, Post Title e Comments Title.

Você o usará principalmente em templates de blocos, partes de templates e padrões. O código de exemplo a seguir desativa os cabeçalhos H1, H5 e H6 em um bloco Heading:

<!-- wp:heading {"levelOptions":[2,3,4],"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center"><em>Schedule a Demo</em></h2>
<!-- /wp:heading -->

A imagem abaixo mostra as opções disponíveis na barra de ferramentas do bloco:

Você também pode filtrar o atributo levelOptions com um plugin ou no arquivo de funções do seu tema usando o filtro register_block_type_args. A nota do desenvolvedor fornece o seguinte exemplo:

function example_modify_heading_levels_globally( $args, $block_type ) {
	 
	if ( 'core/heading' !== $block_type ) {
		return $args;
	}
 
	// Remove H1, H2, and H6.
	$args['attributes']['levelOptions']['default'] = [ 3, 4, 5 ];
	 
	return $args;
}
add_filter( 'register_block_type_args', 'example_modify_heading_levels_globally', 10, 2 );

Alterações adicionais para desenvolvedores no WordPress 6.7

• Agora é possível inserir um bloco com hook como o primeiro ou último elemento de um bloco de Parte de Template. (Veja a nota do desenvolvedor)
• Os blocos com hooks agora respeitam a propriedade multiple block-supports. (Veja a nota do desenvolvedor)
• Os componentes da interface do usuário receberam um número considerável de atualizações. (Veja a nota do desenvolvedor.)
• As novas funções getServerState() e getServerContext() fornecem uma maneira de você assinar as alterações de estado/contexto da API de interatividade na navegação do lado do cliente.
• Os módulos de script recebem algumas atualizações com um novo módulo de script @wordpress/a11y e um novo filtro script_module_data_{$module_id}.
• A API HTML recebe vários aprimoramentos, incluindo suporte a quase todas as tags HTML, um novo método set_modifiable_text() que permite substituir o conteúdo de texto de elementos independentes, como script, style ou title, um modo de analisador completo no processador HTML e muito mais.
• Vários aprimoramentos de internacionalização (i18n) foram incorporados ao núcleo, incluindo uma nova função has_translation() para determinar se uma tradução já existe sem carregar a tradução primeiro, e-mails para admin_email no idioma do usuário e um aviso para desenvolvedores ao carregarem traduções em um plugin ou tema antes de o usuário atual ser identificado.

Resumo

Nesta análise detalhada do WordPress 6.7, exploramos diversos recursos e aprimoramentos incríveis que acompanham esta versão, desde um novo tema padrão até o modo Zoom Out e Meta boxes no editor de Artigos, adições à API de Vinculação de Blocos, melhorias no gerenciamento de mídia, novas ferramentas de design e muitos novos recursos para desenvolvedores de plugins.

Agora é a sua vez! Você já testou o WordPress 6.7? Quais são os seus recursos ou mudanças favoritas nesta versão? Conte para a gente nos comentários abaixo.