WordPress 5.8 “Tatum” está aqui e é um lançamento importante. Além do incrível número de recursos, melhorias e correções de bugs, o WP 5.8 apresenta uma nova maneira de construir sites, trazendo os primeiros recursos incluídos no projeto mais amplo conhecido como Full Site Editing .
Além da Edição de Site Completo, o WordPress 5.8 traz toneladas de mudanças e melhorias para várias áreas do CMS .
Os usuários do WordPress que não usam o plug-in Gutenberg encontrarão recursos e melhorias provenientes de nove versões do Gutenberg no total (para um mergulho mais profundo em cada versão, consulte Gutenberg 9.9 , 10.0 , 10.1 , 10.2 , 10.3 , 10.4 , 10.5 , 10.6 , 10.7 ).
Um novo recurso importante para usuários sérios sobre o desempenho de seus sites é o suporte ao formato WebP.
Os desenvolvedores certamente vão adorar a remoção do IE11 da lista de navegadores suportados, a nova configuração de bloco e mecanismo de estilo baseado em theme.json , o sistema de registro de bloco aprimorado baseado em block.json e as muitas melhorias de API que vêm com a segunda versão do WordPress de 2021 .
Portanto, espere um pouco, pois haverá uma longa lista de recursos e aprimoramentos que abrirão o caminho para novas ferramentas poderosas de construção de sites com lançamento previsto para os próximos meses .
Existem tantas mudanças no WordPress 5.8. Para evitar qualquer risco de incorrer em conflitos inesperados com seu tema e plug-ins, é altamente recomendável que você execute um backup de seu site e teste a nova versão em um ambiente de teste antes de atualizar seu site ativo.
Recursos completos de edição de sites no WordPress 5.8
A visão por trás do Full Site Editing é fornecer uma coleção de ferramentas e recursos que permitem aos usuários do WordPress construir um site inteiro usando blocos . Com a Edição Completa do Site, veremos muitos blocos disponíveis para criar qualquer elemento na página, desde menus de navegação até a marca do site, widgets da barra lateral, modelos e muito mais.
Mesmo que o WordPress 5.8 introduza vários recursos que se enquadram no escopo de Full Site Editing (FSE), não espere ver um ambiente de construção de site visual completo. 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 :
A edição do site completo é uma coleção de projetos e, juntos, eles representam uma grande mudança, provavelmente demais para um único lançamento. O contexto mais importante a ser compartilhado é que ele não é fornecido como a experiência padrão completa para os usuários. Um dos comentários mais claros do processo de mesclagem da Fase Um foi que não houve tempo suficiente para nossos extensores (agências, autores de temas, desenvolvedores de plug-ins, construtores de sites, etc.) se prepararem para as mudanças futuras.
Com isso em mente, esse processo de mesclagem não será um botão liga / desliga. O foco agora não está em uma experiência de usuário completa e cheia de nuances, mas mais em 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 no momento. Em vez disso, veremos novos recursos sendo adicionados e aprimorados ao longo do tempo, começando desde a versão 5.8. Pelo mesmo motivo, podemos presumir que o WordPress 5.8 não terá um impacto dramático na forma como estamos acostumados a construir sites.
No momento em que este livro foi escrito, os proprietários e administradores do site ainda tinham que optar conscientemente pelo FSE instalando um tema de bloco, como Twenty-Twenty One Blocks (a versão baseada em bloco do Twenty-Twenty One) e ativando o plug-in Gutenberg.
A Edição Completa do Site abrange uma variedade de subprojetos separados, incluindo Editor do Site, Estilos Globais , Bloco de Consulta, Bloco de Navegação, Modelos, temas de bloco e muito mais. Mas a coisa mais próxima da edição de sites no WordPress 5.8 é o modo de edição de modelo e os blocos de tema correspondentes disponíveis para uso nesse modo, como veremos mais adiante neste artigo.
A seguir, vamos mergulhar em alguns recursos do FSE fundidos no Core com o WordPress 5.8 .
Modo de edição de modelo
O modo de edição de modelo fornece uma maneira de criar modelos de postagem / página usando blocos. É uma ótima maneira de reduzir a complexidade da construção de sites, permitindo que os usuários aproveitem vários recursos de edição de sites externos à interface do editor de sites enquanto se acostumam a trabalhar com blocos. Isso também é ótimo para usuários que não usam temas baseados em bloco, mas ainda procuram uma maneira fácil de criar e editar modelos a partir da IU do editor de bloco.
Personalizar temas nunca foi tão fácil no WordPress antes. Agora você não precisa mais construir um tema filho para criar seus modelos personalizados. Com o WordPress 5.8, a edição de modelo não se limita a bloquear temas, mas também está disponível para uso com temas clássicos , embora seja necessário ativá-la para ativá-la para temas clássicos.
A edição do modelo pode ser usada em temas clássicos, incluindo um arquivo theme.json ou suporte 'block-templates'. Não pode ser desativado para temas de bloco.
O editor de modelos.
Para criar um novo modelo, você só precisa habilitar o Modo de edição de modelo na barra lateral Configurações . Um novo painel de modelo está agora disponível para os usuários alternarem o modo de edição (consulte a nota de lançamento do Gutenberg 10.5 ).
Painel de modelo na barra lateral do editor de bloco.
No painel Modelo , você pode criar um novo modelo ou editar um existente.
Definindo um nome de modelo.
Para criar um novo modelo, clique em Novo . Em seguida, insira um nome de modelo no modal e clique em Criar , e você está pronto para começar.
Modo de edição de modelo no WordPress 5.8.
No modo de edição de modelo, você pode construir seus modelos usando todos os blocos disponíveis, incluindo blocos FSE como título do site, slogan do site, login / saída e muitos mais.
Quando estiver satisfeito com suas edições, você pode voltar ao modo de edição de postagem e salvar o modelo separadamente do conteúdo da postagem / página, conforme mostrado na imagem abaixo:
As opções de Salvar modelo.
Os modelos são armazenados em seu banco de dados WordPress como tipos de postagem personalizados nomeados wp_template. Isso não apenas permite que você edite um modelo a partir da interface do editor, mas também torna mais fácil importá-los ou exportá-los à vontade. Você também pode usar um modelo em diferentes sites (no momento em que este livro foi escrito, esse recurso só estava disponível se você ativar o plugin Gutenberg).
Exportando modelos e partes de modelos.
Observe que se você definir um modelo de bloco para uma página ou postagem de blog, o modelo PHP normal não será mais usado para gerar a página. O modelo de bloco será usado em seu lugar.
O modo de edição de modelo ainda é um pouco problemático no momento da redação deste artigo, conforme relatado nesta chamada para testes e neste experimento de Justin Tadlock .
Problema de alinhamento de largura total no tema clássico Twenty Twenty-One.
Mas basta um pouco de paciência e esperar que os principais problemas sejam corrigidos para entender completamente como o modo de edição de modelo mudará a maneira como você personaliza a aparência de seus sites.
Os usuários não precisarão mais de habilidades de desenvolvedor para obter controle total sobre o layout e a aparência geral do site.
O problema de alinhamento de largura total foi corrigido.
O modo de edição de modelo estava inicialmente disponível para temas de bloco e temas clássicos . Depois de uma discussão cuidadosa no canal de leads 5.8, foi decidido fazer o editor de modelos optar por temas clássicos e por bloquear temas (consulte também o pull # 32858 ).
De acordo com Carolina Nymark :
Inicialmente, a edição do modelo foi habilitada para todos os temas. Os desenvolvedores de temas levantaram preocupações de que não poderiam atualizar todos os seus temas clássicos existentes para oferecer suporte a esse novo recurso. Com uma alteração tardia, a equipe de lançamento e a equipe de editores optam por alterar a edição do modelo para ativar os temas clássicos.
Para aceitar os temas clássicos, agora os desenvolvedores devem adicionar suporte ao tema:
add_theme_support( 'block-templates' );Os temas clássicos que usam theme.json podem ser desativados removendo o suporte ao tema:
remove_theme_support( 'block-templates' );Para uma visão geral mais detalhada de como o modo de edição de modelo funciona no WordPress 5.8 e alguns exemplos úteis de uso, certifique-se de assistir a este vídeo de Anne McCarty:
Blocos Temáticos
Conforme mencionado anteriormente, o FSE não é um recurso único, mas um conjunto completo de recursos de construção de sites não relacionados apenas ao editor de sites. O modo de edição de modelo é apenas um exemplo disso. Mas, junto com a edição de modelo, o WordPress 5.8 também traz muitos blocos de tema que podem mostrar informações recuperadas dinamicamente do banco de dados. Alguns desses blocos também podem ser usados em contextos não FSE (consulte o problema # 28744 ).
Blocos Full Site Editor disponíveis em contextos não FSE desde WordPress 5.8.
Os blocos de tema trazem funcionalidades de tag de modelo para temas clássicos , e você pode usá-los da mesma forma que os blocos regulares. Por exemplo, você pode adicionar tags de postagem ou a imagem em destaque da postagem em qualquer lugar do conteúdo ou modelo da postagem. Para se ter uma ideia do número de blocos de tema adicionados ao núcleo com o WordPress 5.8, basta digitar / postar no marcador de bloco:
Blocos temáticos sugeridos.
Um bloco de tema útil disponível no WordPress 5.8 é o bloco Login / out , que fornece links de 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 alvo de redirecionamento (consulte PR # 29766 ).
Login / out bloqueia suas configurações no editor de bloco.
Para uma visão mais detalhada dos blocos FSE, consulte a edição “Habilitando Blocos do Editor de Site Completo em temas clássicos” no Github .
O Query Loop Block
Quantas vezes você se viu em uma situação em que precisava exibir uma lista personalizada de postagens de blog ou tipos de postagem personalizados ? Pense em produtos, eventos, imóveis ... Claro, você tem muitos plug-ins para escolher, mas a capacidade de criar consultas altamente personalizadas geralmente requer habilidades de desenvolvedor para lidar com o Loop WordPress .
Com a introdução do bloco Query Loop no WordPress Core, os proprietários e administradores de sites podem criar listas de postagens e CPTs sem escrever códigos complexos ou contratar um desenvolvedor , pelo menos nos casos de uso mais comuns.
Então, o que o Query Loop Block faz?
Resumindo, ele faz o mesmo trabalho que o WordPress Loop, mas no contexto visual do editor de bloco.
O bloco Query Loop executa uma consulta com base nas configurações do usuário no 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 .
Visualização de lista de um bloco Query Loop.
Por ser um recurso avançado, o bloco Query Loop requer algumas configurações.
Primeiro, você pode escolher entre diferentes padrões de bloco listados nas visualizações Carrossel e Grade. Depois de escolher seu padrão, basta clicar em Escolher e o bloco Query Loop gerará sua lista personalizada de postagens.
Padrões de bloco de Loop de consulta no modo de exibição de grade.
Se clicar em Iniciar em branco , você verá uma lista de quatro variações do bloco principal: Título e data ; Título e trecho ; Título, data e trecho ; e Imagem, Data e Título (consulte Padrões de oferta na configuração de blocos ).
Variações do bloco Loop de consulta.
Uma vez no lugar, selecionar o bloco Query Loop exibirá a barra lateral de configurações de bloco, onde você pode construir sua consulta. Você pode herdar a consulta do URL ou personalizar os argumentos da consulta: o tipo de postagens a serem incluídas na lista, a ordem de exibição e se devem ou não ter postagens fixas.
Você também pode definir vários filtros, escolhendo categorias, autores e palavras-chave.
O bloco Query Loop com configurações da barra lateral.
Além disso, um botão Configurações de exibição na barra de ferramentas do bloco fornece mais configurações para controlar o número de itens por página, o deslocamento e o número máximo de páginas a serem mostradas.
Exibir as 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 postagens e tipos de postagens personalizadas.
Mas se você percorrer os parâmetros da classe WP_Query , fica claro que o nível de personalização possível usando o código é muito mais granular do que é possível usando o bloco Query Loop.
No entanto, é realmente uma ferramenta valiosa e flexível que se presta a muitos casos de uso, e provavelmente veremos mais melhorias no futuro.
Os blocos Query Loop e Post Template foram renomeados várias vezes nas últimas semanas. A nomenclatura final foi alcançada com Gutenberg 10.9 .
Visualização de lista persistente no editor de postagem
Outro recurso do FSE estendido para o Post Editor é o Persistent List View . Antes do WordPress 5.8 (e do Gutenberg 10.7 ), a Visualização de lista era exibida em um popover. Ao mover o foco para fora do popover, a lista desapareceria.
Por outro lado, o Editor de Marco exibiu a Visualização de Lista 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 Editor de postagem, permitindo aos usuários navegar na árvore de blocos com mais rapidez e precisão.
A barra lateral da Visualização de lista no WordPress 5.8.
Clicar em um item na Visualização de lista realça o item da lista e move o foco para o bloco correspondente na tela do Post Editor. Além disso, se você passar o mouse sobre os itens na visualização em lista, tanto o item quanto o bloco correspondente no editor de postagem serão destacados.
Passe o mouse sobre os itens na Visualização de lista.
Por último, adicionar uma âncora a um bloco também aparecerá ao lado do item correspondente na visualização de lista.
Adicionando uma âncora a blocos no WordPress 5.8.
Com todos esses aprimoramentos na visualização de lista, navegar em documentos complexos deve ser muito mais fácil.
Editor de widgets com base em bloco e widgets de bloco no personalizador
O editor de widgets baseado em bloco é um projeto amplo que visa trazer a interface do editor de bloco para widgets de tema clássico .
O novo editor de widgets oferece muitas vantagens para a grande maioria que ainda usa temas clássicos. Ao mesmo tempo, permite que eles se familiarizem com a interface do bloco antes que ela se torne padrão para todos os usuários do WordPress .
Bloquear widgets modal.
Como Anne McCarty aponta , os widgets baseados em bloco oferecem várias vantagens, incluindo o seguinte:
- Agora você pode criar layouts em barras laterais , cabeçalhos e rodapés usando colunas, separadores, espaçadores e outros blocos de design.
- Os widgets agora oferecem suporte à edição de rich text por padrão, sem a necessidade dos usuários de adicionar código personalizado ou incorporar um editor de HTML de terceiros com um plug-in.
- Muitos widgets baseados em shortcode agora estão disponíveis como blocos , agilizando a experiência de edição.
Andrei Draganescu também enfatiza as vantagens que podemos obter por sermos capazes de editar widgets a partir de uma interface baseada em bloco:
O principal benefício de atualizar a funcionalidade de widgets para blocos vem da capacidade de editar widgets diretamente usando a interação de bloco familiar que você usa ao editar uma página ou postagem em seu site. Ser capaz de usar blocos abre toneladas de novas possibilidades criativas, desde mini layouts sem código até acessar a vasta biblioteca de blocos centrais e de terceiros para criar conteúdo.
Você não precisa se preocupar se seus widgets podem parar de funcionar com o WordPress 5.8 porque a comunidade tem trabalhado muito para garantir a compatibilidade com versões anteriores para que "widgets existentes e widgets de terceiros continuem a funcionar e possam ser usados junto com os blocos" (ver Bloco baseado no editor de widgets em WordPress 5.8 ).
Mas, novamente, para evitar quaisquer problemas de compatibilidade em sua instalação existente do WordPress, não se esqueça de testar a nova versão em um ambiente de teste antes de atualizar seu site ativo.
Para aqueles que optaram por não usar o editor de widgets baseado em bloco agora, ainda é possível restaurar a tela de widgets clássicos de três maneiras diferentes:
- Você pode instalar o plugin oficial Classic Widgets , que restaura a interface anterior da tela de widgets. O plugin “será suportado e mantido até pelo menos 2022, ou enquanto for necessário”.
- Os desenvolvedores de tema podem desativar o editor de widgets baseado em bloco removendo o suporte ao tema, como de costume:
remove_theme_support( 'widgets-block-editor' ); - Um novo
use_widgets_block_editorfiltro também pode ser usado:add_filter( 'use_widgets_block_editor', '__return_false' );
Consulte também Restaurando o editor de widgets clássico em Visão geral do Editor de blocos de widgets .
Bloquear widgets para o personalizador
Como parte do mesmo projeto, o WordPress 5.8 também traz widgets de bloco para o personalizador .
Bloqueie widgets no personalizador.
Adicionar um widget baseado em bloco no personalizador é bastante simples. Você pode iniciar o insersor de widgets de personalização clicando no ícone de adição no canto superior direito do painel de widgets.
O insersor de widgets de customização.
Você também pode iniciar o insersor rápido na parte inferior do painel de widgets, conforme mostrado na imagem a seguir.
O insersor rápido de widgets de personalização.
No momento em que este livro foi escrito, a nova interface de edição de widget ainda requer melhorias e correções de bugs , mas as possibilidades de personalização são virtualmente ilimitadas.
Basicamente, a partir do WordPress 5.8, você terá o poder do editor de blocos no personalizador e poderá criar barras laterais altamente personalizadas sem complicações.
Mostrar mais configurações.
O editor de widgets baseado em bloco dev-note fornece uma visão geral mais detalhada do editor de widgets baseado em bloco, com exemplos e recursos para desenvolvedores.
Recursos e melhorias do Editor de bloco
Além da primeira implementação do FSE, o WordPress 5.8 também traz novos recursos e aprimoramentos para vários elementos do editor de blocos, que melhoram significativamente a experiência geral de edição.
Essas mudanças incluem:
Aprimoramentos de mídia e bloco de texto
Transformar um bloco em um bloco de colunas já é possível há algum tempo. No entanto, todos os blocos se transformaram em blocos de colunas com uma única coluna. Isso pode levar a resultados abaixo do ideal 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 bloco de texto.
A partir do WordPress 5.8 (e Gutenberg 10.2 ), transformar o 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.
Melhorias de blocos reutilizáveis
Os blocos reutilizáveis permitem ao usuário salvar um bloco ou grupo de blocos para reutilizar posteriormente em qualquer post ou página de um site. Isso é útil principalmente para usuários que incluem repetidamente o mesmo bloco ou grupo de blocos em postagens / páginas diferentes.
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.
Aqui está uma lista rápida de melhorias de bloco reutilizáveis que os usuários encontrarão depois de 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, lista de navegação e breadcrumbs.
- Quando um bloco filho é selecionado, os blocos reutilizáveis agora são delineados. Isso marca uma melhoria significativa na usabilidade, pois permite que você identifique o bloco pai e seu conteúdo facilmente.
- Agora é possível modificar o nome do bloco no inspetor da barra lateral.
Contornos de bloco reutilizáveis.
Barras de ferramentas de bloco normalizadas
Várias barras de ferramentas de bloco foram reorganizadas 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, embutido”.
Barra de ferramentas do bloco de título.
Desde Gutenberg 10.1 e Gutenberg 10.3 , todo um conjunto de barras de ferramentas de bloco foi normalizado. Isso inclui uma imagem , botão, botões, lista, título, 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, inline - também devem ter uma representação visual com as bordas. No momento, os controles de nível de bloco separados têm representações diferentes, incluindo casos como Navegação, onde cada um tem bordas.
Barra de ferramentas de bloco de imagem normalizada.
Assim, desde o WordPress 5.8, a barra de ferramentas do bloco agrupa os controles em segmentos circundados por bordas. Além disso:
- O segmento Meta contém controles do tipo bloco, como o alternador de bloco, a alça de arrastar e o controle móvel.
- O segmento de nível de bloco contém ferramentas de bloco específicas que afetam todo o conteúdo, como alinhamento em um bloco de parágrafo ou vinculação em um bloco de imagem.
- O segmento Nível embutido / Outro contém ferramentas de transformação embutida, como formatação embutida em um bloco de texto.
- O menu Mais inclui ferramentas adicionais.
A imagem abaixo compara a barra de ferramentas do bloco de imagens no WordPress 5.7 e 5.8:
Barra de ferramentas de bloco de imagem no WordPress 5.7 vs WordPress 5.8.
Principais melhorias da barra de ferramentas
Com o modo de barra de ferramentas superior habilitado nas versões anteriores do WordPress, a barra de ferramentas superior e a barra de ferramentas de bloco eram exibidas lado a lado, conforme mostrado na imagem a seguir:
A barra de ferramentas superior em telas amplas no WordPress 5.7.
Com o WordPress 5.8, habilitar a visualização da barra de ferramentas superior fixará a barra de ferramentas do bloco na parte superior do editor, logo abaixo da barra de ferramentas superior. Isso acontece independentemente da largura do navegador e deve melhorar significativamente a experiência do usuário.
A barra de ferramentas superior em telas amplas no WordPress 5.8.
Esse aprimoramento também traz mudanças para os desenvolvedores, pois unifica as APIs da barra de ferramentas no <BlockTools />componente (consulte PR # 31134 ).
PDFs incorporados
Quando um arquivo PDF é adicionado ao documento por meio do bloco de arquivos, uma nova alternância da barra lateral permite ativar / desativar uma versão PDF incorporada (consulte PR # 30857 ).
Um PDF embutido no WordPress 5.8.
Você pode arrastar o arquivo diretamente para a tela do editor ou simplesmente selecioná-lo na 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 oferecem suporte ao visualizador de PDF, exceto para navegadores móveis .
Suporte de Bloco Duotônico
Um dos recursos mais interessantes fundidos no Core com o WordPress 5.8 é o filtro duotônico, introduzido pela primeira vez com o Gutenberg 10.6 .
A nova ferramenta de design duotônico em um bloco de imagem.
Disponível como um recurso de “suporte de bloco” , o filtro duotônico é habilitado por padrão na imagem principal e blocos de cobertura. No bloco de capa, porém, ele não funciona com planos de fundo fixos .
O novo seletor duotônico no WordPress 5.8.
As barras de ferramentas de imagem e bloco de capa agora exibem um controle Aplicar filtro duotônico, mostrando um seletor duotônico com muitas predefinições para escolher.
Dois subcontroles permitem personalizar sombras e realces separadamente. O efeito é aplicado com um filtro SVG oculto com estilos embutidos e aplicado usando um nome de classe específico.
Inspecionando o filtro SVG duotônico no Chrome DevTools.
A nova ferramenta vem em par com uma nova color.__experimentalDuotonepropriedade, permitindo aos desenvolvedores adicionar o filtro duotônico a blocos ou partes de blocos em seu arquivo block.json (mais sobre isso na referência de objeto de cor ):
supports: {
color: {
__experimentalDuotone: '> .duotone-img, > .duotone-video',
background: false,
text: false
}
}Quando um bloco declara suporte para color.__experimentalDuotone, um styleatributo 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 duotônico aplicado sobre uma imagem.
Um filtro de cor duotônico diferente aplicado sobre uma imagem.
Os desenvolvedores podem definir predefinições duotônicas no arquivo theme.json (consulte a próxima seção ), conforme 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 duotônicos em Colorindo suas imagens com filtros duotônicos .
Cores e bordas do bloco de mesa
O WordPress 5.8 também traz algumas melhorias para o bloco Tabela , incluindo melhor controle sobre as cores de fundo e de primeiro plano da tabela .
Configurações de cor de bloco de tabela aprimoradas.
Outra adição ao bloco Tabela é o suporte ao 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 configurações de borda fornecerá três novos controles para personalizações do usuário.
Controles de bloco de borda em blocos WordPress 5.8 e TT1.
Os desenvolvedores podem adicionar suporte de bloco de borda 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 insersor de bloco foi aprimorado com várias adições (PR # 26938 e # 21080 ):
Pressionar a seta para cima e para baixo move o foco da linha.
1. Navegação bidimensional pelo teclado no insersor de bloco . Agora podemos navegar entre os blocos de forma mais precisa e intuitiva.
- Pressionar a seta para cima (↑) e a seta para baixo (↓) move o foco para a linha acima ou abaixo.
- Pressionar Tab ou Shift + Tab permite mover o foco entre a caixa de pesquisa, a lista de guias e o primeiro item de cada categoria.
2. Uma nova categoria de “Tema” para peças e variações do modelo agora aparece no insersor em Edição de Site Completo (consulte PR # 30020 ).
3. Múltiplas palavras no matcher de frase de preenchimento automático agora são permitidas (consulte PR # 29939 ).
Melhorias adicionais no Editor de Bloco
WordPress 5.8 traz toneladas de mudanças adicionais de pequeno e médio porte que valem algumas linhas aqui. Entre essas melhorias, mencionamos o seguinte:
Suporte para arrastar e soltar em blocos de cobertura
Agora você pode arrastar e soltar imagens de sua área de trabalho para substituir o plano de fundo de um bloco de capa (consulte Gutenberg 10.3 e PR # 29813 ).
Arraste e solte imagens de fundo no bloco de capa.
IU de publicação aprimorada
Desde o WordPress 5.8, a IU de publicação mostra o ícone do site e o título para tornar mais claro onde você publicará suas postagens ou páginas ( Gutenberg 10.4 ).
Publicando UI no WordPress 5.7.
Publicando UI no WordPress 5.8.
Esse aprimoramento é benéfico se você estiver trabalhando no modo de tela inteira ou em dispositivos móveis.
Configurações de bloco e estilos com theme.json
Com o WordPress 5.8, o arquivo theme.json se torna “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, como tom duplo e bordas de tabela (consulte Configurações e estilos globais ).
Segundo André Maneiro :
Este novo mecanismo visa assumir e consolidar todas as várias
add_theme_supportchamadas que antes eram necessárias para o controle do editor.
Por exemplo, você pode definir globalmente uma predefinição duotônica personalizada com o seguinte código:
{
"version": 1,
"settings": {
"color": {
"duotone": [
{
"colors": [ "#000", "#0FF" ],
"slug": "black-cyan",
"name": "Black Cyan"
}
],Isso substituiria as predefinições padrão e você verá apenas uma opção duotônica:
Predefinição duotônica personalizada 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 a seguinte predefinição ao seu arquivo theme.json :
{
"version": 1,
"settings": {
"typography": {
"customLineHeight": true,
"fontSizes": [
{
"slug": "extra-extra-small",
"size": "12px",
"name": "Extra extra small"
},
{...}Isso resulta em um novo tamanho de fonte disponível para os usuários utilizarem com qualquer texto em seu conteúdo.
Precisa de hospedagem extremamente rápida, confiável e totalmente segura para o seu site WordPress? Kinsta fornece tudo isso e suporte de classe mundial 24 horas por dia, 7 dias por semana, de especialistas em WordPress. Confira nossos planos
Um tamanho de fonte personalizado definido globalmente em theme.json.
Se você deseja personalizar apenas o bloco de parágrafo, seu código será um pouco 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! Você acabou de definir suas predefinições de tamanho de fonte personalizado para o bloco de parágrafo.
Um bloco de parágrafo com predefinições de tamanho de fonte personalizadas.
Os blocos principais foram atualizados para seguir o novo mecanismo, enquanto os blocos de terceiros podem se adaptar ao novo mecanismo usando o useSettinggancho React (leia mais sobre essa função na dev-note e na documentação da API ):
const isEnabled = useSetting( 'spacing.margin' );As configurações declaradas em theme.json terão precedência sobre as configurações declaradas via add_theme_support.
O novo mecanismo baseado no arquivo theme.json não se aplica apenas às configurações de bloqueio. Na verdade, a partir do WordPress 5.8, não será mais necessário criar estilos de editor e enfileirá-los. Será suficiente declarar presets dentro do arquivo theme.json ; o mecanismo gerará as classes e as enfileirará automaticamente no editor e no frontend.
O mecanismo também gerará as propriedades personalizadas CSS correspondentes .
No exemplo anterior, definimos cinco fontSizespredefinições para o bloco de parágrafo. Para essas predefinições, as seguintes propriedades personalizadas CSS serão geradas:
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;
}Depois de definir o tamanho da fonte do parágrafo em seu arquivo theme.json , o pelemento correspondente assume a has-{preset-slug}-{preset-category}classe.
Isso significa que um parágrafo com um extra-extra-smalltamanho de fonte obterá a has-extra-extra-small-font-sizeclasse:
<p class="has-extra-extra-small-font-size">Lorem ipsum dolor...</p>E aqui está o bloco de declaração CSS:
p.has-extra-extra-small-font-size {
font-size: var(--wp--preset--font-size--extra-extra-small) !important;
}Para uma visão mais detalhada da configuração e dos estilos com theme.json , certifique-se de verificar a dev-note e a documentação da API .
Além disso, verifique a chamada FSE de Anne McCarty para testes para uma leitura mais útil e um desafio empolgante para desenvolvedores que desejam explorar os novos recursos de theme.json .
Bloquear melhorias de API
Os aprimoramentos da API de bloco que vêm com o WordPress 5.8 merecem atenção especial dos desenvolvedores de plug-ins.
O uso do arquivo block.json agora é incentivado como a maneira canônica de registrar tipos de bloco e oferece várias vantagens:
- Com relação ao desempenho, se o tema suportar carregamento lento de ativos , o registro de tipos de bloco por meio do arquivo block.json otimizará automaticamente o enfileiramento de recursos. Isso ocorre porque os recursos especificados pelas propriedades
styleescriptserão enfileirados no front-end apenas quando o bloco for detectado. Isso permite o desenvolvimento de plug-ins mais eficientes, reduzindo o tamanho da página e evitando vários dos problemas abordados neste artigo . - O arquivo block.json simplifica o registro de bloco do lado do servidor, permitindo que o Endpoint da API REST de Tipos de Bloco liste o bloco.
- O arquivo block.json também é necessário se você decidir enviar seu plug-in de bloco para o diretório de plug-ins do WordPress.
Mudanças na função register_block_type
Desde o WordPress 5.8, a register_block_typefunção foi aprimorada para ler metadados do arquivo block.json . Agora, o primeiro parâmetro aceita o caminho para a pasta onde o arquivo block.json está localizado.
A função pode ser usada conforme mostrado no exemplo a seguir:
function create_custom_block_init() {
register_block_type( __DIR__ );
}
add_action( 'init', 'create_custom_block_init' );Ele retorna o tipo de bloco registrado ou falseem caso de falha.
Como você pode notar, a função register_block_typeagora é usada da mesma forma que a register_block_type_from_metadatafunção, que antes era a única função disponível para registrar um tipo de bloco lendo os metadados do arquivo block.json . Conforme explicado por Greg Ziółkowski :
Decidimos consolidar a funcionalidade pré-existente disponível com o
register_block_type_from_metadatamétodoregister_block_typepara evitar alguma confusão que ele criou. Ainda é possível usar as duas funções, mas planejamos usar apenas a versão mais curta nos documentos e ferramentas oficiais de agora em diante.
Uma vez que o bloco é registrado no servidor, você só precisa registrar as configurações no cliente usando o mesmo nome de bloco em seu arquivo index.js .
Para uma visão geral mais aprofundada dos aprimoramentos da API de bloco introduzidos pelo WordPress 5.8, certifique-se de verificar a nota do desenvolvedor de Greg Ziółkowski .
Suporte WebP em WordPress 5.8
Aqui na Kinsta, somos obcecados pela velocidade do site e pelo desempenho do WordPress. É por isso que o suporte ao formato WebP no WordPress 5.8 é uma notícia tão empolgante para nós.
Considerado um formato de última geração , o WebP é um formato de imagem desenvolvido pelo Google que oferece “melhor compactação do que PNG ou JPEG, o que significa downloads mais rápidos e menor consumo de dados”.
O Farol do Google sugere o uso de formatos de imagem de última geração.
WebP é um formato de imagem moderno que fornece compactação superior sem e com perdas para imagens na web. Usando o WebP, webmasters e desenvolvedores da web podem criar imagens menores e mais ricas que tornam a web mais rápida.
As imagens sem perdas WebP são 26% menores em tamanho em comparação com PNGs. As imagens com perda de WebP são 25-34% menores do que as 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 , examinamos profundamente o formato WebP e as ferramentas disponíveis para usá-lo no WordPress. Agora, devido ao suporte para imagens WebP no WordPress 5.8 , as coisas mudam um pouco. Como o formato WebP é compatível imediatamente, você não precisa instalar plug-ins de terceiros para fazer upload de imagens WebP no WordPress, pelo menos nos casos de uso mais comuns.
Observe que, embora agora você possa fazer upload de suas imagens WebP para o WordPress usando a Biblioteca de mídia, o WordPress não oferece suporte à conversão automática de imagens para o formato WebP. Para habilitar 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 em 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 de 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 com suporte para WebP, como o Squoosh do Google Chrome Labs , o conversor de imagens em lote XnConvert , um editor de imagens 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.
Exporte a imagem como WebP no GIMP.
Se você optar por uma ferramenta de linha de comando, você pode codificar e decodificar suas imagens usando cwebp e dwebp utilitários. Por exemplo, o seguinte comando executa uma conversão básica de JPEG em WebP:
cwebp [options] original_image.jpg -o compressed_image.webpVocê também pode executar 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 de fator de compressão e tamanhos de arquivo.
Assim que tiver suas imagens WebP, você pode simplesmente carregá-las usando a Biblioteca de mídia do WordPress . Abaixo, você pode ver uma imagem JPEG de 127 KB antes da conversão na Biblioteca de mídia:
O tamanho do arquivo JPEG compactado é de 127 KB.
O tamanho da imagem WebP compactada é 42% menor do que a imagem JPEG original!
A mesma imagem no formato WebP tem 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, inverter e dimensionar e aplicar alterações aos tamanhos de imagem de sua escolha.
Advertências sobre WebP no WordPress 5.8
De acordo com Adam Silverstein:
As imagens WebP suportam compactação com e sem perdas, bem como formato animado e suporte para imagens transparentes. No WordPress, o formato WebP sem perdas é suportado apenas quando o servidor de hospedagem usa Imagick (a biblioteca PHP) até que LibGD adicione suporte. Além disso, os formatos animados e alfa ainda não são suportados para imagens redimensionadas (quando você carrega imagens nesses formatos, imagens com perdas são criadas).
Se o seu host da web não oferecer suporte a imagens WebP, você verá uma mensagem de erro ao tentar carregá-las. Se você não tiver certeza se o seu host oferece suporte à biblioteca Imagick, a guia Informações da ferramenta de integridade do site inclui um campo da biblioteca Imagick que fornece essa informação.
Kinsta suporta a biblioteca Imagick.
Com o suporte WebP, o WordPress 5.8 também introduz dois campos adicionais para a seção Manuseio de mídia no Site Health: versão Imagick e formatos de arquivo compatíveis com ImageMagick .
Campo de versão do ImageMagick no Site Heath.
Se o WebP não estiver listado entre os tipos de arquivo suportados, você precisará entrar em contato com seu host para obter suporte.
A dev-note fornece informações adicionais sobre o suporte WebP no WordPress 5.8, perguntas frequentes úteis e outros recursos.
Se 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 compactação com perdas em suas imagens do WordPress
- Como usar imagens WebP no WordPress (e reduzir o tamanho do arquivo de imagem em até 35%)
- 15 melhores tipos de arquivo de imagem
- Tudo o que você precisa saber sobre os tamanhos de imagem do WordPress
Recursos adicionais para desenvolvedores
Você encontrará dezenas de recursos interessantes para desenvolvedores no WordPress 5.8. Neste artigo, prestamos mais atenção àqueles que devem ter o impacto mais significativo em seu trabalho de desenvolvimento. Mas, de fato, existem muitos novos recursos que merecem atenção, incluindo o seguinte:
API de suporte de bloco
O WordPress 5.8 adiciona novos sinalizadores de suporte de bloco, permitindo que os desenvolvedores personalizem os blocos registrados com os recursos de bloco mais recentes.
Além do suporte de bloco duotônico experimental mencionado anteriormente ( color._experimentalDuotone), o WordPress 5.8 também adiciona suporte para cor de link. Para aproveitar esse recurso, basta adicionar a seguinte sinalização aos metadados do seu bloco:
supports: {
color: {
link: true;
}
}Você pode definir valores padrão usando atributos, conforme mostrado no exemplo a seguir, ou definir suas predefinições em theme.json :
attributes: {
style: {
type: 'object',
default: {
color: {
link: '#FF0000',
}
}Alterações adicionais na API do bloco incluem:
fontSizee oslineHeightsuportes tornam-se estáveis.spacingapoio foi ampliado, e agora você pode controlarmarginepadding, assim controlar individualmentetop,right,bottomelefttamanhos.
Você pode ler mais sobre a API de suporte ao bloco no WordPress 5.8 em O bloco oferece suporte às atualizações da API dev-note.
Para uma visão mais detalhada de como usar a API Block Supports, consulte a documentação oficial da API Block Supports .
Guias personalizadas de integridade do site
Dois novos ganchos agora permitem que os desenvolvedores adicionem suas guias personalizadas à interface de integridade do site e personalizem as telas disponíveis.
O site_health_navigation_tabsfiltro é uma matriz associativa de IDs de guia e rótulos para registrar uma nova guia na tela de integridade do site. Você pode usar o filtro adicionando o seguinte código de exemplo ao arquivo de funções do seu tema ou plug-in 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 guia Site Health:
Uma guia personalizada adicionada ao menu de navegação Integridade do site.
Graças ao site_health_navigation_tabsfiltro, também é possível reordenar as guias ou remover um ou mais itens.
A site_health_tab_contentação é disparada quando um usuário visita a tela de integridade do site, exceto para a tela de status padrão . Você pode usar este gancho conforme mostrado no seguinte trecho (exemplo da nota do desenvolvedor ):
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 guia atual é sua guia personalizada e, em seguida, carrega o conteúdo da tela de integridade do site a partir de um arquivo .php . A site_health_tab_contentação também permite que os desenvolvedores estendam a guia Informações padrão adicionando informações específicas a seus plug-ins ou temas.
Block Editor API Changes to Support Multiple Admin Screens
Com o WordPress 5.8, o editor de postagem não é mais a única tela de administrador usando o editor de bloco (a tela de widgets é um exemplo).
Os contribuidores principais encontraram vários ganchos definidos no servidor, dependendo do $postobjeto. Este objeto não está presente na edição do site, widgets e telas de navegação. Seguindo em frente, vários filtros foram descontinuados e substituídos por substituições sensíveis ao contexto.
Além disso, uma nova WP_Block_Editor_Contextclasse que representa o contexto do editor de bloco atual e vários métodos foi introduzida.
Essas alterações aprimoram essas telas com novos recursos e permitem que os desenvolvedores adicionem suas personalizações.
Para obter uma lista abrangente de alterações da API do Block Editor relacionadas às telas de administrador, consulte a nota do desenvolvedor de Greg Ziółkowski.
Recursos e melhorias adicionais
Existem tantos novos recursos e mudanças para desenvolvedores trazidos pelo WordPress 5.8 que seria impossível mencioná-los todos neste artigo. Mas coletamos uma lista de notas de desenvolvimento não cobertas aqui para sua leitura posterior:
- Descartando o suporte para Internet Explorer 11
- Aprimoramentos de carregamento de estilos de bloco no WordPress 5.8
- Bloqueia em um editor iframed (modelo)
- Sobre layout e largura de 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 Bloco no WordPress 5.8
- Mudanças na API REST no WordPress 5.8
- Mudanças diversas voltadas para o desenvolvedor no WordPress 5.8
- Adições diversas à API do editor de blocos no WordPress 5.8
Resumo
O WordPress 5.8 marca um marco no caminho para a Edição Completa de Sites. Mas o segundo lançamento WordPress do ano traz muito mais do que FSE. Os usuários e desenvolvedores encontrarão toneladas de melhorias no editor de bloco, um novo mecanismo theme.json , uma API de bloco mais poderosa, suporte ao formato de imagem WebP e muito mais.
Ficamos particularmente impressionados com as melhorias, pequenas e grandes, no editor de bloco e sua interface do usuário. Adoramos a navegabilidade aprimorada entre os blocos, a barra de ferramentas de blocos renovada, a clareza aprimorada da interface e as melhorias em vários blocos.
Essas pequenas mudanças vão melhorando a experiência de edição aos poucos e, sem quase perceber, acabamos usando softwares melhores e mais robustos. Isso é WordPress !
Agora é com você! O que você acha sobre a edição de site completo? E quais são suas mudanças favoritas no WordPress 5.8?
Economize tempo, custos e maximize o desempenho do site com:
- Ajuda instantânea de especialistas em hospedagem do WordPress, 24 horas por dia, 7 dias por semana.
- Integração Cloudflare Enterprise.
- Alcance de público global com 28 data centers em todo o mundo.
- Otimização com nosso monitoramento de desempenho de aplicativos integrado.
Tudo isso e muito mais, em um único plano, sem contratos de longo prazo, migrações assistidas e garantia de devolução do dinheiro em 30 dias. Confira nossos planos ou fale com o departamento de vendas para encontrar o plano certo para você.