O WordPress 5.9 foi inicialmente programado para ser lançado em 14 de dezembro de 2021. Devido a várias questões em aberto, o lançamento final foi adiado e agora está agendado para 25 de janeiro de 2022.

Se você está se perguntando o que há de novo no WordPress 5.9, a resposta curta é Edição Completa do Site (FSE).

E de fato, muitos recursos 5.9 só estão disponíveis se você estiver usando um tema que suporte a Edição Completa do Site, como o novíssimo tema padrão, Twenty Twenty-Two.

Uma prévia do Twenty Twenty-Two, o novo tema padrão do WordPress.
Uma prévia do Twenty Twenty-Two, o novo tema padrão do WordPress. (Fonte da imagem: WordPress.org)

Com o WordPress 5.9, chegamos ao coração da segunda fase do roteiro de Gutenberg: a fase de Customização, que é focada principalmente na edição completa do site, Padrões de Bloco, Diretório de Blocos e temas baseados em blocos.

Com 5.9, que sairá no próximo mês, nós estamos – eu diria – no MVP, o Produto Mínimo Viáveis desta fase de customização do Gutenberg.

Estas palavras de Matt Mullenweg em 2021 State of the Word resumem melhor as principais características da próxima versão do WordPress.

O roteiro de Gutenberg
O roteiro de Gutenberg. (Fonte da imagem: Matt Mullenweg: 2021 State of the Word)

Dito isto, o que você pode esperar ver com a primeira versão do WordPress de 2022?

Vamos descobrir!

Estilos Globais: Uma interface gráfica para theme.json

Com o lançamento do WordPress 5.8 em 2021, a manipulação do arquivo theme.json tornou-se a maneira padrão para os desenvolvedores de temas customizarem as configurações e estilos do editor.

O WordPress 5.9 leva as coisas para o próximo nível, introduzindo uma interface gráfica que permite aos usuários personalizar predefinições de estilo para seus sites, seja globalmente ou em nível de bloco, sem escrever uma única linha de código.

O mecanismo de Estilos Globais deve alterar significativamente a forma como você está acostumado a personalizar a aparência de seus sites, já que os Estilos Globais afetam vários aspectos do design do site WordPress.

Primeiro, a interface de Estilos Globais substitui o Customizador e agora é a única maneira de personalizar configurações e estilos com temas de blocos. Da mesma forma, páginas de administração de opções complexas de temas não serão mais necessárias. Isto fornece uma nova forma padrão de configuração das configurações e estilos de temas e, ao mesmo tempo, deve agilizar o fluxo de trabalho de desenvolvimento do tema.

Com Estilos Globais, os usuários do WordPress ganham mais controle sobre a apresentação de seus sites, tanto globalmente quanto por tipo de bloco, além do contexto de páginas ou artigos individuais.

Uma nova barra lateral está agora disponível no editor do site, no topo da qual você encontrará um pequeno painel de visualização e quatro componentes na seguinte ordem:

Nós podemos esperar que novos componentes sejam adicionados ao longo do tempo.

A barra lateral de Estilos Globais com o tema Blockbase by Automattic
A barra lateral de Estilos Globais com o tema Blockbase by Automattic

Vamos dar uma olhada mais de perto na nova interface.

Pré-visualização de estilo

O primeiro elemento na barra lateral de Estilos Globais é um painel de pré-visualização. Este painel permite que você verifique o resultado de suas customizações e é particularmente útil quando suas mudanças se aplicam a elementos não visíveis na tela do editor do site.

A imagem a seguir mostra três combinações de estilos diferentes em comparação:

Pré-visualização de Estilos Globais comparadas.
Pré-visualização de Estilos Globais comparadas.

Tipografia

O painel de tipografia é onde você controla a tipografia do seu site. É claro, os controles disponíveis neste painel dependem das configurações do seu theme.json.

Por exemplo, o tema Twenty Twenty-One Blocks (TT1 Blocks) declara as seguintes propriedades tipográficas:

"settings": {
	"typography": {
		"customLineHeight": true,
		"fontSizes": [],
		"fontFamilies": []
	}
}

A imagem seguinte mostra as configurações de tipografia resultantes na barra lateral de Estilos Globais:

Configurações tipográficas em Blocos TT1 Estilos Globais
Configurações tipográficas em Blocos TT1 Estilos Globais

Vamos mergulhar um pouco mais fundo e ver como o tema de Blocos TT1 declara fontFamilies:

"fontFamilies": [
	{
		"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
		"slug": "system-font",
		"name": "System Font"
	},
	{
		"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
		"slug": "helvetica-arial"
	},
	{
		"fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
		"slug": "geneva-verdana"
	},
	{
		"fontFamily": "Cambria, Georgia, serif",
		"slug": "cambria-georgia"
	},
	{
		"fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
		"slug": "hoefler-times-new-roman"
	}
]

Você pode verificar estas famílias de fontes no painel de visualização de Estilos Globais:

Famílias de fontes disponíveis em Twenty Twenty-One Blocks
Famílias de fontes disponíveis em Twenty Twenty-One Blocks

Cores

Na seção Cores, você pode visualizar e editar paletas de cores e personalizar a cor de vários elementos do site.

Painel de cores de blocos do Twenty Twenty-One
Painel de cores de blocos do Twenty Twenty-One

