O WordPress 5.4 está programado para ser lançado em 31 de março de 2020. Agora estamos no WordPress 5.4 RC 5 e não podem ser adicionados mais commits e pedidos de novos recursos.

Então, é hora de mergulharmos fundo nas mais interessantes novidades e mudanças que virão com o WordPress 5.4.

Antes de mais, o WordPress 5.4 traz muitas funcionalidades, melhorias e correções de bugs para o editor de blocos, com um número considerável de versões do plugin do Gutenberg fundidas no núcleo. Estas alterações afetam tanto as funcionalidades como a IU, melhorando a acessibilidade/utilizabilidade do editor e a experiência de edição em geral.

Além do editor, o WordPress 5.4 introduz melhorias interessantes na Ferramenta de Saúde do Site e na API REST, enquanto algumas funcionalidades esperadas com o WordPress 5.4 foram adiadas e devem ser agrupadas no Core com o próximo lançamento do WordPress 5.5 (veja Native Lazy Loading on images and Navigation block).

Você pode querer salvar as seguintes datas e links do WordPress 5.4 Ciclo de Desenvolvimento:

Então, o que há de novo no WordPress com o WordPress 5.4?

O que há de novo com o Block Editor

Um número considerável das versões de plugins do Gutenberg foi fundido no núcleo, de 6.6 para 7.5. Portanto, se não estiver a usar o plugin do Gutenberg, encontrará toneladas de novas funcionalidades, melhorias e correções de bugs no editor de blocos ao atualizar para o WordPress 5.4.

Mas há mais do que blocos e recursos no editor, com melhorias de desempenho geral sendo relatadas:

A equipe de edição de blocos conseguiu uma redução de 14% no tempo de carregamento e de 51% no tempo de carregamento, para um post particularmente grande (~ 36.000 palavras, ~1.000 blocos) desde o WordPress 5.3.

Isso é um monte de coisas fantásticas, por isso vamos mergulhar.

O que há de novo no WordPress 5.4? Obtenha uma visão aprofundada de todas as novas funcionalidades e mudanças interessantes que vêm com este último lançamento! 💪🚀Click to Tweet

Novos recursos e aprimoramentos do Block Editor

Podemos concordar que o editor de blocos ainda está em desenvolvimento, mas o WordPress 5.4 traz toneladas de mudanças melhorando a usabilidade do editor tanto no desktop quanto no celular.

Algumas destas alterações estão estritamente relacionadas com a interface, incluindo o modo de ecrã inteiro ativado por defeito, seleção de blocos melhorada, mudança fácil entre o modo de edição e o modo de seleção, barra de ferramentas móvel fixa e pão ralado para a navegação em bloco. Dois novos blocos e configurações de opções adicionais adicionam mais funcionalidades ao editor.

Aqui está uma lista rápida das características e melhorias do nosso editor de blocos favoritos que vem com o WordPress 5.4:

Novo Bloco de Ícones Sociais

Inicialmente chamado de Links Sociais, o bloco de Ícones Sociais permite aos autores adicionar rapidamente ícones com links para perfis sociais e fornece um bom número de blocos de ícones sociais para crianças escolherem. Este bloco tem sido experimental durante algum tempo e é estável desde o Gutenberg 7.5.

O bloco de Ícones Sociais

O bloco de Ícones Sociais

O bloco Ícones Sociais vem com três estilos predefinidos para as suas personalizações visuais: Por defeito, apenas Logos, e forma de pílula.

Estilos de Ícones Sociais

Estilos de Ícones Sociais

Desde que foram introduzidos pela primeira vez como uma funcionalidade experimental no Gutenberg 6.5 (e fundidos no WordPress 5.3), os Ícones Sociais foram adicionados ao Gutenberg 7.5 e podem não funcionar como esperado se você estiver a correr uma versão desatualizada do plugin do Gutenberg.

