O Que há de Novo no WordPress 6.0: Novos Blocos, Mudança de Estilo, Edição de Templates, Webfonts API, e Muito Mais

O WordPress 6.0 Arturo está aqui e, como sempre, espreitamos atrás das cortinas para dar aos nossos leitores uma prévia do que há de novo com o último grande lançamento do WordPress.

Digamos desde já que, se o WordPress 5.9 nos trouxe ao coração da Fase 2 do Gutenberg, o WordPress 6.0 visa consolidar as ferramentas de customização já disponíveis.

Mas a nova versão não é apenas isso. Como Matias Ventura apontou no Roadmap Preliminar do 6.0, a introdução do editor do site marcou um grande marco, mas também apenas um primeiro passo na jornada.

O WordPress 6.0 traz melhorias significativas em diversas áreas do CMS, desde a usabilidade até o desempenho, incluindo as seguintes:

Melhor arquitetura de informação e experiência de navegação de templates
Melhoria na criação de templates
Novos hooks
Webfonts API
Um novo Modo de Navegação para o editor do site
Estilos Globais Alternativos
Um bloco de navegação melhorado
Novas ferramentas de design
Melhoria do desempenho
E muito mais…

Mas espere, isso não é tudo. O WordPress 6.0 também traz um número impressionante de mudanças, características e correções de bugs, incluindo mais de 400 atualizações e 500 correções de bugs para o editor. Mais de 189 bilhetes foram corrigidos, incluindo 91 novas funcionalidades e melhorias.

Sim, há muito o que falar. Então não vamos demorar mais e descobrir o que há de novo no WordPress 6.0.

Webfonts API

Uma nova Webfonts API agora fornece uma maneira padronizada de carregar webfonts no WordPress, garantindo desempenho e privacidade do usuário.

A partir do WordPress 6.0, você só pode registrar uma nova webfont a partir do seu theme.json.

O uso do theme.json é bastante simples. Tudo o que você precisa fazer é adicionar uma nova família de fontes na seção typography. O código a seguir fornece um exemplo de registro de fontes na web:

{
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "\"Source Serif Pro\", serif",
					"name": "Source Serif Pro",
					"slug": "source-serif-pro"
				},
				{
					"fontFamily": "\"Inter\", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	}
}

O código acima adiciona a família de fontes Inter fontFamilies ao conjunto padrão de fontFamilies disponíveis no Twenty Twenty-Two. Se você quiser tentar você mesmo, baixe a fonte Inter do Google Fonts para a pasta ./assets/fonts, então adicione o código acima na seção settings.typography do theme.json do Twenty Twenty-Two. Uma vez terminado, salve o arquivo e volte para a interface de edição do site.

A imagem a seguir mostra o resultado no editor.

Uma nova família de fontes foi registrada no Twenty Twenty-Two

O Webfonts API só registra fontes que são necessárias para renderizar blocos na página atual e isso é particularmente útil com webfonts definidos em variações de estilo. Além disso, a API otimiza o número de solicitações HTTP, registrando e questionando fontes por família de fontes.

Você pode ler mais sobre a nova API no pedido de puxar a API do Webfonts, no Status da API do Webfonts para Inclusão do WordPress 6.0 e nas variações de Estilos Globais no WordPress 6.0.

Mudança do estilo global

As variações globais de estilos são uma das características mais esperadas com o WordPress 6.0. Os autores de temas podem agora agrupar vários conjuntos de Estilos Globais com seus temas, permitindo aos usuários alternar entre as variações de estilo com um único clique.

É muito como ter child themes prontos para uso, com um conjunto pré-definido de estilos para cada um deles.

Para adicionar uma variação de estilo ao seu tema do bloco, você adicionará um arquivo JSON alternativo em uma pasta de estilos localizada na raiz do seu tema.

O tema que suporta variações de Estilos Globais mostra um novo item de estilos de navegação na barra lateral de Estilos Globais. Isto traz para um painel onde os usuários do tema encontram uma lista dos estilos disponíveis.

Escolha um estilo global da lista e isto será automaticamente aplicado a todo o site.

Escolhendo um estilo com um único clique no WordPress 6.0.

O novo recurso permite aos desenvolvedores de temas criar um número ilimitado de variações de estilo e combiná-las perfeitamente com a nova API do Webfonts.

A imagem a seguir mostra um estilo personalizado do exemplo anterior, com uma fonte diferente aplicada aos cabeçalhos.

Uma variação de estilo com uma fonte personalizada no WordPress 6.0.

Se você quiser tentar você mesmo, adicione uma pasta de estilos à raiz do tema do seu bloco, crie um novo arquivo JSON com um nome significativo, abra-o em seu editor de código favorito e adicione o seguinte código:

{
	"version": 2,
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [ "#143F6B", "#EFEFEF" ],
					"slug": "foreground-and-background",
					"name": "Foreground and background"
				},
				{
					"colors": [ "#143F6B", "#FEB139" ],
					"slug": "foreground-and-secondary",
					"name": "Foreground and secondary"
				},
				{
					"colors": [ "#143F6B", "#F6F54D" ],
					"slug": "foreground-and-tertiary",
					"name": "Foreground and tertiary"
				},
				{
					"colors": [ "#F55353", "#EFEFEF" ],
					"slug": "primary-and-background",
					"name": "Primary and background"
				},
				{
					"colors": [ "#F55353", "#FEB139" ],
					"slug": "primary-and-secondary",
					"name": "Primary and secondary"
				},
				{
					"colors": [ "#F55353", "#F6F54D" ],
					"slug": "primary-and-tertiary",
					"name": "Primary and tertiary"
				}
			],
			"palette": [
				{
					"slug": "foreground",
					"color": "#143F6B",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#EFEFEF",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#F55353",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#FEB139",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#F6F54D",
					"name": "Tertiary"
				}
			]
		},
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": ""Inter", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	},
	"styles": {
		"blocks": {
			"core/post-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"core/query-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)"
				}
			}
		},
		"elements": {
			"h1": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h3": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h4": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h5": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h6": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--inter)"
		}
	}
}

Você pode encontrar o código completo usado no exemplo acima no GitHub e no gist.

Os desenvolvedores encontrarão uma visão detalhada dos Estilos Globais e Theme.json em Configurações Globais e Estilos e artigos de documentação de Theme.json.

Você também pode conferir a última versão do Twenty Twenty-Two, que agora apresenta três novas variações de estilo.

Block patterns em todos os lugares

Uma coisa é certa, os block patterns desempenham um papel central na fase atual de desenvolvimento do WordPress. Apresentados pela primeira vez com o WordPress 5.5, os block pattern têm sido regularmente melhorados ao longo do tempo.

Além disso, a partir do WordPress 5.9, os padrões apresentados no diretório Patterns entraram em nossos sites WordPress, sendo recuperados dinamicamente do diretório Patterns e carregados no inseridor de blocos.

E agora qualquer um pode se tornar um desenvolvedor de padrões, graças a uma nova ferramenta online. O Pattern Creator permite que você construa, edite e envie seus melhores block pattern para o Diretório de Padrões. Tudo o que você precisa para começar é uma conta no WordPress.org.

E o WordPress 6.0 introduz mais melhorias nos patterns de bloqueio.

Primeiro, os block patterns são mais fáceis de encontrar na edição de templates. Agora o inseridor rápido só mostra os block patterns quando você acessa o bloco no nível superior de um modelo, ou seja, quando o bloco que você vai adicionar ao seu modelo é o descendente direto do documento.

Isso é quando as seguintes condições se encontram:

Você está editando um modelo de bloco
O inseridor rápido está no nível da raiz
Você está adicionando um bloco entre outros blocos (ou seja, nem o primeiro nem o último bloco da página)

O inseridor rápido só mostra block patterns no editor de templates.

Outro recurso útil agora permite aos desenvolvedores de temas adicionar patterns recomendados ao theme.json. Para tentar, procure no diretório Patterns, encontre os patterns que você quer recomendar aos usuários do seu tema, então pegue a lesma do padrão na URL e adicione-a ao seu theme.json da seguinte forma:

"patterns": [
	"image-with-angled-overlay-shape-call-to-action-button-and-description",
	"hero-section-with-overlap-image"
],

Os usuários encontrarão seus patterns recomendados no inseridor de blocos.

Patterns recomendados no inseridor rápido

Um poderoso recurso relacionado a patterns que vem com o WordPress 6.0 é o registro de patterns implícito. Os temas podem agora registrar patterns implicitamente declarando-os como arquivos PHP sob um novo diretório /patterns na raiz do tema.

O processo é bastante simples:

crie uma nova pasta patterns na raiz do seu tema,
construir um grupo de blocos no editor de blocos,
copie e cole seu HTML em um novo arquivo de texto,
prefira o seguinte título,
e salve o arquivo como PHP em sua pasta patterns.

<?php
/**
 * Title: My pattern
 * Slug: my-theme/my-pattern
 * Categories: text
 */
?>

E é isso aí. Agora você tem um novo padrão de blocos para aparecer no inseridor de blocos.

Um padrão personalizado no inseridor de blocos rápidos

Os padrões de criação de páginas são outro recurso relacionado a padrões de blocos introduzidos com o WordPress 6.0. Agora, quando você cria uma nova página, a tela de criação de página exibe um modal fornecendo um conjunto de padrões de blocos que você pode escolher para criar sua página.

O modal só é mostrado quando pelo menos um padrão declara suporte para os tipos de blocos core/post-content.

Fora da caixa, o WordPress 6.0 não inclui nenhum destes patterns, portanto o modal não aparecerá a menos que você adicione suporte a um pattern existente. Mas adicionar o modal à tela de criação da página é bastante simples.

Se você registrou um padrão de bloco para seu tema como mostrado no exemplo acima, você pode adicionar suporte para o modal de padrão usando a propriedade Block Types, como mostrado no exemplo de padrão abaixo:

<?php
/**
 * Title: Pattern with columns
 * Slug: twentytwentytwo/pattern-with-columns
 * Block Types: core/post-content
 * Categories: text
 */
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul><li>List item</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Salve este código em um arquivo PHP no /patterns directory de seu tema. Em seguida, em seu painel do WordPress, crie uma nova página. Você deve ver um novo modal como mostrado na imagem a seguir:

Para uma visão mais detalhada na criação de páginas patterns, veja também criação de páginas patterns no WordPress 6.0.

Para uma visão mais abrangente do desenvolvimento de patterns de blocos, veja também Novos recursos para trabalhar com patterns e temas no WordPress 6.0 e o Rastreamento de problemas no GitHub.

Características de edição do site

A edição completa do site ainda não terminou com o WordPress 5.9. O WordPress 6.0 leva as coisas um passo adiante, melhorando as funcionalidades visuais de construção de temas e fornecendo novas opções de templates para os temas de blocos. E mais funcionalidades estão a caminho.

Construção de temas visuais

O WordPress 6.0 introduz uma ferramenta aprimorada de exportação de blocos de temas, que permite que você faça o download do tema atual com todas as suas mudanças e customizações.

Se você ainda não usou a ferramenta de exportação de blocos temáticos até agora, ela é uma poderosa ferramenta de edição de sites que lhe permite exportar seus estilos e templates como um tema inteiro.

Quando você estiver satisfeito com suas mudanças, a partir da interface do editor do site, abra a barra lateral de Opções e encontre a seção Ferramentas. Aqui um botão Exportar permite que você baixe o tema atual com todo o seu estilo e customizações de templates em um arquivo zip.

Exportar um tema a partir da interface do editor

Você pode então exportar seu tema e instalá-lo em qualquer site WordPress.

Nós testamos a ferramenta de exportação de temas melhorada em uma instalação local do WordPress, e descobrimos que quase tudo funciona como esperávamos… 😅

De qualquer forma, a ferramenta de exportação ainda está em desenvolvimento, e hoje nós só podemos vislumbrar seu tremendo potencial. Pense na possibilidade de criar seus temas a partir da interface de edição do seu site e distribuí-los em um número arbitrário de instalações. E isso é se você é ou não um desenvolvedor…

Ainda há muitas questões pendentes a serem resolvidas, o que nos faz pensar que veremos várias melhorias em breve. Se você está curioso e quer saber mais sobre o Visual Theme Building (como estamos), você pode seguir o Tracking Issue no GitHub.

Mais opções de templates em temas de bloco

Nas versões anteriores do WordPress, nós tínhamos um número limitado de tipos de templates disponíveis.

Adicionando um novo modelo no WordPress 5.9.

Agora, o WordPress 6.0 introduz vários novos tipos de templates, incluindo Autor, Categoria, Data, Tag, e Taxonomia.

Adicionando um novo modelo no WordPress 6.0.

Esta adição deve agilizar o fluxo de trabalho de edição do seu site. Para tentar, basta escolher um novo modelo da lista suspensa, adicionar os blocos necessários, salvar suas alterações e verificar como ele fica no front end. Sim, é fácil assim. Agora, considere isso em conjunto com o recurso de exportação de temas mencionado acima e você entenderá melhor o que podemos esperar com a edição do site em breve.

Melhorias na interface e na usabilidade

O WordPress 6.0 introduz uma série de mudanças na IU, muitas das quais são destinadas a fazer a ordem na barra lateral. Todas essas mudanças juntas devem ter um impacto considerável na experiência geral de edição. Aqui mencionaremos apenas algumas delas, mas você pode verificar as notas de lançamento do Gutenberg para uma lista mais abrangente de mudanças (veja Gutenberg 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13.0).

Melhorias na visualização em lista

A visualização em lista é afetado por um número considerável de mudanças, melhorando a usabilidade do componente.

Expandir a Visão de Lista na seleção

Quando você clica em um bloco no editor, agora o bloco é automaticamente realçado na Vista Itemizada. Se o bloco estiver aninhado em um bloco pai, o bloco pai se expande mostrando o item na árvore de blocos.

Bloco de Grupo Expandido em Vista de Lista na seleção de blocos

Visualização em lista colapsada por padrão

No WordPress 6.0, quando você abre o painel visualização em lista, ele é expandido por padrão.

Visualização em lista padrão do WordPress 5.9.

Mas como um post consiste frequentemente de estruturas complexas de blocos aninhados, ter a árvore de blocos desmoronando ao abrir a Vista de Lista faz todo o sentido.

Com a versão 6.0, a visualização em lista é derrubada por padrão em todos os editores, tornando a árvore de blocos muito mais compreensível num piscar de olhos.

Visualização da lista padrão no WordPress 6.0.

Foco no botão de visualização em lista

Quando você abre o painel de visualização em lista, o foco agora retorna corretamente para o botão de visualização em lista. Isto é particularmente útil quando você navega pela visualização em lista do seu teclado, e resulta em uma experiência de edição mais suave e sem problemas.

Seleção de blocos múltiplos e Drag & Drop

Outra mudança na visualização em lista permite que você selecione vários blocos no mesmo nível e arraste-os para outra posição dentro da lista.

Pré-visualização do estilo de blocos

Antes do WordPress 6.0, as prévias de estilo de bloco eram colocadas na barra lateral do bloco, ocupando uma parte considerável do painel Estilos.

Visualização do estilo de bloco no WordPress 5.9.

Com 6.0, apenas os nomes das variações de estilo aparecem no painel Estilos, enquanto as pré-visualizações de estilo aparecem fora da barra lateral quando o nome do estilo é pautado ou recebe o foco.

Esta mudança reduz as dimensões da barra lateral e deve tornar os nomes de estilo mais evidentes.

Visualização do estilo de bloco no WordPress 6.0.

Seção de tipografia de parágrafo

Com o objetivo de fazer a ordem na barra lateral do bloco, o controle Drop Cap para o bloco de Parágrafo foi movido de sua seção para a seção de Tipografia.

Com esta mudança, todos os controles de configuração tipográfica são agora colocados sob a mesma seção, levando a uma experiência mais consistente para o usuário.

Configurações de tipografia no WordPress 5.9 vs. WordPress 6.0.

Configurações de bordas e cores movidas para o Painel de Ferramentas

Com o objetivo de fazer ordem em uma barra lateral confusa, os ajustes de bordas e controles de ajustes de cores foram movidos para o Painel de Ferramentas e podem ser expandidos e colapsados em vários contextos.

Esta mudança deve racionalizar a experiência de edição com vários blocos e trazer mais consistência para a barra lateral.

Lembrete da categoria do Painel de Publicação de artigo

Quando você está com pressa ou publica regularmente um bom número de artigos no blog, você pode facilmente esquecer as tags ou categorias. Se você se vê frequentemente em tal situação, você achará o lembrete de tag que aparece no painel de publicação de artigos extremamente útil.

Agora, para ajudar os administradores e autores do site a garantir que seus artigos tenham as categorias necessárias atribuídas, com o WordPress 6.0 uma nova sugestão: Atribuir um painel de categorias aparece no painel Publicar no artigo quando uma categoria ainda não foi adicionada ao artigo.

A imagem abaixo compara o painel de publicação de artigos no WordPress 5.9 vs. 6.0.

Painel de Publicação de artigo no WordPress 5.9 vs. 6.0.

Editor de código adicionado ao editor do site

Começando com o WordPress 6.0, o Editor de código agora também está disponível dentro do Editor do Site. Assim como no Editor de artigo, você encontrará o Editor de Código sob o menu Opções.

WordPress 6.0 adiciona o Editor de Código ao Editor do Site.

Bloqueio de UI

Um novo item de Bloqueio no menu suspenso Mais Configurações abre um popup onde você pode impedir que os usuários se movam ou removam blocos (ou ambos).

Isto é particularmente útil na edição de templates e blocos reutilizáveis, onde você também pode restringir a edição de blocos.

O novo recurso pode ser desativado programmaticamente usando a nova configuração do canLockBlocks.

O código a seguir permite o recurso de bloqueio de blocos somente para usuários com função de Editor ou superior:

add_filter(
	'block_editor_settings_all',
	function( $settings, $context ) {

		$settings['canLockBlocks'] = current_user_can( 'delete_others_posts' );
 
		return $settings;
	},
	10,
	2
);

Os desenvolvedores também podem ocultar a IU de Bloqueio de Bloqueio em tipos específicos de blocos usando a propriedade de lock:

{
	"apiVersion": 2,
	"supports": {
		"lock": false
	}
}

Você pode ler mais sobre bloqueio de bloqueio em Configurações de Bloqueio no WordPress 6.0.

Multi-seleção

Agora é possível selecionar texto através de vários blocos.

Selecionando texto através de dois parágrafos.

Retenção de Estilos

Quando você transforma blocos ou cria novos botões, vários estilos são agora mantidos.

A imagem abaixo mostra um bloco de Lista com estilos diferentes.

Um bloco de lista com diferentes estilos aplicados.

Quando você transforma o bloco da Lista em parágrafos, os novos blocos manteriam os mesmos estilos que os itens da lista anterior.

O mesmo aperfeiçoamento se aplica aos novos botões adicionados a um bloco de botões, que agora herdam o estilo dos botões adjacentes.

Novos blocos de botões

O número de blocos centrais está aumentando constantemente. Se você está se perguntando quais são os blocos centrais atualmente disponíveis, agora há uma página do Manual que fornece uma lista completa dos blocos centrais incluídos no plugin do Gutenberg. Para cada bloco, Nome, Categoria, Suportes e Atributos são fornecidos, assim como um link útil para o código fonte que os desenvolvedores de blocos irão adorar.

E mais blocos estão vindo com o WordPress 6.0. Encontre aqui os blocos que você pode esperar com a próxima versão.

Comment Query Loo

Similar ao bloco Query Loop, um novo bloco de Comment Query Loop exibe os comentários do post. É um bloco avançado que inclui vários blocos internos que você pode editar e configurar separadamente.

Como a imagem abaixo mostra, você pode selecionar qualquer um dos blocos contidos no bloco Comment Query Loop para personalizar sua aparência como você quiser. Você também pode adicionar mais blocos ou mover ou remover blocos existentes (código fonte).

Configurando o bloco de consulta de comentários

Um novo e personalizável bloco Read More permite que você personalize diferentes aspectos do botão Read More: bordas, cores, cantos, tipografia e muito mais (código fonte).

Esta é uma ótima adição porque permite adicionar e personalizar o link Read More fora do contexto do bloco Excerpt.

Sem resultados no loop de consulta

O bloco No Results é um bloco no qual você pode adicionar qualquer texto ou bloco para mostrar quando a consulta não tem resultados. Para adicionar o bloco No Results a um Query Loop, basta selecionar o Query Loop e clicar no ícone mais no canto inferior direito para iniciar a inserção rápida. Em seguida, procure por No Results. O bloco não está disponível fora do Query Loop (Código fonte).

Adicionando o bloco Sem Resultado ao Laço de Consulta

Avatar e biografia do pós-autor

O WordPress 6.0 também introduz novos tipos de blocos para dividir o bloco do Autor em seus componentes e usá-los separadamente em seu conteúdo.

O bloco Biografia do Pós-Autor fornece a descrição dos autores (código fonte).

O bloco Avatar simplesmente mostra o avatar de um usuário permitindo que você escolha entre os autores do site (código fonte).

O bloco Avatar no WordPress 6.0.

Este bloco é particularmente útil para mostrar o avatar de um autor fora do contexto do bloco de Informações do Autor ou comentários. Por exemplo, você pode usá-lo em uma página dedicada a todos os autores, ou em uma página mostrando resenhas de seus usuários/leitores.

Melhorias nos blocos existentes

O WordPress 6.0 também introduz várias mudanças e melhorias nos blocos existentes que potencialmente terão um forte impacto no seu fluxo de trabalho de edição. O bloco de navegação será afetado por várias mudanças, mas você também verá melhorias em outros blocos, incluindo o Query Loop, Featured Image, Group, e Social Icons.

Melhorias nos blocos de navegação

Nos últimos meses, o bloco de Navegação recebeu várias melhorias e agora apresenta uma interface significativamente mais fácil de usar.

Primeiro, uma prévia rica foi adicionada ao bloco de links de navegação. Quando você adiciona um link apontando para um recurso publicamente acessível, clicando no botão de link na barra de ferramentas do bloco, aparece uma imagem de pré-visualização desse recurso.

Visualização rica para Links de Navegação.

Algumas mudanças adicionais afetam a experiência geral de edição.

Agora, quando você adiciona um novo menu e só existe um Menu de Navegação, então ele é o único menu disponível por padrão. Esta mudança deve acelerar seu fluxo de trabalho de edição se você só tiver um único Menu de Navegação.

Os links de navegação já tinham um campo de descrição onde os usuários podem inserir um texto descrevendo seus links de navegação. Entretanto, em versões anteriores do WordPress, os temas não podiam suportar este recurso.

Agora, com o WordPress 6.0, um <span class="wp-block-navigation-item__description"> aparece após o rótulo do link.

A descrição do link de navegação aparece após a etiqueta do link

Em Twenty Twenty-Two, o elemento .wp-block-navigation-item__description está escondido via CSS, mas os temas podem adicionar uma propriedade display: block para mostrar a descrição do link.

Descrição do link de navegação no WordPress 6.0 e Twenty Twenty-Two.

Filtros de Loop de Consulta e Imagens em Destaque

A seção de configurações dos filtros de loop de consulta agora mostra campos de entrada para taxonomias personalizadas. Isto permite que os usuários filtrem o tipo de postagem atual por uma ou mais taxonomias personalizadas registradas para o tipo de postagem selecionada.

Agora também é possível filtrar artigos de vários autores, enquanto nas versões anteriores você só tinha permissão para selecionar um único autor a partir de um menu suspenso.

Configurações do filtro de loop de consulta no WordPress 6.0.

Além disso, agora você também pode definir as dimensões da Imagem em Destaque dentro de um bloco de Consulta.

Controlando as dimensões da imagem em destaque em um bloco de consulta

Tipografia e suporte de bordas em blocos de grupos responsivos

Os blocos de grupo e fileira agora suportam configurações de tipografia. Esta mudança permite que os usuários apliquem as mesmas configurações de tipografia a um grupo inteiro de blocos de uma vez, economizando alguns cliques quando se trata de formatar um grupo contendo vários blocos aninhados.

Configurações de tipografia para um bloco de grupo

O bloco de Grupo foi melhorado e agora você pode facilmente agrupar blocos em Pilha ou Fileira com um único clique.

Basta selecionar os blocos que você deseja agrupar e escolher um dos três controles disponíveis na barra de ferramentas de blocos: Gruppo, Row, Stack.

Uma vez que você tenha agrupado blocos, um novo painel na barra lateral de configurações mostra descrições de variação de grupo permitindo que você troque a variação com alguns cliques.

Um bloco de linha mostra blocos horizontalmente.

O WordPress 6.0 também introduz suporte de margem para blocos de grupo, permitindo aos usuários controlarem as margens superior e inferior separadamente.

Controle de margens com um bloco de Grupo

Imagem em destaque no bloco de capa

Agora você pode usar Imagens em Destaque em Blocos de Capa como no WordPress 6.0 a Usar alternância de imagens em destaque foi adicionado à barra de ferramentas de blocos. Graças a este novo controle, você pode mudar da imagem atual para a imagem em destaque com um único clique.

Usar imagem em destaque com um bloco de Capa

Mostrar/Ocultar rótulos nos ícones sociais

Um pequeno, mas útil, aprimoramento do bloco de Ícones Sociais agora permite aos usuários alternar entre os rótulos de links de ícones.