Ao clicar nesses elementos, você tem acesso a um novo painel onde você pode escolher cores entre três paletas de cores: Cor, Tema e Paleta Personalizada (leia mais em Cores Padrão, Cores Temáticas e Cores Personalizadas).

Configurações de cor no Twenty Twenty-One Blocks
Configurações de cor no Twenty Twenty-One Blocks

Neste painel, você será capaz de definir e modificar a cor para o elemento atual.

Personalização da cor do link em Estilos Globais
Personalização da cor do link em Estilos Globais

Layout

O último grupo de ferramentas é destinado a customizações de layout. No contexto global, isto se limita ao contêiner do site.

Configurações de layout de blocos no Twenty Twenty-One
Configurações de layout de blocos no Twenty Twenty-One

Blocos

Com a implementação do mecanismo de Estilos Globais, agora também é possível mudar a aparência de blocos específicos, tais como Parágrafo (tipografia e cores), Botões (layout), e Coluna (cores e layout).

Note que os estilos de bloco podem ser personalizados a partir da interface de Estilos Globais somente se o bloco declarar suporte a funcionalidades específicas no arquivo block.json correspondente . Por exemplo, o bloco core/post-title atualmente suporta os seguintes estilos:

"supports": {
	"align": [ "wide", "full" ],
	"html": false,
	"color": {
		"gradients": true,
		"link": true
	},
	"spacing": {
		"margin": true
	},
	"typography": {
		"fontSize": true,
		"lineHeight": true,
		"__experimentalFontFamily": true,
		"__experimentalFontWeight": true,
		"__experimentalFontStyle": true,
		"__experimentalTextTransform": true,
		"__experimentalLetterSpacing": true,
		"__experimentalDefaultControls": {
			"fontSize": true,
			"fontAppearance": true,
			"textTransform": true
		}
	}
},

Como o bloco core/post-title suporta cores, espaçamento e tipografia, você encontrará as entradas correspondentes nas configurações de Estilos Globais do bloco Título do Artigo.

A imagem seguinte mostra as configurações de tipografia, que você pode facilmente comparar com o código acima:

Personalizando configurações de tipografia Post Title
Personalizando configurações de tipografia Título do artigo

Vale a pena notar que o WordPress 5.9 só entrega a primeira implementação da interface de Estilos Globais. Como Matias Ventura aponta, podemos razoavelmente esperar um desenvolvimento adicional do novo recurso de controle de estilo:

No futuro, haverá fluxos embutidos no sistema permitindo que você passe de estilos locais para globais – como fazer customizações para um bloco de botões e optar por aplicá-las globalmente em todos os botões desse tipo.

Portanto, podemos ver grandes melhorias em breve. A imagem abaixo é apenas um exemplo do que podemos esperar:

No futuro, você pode controlar a cor do estado do link.
No futuro, você pode controlar a cor do estado do link. (Fonte da imagem GitHub)

Melhorias adicionais poderiam incluir a capacidade de temas para fornecer paletas de cores alternativas e múltiplas variações de estilo global.

Os desenvolvedores podem mergulhar profundamente no mecanismo de estilo global em Global Settings & Styles (theme.json) artigo de suporte. Você encontrará exemplos adicionais em nossa introdução ao tema padrão Twenty Twenty-Two.

O Bloco de Navegação

O bloco de Navegação tem sido chamado de “um dos blocos de temas mais impactantes”, e não temos medo de dizer que concordamos.

O bloco está na fase embrionária há algum tempo (veja também Navegação Block Tracking Issue e Tracking Issue i2). Ainda assim, agora que todos os problemas pendentes e bloqueadores listados como WordPress 5.9 devem ter sido corrigidos, nós podemos finalmente começar a usar um dos recursos mais poderosos fundidos no núcleo com o WordPress 5.9.

Uma visão geral rápida da interface do Bloco de Navegação

Usar o novo bloco pode ser um pouco confuso no início, mas uma vez que você pegar o jeito, você vai apreciar todo o seu potencial.

O bloco de Navegação espaço reservado
O bloco de Navegação espaço reservado

Quando você adiciona um bloco de Navegação pela primeira vez, o espaço reservado ao bloco fornece três opções para selecionar um menu baseado em blocos existente, criando um menu com todas as páginas, ou começando de novo com um menu vazio.

Selecionando um menu de navegação existente.
Selecionando um menu de navegação existente.

O novo menu de Navegação também permite que você importe menus criados através da tela de Menus de Aparência que está disponível com temas clássicos.

Isto significa que se você estiver passando de um tema clássico para um tema de bloco, você não terá que reconstruir seus menus existentes. Você só precisa escolher um dos seus “Menus Clássicos” atualmente disponíveis, e ele será automaticamente convertido em um menu de navegação baseado em blocos.

Selecionando um menu clássico.
Selecionando um menu clássico.

Você pode adicionar o bloco de Navegação em qualquer lugar em suas páginas. Por exemplo, você pode achá-lo útil em artigos de forma longa para criar uma tabela de conteúdo, permitindo que os usuários saltem para seções de conteúdo específicas.

Adicionando links de âncora a um menu de Navegação
Adicionando links de âncora a um menu de Navegação

Novos Links de Navegação são imediatamente adicionados ao bloco de Navegação clicando no ícone mais (+) no lado direito (veja também as notas de lançamento do Gutenberg 11.7), a menos que outros tipos de blocos já tenham sido adicionados ao menu.

O apêndice do bloco de navegação, mostrando os links de navegação.
O apêndice do bloco de navegação, mostrando os links de navegação.

Clicando no botão Editar na barra de ferramentas do Bloco de Links de Navegação, um item do menu é convertido em um link personalizado. Isto permite adicionar, editar, reordenar e remover itens individualmente.

Converter um menu de navegação em links de páginas individuais.
Converter um menu de navegação em links de páginas individuais.

Você também pode transformar links para blocos ao clicar no botão Transformar na barra de ferramentas de blocos. Isto permite que você adicione blocos específicos diretamente ao menu de navegação.

Transformando links de navegação em blocos
Transformando links de navegação em blocos

Link personalizado, Espaçador, Logo do site, Link para página inicial, Ícones Sociais e Blocos de Pesquisa agora são expostos aos usuários ao adicionar blocos aos menus de navegação.

Na barra lateral de configurações, você encontrará um conjunto abrangente de opções para controlar vários aspectos dos seus menus de navegação.

O painel de Layout inclui controles para justificação, orientação e embrulho.

Configurações de layout de blocos de navegação
Configurações de layout de blocos de navegação

O bloco de Navegação também apresenta um painel de configurações de Display melhorado com uma opção para um menu de hambúrgueres sempre ligado.

Um painel de configurações de exibição melhorado para o bloco de Navegação
Um painel de configurações de exibição melhorado para o bloco de Navegação

Você também pode personalizar as cores de texto e fundo para seus menus e submenus.

Configurações de cor do bloco de navegação
Configurações de cor do bloco de navegação

Outra adição útil recentemente adicionada ao bloco de Navegação é o suporte Block Gap, que adiciona a capacidade dos usuários de controlar a distância entre os itens do menu.

Controle do espaçamento de blocos no bloco de Navegação
Controle do espaçamento de blocos no bloco de Navegação

O painel de tipografia fornece um conjunto de controles para família de fontes, aparência, altura da linha, decoração e caixa de letras. Todos esses controles podem ser ativados/desativados a partir de um menu suspenso que aparece quando você clica no ícone da elipse à direita.

Configurações de tipografia de blocos de navegação
Configurações de tipografia de blocos de navegação

O Bloco de Navegação: Debaixo do capuz

Os dados do bloco de navegação são armazenados no banco de dados usando um tipo de artigo dedicado wp_navigation.

Por que isso é interessante para os usuários do WordPress, e como funciona?

Digamos que você tenha criado um menu de navegação composto de dois links personalizados e uma caixa de pesquisa. Com o tema Twenty Twenty-Two instalado, o menu poderia parecer como mostrado na imagem seguinte:

Exemplo de bloco de navegação
Exemplo de bloco de navegação

O bloco de navegação acima é armazenado no banco de dados como wp_navigation tipo de correio como segue:

<!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /-->

<!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

