O WordPress 5.8 vai ser um lançamento importante. Além do incrível número de recursos, melhorias e correções de bugs, o WP 5.8 introduz uma nova forma de construir sites, trazendo os primeiros recursos que se enquadram no projeto mais amplo conhecido como Full Site Editing.

Além do Full Site Editing, o WordPress 5.8 traz toneladas de mudanças e melhorias em diversas áreas do CMS.

Os usuários do WordPress que não usam o plugin Gutenberg encontrarão recursos e melhorias provenientes de nove versões do Gutenberg ao todo (para um mergulho profundo em cada versão, veja Gutenberg 9.9, 10.0, 10.1, 10.2, 10.3, 10.4, 10.5, 10.6, 10.7).

Um novo recurso importante para os usuários sérios sobre o desempenho de seus sites é o suporte no formato WebP.

Os desenvolvedores certamente adorarão a remoção do IE11 da lista de navegadores suportados, o novo mecanismo de configuração e estilo de blocos baseado no theme.json, o sistema melhorado de registro de blocos baseado no block.json, e as muitas melhorias de API que virão com a segunda versão do WordPress de 2021.

Portanto, fique sentado porque será um longo conjunto de recursos e melhorias que pavimentam o caminho para novas e poderosas ferramentas de construção de sites que deverão ser lançadas nos próximos meses.

Important

Há tantas mudanças no WordPress 5.8. Para evitar qualquer risco de incorrer em conflitos inesperados com seu tema e plugins, recomendamos vivamente que você faça um backup do seu site e teste a nova versão em um ambiente de teste antes de atualizar seu site de produção (ao vivo).

Recursos do Full Site Editing no WordPress 5.8

A visão por trás do Full Site Editing é fornecer uma coleção de ferramentas e recursos que permitam aos usuários do WordPress construir um site inteiro usando blocos. Com o Full Site Editing, veremos muitos blocos disponíveis para criar qualquer elemento na página, desde menus de navegação até a marca do site, widgets de barra lateral, templates e muito mais.

Mesmo que o WordPress 5.8 introduza vários recursos que se enquadram no escopo do Full Site Editing (FSE), não devemos esperar ver um ambiente de construção de site totalmente visualizado. O FSE ainda é um trabalho em andamento, e o lançamento do WordPress 5.8 abre uma espécie de fase beta pública. De acordo com Josepha Haden Chomphosy:

O Full Site Editing é uma coleção de projetos e juntos eles representam uma grande mudança, indiscutivelmente demais para um único lançamento. O contexto mais importante a ser compartilhado é que não é o envio como a experiência completa e padrão para os usuários. Um dos comentários mais claros do processo de fusão da Fase Um foi que não houve tempo suficiente para que nossos extensores (agências, autores de temas, desenvolvedores de plugins, construtores de sites, etc.) se preparassem para as próximas mudanças.

Com isso em mente, este processo de fusão não será um interruptor de ligar/desligar. O foco agora não é uma experiência completa e matizada do usuário, mas mais um beta público aberto dentro do WordPress 5.8.

Portanto, não devemos esperar ver uma experiência FSE perfeita e completa neste momento. Em vez disso, veremos novos recursos sendo adicionadas e melhoradas com o tempo, começando logo a partir da versão 5.8. Pela mesma razão, podemos presumir que o WordPress 5.8 não terá um impacto dramático na forma como estamos acostumados a construir sites.

Na época deste escrito, os proprietários e administradores do site ainda têm que optar conscientemente pelo FSE instalando um tema de bloco, como o Twenty-Twenty One Blocks (a versão baseada em bloco do Twenty-Twenty One), e ativando o plugin Gutenberg.

 

O Full Site Editing engloba uma gama de subprojetos separados, incluindo editor do site, estilos globais, bloco query loop, bloco de navegação, templates, temas de blocos e muito mais. Mas o mais próximo da Edição de Sites que veremos no WordPress 5.8 é o Template Editing Mode e os blocos de temas correspondentes disponíveis para usar nesse modo, como veremos mais adiante neste artigo.

A seguir, vamos mergulhar em alguns recursos FSE fundidas no Core com o WordPress 5.8.

Template editing mode

O Template editing mode fornece uma maneira de criar templates de artigo/página usando blocos. É uma ótima maneira de reduzir a complexidade da construção do site, permitindo que os usuários aproveitem vários recursos de edição do site de fora da interface do editor do site enquanto se acostumam a trabalhar com blocos. Isto também é ótimo para usuários que não usam temas baseados em blocos, mas ainda assim procuram uma maneira fácil de criar e editar templates a partir da interface do editor de blocos.

Personalizar temas nunca foi tão fácil no WordPress antes. Agora você não precisa mais construir um child theme (tema filho) para criar seus templates personalizados. Com o WordPress 5.8, a Edição de Templates não está limitada a temas de bloqueio, mas também está disponível para você usar com temas clássicos, embora você tenha que optar por habilitá-los para temas clássicos.

O editor de modelos.

O editor de templates.

Para criar um novo template, basta habilitar o template editing mode na barra lateral de configurações. Um novo painel de Template está agora disponível para os usuários mudarem o modo de edição (veja a nota de lançamento do Gutenberg 10.5).

Painel de modelos no editor de blocos Sidebar.

Painel template no editor de blocos Sidebar.

A partir do painel template, você pode criar um novo template ou editar um template já existente.

Definição de um nome modelo.

Definição de um nome template.

Para criar um novo template, clique em Novo. Em seguida, digite um nome do template no modal e clique em Criar, e você está pronto para ir.

Modo de edição de modelos no WordPress 5.8.

Template editing mode no WordPress 5.8.

No template editing mode, você pode construir seus templates usando todos os blocos disponíveis, incluindo blocos FSE como Título do Site, Site Tagline, Login/out, e muitos mais.

