O WordPress 6.6 “Dorsey” foi lançado. A nova versão foca em refinar e aprimorar vários recursos introduzidos em versões anteriores. No entanto, muitas adições levam o núcleo um passo adiante no caminho da fase 3 do desenvolvimento do WordPress.

Um total de 299 tíquetes do Core Track estão incluídos no WordPress 6.6, juntamente com 392 aprimoramentos, 462 correções de bugs e 46 melhorias de acessibilidade no Editor de Blocos.

Entre os muitos novos recursos que virão com o WordPress 6.6, as substituições de padrões de bloco são as que mais gostamos. Inicialmente planejadas para serem lançadas com o WordPress 6.5, mas adiadas para o 6.6, as substituições de padrões são a segunda implementação da API Block Bindings e nos dão uma ideia melhor do que está por vir nas futuras versões do WordPress.

Contudo, as substituições de padrões são apenas um dos muitos acréscimos excelentes à próxima versão do WordPress. Portanto, vamos começar nossa jornada para descobrir os novos recursos e aprimoramentos mais interessantes que virão com o WordPress 6.6.

Substituições de padrões sincronizados

A primeira implementação da API Block Bindings foi para conectar atributos de blocos e campos personalizados. Com o WordPress 6.6, uma segunda iteração desbloqueia um aprimoramento dos padrões sincronizados chamado Substituições de Padrões Sincronizados.

Há dois tipos de padrões de bloco:

  • Padrões de bloco sincronizados
  • Padrões de bloco standard (não sincronizados)

A diferença entre os dois tipos é que todas as alterações feitas em um padrão sincronizado se aplicam a todas as ocorrências de um padrão em todo o site. Por outro lado, as alterações em um padrão de bloco standard afetam apenas uma instância específica do padrão.

As substituições de padrões sincronizados estão em algum ponto intermediário entre os dois extremos. Graças à API Block Bindings, agora você pode criar padrões de blocos que mantêm a mesma estrutura em todo o site e mudam em sincronia com as personalizações feitas na estrutura e no estilo do padrão no editor do site. No entanto, você pode alterar o conteúdo do padrão em uma instância individual sem afetar outras instâncias do mesmo padrão no site.

Vamos descobrir como funcionam as Substituições de Padrões.

Primeiro, você precisa de um padrão sincronizado. Você pode criá-lo do zero no editor de artigos ou encontrar padrões sincronizados existentes na seção Padrões do editor do site.

Etapa 1: Vá para Padrões e duplique um dos padrões existentes, como o padrão Hero do tema padrão Twenty Twenty-Four. Adicione um nome e defina a cópia como Padrão sincronizado.

Padrão duplicado no editor do site.
Padrão duplicado no editor do site.

Etapa 2: Navegue até a seção Meus padrões e localize o novo padrão sincronizado. Abra-o no editor do site e selecione todos os blocos que você precisa substituir individualmente.

Vá para a barra lateral de configurações de blocos e role para baixo até a seção Avançado. Aqui você encontrará um botão, Ativar substituições.

Habilitar substituições de padrão.
Habilitando substituições de padrões.

Ao clicar no botão, você será solicitado a adicionar um nome e definir o tipo de padrão.

Substituições ativadas.
Substituições ativadas.

Etapa 3: Repita o mesmo processo para cada bloco que você deseja substituir. Quando terminar, crie um novo artigo ou página e inclua seu padrão personalizado.

Adição de um padrão à tela do editor.
Adição de um padrão à tela do editor.

Etapa 4: Altere o conteúdo dos blocos para substituir e salve o artigo. Por fim, verifique o resultado no frontend.

Um padrão de bloco com substituições no editor de publicações.
Um padrão de bloco com substituições no editor de artigos.

E você está pronto. Você pode adicionar qualquer número desses padrões em qualquer lugar do seu site, e cada nova instância mostra o mesmo conteúdo original, mas está pronta para sua personalização.

Agora vamos verificar o código desses padrões. Navegue de volta para a seção Padrões do editor do site. Selecione Meus padrões e adicione o seu padrão. Em seguida, abra o menu Opções e selecione Editor de código para visualizar o código do padrão.

Em nosso exemplo, o código deve ser parecido com este:

<div class="wp-block-group">
	<!-- wp:heading {
		"textAlign":"center",
		"level":1,
		"metadata":{
			"bindings":{
				"__default":{
					"source":"core/pattern-overrides"
				}
			},
		"name":"Hero title"
	},"fontSize":"x-large"} -->
		<h1 class="wp-block-heading has-text-align-center has-x-large-font-size">A commitment to innovation and sustainability</h1>
	<!-- /wp:heading -->
	...
</div>

No delimitador de bloco, você notará a propriedade metadata.bindings. Isso torna o bloco Heading editável. A ligação __default instrui o WordPress a conectar todos os atributos suportados a uma fonte específica, que é "core/pattern-overrides".

A mesma propriedade se aplica a todos os blocos que você precisa tornar editáveis. Veja, por exemplo, o bloco Button:

<div class="wp-block-buttons">
	<!-- wp:button {
		"metadata":{
			"bindings":{
				"__default":{
					"source":"core/pattern-overrides"
					}
				},
			"name":"Hero button"
			}
		} -->
	<!-- /wp:button -->
	<div class="wp-block-button">
		<a class="wp-block-button__link wp-element-button">About us</a>
	</div>
	...
</div>

Agora vamos voltar ao editor de artigos e mudar para o editor de código. O código deve ser semelhante ao seguinte:

<!-- wp:block {
	"ref":261,
	"content":{
		"Hero title":{
			"content":"Managed WordPress Hosting"
		},
		"Hero body":{
			"content":"Kinsta is an extension of your business. Fast, secure, feature-rich hosting that makes your work so much easier. Built for WordPress websites and agencies worldwide."
		},
		"Hero button":{
			"text":"Learn more",
			"url":"https://kinsta.com/wordpress-hosting/",
			"linkTarget":"",
			"rel":""
		},
		"Second button":{
			"text":"View pricing",
			"url":"https://kinsta.com/pricing/",
			"linkTarget":"_blank",
			"rel":"noreferrer noopener"
		},
		"Hero image":{
			"id":268,
			"alt":"",
			"url":"http://wordpress.kinsta.cloud/wp-content/uploads/2024/06/homepage-featured-image.jpg"
		}
	}
} /-->

Aqui você não verá nenhum bloco, mas apenas uma referência ao padrão de bloco e um conjunto de propriedades para cada bloco definido como editável.

Novamente, você pode adicionar qualquer número de padrões de blocos em qualquer lugar do seu site, e esses padrões corresponderão à mesma estrutura e ao mesmo design que você criou no editor do site.

Edição de estilo e estrutura de padrão com substituições no editor do site.
Edição de estilo e estrutura de padrão com substituições no editor do site.

Em seguida, você pode alterar o conteúdo dos blocos editáveis individualmente, mantendo a mesma estrutura.

Um padrão com substituições no site principal.
Um padrão com substituições no site principal.

Como as substituições de padrão são uma implementação da API Block Bindings, podemos substituir apenas os blocos suportados: Título, Parágrafo, Imagem e Botões.

Você pode substituir os atributos de imagem URL, Alt e Title.
Você pode substituir os atributos de imagem URL, Alt e Title.

Você pode se aprofundar mais nas substituições de padrões neste vídeo da WordPress TV e neste artigo no blog de Nick Diego.

As substituições de padrões estão sujeitas a melhorias e adições futuras. A discussão continua no GitHub aqui e aqui.

Editar valores de campos personalizados a partir de blocos conectados

O WordPress 6.5 introduziu os campos personalizados como fonte de dados (core/post-meta) para atributos de blocos, permitindo que os usuários conectem valores de campos personalizados a blocos. O WordPress 6.6 traz novos aprimoramentos para esse recurso, como a capacidade de editar valores de campos personalizados diretamente do bloco conectado.

Você pode experimentar esse recurso registrando um novo conjunto de campos personalizados a partir de um plugin ou do arquivo functions do seu tema, certificando-se de definir show_in_rest como true ao registrar os metadados do artigo. Aqui está um exemplo:

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