Um controle de etiquetas Show permite ativar/desativar etiquetas nos Ícones Sociais

Ao ativar esta opção, você pode exibir o nome do serviço padrão ou definir rótulos personalizados para seus ícones separadamente.

Melhorias adicionais de blocos

A próxima versão do WordPress também traz um grande número de aprimoramentos para muitos outros blocos.

Por exemplo, agora você pode controlar as bordas dos blocos de Colunas (Gutenberg 12.7).

Controles de fronteira para o bloco Colunas

Outra melhoria útil do UX permite que você insira links internos usando um simples gatilho de teclado [[.

Adicionar links internos no WordPress 6.0 é mais fácil.

Agora é mais fácil controlar o espaço ao redor das imagens em um bloco da Galeria, graças ao novo controle de espaçamento de blocos.

Mudanças para os desenvolvedores e melhorias de desempenho

O WordPress 6.0 também acrescenta muitas funcionalidades para os desenvolvedores.

Um novo filtro wp_content_img_tag permite o ajuste de imagens em um blob de conteúdo HTML (veja Novo filtro para modificar imagens de conteúdo no WordPress 6.0).
O método parse_request foi alterado para reduzir o número de consultas quando o filtro do do_parse_request retorna falso (veja Mudanças no filtro do_parse_request no WordPress 6.0).
Agora você pode registrar blocos de dentro de um tema (veja Registro de blocos de dentro de Temas).
Uma nova propriedade dos ancestor torna um bloco disponível somente dentro dos tipos de blocos especificados (ver Propriedade de novos antepassados em block.json).

O novo lançamento também dá um impulso ao desempenho, com algumas adições ao WordPress Caching API, melhorias de desempenho para consultas de termos taxonômicos, e mais melhorias de desempenho para sites únicos com grande contagem de usuários.

Isto encerra nosso levantamento das novas funcionalidades e mudanças que você verá uma vez atualizado seus sites WordPress para 6.0.

Mas estas são apenas algumas das melhorias que vêm com o WordPress 6.0. Para uma lista completa, consulte as notas de lançamento do Gutenberg e o Guia de Campo do WordPress 6.0

Como instalar o WordPress 6.0 em um ambiente de desenvolvimento local

Se você quiser experimentar as versões de desenvolvimento do WordPress antes do lançamento oficial, siga estes passos:

Abra o DevKinsta e crie um novo site WordPress local
Quando terminar, abra seu painel de controle do WordPress e navegue até Plugins → Adicionar novo
Pesquisar e instalar o plugin WordPress Beta Tester
Ative o plugin e vá para Ferramentas → Beta Testing
Na aba Configurações do WP Beta Tester escolha a opção Bleeding edge e salve as configurações
De volta ao seu Painel do WordPress, abra a tela Updates e atualize para a última versão noturna

Isso é tudo! Agora você tem uma instalação local de desenvolvimento WordPress e você está livre para executar todos os seus testes. Dê uma olhada e nos diga o que você pensa sobre as novas funcionalidades.

Com DevKinsta é necessário apenas alguns cliques para ter um ambiente de desenvolvimento moderno para WordPress em sua máquina local. 🖥

Baixe DevKinsta de graça aqui! 👈

Resumo

Como mencionado acima, podemos agora dizer que estamos no meio da segunda fase do desenvolvimento de Gutenberg, a Fase de Customização.

A edição completa do site agora faz parte do núcleo do WordPress e 6.0 e as versões seguintes trarão mais melhorias para o que já temos e podemos usar agora mesmo.

Tudo isso terá um enorme impacto no ecossistema WordPress e na web como um todo, considerando também que, no momento de escrever,

O WordPress é usado por 64,2% de todos os sites cujo sistema de gerenciamento de conteúdo conhecemos. Isto é 43,0% de todos os sites. (Fonte W3Techs)

Nós vamos parar aqui por enquanto. Nossa lista de recursos e melhorias com o WordPress 6.0 não pode ser esgotada em um único post, mas esperamos que, pelo menos, tenhamos destacado as adições que terão o maior impacto na forma como estamos usando o WordPress no dia a dia.

Agora nós gostaríamos de concluir este artigo com algumas perguntas para nossos leitores!

Por favor, compartilhe suas ideias com a comunidade na seção de comentários abaixo. 👇

Carlo Daniele Kinsta

Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.

Site
Twitter