Uma vez satisfeito com suas edições, você pode voltar ao modo Post Editing e salvar o template separadamente do conteúdo do artigo/página, como mostrado na imagem abaixo:

As opções Save Template (Salvar modelo).

As opções Save Template (Salvar template).

Os templates são armazenados em seu banco de dados WordPress como tipos de postagem personalizados nomeados wp_template. Isto não só permite que você edite um templateda interface do editor, mas também facilita a importação ou exportação à vontade. Você também pode usar um template em diferentes sites (no momento da redação, este recurso só está disponível se você ativar o plugin Gutenberg).

Exportação de gabaritos e peças de gabaritos.

Exportação de gabaritos e peças de gabaritos.

Info

Note que se você definir um template de bloco para uma página ou um artigo de blog, o template PHP regular não será mais usado para gerar a página. O template de bloco será usado em seu lugar.

O template editing mode ainda tem um pequeno buggy no momento desta redação, como relatado nesta chamada para testes e nesta experiência de Justin Tadlock.

Problema de alinhamento de largura total em Twenty Twenty-One classic theme

Problema de alinhamento de largura total em Twenty Twenty-One classic theme

Mas tudo o que é preciso é um pouco de paciência e esperar que as principais questões sejam resolvidas para entender completamente como o template editing mode mudará a maneira como você personaliza o visual e a sensação de seus sites.

Os usuários não precisarão mais das habilidades dos desenvolvedores para obter controle completo sobre o layout e a aparência geral do site.

A questão do alinhamento em largura total foi resolvida.

A questão do alinhamento em largura total foi resolvida.

O template editing mode estava inicialmente disponível tanto para temas de blocos quanto para temas clássicos. Após uma discussão cuidadosa no canal 5.8, foi decidido fazer com que o editor de templates optasse por temas clássicos e optasse por não editar os temas de blocos (veja também o número nº 32858).

De acordo com Carolina Nymark:

Inicialmente, o template editing mode estava habilitada para todos os temas. Os desenvolvedores de temas levantaram preocupações de que eles não poderiam atualizar todos os temas clássicos existentes para suportar este novo recurso. Com uma mudança tardia, o esquadrão de lançamento e a equipe de redação optaram por alterar a template editing mode para optar pela edição de temas clássicos.

Para optar por temas clássicos, agora os desenvolvedores devem adicionar suporte a temas:

add_theme_support( 'block-templates' );

Temas clássicos usando o theme.json pode optar por não participar removendo o suporte a temas:

remove_theme_support(  'block-templates' );

Para uma visão mais detalhada de como o template editing mode funciona no WordPress 5.8 e alguns exemplos úteis de uso, certifique-se de assistir a este vídeo de Anne McCarty:

 

Blocos de temas

Como mencionado anteriormente, o FSE não é um recurso único, mas um conjunto completo de recursos de construção do site não apenas relacionadas com o editor do site. O template editing mode é apenas um exemplo disso. Mas junto com a edição de templates, o WordPress 5.8 também traz muitos Blocos de temas que podem mostrar informações dinamicamente recuperadas do banco de dados. Alguns destes blocos também podem ser usados em contextos não-FSE (ver edição nº 28744).

Blocos completos do editor do site disponíveis em contextos não-FSE desde o WordPress 5.8.

Blocos completos do editor do site disponíveis em contextos não-FSE desde o WordPress 5.8.

Os blocos de temas trazem funcionalidades de etiquetas de template para temas clássicos, e você pode usá-los da mesma forma que os blocos normais. Por exemplo, você pode adicionar tags do artigo ou a imagem em destaque do artigo em qualquer parte do conteúdo do artigo ou do template. Para ter uma idéia do número de blocos de temas adicionados ao núcleo com o WordPress 5.8, basta digitar / postar no espaço reservado aos blocos:

Blocos temáticos sugeridos.

Blocos de temas sugeridos.