Uma vez feito isso, crie um novo artigo ou página e adicione um novo campo personalizado com o mesmo nome. Adicione um dos blocos suportados (por exemplo, um bloco Título) ao canvas, alterne para o editor de código e modifique o bloco conforme mostrado abaixo:

<!-- wp:heading 
{
	"metadata":{
		"bindings":{
			"content":{
				"source":"core/post-meta",
				"args":{
					"key":"book_title"
				}
			}
		}
	}
} -->
<h2 class="wp-block-heading"></h2>
<!-- /wp:heading -->

Salve o artigo/página e verifique o resultado. Agora você pode editar o conteúdo do título diretamente do bloco. O valor do campo personalizado deve refletir as alterações que você fez.

Edite um campo personalizado a partir do bloco conectado no WordPress 6.6.
Edite um campo personalizado a partir do bloco conectado no WordPress 6.6.

Além disso, um novo painel agora fornece informações sobre os atributos do bloco conectados aos campos personalizados, exibindo os atributos do bloco vinculados aos campos personalizados.

Atributos de imagem com vínculos de bloco no WordPress 6.6.
Atributos de imagem com vínculos de bloco no WordPress 6.6.

Esse recurso vem com algumas funcionalidades relacionadas:

  • Você pode atualizar valores de campos personalizados a partir de um loop de consulta.
  • Se vários blocos estiverem conectados ao mesmo campo personalizado, eles compartilharão o mesmo valor de campo personalizado e mudarão em sincronia com ele.
  • Os usuários podem editar os campos personalizados somente nos artigos aos quais têm permissão.

Uma última observação: conforme mencionado anteriormente, os blocos que oferecem suporte à API Block Bindings ainda estão limitados ao seguinte:

Bloco Atributos
Imagem url, alt, title
Título content
Parágrafo content
Botão url,text, linkTarget, rel

Aprimoramentos na Data Views

Introduzida no WordPress 6.5, a Data Views é uma interface de usuário aprimorada para coleções de templates, padrões, artigos, mídia e outros. A nova interface desempenha um papel essencial na fase 3 do script de desenvolvimento — Colaboração — e, como tal, podemos esperar mais aprimoramentos em futuras versões do WordPress, “incluindo melhorias no fluxo de trabalho para designar pessoas para revisar artigos ou criar visualizações personalizadas para simplificar os processos”. A partir do WordPress 6.6, a nova interface só existe no Editor do site, mas deve se estender a mais seções de administração em versões futuras.

O WordPress 6.6 apresenta novos layouts para as páginas de gerenciamento. O gerenciamento de partes de templates foi removido e integrado à seção Padrões, enquanto o menu Padrões do Editor do site foi reorganizado em duas seções, com as partes de templates na parte superior e os padrões embaixo.

O novo menu de padrões no WordPress 6.6.
O novo menu Padrões no WordPress 6.6.

Para páginas, um novo painel fornece uma lista de páginas e permite que você visualize qualquer página com um único clique.

Visualizar páginas no WordPress 6.6.
Visualização de páginas no WordPress 6.6.

Você também verá novas opções de layout disponíveis no menu Opções de visualização (o ícone no canto superior direito).

Visualização de padrões com opções de visualização no WordPress 6.5.
Visualização de padrões com as opções de visualização no WordPress 6.5.
Visualização de padrões com opções de visualização no WordPress 6.6.
Visualização de padrões com as opções de visualização no WordPress 6.6.

Junto com essas mudanças mais abrangentes, as Data Views são afetadas por outros aprimoramentos menores que melhoram a interface, tornando-a mais funcional e informativa, como um novo recurso de edição em massa e um emblema na página inicial ou na página Artigos.

Um emblema indicando a página inicial no WordPress 6.6.
Um emblema indicando a página inicial no WordPress 6.6.

O WordPress 6.6 leva as Data Views um passo adiante, mas ainda estamos em um estágio inicial. No futuro, veremos a introdução de uma API de extensibilidade para permitir que os desenvolvedores atuem diretamente nas visualizações. Para uma análise mais detalhada do futuro das Data Views, confira Data Views Update – June 2024, de Anne McCarthy.

Outras melhorias no Editor de Blocos

O WordPress 6.6 traz 8 versões do Gutenberg para o núcleo — da 17.8 à 18.5 — com muitas melhorias na interface, na biblioteca React, na API de blocos e muito mais. Aqui estão apenas algumas delas:

Um novo fluxo de artigo

Com a versão 6.6, a barra lateral de configurações de artigo/página foi limpa e ficou mais leve e consistente. Com essa iteração, o processo de unificação entre os editores de artigo e de site dá um passo à frente, e ambos agora têm o mesmo fluxo de artigo.

Barra lateral Configurações de Página no WordPress 6.5 e no 6.6.
Barra lateral de configurações de página no WordPress 6.5 e no 6.6.

A experiência de artigo foi padronizada, e um novo painel Status e visibilidade permite que você defina o status do artigo/página em uma posição mais conveniente.

Configurações de status e visibilidade no WordPress 6.6.
Configurações de status e visibilidade no WordPress 6.6.

Outras alterações afetam os controles de Imagem em Destaque e Excerto, que foram movidos para a parte superior da barra lateral, e o menu Ações aprimorado no canto superior direito.

Controles de imagem em destaque e excerto no editor de publicação.
Controles de Imagem em destaque e Excerto no editor Artigo.

Exibir todos os blocos

Nas versões anteriores do WordPress, quando você selecionava um bloco, o inseridor de blocos mostrava apenas o bloco que você tinha permissão para adicionar ao bloco selecionado. Por exemplo, com um bloco Coluna selecionado, você só podia ver um bloco Coluna no inseridor de blocos, porque só podia adicionar uma coluna.

O inseridor de blocos mostra apenas um bloco Coluna no WordPress 6.5.
No WordPress 6.5, quando você seleciona um bloco Coluna, o inseridor de blocos mostra apenas um bloco Coluna.

A partir do WordPress 6.6, o inseridor de blocos mostra dois grupos de blocos: blocos que você pode adicionar ao bloco selecionado e blocos que você pode adicionar abaixo do bloco selecionado.

O inseridor de blocos mostra dois grupos de blocos no WordPress 6.6.
No WordPress 6.6, quando você seleciona um bloco Coluna, o inseridor de blocos mostra dois grupos de blocos.

Atalho de teclado para agrupar blocos

Agora você pode agrupar uma seleção de blocos com ⌘ + G no MacOS ou Ctrl + G no Windows.

Padrões de blocos em temas clássicos

A partir do WordPress 6.6, os temas clássicos suportam a mesma interface de padrão que os temas de bloco. Portanto, se você usar temas clássicos em seu site do WordPress, desfrutará a mesma experiência rica em gerenciamento de padrões que os temas de blocos.

As imagens a seguir comparam a tela Padrões no WordPress 6.5 e a seção de administração de Padrões no WordPress 6.6.

Tela de padrões no WordPress 6.5 com o tema clássico Twenty Twenty-One.
Tela Padrões no WordPress 6.5 com o tema clássico Twenty Twenty-One.
Gerenciamento de padrões no WordPress 6.6 com o tema clássico do Twenty Twenty-One.
Gerenciamento de padrões no WordPress 6.6 com o tema clássico do Twenty Twenty-One.

Agora você pode editar, duplicar, renomear, exportar como JSON e excluir padrões como está acostumado a fazer com os temas de blocos.

Ações de padrão no WordPress 6.6 com o tema clássico do Twenty Twenty-One.
Ações de padrão no WordPress 6.6 com o tema clássico do Twenty Twenty-One.

Você pode executar ações em massa selecionando padrões individualmente ou clicando no botão Edição em massa. Também pode usar as funções de classificação e filtragem.

Ações em massa em padrões no WordPress 6.6 com o tema clássico Twenty Twenty-One.
Ações em massa em padrões no WordPress 6.6 com o tema clássico Twenty Twenty-One.

Você também pode criar padrões como faz em temas de blocos. Clique no botão Adicionar novo padrão no canto superior direito, e você será solicitado a preencher o formulário com os detalhes do padrão.

Adicione um novo padrão com um tema clássico no WordPress 6.6.
Adicione um novo padrão com um tema clássico no WordPress 6.6.

Daí você pode criar ou editar seu padrão no editor do site como de costume.

Editando um padrão no editor do site com um tema clássico no WordPress 6.6.
Editando um padrão no editor do site com um tema clássico no WordPress 6.6.

Essa atualização oferece aos usuários de temas clássicos mais poder, desbloqueia novos recursos e torna a experiência de edição mais consistente entre os temas clássicos e de blocos.

Novas ferramentas e recursos para designers e desenvolvedores de temas

O WordPress 6.6 traz muitos recursos e aprimoramentos poderosos para designers e desenvolvedores de temas, e temos o prazer de compartilhar aqui os que mais gostamos. Os designers têm mais poder para estilizar suas páginas, graças aos estilos de seção, imagens em segundo plano em todo o site, um novíssimo editor de sombras e uma variação de layout de grade. E outras ferramentas oferecem ainda mais flexibilidade aos autores de temas. Vamos nos aprofundar.

Theme.json v.3

O WordPress 6.6 também traz uma nova versão do theme.json, que agora é a versão 3. A nova versão altera a maneira de substituir propriedades predefinidas. Agora, para alterar os valores padrão de fontSizes ou spacingSizes, você precisa definir defaultFontSizes ou defaultSpacingSizes para false em settings.typography ou settings.spacing.

Recapitulando:

  • Com defaultFontSizes ou defaultSpacingSizes definido como true, os tamanhos de fonte e de espaçamento padrão são mostrados no editor, e os temas não podem criar predefinições usando os slugs padrão. defaultFontSizes é definido como true por padrão.
  • Com defaultFontSizes ou defaultSpacingSizes definido como false, os tamanhos de fonte e de espaçamento padrão não são visíveis no editor, e os temas podem usar os slugs padrão.

Consulte a nota do desenvolvedor para obter uma visão mais abrangente do Theme.json versão 3.

Especificidade de CSS no WordPress 6.6

Com o WordPress 6.6, a especificidade do CSS muda, e agora é mais fácil substituir os estilos principais, mantendo o suporte para estilos globais.

Até a versão 6.6, muitas vezes era difícil substituir os estilos principais, e os desenvolvedores de temas precisavam elaborar regras CSS complexas para obter os resultados desejados. No 6.6, os Core Block Styles e os Global Styles (theme.json) foram modificados ao envolver o seletor existente em :root :where(...) para reduzir a especificidade dos estilos principais para 0-1-0 e torná-la uniforme para oferecer suporte também aos novos estilos de seção.

Por exemplo, o .wp-block-image.is-style-rounded img foi atualizado para :root :where(.wp-block-image.is-style-rounded img).

Os desenvolvedores de blocos que optarem por estilos globais são incentivados a fazer as mesmas alterações em seus estilos para torná-los personalizáveis por meio da interface Estilos de forma previsível. Portanto, se você tiver um bloco personalizado com o seguinte estilo:

.wp-block-custom-block {
	padding: 0;
}

Você deve envolvê-lo em :root :where():

:root :where(.wp-block-custom-block) {
	padding: 0;
}

Isso permitirá que os usuários substituam o padding de blocos por meio da interface Global Styles.

Os desenvolvedores de temas são incentivados a fazer o mesmo para que os estilos de bloco possam ser configurados por meio da interface Global Styles.

Consulte também a nota do desenvolvedor para obter uma visão geral mais detalhada da especificidade do CSS no WordPress 6.6.

Estilos de seção

O WordPress 6.6 permite que você estilize seções individuais de um artigo/página sem precisar reaplicar os mesmos estilos a vários blocos um a um. Isso significa que você pode selecionar vários blocos e blocos secundários e atribuir uma variação de estilo a toda a seleção.

Isso é possível graças à extensão das variações de estilo de bloco que agora suportam a estilização de blocos e elementos internos e aproveitam a especificidade de estilo reduzida dos estilos globais.

As variações de estilo de bloco podem ser definidas e manipuladas por meio dos Global Styles somente se você as tiver registrado com um dos seguintes métodos:

  • Usando os theme.json parciais dentro do diretório /styles do tema
  • Usando a função register_block_style
  • Definindo variações de estilo de bloco em styles.blocks.variations no seu theme.json

Vamos nos aprofundar no assunto.

Definição de variações de estilo de bloco usando theme.json parciais

Assim como as variações de estilo de tema, as variações de estilo de bloco podem ter seu próprio theme.json parcial no diretório /styles do seu tema.

A diferença entre os dois tipos de variações é que as variações de estilo de bloco têm uma nova propriedade de nível superior blockTypes, que é um array não vazio de tipos de bloco que suportam a variação de estilo de bloco. Além disso, uma nova propriedade slug foi adicionada “para proporcionar consistência entre as diferentes fontes que podem definir variações de estilo de bloco e para desacoplar o slug da propriedade traduzível title“.

A nota do desenvolvedor fornece o seguinte exemplo de theme.json parcial:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Variation A",
	"slug": "variation-a",
	"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
	"styles": {
		"color": {
			"background": "#eed8d3",
			"text": "#201819"
		},
		"elements": {
			"heading": {
				"color": {
					"text": "#201819"
				}
			}
		},
		"blocks": {
			"core/group": {
				"color": {
					"background": "#825f58",
					"text": "#eed8d3"
				},
				"elements": {
					"heading": {
						"color": {
							"text": "#eed8d3"
						}
					}
				}
			}
		}
	}
}

Definindo variações de estilo de bloco de forma programática por meio de register_block_style

A função register_block_style oferece uma segunda maneira de registrar variações de estilo de bloco. Você pode usá-la no functions.php do seu tema desta forma:

register_block_style(
	array( 'core/group', 'core/columns' ),
	array(
		'name'			=> 'light',
		'label'			=> __( 'Light' ),
		'style_data'	=> array(
			'color'		=> array(
				'background'	=> '#973C20',
				'text'			=> '#d2e3c8',
			),
			'blocks'   => array(
				'core/group'	=> array(
					'color'		=> array(
						'background'	=> '#739072',
						'text'			=> '#e3eedd',
					),
				),
			),
			'elements' => array(
				'link'   => array(
					'color'  => array(
						'text' => '#ead196',
					),
					':hover' => array(
						'color' => array(
							'text' => '#ebd9b4',
						),
					),
				),
			),
		),
	)
);

Agora, quando você selecionar um bloco Grupo ou Colunas, o painel Estilos da barra lateral do bloco mostrará um botão para o estilo de seção registrado.

Uma variação de estilo de seção no WordPress 6.6.
Uma variação de estilo de seção no WordPress 6.6.

Você encontrará uma visão mais detalhada e mais exemplos de variações de estilo de seção em Styling sections, nested elements, and more with Block Style Variations in WordPress 6.6, de Justin Tadlock, na nota de desenvolvimento de Aaron Robertshaw, e no pull request Block Styles: Extend block style variations.

Definindo variações de estilo de bloco usando variações de estilo de tema

Embora atualmente seja possível usar a propriedade theme.json styles.variations, esse método está disponível apenas temporariamente e deverá ser descontinuado em breve. Para uma descrição mais detalhada, consulte esta seção da nota de desenvolvimento.

Predefinições de cores e tipografia

Agora você pode alterar a paleta de cores e as famílias de fontes do seu tema na interface Global Styles selecionando uma das predefinições disponíveis.

Se o seu tema atual for compatível com predefinições de cores e tipografia, elas aparecerão nas configurações Cores e Tipografia nos estilos globais.

As imagens a seguir mostram duas paletas de cores fornecidas pelo Twenty Twenty-Four.

Paleta de cores claras no Twenty Twenty-Four.
Paleta de cores claras no Twenty Twenty-Four.
Paleta de cores escuras no Twenty Twenty-Four.
Paleta de cores escuras no Twenty Twenty-Four.

Para adicionar essa funcionalidade aos seus temas, você precisa criar variações de estilo que incluam apenas cores e tipografia. Os estilos assim definidos serão extraídos e usados para gerar predefinições.