O armazenamento do conteúdo do bloco de navegação no banco de dados permite que os usuários usem os mesmos menus de navegação em diferentes temas de blocos. Se o menu não for imediatamente visível, você simplesmente escolheria o menu de navegação desejado no seletor de menu (veja também a edição #36087 e PR #36178).

A imagem seguinte mostra o menu acima com o tema Twenty Twenty-One Blocks:

Selecione o menu no bloco em Twenty Twenty-One
Selecione o menu no bloco em Twenty Twenty-One

O bloco de Navegação passou por várias iterações. Você pode mergulhar mais profundamente em cada implementação nas notas de lançamento do Gutenberg 11.7, 11.8, e 11.9.

Você também pode ler mais sobre o Bloco de Navegação no novo artigo de suporte ao Bloco de Navegação e Nota de Desenvolvimento do Bloco de Navegação.

Galerias de Imagens, Imagens em Destaque e Ícones do Site

Com o objetivo de fazer com que as imagens se comportem de forma mais consistente em diferentes contextos, o WordPress 5.9 oferece novas funcionalidades e melhorias em vários blocos. O Bloco da Galeria foi completamente revisado, enquanto várias mudanças na Imagem em Destaque e blocos de ícones do site dão aos usuários um controle mais granular sobre as respectivas imagens.

Um Bloco de Galeria reconstruído

No WordPress 5.8, a capacidade de personalizar a aparência das imagens nas galerias era um pouco limitada. Não havia maneira de mudar o estilo da imagem ou aplicar um filtro duotônicos.

Além disso, características importantes estavam faltando nas imagens da galeria, tais como a adição de links personalizados para imagens individuais em uma galeria.

Para entender melhor a razão desta assimetria entre imagens nos dois contextos diferentes de uma única imagem e uma imagem em uma galeria, vamos dar uma olhada no bloco Galeria na visualização de Código no WordPress 5.8:

Bloco da galeria em visualização de código no WordPress 5.8.
Bloco da galeria em visualização de código no WordPress 5.8.

Note que os detalhes das imagens são armazenados apenas no delimitador de blocos da Galeria (veja também O que é um Bloco Gutenberg?).

Bloco da Galeria de Inspeção no WordPress 5.8.
Bloco da Galeria de Inspeção no WordPress 5.8.

Isto fez com que imagens individuais se comportassem de forma diferente das imagens em galerias.

Para fazer as imagens se comportarem consistentemente nos dois contextos diferentes, o WordPress 5.9 introduz um bloco de Galeria completamente reconstruído, que agora se comporta como um recipiente para uma coleção de elementos de figuras ao invés de uma lista não ordenada de imagens.

No WordPress 5.9, imagens de galeria são aninhadas usando o núcleo innerBlocks APIs, e cada imagem armazena seu próprio conjunto de detalhes, exatamente como imagens individuais.

Bloco de galeria em visualização de código no WordPress 5.9
Bloco de galeria em visualização de código no WordPress 5.9

Isso é uma grande melhoria, uma vez que as imagens do bloco de galeria agora suporta as mesmas funcionalidades disponíveis nos blocos de imagens centrais, tais como dimensões da imagem e filtros duotônicos, bem como funcionalidades padrão do bloco, tais como arrastar e soltar, copiar, duplicar e remover funcionalidades.

Bloco da Galeria de Inspeção no WordPress 5.9
Bloco da Galeria de Inspeção no WordPress 5.9

Com o novo bloco da Galeria, você será capaz de estilizar as imagens individualmente. Isto garante uma grande variedade de oportunidades de personalização.

A imagem abaixo mostra várias imagens em uma galeria, cada uma com cantos arredondados diferentes:

O novo bloco da Galeria é um invólucro para blocos de imagens individuais
O novo bloco da Galeria é um invólucro para blocos de imagens individuais

Você também pode usar diferentes filtros duotônicos em imagens diferentes na mesma galeria.

Diferentes filtros duotônicos aplicados a diferentes imagens em um bloco de Galeria
Diferentes filtros duotônicos aplicados a diferentes imagens em um bloco de Galeria

E, é claro, você pode designar uma classe CSS específica para cada imagem, o que lhe dá superpoderes adicionais para adicionar qualquer personalização que você precise às imagens de sua galeria.

Para uma visão mais próxima do novo bloco da Galeria, veja também Gallery Block Refactor Dev Note, Upcoming Gallery Block improvements, e Gutenberg 11.4 release notes.

Melhorias de Imagem em Destaque

Várias melhorias também foram trazidas para o bloco Imagem em Destaque.

Controles básicos de dimensões

O bloco de Imagem em Destaque agora apresenta um novo painel de ajustes de Dimensões fornecendo controles de altura, largura e escala.

Painel de dimensões da imagem em destaque
Painel de dimensões da imagem em destaque

O controle de dimensões também se aplica a imagens em destaque em blocos de Query Loop, como mostrado na imagem seguinte:

Dimensões da imagem em destaque em um bloco de Query Loop
Dimensões da imagem em destaque em um bloco de Query Loop

Filtros duotônicos em Imagens em Destaque

Nós mencionamos acima que agora podemos aplicar o filtro duotônico em imagens embrulhadas no novo bloco reconstruído da Galeria.

Agora, começando com o WordPress 5.9, filtros duotônicos também estão disponíveis em blocos de imagens em destaque em qualquer contexto, desde modelos de artigos e páginas até blocos de Query Loop.

Filtro duotônico em imagens em destaque em um bloco Query Loop
Filtro duotônico em imagens em destaque em um bloco Query Loop

Esta característica abre a porta para combinações de cores criativas e consistentes em todo o site.

Corte de imagem da logo do site

Antes do WordPress 5.9 (e Gutenberg 11.6), as imagens da logo só podiam ser editadas antes de serem carregadas. Com o WordPress 5.9, você pode recortar, ampliar e girar as imagens usadas no bloco da logo do site diretamente da barra de ferramentas de bloco.

Edição da imagem da logo do site.
Edição da imagem da logo do site.

Novas ferramentas de design, blocos e melhorias de IU

Onze versões do Gutenberg são fundidas no núcleo com o WordPress 5.9, fornecendo tantas funcionalidades, melhorias e correções de bugs que não seria possível cobri-las todas em um único artigo.

Então nós escolhemos algumas das que achamos mais dignas de atenção. Para uma visão mais profunda dessas funcionalidades e melhorias, você também pode querer verificar os artigos de lançamento do Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8, e 11.9.

Com isso dito, esta seção cobrirá as seguintes mudanças:

Suporte de dordas UI

Começando com WordPress 5.9, quando o theme.json declara configurações border e um bloco declara suporte a bordas através da API Block Supports, um novo painel de configurações fornecerá controles para o raio da borda, largura, estilo, cor e unidades (veja também Gutenberg 11.1).

O bloco central do grupo é um bom exemplo desse útil aprimoramento da IU. O arquivo block.json do bloco do Grupo agora inclui as seguintes declarações em supports:

{
	...
	"supports": {
		"align": [ "wide", "full" ],
		"anchor": true,
		"html": false,
		"color": {
			"gradients": true,
			"link": true
		},
		"spacing": {
			"padding": true,
			"__experimentalDefaultControls": {
				"padding": true
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"style": true,
				"width": true
			}
		},
		...
	},
	...
}

Este recurso permite que os usuários criem incríveis efeitos gráficos em seus sites com o mínimo de esforço. Você pode vê-lo em ação com o novo tema Twenty Twenty-Two.

Em um novo artigo ou página, crie um novo bloco de Grupo e selecione-o. Você verá um painel de Borda na barra lateral de configurações do bloco. Mude a largura e o estilo das bordas conforme necessário e aproveite o resultado.

Um bloco de grupo com uma configuração de borda personalizada com Twenty Twenty-Two
Um bloco de grupo com uma configuração de borda personalizada com Twenty Twenty-Two

Se você é um desenvolvedor de temas e quer adicionar este recurso aos seus temas, abra seu arquivo theme.json e declare o suporte de borda como mostrado no código a seguir:

{
	"version": 1,
	"settings": {
		"border": {
			"customColor": true,
			"customRadius": true,
			"customStyle": true,
			"customWidth": true
		}
	}
}

Salve o arquivo e volte ao seu painel de controle do WordPress. Em um novo artigo ou página, crie um novo bloco de Grupo e selecione-o. Agora você deve ver um painel de Borda na barra lateral de configurações do bloco (veja também este theme.json experimental).

Melhorias na exibição da lista

Com o WordPress 5.9, a visualização da lista foi melhorada e agora apresenta seções de arrastar e soltar, seções dobráveis e âncoras HTML.

Arrastar e soltar na exibição da lista

Como mencionado no pedido pull #33320, o arrastar e soltar foi implementado na exibição dalista, mas foi desativado devido a problemas de desempenho.

Começando com WordPress 5.9, o Arrastar e soltar na exibição da lista foi reimplementado. Você pode novamente arrastar e soltar blocos e grupos de blocos em qualquer lugar da Visualização da Lista. Isto é uma grande melhoria na usabilidade do editor, pois permite que você mova blocos e grupos de blocos de forma rápida e fácil ao redor de suas páginas. É fundamental em artigos e páginas de forma longa, e gerencia estruturas complexas de blocos aninhados.

Arrastar e soltar em Vista de lista.
Arrastar e soltar em exibição da lista.

Seções da lista

Outra melhoria significativa para a exibição da lista é a habilidade de expandir/colapsar seções de blocos aninhados. Isto permite que você navegue facilmente em estruturas de blocos complexos, expandindo grupos únicos de blocos enquanto deixa todos os outros blocos colapsados.

Você também pode expandir e colapsar as seções de exibição da lista usando as setas esquerda e direita.

Um grupo expandido de blocos
Um grupo expandido de blocos

Âncoras HTML em itens de exibição da lista

Outra melhoria útil é a capacidade de adicionar âncoras HTML aos seus blocos de exibição da lista e vê-los num piscar de olhos.

Âncoras HTML de exibição da lista.
Âncoras HTML de exibição da lista.

Controle de espaçamento de blocos

Apresentado pela primeira vez no Gutenberg 11.4 e agora fundido no núcleo com o WordPress 5.9, o novo controle de espaçamento de blocos permite que você defina uma distância personalizada entre itens dentro de um bloco. Abaixo, você pode ver uma visualização com diferentes valores de espaçamento de blocos em um bloco de colunas com o tema padrão Twenty Twenty-Two:

Controlando o espaçamento de blocos das colunas no WordPress 5.9.
Controlando o espaçamento de blocos das colunas no WordPress 5.9.

O Gap Spacing estará inicialmente disponível para blocos específicos, incluindo botões, imagens, colunas, títulos e navegação, mas o suporte deve ser estendido para mais blocos no futuro.

Os temas devem habilitar o Gap Spacing no theme.json usando a nova propriedade de ferramentas de aparência. Você pode ler mais sobre ferramentas de aparência em nosso artigo detalhado do [Twenty Twenty-Two. Veja também os pedidos #33991 e #34630.

Pré-visualização de URL rica para controle de links

Aproveitando o novo endpoint de detalhes de url-details do REST, o controle de link agora fornece uma rica pré-visualização de URL mostrando detalhes para um recurso alvo de link.

Visualização de URL rica no editor do post
Visualização de URL rica no editor do artigo

Em sua primeira implementação, este recurso só estava disponível no componente richtext do Post Editor. Na época em que foi escrito, ele também está disponível no Editor do Site, mas não nos editores de Navegação e Widget.

Crie páginas a partir do Link Popup

O WordPress 5.9 também apresenta uma interface de link inline melhorada, mostrando um botão novinho em folha para criar novas páginas diretamente do popup de link inline. Este recurso só está disponível dentro do Post Editor.

WordPress 5.9 apresenta um novo link inline UI.
WordPress 5.9 apresenta um novo link inline UI.

Melhorias no Bloco de Pesquisa

O bloco de pesquisa agora mostra as configurações de botão e cor da borda.

Configurações de cor do bloco de busca.
Configurações de cor do bloco de pesquisa.

Agora você também pode personalizar a cor do fundo e do texto e a cor e raio da borda.

Procurar Configurações de cor e raio da borda do bloco
Procurar Configurações de cor e raio da borda do bloco

Novos controles para dimensões de blocos

Um novo painel de configurações Dimensions está agora disponível para os usuários controlarem o espaço ocupado por um bloco na página. O painel deve incluir controles de altura, largura, preenchimento, margem e possivelmente alinhamento, mas nem todos os atributos estarão disponíveis para cada bloco.

Controle de acolchoamento para um bloco de grupo no WordPress 5.9.
Controle de acolchoamento para um bloco de grupo no WordPress 5.9.

Os desenvolvedores de blocos encontrarão o componente <DimensionControl /> documentado no GitHub, mas note que ele ainda está marcado como um recurso experimental e pode estar sujeito a mudanças de ruptura no momento em que for escrito.

Um novo bloco de grupo de widgets adicionado à tela de Widgets

Um novo bloco de grupo de widgets está agora disponível no editor de widgets baseado em blocos. O último bloco permite a você adicionar um grupo de blocos em um widget com um título no Editor de Widgets dos temas clássicos e no Customizador.

Bloco de grupo de widgets no tema Twenty Twenty-One.
Bloco de grupo de widgets no tema Twenty Twenty-One.

Você pode ler mais sobre o editor de widgets no Block-Based Widgets Editor e Block Widgets no Customizador.

Layout fex e o Novo bloco de fileiras

Originalmente introduzido como um recurso experimental com o Gutenberg 11.2, o layout flex foi estendido para vários blocos, incluindo Links Sociais e blocos de grupos.

Precisa de uma hospedagem rápida, confiável e totalmente segura para o seu site WordPress? Kinsta fornece tudo isso e suporte de classe mundial 24/7, por especialistas em WordPress. Confira nossos planos.

Alguns blocos, como o bloco de Links Sociais, agora fornecem um conjunto de controles da barra de ferramentas e configurações da barra lateral que permitem que você personalize o layout flexível.

Controles de layout na barra de ferramentas de blocos de Links Sociais
Controles de layout na barra de ferramentas de blocos de Links Sociais

Esta mesma funcionalidade está disponível no bloco Navegação e bloco de fileiras, uma nova variação do bloco de grupo introduzida com o Gutenberg 11.5.

A imagem a seguir mostra o bloco de linhas com controles de layout na barra lateral de configurações:

O novo bloco de linhas com configurações de layout
O novo bloco de linhas com configurações de layout

Abaixo, você pode ver o mesmo bloco de fila no frontend e na ferramenta de inspetor do Chrome.

Um bloco de linha na ferramenta Inspetor de cromo
Um bloco de linha na ferramenta Inspetor de cromo

Aperfeiçoamentos do bloco padrão

Apresentado pela primeira vez com o WordPress 5.5, os blocos padrões permitem aos usuários do WordPress incluir estruturas complexas prontas para uso de blocos aninhados em seu conteúdo com apenas alguns cliques.

Agora, o WordPress 5.9 dá um passo à frente em direção à democratização do design & capacitação do usuário, introduzindo algumas melhorias no sistema de padrão de blocos.

Então, o que há de novo com os padrões de blocos no WordPress 5.9?

Padrões em Destaque do Diretório de Padrões

O Inseridor de Blocos agora exibe Padrões de Bloco em Destaque recuperados dinamicamente do Diretório de Padrões, fornecendo aos usuários uma maneira rápida e fácil de encontrar padrões populares para usar em seu conteúdo.

Botões bloqueiam padrões no WordPress 5.9.
Botões bloqueiam padrões no WordPress 5.9.

Da mesma forma, à medida que os padrões entram diretamente no painel do WordPress, os desenvolvedores do WordPress devem ser encorajados a criar e publicar mais e mais padrões ao longo do tempo, resultando em capacidades de design cada vez mais avançadas para os usuários.

Um Novo Explorador de Padrões em Tela Cheia

Como o número de blocos padrão disponíveis no Pattern Directory continua a crescer e mais temas os utilizam, o WordPress 5.9 introduz uma nova interface de navegação de blocos padrões: o Pattern Explorer.

Modal padrão de tela cheia no WordPress 5.9.
Modal padrão de tela cheia no WordPress 5.9.

Um novo botão Explore agora abre um modal de tela cheia que permite aos usuários navegar, procurar e inserir blocos padrões com apenas alguns cliques. O resultado é uma experiência melhorada para o usuário.

Blocos padrões em destaque no inseridor de blocos.
Blocos padrões em destaque no inseridor de blocos.

Você também encontrará notas adicionais e vários exemplos de blocos padrões em nosso mergulho profundo no tema Twenty Twenty-Two WordPress.

Se você está interessado e quer saber mais, ouça o podcast de Josepha Haden Chomphosy, Episódio 16 e 21, e assista ao vídeo Exploring WordPress 5.9 YouTube de Anne McCarthy.

O tema Twenty Twenty-Two e temas de blocos do WordPress

Com o WordPress 5.9, você não precisará mais instalar o plugin Gutenberg para habilitar a Edição Completa do Site no seu site WordPress. Você só precisará permitir que um tema de bloco aproveite todos os recursos do FSE.

Além disso, o WordPress 5.9 foi incluído com um novo tema padrão, Twenty Twenty-Two, e é uma mudança de jogo, já que Twenty Twenty-Two é o primeiro tema padrão de bloco de sempre.

Twenty Twenty-Two é um tema altamente flexível e personalizável. Ele fornece uma sandbox perfeita para experimentar o novo fluxo de edição de modelos, novos blocos, melhorias na interface e todos os recursos de edição do site adicionados ao núcleo, começando com o WordPress 5.9.

Twenty Twenty-Two é o novo tema padrão do WordPress
Twenty Twenty-Two é o novo tema padrão do WordPress. (Fonte da imagem: WordPress.org)

Como mencionado acima, tudo o que você precisa fazer é instalar e ativar um tema de bloco, como o Twenty Twenty-Two. Uma vez que o tema esteja ativo, um novo item de menu Editor (beta) aparecerá no menu de administração do painel de controle do WordPress.

O novo Menu de Aparência no WordPress 5.9.
O novo Menu de Aparência no WordPress 5.9.

A interface do Editor do site agora apresenta um fluxo de edição do site renovado. A partir da interface de edição, você será capaz de editar visualmente a página inicial do site, modelos e partes de modelos, assim como acessar a interface de Estilos Globais.

O menu de navegação do Editor.
O menu de navegação do Editor.

Quando você ativa um tema de bloco, você não vai encontrar o Customizador. Isso porque o Customizador não suporta temas de blocos, que só usam o Editor do Site. Essa também é a razão pela qual você não pode visualizar os temas de blocos inativos.

A Visualização ao Vivo não está disponível com temas de blocos.
A Visualização ao Vivo não está disponível com temas de blocos.

Então, a partir do WordPress 5.9, o ponto de acesso ao Customizador não está mais disponível no menu de administração quando um tema de bloco está ativo (a menos que você esteja usando um plugin que faça uso dele).

Se você ainda está ligado a temas tradicionais e está preocupado com a compatibilidade retroativa, descanse facilmente: Você pode continuar usando seu tema.

Atualmente você tem quatro categorias diferentes de temas para escolher:

  • Temas de blocos: Temas desenhados para o FSE
  • Temas universais: Temas que funcionam tanto com o Customizador como o Editor do Site
  • Temas Híbridos: Temas clássicos que suportam características FSE como theme.json
  • Temas clássicos: Temas com templates PHP, functions.php, etc.

Devido ao impacto que os temas de blocos provavelmente terão no ecossistema WordPress, nós temos um artigo inteiro cobrindo o tema Twenty Twenty-Two e os temas de blocos do WordPress. Não deixe de conferir para ter uma visão mais aprofundada.

Melhorias do desempenho

Aqui em Kinsta, nós somos obcecados pela velocidade do site. É por isso que estamos entusiasmados com as melhorias do desempenho que virão com o WordPress 5.9.

Essas melhorias afetarão diversas áreas do CMS, desde o editor de blocos até temas de blocos, carregamento preguiçoso e muito mais. Vamos mergulhar.

Melhorias no inseridor de blocos

Desde o WordPress 5.9, os tipos de blocos, padrões e categorias são preguiçosamente renderizados no Inseridor de Blocos. O navegador carrega primeiro o conteúdo com maior prioridade, dando ao usuário uma experiência de edição mais suave e um melhor desempenho.

Outras melhorias notáveis de desempenho no contexto do editor de blocos afetam os blocos reutilizáveis e a visualização de lista.

Menos CSS carregado

Quanto ao frontend, o WordPress 5.9 cortou drasticamente a quantidade de CSS carregados por temas de blocos, levando ao carregamento de páginas significativamente mais rápido.

A principal melhoria que deve ser notada neste contexto é a introdução do mecanismo de configurações e estilos do theme.json, que impede que os temas utilizem folhas de estilo maciças, incluindo centenas de declarações CSS. A quantidade de código CSS que um tema utiliza agora foi reduzida para algumas propriedades personalizadas CSS que qualquer tipo de bloco pode reutilizar.

Melhorias de performance do carregamento preguiçoso

O carregamento preguiçoso de imagens foi introduzido pela primeira vez no WordPress 5.5. A partir do WordPress 5.7, a funcionalidade de carregamento preguiçoso foi estendida para iframes, permitindo que os proprietários de sites construíssem sites mais rápidos e melhorassem seu SEO.

De qualquer forma, após uma análise da LCP (Largest Contentful Paint), verificou-se que a atribuição do atributo loading="lazy" a todas as imagens e iframes na página causa uma ligeira degradação do desempenho.

Simplesmente pular o atributo loading="lazy" não era uma solução porque fazê-lo levaria a perder as vantagens claras da carga preguiçosa.

A solução ideal seria omitir apenas o atributo loading="lazy" nas imagens que aparecem acima da dobra. Entretanto, como o atributo loading="lazy" é atribuído no lado do servidor, o WordPress não pode determinar exatamente quais imagens são exibidas acima da dobra. É algo que depende principalmente do tema ativo.

Agora, como uma solução trade-off, começando com o WordPress 5.9, o atributo loading="lazy" não é aplicado à primeira imagem de conteúdo ou iframe. Uma análise realizada em 50 temas populares do WordPress descobriu que esta solução leva a melhorias consideráveis de desempenho e carregamento de páginas até 30% mais rápido.

Felix Arntz explica como funciona:

… para melhorar o desempenho out-of-the-box sem requerer um desenvolvedor para personalizar o comportamento, o WordPress agora vai pular a primeira “imagem de conteúdo ou iframe” na página de ser carregado preguiçosamente. O termo “imagem de conteúdo ou iframe” aqui denota qualquer imagem ou iframe que é encontrado dentro do conteúdo de qualquer artigo no loop principal da consulta atual, assim como qualquer imagem destacada de tal artigo. Isto se aplica tanto ao conteúdo “singular” quanto ao conteúdo “arquivado”: Em um contexto “singular” a primeira imagem ou iframe do (somente) artigo não é carregada com o carregamento preguiçoso, enquanto em um contexto “archive” a primeira imagem ou iframe do primeiro artigo da consulta não é carregada com o carregamento preguiçoso.

Os desenvolvedores de temas podem agora usar o novo filtro wp_omit_loading_attr_threshold para mudar o número de imagens/ iframes a serem pulados do carregamento preguiçoso.

Múltiplas stylesheets (folhas de estilo) por bloco

Blocos e desenvolvedores de temas podem registrar múltiplas folhas de estilo em cada bloco e carregar estilos de outros blocos quando necessário. Isto permite carregar folhas de estilo dependendo do conteúdo da página, evitando que os temas carreguem folhas de estilo enormes em cada página.

De acordo com Ari Stathopoulos:

Os blocos agora serão capazes de registrar múltiplas folhas de estilo, e carregar estilos de outros blocos quando necessário. Os temas serão capazes de adicionar estilos por bloco, ao invés de carregar folhas de estilo monolíticas que são carregadas à força em qualquer lugar. Isto tem um impacto maior nos temas de blocos onde o carregamento de folhas de estilo é otimizado com base no conteúdo da página e layout, mas também pode ser usado por temas clássicos.

Recursos adicionais para desenvolvedores

Além das muitas características e melhorias de IU discutidas até agora, o WordPress 5.9 também introduz várias características para desenvolvedores.

Um novo atributo para bloquear blocos

Os desenvolvedores de blocos podem agora impedir que os usuários movimentem ou excluam blocos individuais adicionando um atributo lock nas configurações de blocos:

{
	...
	"attributes": {
		"lock": {
			"type": "object",
			"default": {
				"move": true,
				"remove": true
			}
		}
	}
}

Com este recurso habilitado, os usuários podem editar o conteúdo do bloco, mas não podem mover o bloco na página ou removê-lo da tela do editor. A imagem a seguir mostra um bloco personalizado com um conjunto padrão de controles da barra de ferramentas:

Um bloco personalizado com uma barra de ferramentas regular
Um bloco personalizado com uma barra de ferramentas regular

Definindo o atributo lock, como visto no código acima, esconde os movimentadores de blocos e os controles Move to e Remove da barra de ferramentas do bloco. A imagem abaixo mostra o resultado final na tela:

Um bloco personalizado sem mover e remover controles
Um bloco personalizado sem mover e remover controles

Você também pode travar um bloco específico em um bloco padrão. Para um exemplo, veja também Bloqueios de Blocos no WordPress 5.9.

Nova API para acessar configurações e Estilos Globais

WordPress 5.9 introduz uma nova API pública PHP para ler dados do theme.json.

Configurações e Estilos de Leitura do theme.json

Há duas novas funções para ler dados das seções settings e styles declaradas no theme.json:

wp_get_global_settings( $path = array() , $context = array() );
wp_get_global_styles( $path = array(), $context = array() );
  • $path é um array listando o caminho para a configuração especificada
  • $context é um array que define o contexto para esses dados. Os desenvolvedores podem ler a partir de uma seção específica de configurações de blocos – por exemplo, array( 'block_name' => 'core/paragraph' ). O conjunto de chaves orygin para base permite ignorar os dados personalizados salvos pelo usuário.

O seguinte código de exemplo retornaria o valor da configuração contentSize. No Twenty Twenty-Two seria 650px:

wp_get_global_settings( array( 'layout', 'contentSize' ) );

Ao definir um contexto, você pode recuperar estilos para blocos específicos. O código a seguir mostra como recuperar o valor do raio da borda para o bloco core/button:

function get_global_styles() {
	return
	wp_get_global_styles(
		array( 'border', 'radius' ),
		array( 'block_name' => 'core/button' )
	);
}

A função acima retorna o valor de propriedade requerido enquanto considera as configurações padrão, configurações de tema e dados do usuário. O valor personalizado será fornecido se o usuário configurar o raio da borda do botão na interface de Estilos Globais.

Para ignorar os dados do usuário, você usaria o seguinte código:

function get_global_styles() {
	return
	wp_get_global_styles(
		array( 'border', 'radius' ),
		array( 'block_name' => 'core/button', 'origin' => 'base' )
	);
}

Obtenha a folha de estilos gerada

O WordPress 5.9 também introduz uma nova função para obter a folha de estilo resultante dos estilos padrão, temático e personalizado:

wp_get_global_stylesheet( $types = array() );

$types é uma lista dos estilos a serem gerados. Você pode ler mais sobre a nova API em Nova API para acessar configurações e estilos globais.

Mais recursos para os desenvolvedores

As mudanças adicionais do WordPress 5.9 para desenvolvedores que você pode querer saber incluem:

Resumo

Nós vamos encerrar este artigo com uma nota rápida sobre a participação de mercado WordPress. O WordPress atualmente alimenta mais de 65% de todos os sites cujo sistema de gerenciamento de conteúdo é conhecido e fica ao norte de 43% de todos os sites.

Estes números são impressionantes, especialmente quando comparados com os concorrentes mais próximos com menos de 5% de participação de mercado, como o Shopify.

E isto também significa que você não pode ignorar a evolução do WP CMS. Cada nova versão do WordPress traz novas funcionalidades, melhorias na interface, melhorias de desempenho e o WordPress 5.9 não é exceção. Tudo que você precisa para testar as novas funcionalidades é um tema de bloco, como o novo tema padrão Twenty Twenty-Two, e você estará pronto para ir.

Você está pronto para fazer a mudança para o tema de blocos e FSE? E quais são as suas mudanças favoritas que vêm com o WordPress 5.9?


Economize tempo, custos e otimize o desempenho do seu site com:

  • Ajuda instantânea de especialistas em hospedagem do WordPress, 24/7.
  • Integração do Cloudflare Enterprise.
  • Alcance global com 35 centros de dados em todo o mundo.
  • Otimização com nosso monitoramento integrado de desempenho de aplicativos.

Tudo isso e muito mais em um plano sem contratos de longo prazo, migrações assistidas e uma garantia de 30 dias de devolução do dinheiro. Confira nossos planos ou entre em contato com as vendas com as vendas para encontrar o plano certo para você.