Segundo Jorge Costa, há duas formas de prevenir problemas com os Ícones Sociais:

Novo Bloco de Botões

Adicionado ao editor de blocos no Gutenberg 7.2, o bloco Botõessubstitui o único bloco de Botões, e permite aos utilizadores do WordPress adicionar mais botões aos seus conteúdos dentro do mesmo recipiente de blocos.

O novo bloco de Botões

O novo bloco de Botões

Os botões individuais vêm com dois estilos predefinidos à escolha e várias opções adicionais para afinar a aparência dos seus botões.

Configurações dos botões no WordPress 5.4

Configurações dos botões no WordPress 5.4

Com o WordPress 5.4, os proprietários do site ganham um controle mais profundo sobre a aparência e a sensação de sua chamada para as ações graças à adição de fundos de gradiente, que também vêm com um punhado de pré-configurações de gradiente disponíveis para os administradores do site para usar como pontos de partida para outras personalizações.

Características de cor renovadas para botões

Características de cor renovadas para botões

Um Guia de Boas-vindas Modal

O WordPress 5.4 adiciona um novo slideshow de boas-vindas que fornece informação básica sobre o editor de blocos e uma ligação para a documentação online (adicionado com o Gutenberg 7.1).

Guia de Boas Vindas Modal

Guia de Boas Vindas Modal

O modal só é visível logo após a atualização para 5.4. Se você quiser acioná-lo novamente, basta abrir o menu Mais ferramentas e opções no botão superior direito e encontrar o link Guia de Boas-vindas.

Modo ecrã inteiro Activado por defeito

Modo ecrã inteiro Ativado por defeito

O modo tela cheia é ativado por padrão

A partir do WordPress 5.4, o editor abre em modo tela cheia, por padrão, em novas instalações e dispositivos. Você pode ativar/desativar o modo de tela cheia clicando no menu Mais ferramentas e opções, como mostrado na imagem abaixo.

O modo tela cheia é ativado por padrão no WordPress 5.4

O modo tela cheia é ativado por padrão no WordPress 5.4

Por enquanto, essa preferência é armazenada localmente, o que significa que ela será sobregravada sempre que as preferências forem alteradas, como acontece quando você acessa seu site no modo de navegação anônima. No futuro, esta preferência será armazenada no banco de dados, tornando a escolha do usuário persistente em qualquer contexto.

Note que a decisão de ter o editor em modo de tela cheia por padrão não é unanimemente apreciada como potencialmente confusa para iniciantes e usuários não avançados. Se você quiser saber mais sobre as preocupações das pessoas no modo de tela cheia, verifique os comentários neste post.

Os programadores do Block Editor podem controlar o modo tela cheia programmaticamente com apenas algumas linhas de JavaScript:

const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );

if ( isFullscreenMode ) {
	wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
}

Suporte a cores de texto em linha em blocos RichText

Se você normalmente escreve artigos de forma longa, você deve apreciar o suporte a cores do texto em linha. Antes desta atualização, fomos forçados a codificar blocos de texto ricos em código rígido no modo HTML para mudar a cor de palavras individuais e strings.

Opção de cor RichText

Opção de cor RichText

A partir do WordPress 5.4, podemos selecionar palavras e sub-cordas em blocos RichText e mudar rapidamente suas cores usando o seletor de cores incorporado.

Selecionador de cores RichText

Selecionador de cores RichText

Opções de cores adicionais para vários blocos

O WordPress 5.4 adiciona uma longa lista de recursos e aprimoramentos relacionados a cores ao editor de blocos. Como visto acima, nós não estamos mais limitados a cores sólidas. Vários blocos agora suportam fundos gradientes e conjuntos predefinidos de gradientes.

Aqui está uma lista rápida de algumas melhorias relacionadas com as cores:

Bloco de cobertura com fundo de gradiente pré-definido

Bloco de cobertura com fundo de gradiente pré-definido