Sobre esse recurso, consulte também Core Editor Improvement: Upgrade your designs e Create individual typography and color variations to level up design options.

Imagens em segundo plano para todo o site

A partir do WordPress 6.6, você pode definir imagens em segundo plano para todo o site no theme.json e no editor do site.

Uma imagem em todo o site é o valor de uma propriedade background-image definida no elemento body no nível do site e aparece em todas as páginas do site.

No theme.json, para definir uma imagem em segundo plano para todo o site, você pode usar o backgroundImage.url sob a propriedade styles.background:

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "https://example.com/bg.png"
			}
		}
	}
}

No exemplo acima, definimos um caminho absoluto para a imagem, mas você também pode definir imagens de background usando caminhos relativos à raiz do tema dessa forma.

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "file:./assets/bg.png"
			}
		}
	}
}

Em seguida, você pode usar as seguintes propriedades de imagem:

  • backgroundPosition
  • backgroundSize
  • backgroundRepeat

Se você não é desenvolvedor de temas, pode usar imagens de segundo plano em todo o site por meio do painel Estilos do editor do site. No WordPress 6.6, você encontrará os controles apropriados em Estilos > Layout.

O painel Imagem de Fundo nas configurações de Estilo.
O painel de imagem em segundo plano nas configurações de estilo.

Esta é a primeira iteração para imagens em segundo plano. Para ter uma visão mais de perto de como funciona, suas limitações e o que está por vir, consulte a nota do desenvolvedor Site-wide background images in WordPress 6.6.

Variação de layout de grade

Uma nova variação de layout do bloco Grupo permite exibir elementos em um grupo como uma grade.

Você pode experimentá-lo adicionando um bloco Grupo ao canvas do editor e escolhendo o layout Grade no painel de configurações do bloco.

O layout de grade
O layout de grade no WordPress 6.6.

O layout de grade pode ser de dois tipos:

  • Auto gera linhas e colunas de grade automaticamente
  • Manual permite que você defina o número de colunas que deseja adicionar à grade

Adicione conteúdo aos elementos da grade e os redimensione usando as alças. Você também pode ajustar o Coluna mínima com, ou o número de colunas, dependendo do tipo de grade selecionado.

Margens negativas

Agora você pode definir margens negativas para todos os blocos que suportam controles de margem. Antes do WordPress 6.6, esse recurso estava disponível apenas no theme.json, mas agora é fácil aplicar margens negativas a elementos para criar efeitos de sobreposição.

Observe que, a partir do WordPress 6.6, você deve adicionar manualmente o valor negativo, conforme mostrado na imagem a seguir.

Configurando margens negativas em um bloco de botões no WordPress 6.6.
Configurando margens negativas em um bloco Botões no WordPress 6.6.

Sombras personalizadas

Com o WordPress 6.6, você pode criar e editar sombras personalizadas na interface de estilos globais. Para criar suas sombras personalizadas, navegue até o editor do site e selecione Sombras no menu Estilos. Aqui, você encontrará um painel Personalizado. Quando você clica no botão +, um novo elemento dá acesso a um conjunto de controles para personalizar a sombra ou renomeá-la/excluí-la.

Controles de sombra no WordPress 6.6.
Controles de sombra no WordPress 6.6.

Predefinições de proporção de aspecto personalizadas

Agora os desenvolvedores de temas podem definir predefinições de proporção de aspecto personalizadas definindo a opção settings.dimensions.aspectRatios no theme.json.

Mudanças adicionais para desenvolvedores

Contudo, as mudanças para os desenvolvedores não se limitam aos temas. Outros acréscimos e melhorias afetam a biblioteca React e várias APIs.

Options API: Desativando o carregamento automático para opções grandes

Antes do WordPress 6.6, um grande número de opções era carregado automaticamente a cada carregamento de página. Para evitar esse comportamento padrão, os desenvolvedores tinham que passar "yes"/true ou "no"/false como terceiro parâmetro das funções add_option() ou update_option(). Porém, como esse parâmetro era opcional, com um valor padrão "yes", grandes quantidades de dados desnecessários eram carregadas em cada página, com impacto negativo no desempenho do site.

Para evitar esse comportamento, o WordPress 6.6 introduz algumas mudanças na Options API:

Para permitir que o WordPress determine se uma opção deve ser carregada na página atual, o valor padrão para o parâmetro $autoload de add_option() e update_option() foi alterado de "yes" para null. O parâmetro agora aceita um dos seguintes valores:

  • true: carrega a opção em todas as páginas para evitar uma consulta adicional ao banco de dados.
  • false: nunca carrega automaticamente a opção para evitar que os dados sejam carregados em todas as páginas.
  • null: talvez carregue automaticamente, o que significa que o valor de autoload deve ser determinado dinamicamente. Por padrão, as opções são carregadas automaticamente, a menos que contenham valores grandes.

Os valores do banco de dados foram alterados concordemente, e agora o valor de autoload para cada opção será um dos seguintes:

  • on : deve ser carregado automaticamente em todas as páginas. É adicionado com um valor explícito true.
  • off: não deve ser carregado automaticamente e só será usado em uma única página de administração. Adicionado com um valor explícito false.
  • auto: depende do comportamento de carregamento automático padrão do WP. No WP 6.6, deve ser carregado automaticamente, mas o comportamento pode mudar no futuro.
  • auto-on: deve ser carregado automaticamente. Definido dinamicamente para true.
  • auto-off: não deve ser carregado automaticamente. Definido dinamicamente para false.

Junto com essas mudanças, o WordPress 6.6 apresenta várias funções e filtros:

  • A função wp_autoload_values_to_autoload() retorna todos os valores do banco de dados que devem ser carregados automaticamente.
  • O filtro wp_autoload_values_to_autoload permite editar a lista de opções que devem ser carregadas automaticamente.
  • O filtro wp_default_autoload_value define o valor de uma opção em que nenhum valor explícito foi definido.
  • O filtro wp_max_autoloaded_option_size modifica o limite acima do qual as opções não serão carregadas automaticamente por padrão. O valor padrão é 150.000 (150kb).

Essa mudança é particularmente útil para sites complexos com muitos plugins, e merece a atenção dos desenvolvedores de plugins. Para obter uma visão mais completa, recomendamos verificar as predefinições de proporção de aspecto personalizadas.

Aprimoramentos na biblioteca React

Duas grandes mudanças se aplicam à biblioteca React. Primeiro, o WordPress 6.6 inclui o React 18.3, que adiciona avisos de descontinuações e outras mudanças para ajudar os desenvolvedores a se prepararem para o React 19, quando este se tornar estável.

Segundo, os desenvolvedores agora podem usar a nova transformação React JSX, introduzida pela primeira vez com o React 17.

Para uma visão mais detalhada dessas alterações, consulte Preparando-se para o React 19 e as notas de desenvolvimento do JSX no WordPress 6.6.

Aprimoramentos na API de Blocos

O WordPress 6.6 também traz várias modificações técnicas na API de Blocos, incluindo as seguintes:

Resumo

Neste longo artigo, exploramos muitos recursos e mudanças interessantes que estão chegando com o WordPress 6.6, desde substituições de padrões de blocos até melhorias no Data Views, novos recursos para desenvolvedores de temas e a unificação das experiências de edição nos editores de Site e Artigo. Mas há muito mais que não cobrimos neste artigo, como rollbacks para atualizações automáticas.

Se quiser se aprofundar ainda mais, você não deve perder uma série de excelentes recursos dos principais colaboradores do WordPress, aos quais fizemos referência durante nossos testes do WordPress 6.6. Entre os muitos recursos, sugerimos o WordPress 6.6 Source of Truth, de Anne McCarthy, Learn WordPress Online Workshops, no Meetup, o blog WordPress Developer, as notas de desenvolvimento publicadas no blog Make WordPress Core, e as atualizações regulares de Birgit Pauli-Haack em Gutenberg Times, só para citar alguns.

Agora é com você. Já testou os recursos do WordPress 6.6? De qual recurso ou mudança gostou mais? Deixe um comentário abaixo e participe dessa conversa.

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.