Um útil bloco de tema disponível com o WordPress 5.8 é o bloco Login/out, que fornece links para login e logout. Opcionalmente, ele pode exibir o formulário de login em vez de um link. Os administradores do site também podem personalizar o redirecionamento do alvo (ver PR #29766).

Login/out bloqueiam suas configurações no editor de blocos.

Login/out bloqueiam suas configurações no editor de blocos.

Para uma visão mais próxima dos blocos FSE, veja a edição “Enabling Full Site Editor blocks in classic themes” no Github.

O bloco query loop

Quantas vezes você já se viu em uma situação em que precisa exibir uma lista personalizada de postagens em blogs ou tipos de postagens personalizadas? Pense em produtos, eventos, bens imóveis… É claro que você tem toneladas de plugins para escolher, mas a capacidade de criar consultas altamente personalizadas muitas vezes requer habilidades do desenvolvedor para lidar com o Loop do WordPress.

Com a introdução do bloco query loop no WordPress Core, os proprietários e administradores do site podem criar listas de postagens e CPTs sem escrever código complexo ou contratar um desenvolvedor, pelo menos nos casos mais comuns de uso.

Então, o que faz o bloco query loop?

Em resumo, ele faz o mesmo trabalho que o WordPress Loop, mas no contexto visual do editor de blocos.

O bloco query loop realiza uma consulta com base nas configurações do usuário sobre o banco de dados do WordPress, percorre cada postagem recuperada e exibe os dados na página.

Após intenso desenvolvimento, este bloco atingiu sua estrutura atual e agora consiste em dois blocos aninhados: os blocos Query e Post Template..

Vista de lista de um bloco de consulta.

Vista da lista de um bloco query loop.

Sendo um recurso avançado, o bloco query loop requer algumas configurações.

Primeiro, você pode escolher entre diferentes padrões de blocos listados no Carrossel e Grid view. Depois de escolher seu padrão, basta clicar em Escolher, e o bloco query loop gerará sua lista personalizada de postagens.

Consulta de padrões de blocos de blocos em Grid view.

Consulta de padrões de blocos de blocos em Grid view.

Se você clicar em Start blank, você verá uma lista de quatro variações de blocos Core: Título e Data; Título e Excerto; Título, Data e Excerto; e Imagem, Data e Título (ver Oferecendo Padrões na Configuração do Bloco).

Variações de blocos de blocos de consulta.

Variações do bloco query loop.

Uma vez no lugar, selecionando o bloco query loop exibirá as configurações do bloco lateral, onde você pode construir sua consulta. Você pode herdar a consulta da URL ou personalizar os argumentos da consulta: o tipo de postagens a serem incluídas na lista, a ordem de exibição e se as postagens devem ou não ser pegajosas.

Você também pode definir vários filtros, escolhendo entre categorias, autores e palavras-chave.

O bloco de consulta com ajustes da barra lateral.

O bloco query loop com ajustes da barra lateral.

Além disso, um botão Exibir configurações na barra de ferramentas do bloco fornece mais configurações para controlar o número de itens por página, o offset e o número máximo de páginas a mostrar.

Exibir configurações de blocos de consulta.

Exibir configurações do bloco query loop.

Sim, o bloco query loop é uma ferramenta poderosa, permitindo que os proprietários de sites criem listas altamente personalizadas de postes e tipos de postes personalizados.

Mas se você percorrer os parâmetros da classe WP_Query, é claro que o nível de personalização possível usando o código é muito mais granular do que o que é possível usando o bloco query loop.

No entanto, é de fato uma ferramenta valiosa e flexível que se presta a muitos casos de uso e, muito provavelmente, veremos mais aperfeiçoamentos no futuro.

Info

O bloco query loop e Bloco Post Template foram renomeados várias vezes nas últimas semanas. O nome final foi alcançado com Gutenberg 10.9.

Persistent List View do Post Editor

Outro recurso do FSE estendida ao Post Editor é a Persistent List View. Antes do WordPress 5.8 (e Gutenberg 10.7), a List View era exibida em um popover. Ao mover o foco para fora do popover, a lista desapareceria.

Por outro lado, o Editor do Site exibiu a List View em uma barra lateral contendo toda a árvore de blocos.

Com o WordPress 5.8, a visualização de lista é agora exibida em uma barra lateral no Post Editor, permitindo que os usuários naveguem na árvore de blocos mais rápida e precisa.

.

A barra lateral de visualização da lista no WordPress 5.8.

A barra lateral de visualização da lista no WordPress 5.8.

Clicando em um item da List View destaca o item da lista e move o foco para o bloco correspondente na tela do Post Editor. Além disso, se você pairar sobre os itens na List View, tanto o item como o bloco correspondente no Post Editor são realçados.

Passando por cima dos itens da Lista View.

Passando por cima dos itens da Lista View.

Por último, a adição de uma âncora a um bloco também aparecerá ao lado do item correspondente na visualização da lista.

Adicionando uma âncora aos blocos no WordPress 5.8.

Adicionando uma âncora aos blocos no WordPress 5.8.

Com todos esses aprimoramentos na visualização de lista, a navegação em documentos complexos deve ser muito mais fácil.

Editor de Widgets Baseados em Blocos e Bloco de Widgets no Customizer

O editor de widgets baseado em blocos é um amplo projeto que visa trazer a interface do editor de blocos para os widgets de temas clássicos.

O novo editor de widgets oferece muitas vantagens para a grande maioria ainda usando temas clássicos. Ao mesmo tempo, ele permite que eles se familiarizem com a interface de bloco antes que ela se torne padrão para todos os usuários do WordPress.

Modal de blocos de widgets.

Modal de blocos de widgets.

Como Anne McCarty aponta, os widgets baseados em blocos oferecem várias vantagens, incluindo as seguintes:

Andrei Draganescu também enfatiza as vantagens que podemos obter ao sermos capazes de editar widgets a partir de uma interface baseada em blocos:

O principal benefício de atualizar a funcionalidade dos widgets para blocos vem da capacidade de editar diretamente os widgets usando a interação familiar de blocos que você usa ao editar uma página ou postar em seu site. Ser capaz de usar blocos abre toneladas de novas possibilidades criativas, desde mini layouts sem código até o acesso à vasta biblioteca de blocos centrais e de terceiros para criar conteúdo.

Você não precisa se preocupar que seus widgets possam parar de trabalhar com o WordPress 5.8 porque a comunidade tem trabalhado duro para garantir a compatibilidade com versões anteriores para que “os widgets existentes e os de terceiros continuem a funcionar e possam ser usados junto com os blocos” (ver Editor de widgets baseados em blocos no WordPress 5.8).

Mas novamente, para evitar qualquer problema de compatibilidade em sua instalação WordPress existente, não se esqueça de testar a nova versão em um ambiente de teste antes de atualizar seu site ao vivo.

Para aqueles que optarem por não usar o editor de widgets baseado em blocos agora mesmo, ainda é possível restaurar a tela clássica de widgets de três maneiras diferentes:

  1. Você pode instalar o plugin oficial Classic Widgets, que restaura a interface anterior da tela dos widgets. O plugin “será suportado e mantido até pelo menos 2022, ou pelo tempo que for necessário”.
  2. Os desenvolvedores de temas podem desativar o editor de widgets baseados em blocos removendo o suporte a temas, como de costume::
    remove_theme_support( 'widgets-block-editor' );
  3. Um novo filtro de use_widgets_block_editor também pode ser usado:
    add_filter( 'use_widgets_block_editor', '__return_false' );

Veja também Restaurando o clássico editor de widgets em Visão Geral do Editor de Blocos de Widgets.

Bloco Widgets no Customizer

Como parte do mesmo projeto, o WordPress 5.8 também traz widgets de bloco no customizador.

Bloco de widgets no customizador.

Bloco de widgets no customizador.

Adicionar um widget baseado em blocos no customizador é bastante simples. Você pode abrir o painel de inserção de widget clicando no ícone mais no canto superior direito do painel de widgets.

O inseridor de widgets personalizado.

O inseridor de widgets personalizado.

Você também pode lançar o quick inserter a partir da parte inferior do painel de widgets, como mostrado na imagem a seguir.

O inseridor rápido de widgets personalizados.

O inseridor rápido de widgets personalizados.

No momento desta redação, a nova interface de edição de widgets ainda requer melhorias e correções de bugs, mas as possibilidades de personalização são praticamente ilimitadas.

Basicamente, a partir do WordPress 5.8, você terá o poder do editor de blocos no customizador, e poderá construir barras laterais altamente personalizadas, sem complicações.

Mostrar mais configurações.

Mostrar mais configurações.

O editor de widgets baseado em blocos dev-note fornece uma visão mais aprofundada do editor de widgets baseado em blocos, com exemplos e recursos para desenvolvedores.

Recursos e melhorias do Block Editor

Além da primeira implementação do FSE, o WordPress 5.8 também traz novos recursos e melhorias a vários elementos do editor de blocos, que melhoram significativamente a experiência geral de edição.

Estas mudanças incluem:

Melhorias na mídia e blocos de texto

A transformação de um bloco em um bloco de colunas já é possível há algum tempo. No entanto, todos os blocos transformados em blocos de colunas com uma única coluna. Isto poderia levar a resultados subótimos para o bloco de mídia e texto, para o qual uma única coluna geralmente não é adequada.

Transformações e estilos de mídia e de bloco de texto.

Transformações e estilos de mídia e de bloco de texto.

A partir do WordPress 5.8 (e Gutenberg 10.2), a transformação do bloco de mídia e texto em um bloco de colunas adiciona automaticamente duas colunas: uma para a imagem e outra para o texto.

Duas colunas transformadas para mídia e texto.

Duas colunas transformadas para mídia e texto.

Melhorias em blocos Reutilizáveis

Os blocos reutilizáveis permitem ao usuário salvar um bloco ou um grupo de blocos para reutilizar posteriormente em qualquer artigo ou página de um site. Isto é útil principalmente para usuários que incluem repetidamente o mesmo bloco ou grupo de blocos em diferentes artigos/páginas.

Um modal para o fluxo de criação de blocos reutilizáveis.

Um modal para o fluxo de criação de blocos reutilizáveis.

Com o WordPress 5.8, os blocos reutilizáveis são visualmente mais claros, tornando-os mais fáceis de serem gerenciados pelos usuários do WordPress.

Um bloco reutilizável no WordPress 5.8.

Um bloco reutilizável no WordPress 5.8.

Aqui está uma lista rápida de melhorias de blocos reutilizáveis que os usuários encontrarão após atualizar seus sites para o WordPress 5.8:

Esboços de blocos reutilizáveis.

Esboços de blocos reutilizáveis.

Barras de ferramentas de blocos normalizadas

Várias barras de ferramentas de blocos foram rearranjadas para fornecer uma IU consistente entre blocos e melhorar a experiência do usuário. Agora, os controles da barra de ferramentas são agrupados seguindo a ordem semântica “meta, nível de bloco, em linha”.

Barra de ferramentas do bloco de cabeçotes.

Barra de ferramentas do bloco de cabeçotes.

Desde Gutenberg 10.1 e Gutenberg 10.3, todo um conjunto de barras de ferramentas de blocos foi normalizado. Estas incluem uma imagem, botão, botões, lista, cabeçalho, parágrafo, citação, áudio, arquivo, mídia e texto, vídeo e muito mais.

De acordo com Matias Ventura:

Os agrupamentos semânticos que temos na barra de ferramentas – meta, nível de bloco, em linha – também devem ter uma representação visual com as bordas. Neste momento, controles separados de nível de bloco têm representações diferentes, incluindo casos como Navegação, onde cada um tem fronteiras.

Barra de ferramentas de blocos de imagem normalizada.

Barra de ferramentas de blocos de imagem normalizada.

Assim, desde o WordPress 5.8, os grupos da barra de ferramentas de bloco controlam em segmentos cercados por bordas. Além disso, a barra de ferramentas de bloco

A imagem abaixo compara a barra de ferramentas de blocos de imagem no WordPress 5.7 e 5.8:

Barra de ferramentas de blocos de imagem no WordPress 5.7 vs WordPress 5.8.

Barra de ferramentas de blocos de imagem no WordPress 5.7 vs WordPress 5.8.

Melhorias na barra de ferramentas superior

Com o modo da barra de ferramentas superior ativado nas versões anteriores do WordPress, a barra de ferramentas superior e a barra de ferramentas de bloco eram exibidas lado a lado, como mostrado na imagem a seguir:

A barra de ferramentas superior em telas largas no WordPress 5.7.

A barra de ferramentas superior em telas largas no WordPress 5.7.

Com o WordPress 5.8, permitir a visualização da barra de ferramentas superior fixará a barra de ferramentas do bloco no topo do editor, logo abaixo da barra de ferramentas superior. Isto acontece independentemente da largura do navegador e deve melhorar significativamente a experiência do usuário.

A barra de ferramentas superior em telas largas no WordPress 5.8.

A barra de ferramentas superior em telas largas no WordPress 5.8.

Esta melhoria também traz mudanças para os desenvolvedores, pois unifica as APIs da barra de ferramentas sob o componente <BlockTools />. (ver PR #31134).

PDFs incorporados

Quando um arquivo PDF é adicionado ao documento através do bloco de arquivos, uma nova alavanca lateral permite ativar/desativar uma versão PDF incorporada (ver PR #30857).

Um PDF embutido no WordPress 5.8.

Um PDF embutido no WordPress 5.8.

Você pode arrastar o arquivo diretamente para a tela do editor ou simplesmente selecioná-lo da biblioteca. Também é possível ajustar manualmente a altura do visualizador de PDF ou usando o controle da barra lateral.

Todos os principais navegadores da web suportam o visualizador de PDF, exceto os navegadores móveis.

Suporte de blocos Duotone

Um dos recursos mais interessantes fundidas no Core com o WordPress 5.8 é o filtro duotone, introduzido pela primeira vez com o Gutenberg 10.6.

A nova ferramenta de design duotone em um bloco de imagem.

A nova ferramenta de design duotone em um bloco de imagem.

Disponível como um recurso de “suporte de blocos”, o filtro de dois tons é habilitado por padrão na imagem central e nos blocos de cobertura. No bloco de cobertura, no entanto, não funciona com fundos fixos.

O novo colhedor duotone no WordPress 5.8.

O novo colhedor duotone no WordPress 5.8.

As barras de ferramentas de imagem e de blocos de cobertura agora exibem um controle de filtro Apply duotone mostrando um seletor duotone com muitas predefinições para escolher.

Dois subcontroles permitem a personalização de sombras e destaques separadamente. O efeito é aplicado com um filtro SVG escondido com estilos em linha e aplicado usando um nome de classe específico.

Inspeção do filtro SVG duotone em DevTools cromados.

Inspeção do filtro SVG duotone no Chrome DevTools.

A nova ferramenta vem em par com uma nova propriedade color.__experimentalDuotone, permitindo aos desenvolvedores adicionar o filtro duotone aos blocos ou partes de blocos em seu arquivo block.json (mais sobre isso em referência a objetos coloridos):

supports: {
	color: {
		__experimentalDuotone: '> .duotone-img, > .duotone-video',
		background: false,
		text: false
	}
}

Quando um bloco declara suporte para color.__experimentalDuotone, um atributo de style pode ser usado para definir cores padrão personalizadas:

attributes: {
	style: {
		type: 'object',
		default: {
			color: {
				duotone: [
					'#FFF',
					'#000
				]
			}
		}
	}
}

Abaixo você pode ver a mesma imagem com dois efeitos duotônicos diferentes aplicados:

Filtro de cor Duotone aplicado sobre uma imagem.

Filtro de cor Duotone aplicado sobre uma imagem.

Um filtro de cor diferente de dois tons aplicado sobre uma imagem.

Um filtro de cor diferente de dois tons aplicado sobre uma imagem.

Os desenvolvedores podem definir predefinições duotônicas no arquivo theme.json (ver próxima seção), como mostrado no seguinte trecho:

{
"version": 1,
"settings": {
	"color": {
		"duotone": [
			{
				"colors": [ "#000", "#7f7f7f" ],
				"slug": "black-and-white",
				"name": "dark-grayscale"
			}
		],
	...

Você pode ler mais sobre filtros Duotone em Colorir suas imagens com filtros Duotone.

Cores e bordas no bloco da tabela

O WordPress 5.8 também traz um par de melhorias ao bloco da tabela, incluindo um melhor controle sobre o fundo da tabela e as cores do primeiro plano.

Bloco de cores da tabela melhorada.

Bloco de cores da tabela melhorada.

Outro acréscimo ao bloco da tabela é o suporte do bloco de borda, que dá aos usuários a capacidade de controlar a cor, o estilo e a largura da borda.

Se o tema ativo suportar o novo recurso, um novo painel de ajustes de borda fornece três novos controles para personalizações do usuário.

Controles de blocos de fronteira em WordPress 5.8 e TT1 Blocos.

Controles de blocos de fronteira em WordPress 5.8 e TT1 Blocos.

Os desenvolvedores podem adicionar suporte de blocos de fronteira a seus temas, adicionando o seguinte código ao arquivo theme.json:

"border": {
	"customColor": true,
	"customStyle": true,
	"customWidth": true
}

Melhorias no block inserter

No WordPress 5.8, o block inserter foi melhorado com várias adições (PR #26938 e #21080):

Pressionar a seta para cima e para baixo move o foco da linha.

Pressionar a seta para cima e para baixo move o foco da linha.

1. Navegação de teclado bidimensional no block inserter. Agora podemos navegar entre blocos de forma mais precisa e intuitiva.

2. Uma nova categoria “Tema” para peças e variações do template agora aparece no inseridor no Full Site Editing (ver PR #30020).

3. Agora são permitidas múltiplas palavras no casador de frases autocompletas (ver PR #29939).

Melhorias adicionais no editor de blocos

O WordPress 5.8 traz toneladas de pequenas e médias mudanças adicionais que valem algumas linhas aqui. Entre essas melhorias, citaríamos as seguintes:

Suporte drag and drop em blocos de cobertura

Agora você pode arrastar e soltar imagens da sua área de trabalho para substituir o fundo de um bloco de cobertura (ver Gutenberg 10.3 e PR #29813).

Imagens de fundo de arrastar e soltar no bloco de cobertura.

Imagens de fundo de arrastar e soltar no bloco de cobertura.

Melhorias na interface de publicação

Desde o WordPress 5.8, a IU de publicação mostra o ícone e o título do site para torná-lo mais claro onde você vai publicar seus artigos ou páginas (Gutenberg 10.4).

Publicação UI no WordPress 5.7.

Publicação UI no WordPress 5.7.

Publicação UI no WordPress 5.8.

Publicação UI no WordPress 5.8.

Este aprimoramento é benéfico se você estiver trabalhando em modo tela cheia ou em dispositivos móveis.

Configurações e estilos de bloco com theme.json

Com o WordPress 5.8, o arquivo theme.json torna-se “um ponto central de configuração”, fornecendo uma nova maneira para os desenvolvedores de temas personalizarem as configurações e estilos do editor.

Usando um arquivo theme.json, os temas podem definir predefinições personalizadas e/ou adicionar suporte para novos recursos, tais como duotom e bordas de tabela (veja Configurações e Estilos Globais).

De acordo com André Maneiro:

Este novo mecanismo visa assumir e consolidar todas as várias chamadas de add_theme_support que anteriormente eram necessárias para controlar o editor.

Por exemplo, você pode definir globalmente uma pré-configuração personalizada de duótons com o seguinte código:

{
	"version": 1,
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [ "#000", "#0FF" ],
					"slug": "black-cyan",
					"name": "Black Cyan"
				}
			],

Isto sobregravaria as predefinições padrão, e você verá apenas uma opção duotone:

Pré-definição personalizada de duótons em theme.json.

Pré-definição personalizada de duótons em theme.json.

O novo mecanismo fornece uma maneira de controlar as configurações globalmente ou por bloco. Por exemplo, você pode adicionar um tamanho de fonte personalizado de 12px globalmente, adicionando o seguinte preset ao seu arquivo theme.json:

{
	"version": 1,
	"settings": {
		"typography": {
			"customLineHeight": true,
			"fontSizes": [
				{
					"slug": "extra-extra-small",
					"size": "12px",
					"name": "Extra extra small"
				},
				{...}

Isto resulta em um novo tamanho de fonte disponível para os usuários utilizarem com qualquer texto em seu conteúdo.

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

Um tamanho de fonte personalizado definido globalmente em theme.json.

Um tamanho de fonte personalizado definido globalmente em theme.json.

Se você quiser apenas personalizar o bloco de parágrafos, seu código será ligeiramente diferente:

{
	"version": 1,
	"settings": {
		"blocks": {
			"core/paragraph": {
				"typography": {
					"fontSizes": [
						{
							"slug": "extra-extra-small",
							"size": "12px",
							"name": "Extra extra small"
						},
						{
							"slug": "extra-small",
							"size": "16px",
							"name": "Extra small"
						},
						{
							"slug": "small",
							"size": "18px",
							"name": "Small"
						},
						{
							"slug": "normal",
							"size": "20px",
							"name": "Normal"
						},
						{
							"slug": "large",
							"size": "24px",
							"name": "Large"
						}
					]
				}
			}
		}
	}
}

É isso aí! Você acabou de definir suas predefinições de tamanho de fonte personalizadas para o bloco de parágrafos.

Um bloco de parágrafos com predefinições personalizadas de tamanho de fonte.

Um bloco de parágrafos com predefinições personalizadas de tamanho de fonte.

Os blocos principais foram atualizados para seguir o novo mecanismo, enquanto os blocos de terceiros podem se adaptar ao novo mecanismo usando o Hook React useSetting (leia mais sobre esta função na nota de desenvolvimento e na documentação API):

const isEnabled = useSetting( 'spacing.margin' );
Info

The settings declared in theme.json will take precedence over settings declared via add_theme_support.

O novo mecanismo baseado no arquivo theme.json não se aplica apenas a configurações de blocos. Na verdade, a partir do WordPress 5.8, não será mais necessário criar estilos de editor e questioná-los. Será suficiente declarar predefinições dentro do arquivo theme.json; o mecanismo gerará as classes e as inquirirá automaticamente tanto para o editor quanto para o frontend.

O motor também irá gerar as correspondentes propriedades personalizadas do CSS.

No exemplo anterior, estabelecemos cinco predefinições de fontSizes para o bloco de parágrafos. Para essas predefinições, serão geradas as seguintes propriedades personalizadas do CSS:

p {
	--wp--preset--font-size--extra-extra-small: 12px;
	--wp--preset--font-size--extra-small: 16px;
	--wp--preset--font-size--small: 18px;
	--wp--preset--font-size--normal: 20px;
	--wp--preset--font-size--large: 24px;
}

Uma vez definido o tamanho da fonte do parágrafo em seu arquivo theme.json, o elemento p correspondente toma a classe has-{preset-slug}-{preset-category}.

Isto significa que um parágrafo com um tamanho de fonte extra-extra-small receberá a classe has-extra-extra-small-font-size:

<p class="has-extra-extra-small-font-size">Lorem ipsum dolor...</p>

E aqui está o bloco de declaração do CSS:

p.has-extra-extra-small-font-size {
	font-size: var(--wp--preset--font-size--extra-extra-small) !important;
}

Para uma visão mais próxima do cenário e estilos com o theme.json, certifique-se de verificar a nota de desenvolvimento e a documentação API.

Verifique também o chamado FSE de Anne McCarty para testes para uma leitura mais útil e um desafio emocionante para os desenvolvedores que querem explorar os recursos do novo tema.json.

Melhorias do API do bloco

Os aprimoramentos da API do bloco que vêm com o WordPress 5.8 merecem atenção especial por parte dos desenvolvedores de plugins.

O uso do arquivo block.json é agora encorajado como a forma canônica de registrar os tipos de blocos e oferece várias vantagens:

Mudanças na função register_block_type

Desde o WordPress 5.8, a função register_block_type foi aprimorada para ler metadados do arquivo block.json. Agora, o primeiro parâmetro aceita o caminho para a pasta onde se encontra o arquivo block.json.

A função pode ser usada como mostrado no exemplo a seguir:

function create_custom_block_init() {
	register_block_type( __DIR__ );
}
add_action( 'init', 'create_custom_block_init' );

Ele devolve o tipo de bloco registrado ou false em caso de falha.

Como você pode notar, a função register_block_type agora é usada da mesma forma que a função register_block_type_from_metadata que anteriormente era a única função disponível para registrar um tipo de bloco lendo os metadados do arquivo block.json. Como explicado por Greg Ziółkowski:

Decidimos consolidar a funcionalidade pré-existente disponível com o método register_block_type_from_metadata em register_block_type para evitar alguma confusão que ele criou. Ainda é possível usar ambas as funções, mas planejamos usar apenas a versão mais curta nos documentos e ferramentas oficiais a partir de agora.

Uma vez registrado o bloco no servidor, só é necessário registrar as configurações no cliente usando o mesmo nome de bloco em seu arquivo index.js.

Para uma visão mais aprofundada dos aprimoramentos do bloco API introduzidos pelo WordPress 5.8, certifique-se de verificar a nota de desenvolvimento por Greg Ziółkowski.

Suporte WebP no WordPress 5.8

Aqui em Kinsta, estamos obcecados com a velocidade do site e o desempenho do WordPress. É por isso que o suporte ao formato WebP no WordPress 5.8 é uma notícia tão excitante para nós.

Considerado um formato da próxima geração, o WebP é um formato de imagem desenvolvido pelo Google que oferece “melhor compressão do que PNG ou JPEG, o que significa downloads mais rápidos e menor consumo de dados”.

O Google Lighthouse sugere o uso de formatos de imagem de próxima geração.

O Google Lighthouse sugere o uso de formatos de imagem de próxima geração.

De acordo com o Google:

WebP é um formato moderno de imagem que fornece compressão superior sem perdas e com perdas para imagens na web. Usando WebP, webmasters e desenvolvedores web podem criar imagens menores e mais ricas que tornam a web mais rápida.

As imagens sem perdas da WebP são 26% menores em tamanho em comparação com as PNGs. As imagens sem perdas WebP são 25-34% menores do que imagens JPEG comparáveis com índice de qualidade SSIM equivalente.

A partir do WordPress 5.8, você poderá usar o formato de imagem WebP da mesma forma que os formatos JPEG, PNG, e GIF. Basta enviar suas imagens para sua Biblioteca de Mídia e incluí-las em seu conteúdo.

Em um artigo anterior, analisamos em profundidade o formato WebP e as ferramentas disponíveis para utilizá-lo no WordPress. Agora, devido ao suporte a imagens WebP em WordPress 5.8, as coisas podem mudar um pouco. Como o formato WebP é suportado fora da caixa, você não precisa instalar plugins de terceiros para carregar imagens WebP no WordPress, pelo menos nos casos mais comuns de uso.

Note que, mesmo que agora você possa carregar suas imagens WebP para o WordPress usando a Biblioteca de Mídia, o WordPress não suporta a conversão automática de imagens para o formato WebP. Para ativar esse recurso em seu site, você precisará de um plugin WebP WordPress de terceiros.

Como usar imagens WebP no WordPress

Você pode converter suas imagens para WebP de muitas maneiras diferentes:

Exportar imagem como WebP no GIMP.

Exportar imagem como WebP no GIMP.

Se você optar por uma ferramenta de linha de comando, você pode codificar e decodificar suas imagens usando utilitários cwebp e dwebp. Por exemplo, o seguinte comando executa uma conversão básica de JPEG para WebP:

cwebp [options] original_image.jpg -o compressed_image.webp

Você também pode fazer uma conversão em massa de suas imagens usando Bash e cwebp (exemplo de Jeremy Wagner):

find ./ -type f -name '*.png' -exec sh -c 'cwebp -q 75 $1 -o "${1%.png}.webp"' _ {} \;

O comando acima converte todas as imagens .png para o formato .webp com um fator de compressão de 75.

Comparação entre o fator de compressão e os tamanhos dos arquivos.

Comparação entre o fator de compressão e os tamanhos dos arquivos.

Uma vez que você tenha suas imagens WebP, você pode simplesmente carregá-las usando a Biblioteca de Mídia WordPress. Abaixo você pode ver uma imagem JPEG de 127 KB antes da conversão na Biblioteca de Mídia:

O tamanho do arquivo comprimido JPEG é de 127 KB.

O tamanho do arquivo comprimido JPEG é de 127 KB.

O tamanho da imagem comprimida do WebP é 42% menor que a imagem original JPEG!

A mesma imagem no formato WebP é de 74 KB.

A mesma imagem no formato WebP é de 74 KB.

Por último, as imagens WebP têm os mesmos recursos de edição das imagens JPEG, PNG e GIF. Você pode recortar, girar, virar e escalar as imagens e aplicar mudanças nos tamanhos de imagem da sua escolha.

Caveats About WebP em WordPress 5.8

De acordo com Adam Silverstein:

As imagens WebP suportam compressão com e sem perdas, assim como um formato animado e suporte para imagens transparentes. No WordPress, o formato sem perdas do WebP só é suportado quando o servidor de hospedagem usa Imagick (a biblioteca PHP) até que a LibGD acrescente suporte. Além disso, os formatos animados e alfa ainda não são suportados para imagens redimensionadas (quando você carrega imagens nestes formatos são criadas imagens com perdas).

Se seu web host não suporta imagens WebP, você verá uma mensagem de erro ao tentar carregá-las. Se você não tiver certeza se seu web host suporta a biblioteca Imagick, a guia Info da ferramenta Site Health inclui um campo da biblioteca Imagick que fornece essa informação.

Kinsta apóia a biblioteca Imagick.

Kinsta suporta a biblioteca Imagick.

Com suporte WebP, o WordPress 5.8 também introduz dois campos adicionais à seção de Manuseio de Mídia no Site Health: Versão Imagick e formatos de arquivo compatíveis com ImageMagick.

Campo da versão ImageMagick no site Heath.

Campo da versão ImageMagick no site Heath.

Se o WebP não estiver listado entre os tipos de arquivos suportados, você precisará entrar em contato com seu web host para obter suporte.

A nota de desenvolvimento fornece informações adicionais sobre suporte WebP no WordPress 5.8, FAQs úteis e outros recursos.

Se você estiver interessado na otimização de imagens, você também pode gostar dos seguintes tutoriais:

Recursos adicionais para os desenvolvedores

Você encontrará dezenas de recursos interessantes para desenvolvedores no WordPress 5.8. Neste artigo, prestamos mais atenção àquelas que devem ter o impacto mais significativo em seu trabalho de desenvolvimento. Mas há de fato muitos recursos novos que merecem atenção, incluindo as seguintes:

Block supports API

O WordPress 5.8 adiciona novas bandeiras de suporte a blocos, permitindo aos desenvolvedores personalizar os blocos registrados com os últimos recursos de blocos.

Além do suporte experimental em bloco de dois tons mencionado anteriormente (color._experimentalDuotone), o WordPress 5.8 também adiciona suporte para link color. Para aproveitar este recurso, basta adicionar a seguinte bandeira aos metadados do seu bloco:

supports: {
	color: {
		link: true;
	}
}

Você pode definir valores padrão usando atributos, como mostrado no exemplo a seguir, ou definir suas predefinições no theme.json:

attributes: {
	style: {
		type: 'object',
		default: {
			color: {
				link: '#FF0000',
			}
		}

As mudanças adicionais de API do bloco incluem:

Você pode ler mais sobre Block Supports API em WordPress 5.8 em Block supports API updates dev-note.

Para uma visão mais detalhada de como utilizar o Block Supports API, consulte a documentação oficial do Block Supports API.

Abas personalizadas da saúde do site

Dois novos hooks agora permitem que os desenvolvedores adicionem suas abas personalizadas à interface do Site Health e personalizem as telas disponíveis.

O filtro site_health_navigation_tabs é um conjunto associativo de identificações e rótulos para registrar uma nova guia na tela de saúde do site. Você pode usar o filtro adicionando o seguinte código de exemplo ao arquivo de funções do seu tema ou plugin personalizado:

function kinsta_site_health_navigation_tabs( $tabs ) {
	$tabs['kinsta-site-health-tab'] = esc_html_x( 'Kinsta', 'Site Health', 'text-domain' );

	return $tabs;
}
add_filter( 'site_health_navigation_tabs', 'kinsta_site_health_navigation_tabs' );

A imagem abaixo mostra a nova aba Saúde do Site:

Uma aba personalizada adicionada ao menu de navegação Site Health.

Uma aba personalizada adicionada ao menu de navegação Site Health.

Graças ao filtro site_health_navigation_tabs também é possível reordenar abas ou remover um ou mais itens.

A ação site_health_tab_content aciona quando um usuário visita a tela de Saúde do Site, exceto pela tela de Status padrão. Você pode usar este hook como mostrado no seguinte trecho (exemplo da nota do dev):

function kinsta_site_health_tab_content( $tab ) {
	// Return if this is not your tab.
	if ( 'kinsta-site-health-tab' !== $tab ) {
		return;
	}

	// Include the interface, kept in a separate file just to differentiate code from views.
	include trailingslashit( plugin_dir_path( __FILE__ ) ) . 'views/kinsta-site-health-tab.php';
}
add_action( 'site_health_tab_content', 'kinsta_site_health_tab_content' );

Primeiro, ele detecta se a aba atual é sua aba personalizada, depois carrega o conteúdo da sua tela Site Health a partir de um arquivo .php. A ação site_health_tab_content também permite aos desenvolvedores estender a aba Info padrão adicionando informações específicas a seus plugins ou temas.

Mudanças na API do editor de bloco para suportar múltiplas telas de administração

Com o WordPress 5.8, o editor de artigos não é mais a única tela de administração que utiliza o editor de blocos (a tela de widgets é um exemplo).

Os colaboradores principais encontraram vários hooks definidos no servidor, dependendo do objeto $post. Este objeto não está presente nas telas de edição, widgets e navegação do site. Seguindo adiante, vários filtros foram depreciados e substituídos por substituições sensíveis ao contexto.

Além disso, uma nova classe WP_Block_Editor_Context representando o contexto atual do editor de blocos e vários métodos foi introduzida.

Estas mudanças irão melhorar estas telas com novas capacidades e permitir que os desenvolvedores adicionem suas personalizações.

Para uma lista abrangente de mudanças de API do Block Editor relacionadas às telas administrativas, veja a nota de desenvolvimento de Greg Ziółkowski.

Características adicionais e melhorias

Há tantas novidades e mudanças para os desenvolvedores trazidas pelo WordPress 5.8 que nos seria impossível mencioná-las todas neste artigo. Mas nós coletamos uma lista de notas dedicadas não cobertas aqui para sua leitura posterior:

WordPress 5.8 apresenta a primeira implementação do Full Site Editing 🎁 Curioso sobre o futuro do WordPress? Não perca nossa visão aprofundada das principais recursos e mudanças que virão com WordPress 5.8 🚀Click to Tweet

Resumo

O WordPress 5.8 marca um marco no caminho para o Full Site Editing. Mas a segunda versão do WordPress do ano traz muito mais do que o FSE. Usuários e desenvolvedores encontrarão toneladas de melhorias para o editor de blocos, um novo mecanismo de tema.json, uma API de blocos mais poderosa, suporte ao formato de imagem WebP, e muito mais.

Ficamos particularmente impressionados com as melhorias, tanto pequenas quanto grandes, para o editor do bloco e sua interface de usuário. Adoramos a melhor navegabilidade entre blocos, a barra de ferramentas de blocos renovada, a clareza enriquecida da interface e as melhorias em vários blocos.

Estas pequenas mudanças melhoram pouco a pouco a experiência de edição e, sem quase nos darmos conta, nos encontramos usando um software melhor e mais robusto. Isso é WordPress!

A partir de agora! O que você pensa sobre o Full Site Editing? E quais são suas mudanças favoritas com o WordPress 5.8?


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 28 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ê.