O WordPress 5.8 “Tatum” está aqui e é um lançamento memorável. 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 (Edição completa do site).
Além do Full Site Editing (Edição completa do site), 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.
Recursos do Full Site Editing (Edição completa do site) 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 espere ver um ambiente de construção de site totalmente visual, 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, o WordPress 5.8 não apresenta 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 que mais se aproxima da Edição de Sites no WordPress 5.8 é o Modo de Edição de Templates 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.
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).
A partir do painel template, você pode criar um novo template ou editar um template já existente.
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.
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:
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).
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.
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.
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).
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 /post no espaço reservado aos blocos:
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).
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..
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.
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).
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.
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.
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.
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.
.
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.
Por último, a adição de uma âncora a um bloco também aparecerá ao lado do item correspondente na visualização da lista.
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.
Como Anne McCarty aponta, os widgets baseados em blocos oferecem várias vantagens, incluindo as seguintes:
- Agora você pode criar layouts em barras laterais, cabeçalhos e rodapés usando colunas, separadores, espaçadores e outros blocos de design.
- Widgets agora suportam rich text editing por padrão, sem a necessidade dos usuários adicionarem código personalizado ou incorporarem um editor HTML de terceiros com um plugin.
- Muitos widgets baseados em atalhos estão agora disponíveis como blocos, simplificando a experiência de edição.
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:
- 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”.
- 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' ); - Um novo filtro de
use_widgets_block_editortambé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.
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.
Você também pode lançar o quick inserter a partir da parte inferior do painel de widgets, como mostrado na imagem a seguir.
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.
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.
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.
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.
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.
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:
- Ao criar um bloco reutilizável, um modal agora permite que os usuários atribuam um nome ao bloco.
- O nome do bloco reutilizável é agora exibido na barra de ferramentas do bloco, na lista de navegação e no breadcrumb.
- Quando um bloco reutilizável é selecionado, os blocos reutilizáveis são agora delineados. Isto marca uma melhoria significativa na usabilidade, pois permite identificar facilmente o bloco pai e seu conteúdo.
- Agora é possível modificar o nome do bloco no inspetor da barra lateral.
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”.
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.
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
- O segmento da Meta contém controles do tipo bloco, como o interruptor de bloco, a alça de arraste e o controle do movimentador.
- O segmento do nível de bloco contém ferramentas de bloco específicas que afetam todo o conteúdo, tais como alinhamento em um bloco de parágrafo ou vinculação em um bloco de imagem.
- O nível Inline/Outro segmento contém ferramentas de transformação em linha, tais como a formatação em linha em um bloco de texto.
- O menu Mais inclui ferramentas adicionais.
A imagem abaixo compara a barra de ferramentas de blocos de imagem no WordPress 5.7 e 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:
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.
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).
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.
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.
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.
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:
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.
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.
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):
1. Navegação de teclado bidimensional no block inserter. Agora podemos navegar entre blocos de forma mais precisa e intuitiva.
- Pressionando a seta para cima (↑) e a seta para baixo (↓) move o foco para a linha acima ou abaixo.
- Pressionar a Tab ou Shift + Tab permite mover o foco entre a caixa de busca, a lista de aba, e o primeiro item de cada categoria.
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).
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).
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_supportque 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:
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.
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.
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' );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:
- Com relação ao desempenho, se o tema suportar o carregamento preguiçoso de ativos, o registro de tipos de blocos através do arquivo block.json otimizará automaticamente a consulta de recursos. Isso porque os recursos especificados pelo
stylee propriedades doscriptserão consultados no frontend somente quando o bloco for detectado. Isto permite o desenvolvimento de plugins mais eficientes, reduzindo o tamanho da página e evitando vários dos problemas abordados neste artigo. - O arquivo block.json simplifica o registro do bloco do lado do servidor, permitindo que o Endpoint REST API Tipos de Bloco liste o bloco.
- O arquivo block.json também é necessário se você decidir enviar seu plugin de bloco para o Diretório de Plugins do WordPress.
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_metadataemregister_block_typepara 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”.
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ê pode 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:
- Você pode usar os utilitários WebP pré-compilados do Google e a biblioteca para Linux, Windows, ou Mac OS X.
- Os usuários Mac podem instalar um gerenciador de pacotes como o pacote Homebrew WebP ou o pacote Macports WebP.
- Você pode usar uma ferramenta de edição de imagem que suporta WebP, como o Squoosh do Google Chrome Labs, o conversor de imagem em lote XnConvert, um editor de imagem popular como o GIMP, e muitos outros.
- Você pode instalar um plugin WebP WordPress para um melhor controle geral sobre as imagens WebP no WordPress.
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.webpVocê 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.
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 da imagem comprimida do WebP é 42% menor que a imagem original JPEG!
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.
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.
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:
- Como otimizar imagens para Web e desempenho
- Por que e como usar a compressão com perda em suas imagens WordPress
- Como usar imagens WebP no WordPress (e tamanhos de arquivo de imagem retrátil de até 35%)
- Os 15 melhores tipos de arquivos de imagem
- Tudo o que você precisa saber sobre os tamanhos de imagem do WordPress
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:
fontSizeelineHeightsuportes se tornam estáveis.- O suporte
spacingfoi expandido, e agora você pode controlarmarginepadding, assim como controlar individualmente os tamanhostop,right,bottomeleft.
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:
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 melhoram estas telas com novas capacidades e permitem 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:
- Suporte para Internet Explorer 11
- Melhorias no carregamento de estilos de bloco no WordPress 5.8
- Blocos em um editor iframed (template)
- Sobre o layout e largura do conteúdo no WordPress 5.8
- Apresentando o cabeçalho do plugin “Update URI” no WordPress 5.8
- Várias remoções de API do Editor de Blocos no WordPress 5.8
- REST API Alterações no WordPress 5.8
- Mudanças diversas com foco no desenvolvedor no WordPress 5.8
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?
Carlo é um apaixonado por webdesign e desenvolvimento frontend. Ele tem mais de 10 anos de experiência com WordPress e colaborou com diversas universidades e instituições educacionais na Itália e na Europa. Carlo já publicou inúmeros artigos e guias sobre WordPress, tanto em sites italianos quanto internacionais, além de revistas impressas. Você pode seguir ele no LinkedIn e no X.
Deixe um comentário