Outra adição notável ao editor de blocos é o suporte para imagens em destaque no bloco Últimos Artigos (Gutenberg 7.5).

Esta é apenas a mais recente de várias melhorias adicionadas ao bloco de Últimos Posts ao longo do tempo e marca mais um passo para “blocos dinâmicos ou globais mais complexos”.

Bloco de posts mais recentes

Bloco de posts mais recentes

Com o WordPress 5.4, o bloco Últimos Posts permite que você puxe posts de uma categoria específica, mas não permite que você crie consultas mais avançadas por categoria/etiqueta/tipo de postagem e/ou inclua/exclua posts únicos.

Esperamos ver mais aperfeiçoamentos com este bloco no futuro.

Uma Nova Barra Breadcrumb para a Navegação em Bloco

Disponível para os utilizadores do Gutenberg desde a versão 6.7, e agora fundida no Core, a nova barra de migalhas de pão visa simplificar a navegação em blocos aninhados.

A imagem abaixo mostra vários blocos aninhados e o novo menu de migalhas de pão na parte inferior.

O novo menu de migalhas de pão

O novo menu de migalhas de pão

Mudanças no Editor de Blocos para Desenvolvedores de Temas e Blocos

Os desenvolvedores de temas e blocos devem estar cientes de muitas mudanças trazidas ao editor de blocos com o WordPress 5.4. Estas mudanças incluem:

Atalhos do teclado do Block Editor

Os desenvolvedores de blocos e usuários avançados podem agora adicionar atalhos personalizados ao editor de blocos.

Um novo pacote chamado @wordpress/keyboard-shortcutsfoi introduzido para centralizar o registro, remoção e documentação dos atalhos do editor.

Os desenvolvedores podem adicionar seus atalhos personalizados chamando a ação registerShortcut desta forma:

wp.data.dispatch( 'core/keyboard-shortcuts' ).registerShortcut( {

	// Shortcut identifier
	name: 'plugin/shortcut-test',

	// Shortcut category (possible values global, block, selection)
	category: 'global',

	// Shortcut description
	description: 'My first shortcut',

	// The key combination that triggers the shortcut
	keyCombination: {

		// Available modifiers:
		// primary, primaryShift, primaryAlt,
		// secondary, access, ctrl, alt,
		// ctrlShift, shift, shiftAlt
		modifier: 'alt',
		character: 'w',
	},

	// An alias for the key combination
	aliases: [
		{
			modifier: 'primary',
			character: 'q',
		},
	],
} );

Isto adicionará automaticamente o atalho personalizado ao modal de atalhos disponível em Mais Ferramentas & Opções no canto superior direito do editor.

Foi adicionado um atalho personalizado do editor global de blocos

Foi adicionado um atalho personalizado do editor global de blocos

Depois, podemos anexar um manipulador de atalhos de teclado usando a função useShortcut:

import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useCallback } from '@wordpress/element';

const MyComponent = () => {
	useShortcut(

		'plugin/shortcut-test',

		useCallback(
			( event ) => {
				// Do something
			},
			[]
		)
	);
}

Você pode ler mais sobre atalhos de teclado no blog Make WordPress Core.

APIs com Tema Gradiente

O WordPress 5.4 introduz fundos gradientes com um punhado de predefinições para Botões e Blocos de Capa. Isto acontece graças às novas APIs de Gradient Theme.

As novas APIs fornecem a opção editor-gradient-presets de suporte a temas, que permite que os desenvolvedores de temas substituam as predefinições e definam as suas próprias predefinições:

add_theme_support(
	'editor-gradient-presets',
	array(
		array(
			'name'		=> __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',
			'slug'		=> 'cedetblue-chartreuse'
		),
		array(
			'name'		=> __( 'Chocolate to Coral', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',
			'slug'		=>  'chocolate-to-coral',
		),
		array(
			'name'		=> __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',
			'slug'		=> 'darkmagenta-to-darkorchid',
		),
		array(
			'name'		=> __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',
			'slug'		=> 'deepskyblue-to-dodgerblue',
		),
	)
);
Pré-definições de gradiente personalizadas no WordPress 5.4

Pré-definições de gradiente personalizadas no WordPress 5.4

Pré-definições de gradiente personalizadas

Pré-definições de gradiente personalizadas

Você pode desativar gradientes personalizados usando a opção de suporte temático de disable-custom-gradients:

add_theme_support( 'disable-custom-gradients' );

A funcionalidade de gradiente pode ser completamente removida, utilizando tanto os disable-custom-gradients os editor-gradient-presets:

add_theme_support( 'disable-custom-gradients' );
add_theme_support( 'editor-gradient-presets', array() );

Markup e mudanças de estilo no editor de blocos

O WordPress 5.4 introduz várias mudanças na estrutura do DOM que os desenvolvedores devem estar cientes.

Para uma visão detalhada sobre mudanças no DOM e CSS, veja Markup e mudanças relacionadas ao estilo no WordPress 5.4

Andaime de bloco

Com o novo pacote @wordpress/create-block Package for Block Scaffolding, os desenvolvedores têm uma nova maneira de gerar a estrutura de diretório para um plugin de editor de blocos. Esta estrutura tipicamente inclui index.php, index.js e style.css.
Os desenvolvedores de blocos podem agora simplesmente executar o seguinte comando:

$ npm init @wordpress/block block-name

Coleções de blocos

Coleções de blocos fornecem uma forma de agrupar visualmente coleções de blocos no inseridor do editor de blocos. As coleções são diferentes das categorias e fornecem uma forma adicional de agrupar blocos.
A nova API fornece uma nova função:

registerBlockCollection( namespace, { title, icon } );

Introduzida com oGutenberg 7.3 e agora incorporada no núcleo, a nova API permite aos programadores de temas e blocos organizarem melhor os blocos, facilitando aos utilizadores a descoberta e a adição de blocos ao conteúdo.

Variações de Bloco

A API de Variações de Blocos fornece um conjunto de funções que permite aos desenvolvedores de blocos adicionar/gerenciar/remover variações de blocos que os usuários podem escolher ao adicionar blocos ao conteúdo. O registro de uma nova variação é bastante simples (código JS):

wp.blocks.registerBlockVariation( 'core/heading', { 
	name: 'green-text', 
	title: 'Green Text', 
	description: 'This block has green text. It overrides the default description.',  
	attributes: { 
		content: 'Green Text', 
		textColor: 'vivid-green-cyan' 
	}, 
	icon: 'palmtree', 
	scope: [ 'inserter' ] 
} );
Variações de blocos de títulos

Variações de blocos de títulos

Para uma visão mais próxima na API de Variações de Bloco, consulte PR #20068.

Recursos adicionais do Editor de Blocos que vêm com o WordPress 5.4

Outras características notáveis incluídas no núcleo com o WordPress 5.4:

Alternar entre o modo Editar Seleccionar

Alternar entre o modo Editar Selecionar

Uma tabela com uma legenda no WordPress 5.4

Uma tabela com uma legenda no WordPress 5.4

Arrastar e soltar imagem em destaque

Arrastar e soltar imagem em destaque

Barra de ferramentas de bloco no celular

Barra de ferramentas de bloco no celular

Configurações de blocos de galeria

Configurações de blocos de galeria

Adicionar links para imagens em Media & Bloco de texto

Adicionar links para imagens em Media & Bloco de texto

Recursos e melhorias para desenvolvedores do WordPress

Os desenvolvedores devem se beneficiar de várias novas adições que virão com o WordPress 5.4.

As nossas alterações favoritas incluem o seguinte:

Cansado dos problemas do WordPress e de um host lento? Fornecemos suporte de classe mundial de especialistas em WordPress disponíveis 24 horas por dia, 7 dias por semana, e servidores de alta velocidade. Confira nossos planos

Um Widget de Calendário Semanticamente Correto e Novas Classes de CSS

A especificação HTML 5.1 mudou a forma como os elementos tfoot têm de ser usados nas tabelas. Antes do HTML 5.1 os elementos tfoot poderiam preceder o elemento tbody. O novo spec muda as coisas e agora o tfoot deve seguir o tbody.

Antigo widget de calendário

Antigo widget de calendário

Foi uma mudança há muito esperada considerando que a navegação é o elemento HTML mais apropriado para links de navegação em qualquer concurso, e também pode ajudar a melhorar a acessibilidade em leitores de tela. De acordo com a documentação do Mozilla:

Um documento pode ter vários elementos < nav>, por exemplo, um para navegação no site e outro para navegação intra-página. aria-labelledby pode ser usado em tal caso para promover a acessibilidade…

Os agentes do usuário, como leitores de tela direcionados a usuários deficientes, podem usar este elemento para determinar se devem omitir a renderização inicial do conteúdo apenas de navegação.

Além disso, as seguintes classes CSS foram introduzidas em get_calendar() para facilitar a segmentação:

O snippet abaixo mostra a nova estrutura HTML do calendário:

<div class="widget widget_calendar">
	<div class="widget-content">
		<div id="calendar_wrap" class="calendar_wrap">
			<table id="wp-calendar" class="wp-calendar-table">
				<caption>February 2020</caption>
				<thead>
					<tr><!-- Day names --></tr>
				</thead>
				<tbody>
					<!-- Calendar cells -->
				</tbody>
			</table>
			<nav aria-label="Previous and next months" class="wp-calendar-nav">
				<span class="wp-calendar-nav-prev"><a href="http://example.com/?m=201912">« Dec</a></span>
				<span class="pad"> </span>
				<span class="wp-calendar-nav-next"> </span>
			</nav>
		</div>
	</div>
</div>

Os desenvolvedores de temas podem querer mudar suas folhas de estilo de acordo.

Novo widget de calendário

Novo widget de calendário

Códigos curtos em PHP Scripts

O WordPress 5.4 introduz a função apply_shortcodes() como um apelido para do_shortcode(), que nos permite utilizar um atalho em um arquivo PHP.

Do ponto de vista semântico, podemos esperar ver o resultado das funções do_* simplesmente chamando a própria função. Mas esse não é o caso do código do_shortcode. Para imprimir a saída do atalho especificado, o do_shortcode tem de ser ecoado:

// Mostra o resultado do código de atalho
echo
 do_shortcode( '[shortcode]' . $text . '[/shortcode]' );

O WordPress 5.4 muda um pouco as coisas com a introdução de apply_shortcodes(), que funciona do mesmo modo que do_shortcode(), mas permite que os desenvolvedores construam códigos mais legíveis e semanticamente corretos:

// Mostra o resultado do código de atalho echo apply_shortcodes( '[shortcode]' . $text . '[/shortcode]' );

A partir do WordPress 5.4 RC 2, do_shortcode() não está planejado para ser depreciado porque é amplamente utilizado em plugins de terceiros.

Melhorias no manuseio de Favicon Handling no WordPress 5.4

Com o WordPress 5.4, os desenvolvedores de temas podem lidar com solicitações de favicons com muito mais flexibilidade e várias novas funções permitem gerenciar favicons da mesma forma que as funções relacionadas ao robots.txt. Sergey Biryukov explica:

Um pedido para favicon.ico deve ser tratado da mesma forma que nós tratamos robots.txt com do_robots():

Então, se um arquivo físico favicon.ico não é fornecido, aqui está como o WordPress lida com ele:

Uma mão-cheia de novas funções e ganchos complementam as funções/anelhetes relacionados com os robots.txt correspondentes:

Leia mais sobre o manejo de favores.

Novos ganchos para adicionar campos personalizados aos itens do menu

Com o WordPress 5.4, os desenvolvedores podem usar dois novos ganchos de ação para adicionar campos personalizados aos itens do menu.

O wp_nav_menu_item_item_custom_fields é acionado imediatamente antes de um item do menu de navegação ser adicionado ao editor do menu de administração. Veja o exemplo abaixo:

function kinsta_add_menu_item_custom_field() {
	echo '<p class="menu-item-custom-field">Hey! This is an example for Kinsta blog readers!</p>';
}
add_action( 'wp_nav_menu_item_custom_fields', 'kinsta_add_menu_item_custom_field' );
Campos personalizados nos itens do menu de navegação

Campos personalizados nos itens do menu de navegação

O novo gancho de ação suporta cinco parâmetros que você pode usar para afinar o comportamento do campo personalizado:

O wp_nav_menu_item_item_custom_fields_customize_template funciona da mesma forma que o wp_nav_menu_item_custom_fields, mas é acionado no final do modelo form-fields para os itens do menu de navegação no Customizer. A imagem abaixo mostra a seção Menus do Customizer no WordPress 5.4.

Campos personalizados nos itens do menu de navegação

Campos personalizados nos itens do menu de navegação

Mudanças adicionais para os desenvolvedores

Como instalar uma versão de desenvolvimento do WordPress

Se você gostaria de ter certeza que seus temas e plugins são totalmente compatíveis com o WordPress 5.4 ou se você está apenas curioso sobre novos recursos que vêm com a última versão do WordPress, você pode instalar a versão de desenvolvimento atual com poucos cliques.

Você tem duas maneiras de instalar uma versão do WordPress Beta/RC:

Se você decidir instalar o plugin Beta tester, você precisará primeiro configurar uma instalação regular do WordPress, seja em sua máquina local ou em seu ambiente de teste.

Assim que o seu site WordPress estiver instalado e funcionando, navegue até Plugins → Adicionar novo e procurar pelo plugin doWordPress Beta Tester.

O plugin fornece uma maneira rápida e fácil de testar o WordPress, permitindo instalar e/ou atualizar o Beta ou Release Candidate atual com o clique de um botão.

Instalar o plugin do WordPress Beta Tester

Instalar o plugin do WordPress Beta Tester

Então, instale e ative o plugin como de costume.

Navegue até Ferramentas → Beta Testing e marque a opção Bleeding edge nightlies e salve as alterações.

Depois disso, navegue até a tela do Painel → Updates e clique no botão Update Now.

Tela de Atualizações do WordPress

Tela de Atualizações do WordPress

O WordPress irá agora baixar e instalar o seguinte pacote:

https://wordpress.org/nightly-builds/wordpress-latest.zip

Uma vez concluída a instalação, você será redirecionado para a página temporária do WordPress About.

Progresso da atualização do WordPress

Progresso da atualização do WordPress

E é só isso. Agora você está pronto para executar seus testes nas versões WordPress Beta e RC.

Consulte a documentação oficial para mais informações sobre os testes do WordPress Beta.

As versões de desenvolvimento não se destinam a ser utilizadas na produção. Sinta-se à vontade para instalá-lasno seu ambiente de produção ou na sua máquina local, mas nunca as utilize no seu local de produção

Resumo

Com dez versões do plugin Gutenberg fundidas no núcleo, o WordPress 5.4 está principalmente focado no Editor de Blocos. Temos dois novos blocos, atalhos personalizados, melhor usabilidade e acessibilidade, e podemos esperar novos desenvolvimentos num futuro próximo.

Mas há ainda mais:

O novo widget de Estado de Saúde do Site

O novo widget de Estado de Saúde do Site

Agora é a tua vez. Qual é a sua opinião sobre o WordPress 5.4? Que mudanças e características você mais gosta? Diga-nos nos comentários!


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos