WordPress 6.2 “Dolphy” foi lançado e está na hora de explorarmos o que há de novo com o primeiro lançamento de 2023.
Com o WordPress 6.2, entramos na fase final da Fase 2 do script de desenvolvimento a longo prazo do Gutenberg, e o editor de blocos deixa oficialmente a fase beta.
Este lançamento foca em melhorar a interface e simplificar a experiência de edição.
Uma nova abordagem para navegar entre modelos e partes de modelos foi introduzida, bem como a capacidade de importar widgets em temas de blocos, um novo modo de escrita livre de distrações, uma experiência de configurações de blocos em escala e muitas melhorias grandes e pequenas nos blocos existentes, desempenho e usabilidade.
Mas se há algo que se destaca em termos de funcionalidade e usabilidade, é o bloco de navegação. Desde o seu lançamento, o menu de navegação passou por várias iterações que simplificaram significativamente o processo de edição ao longo do tempo. Com o WordPress 6.2, o desenvolvimento continua, e neste artigo, mostraremos como você pode gerenciar facilmente um menu de navegação.
Confira nosso guia em vídeo para saber o que há de novo no WordPress 6.2
Melhor experiência de edição
Agora, é possível gerenciar os menus de navegação com maior facilidade, enviar mudanças de estilo de um único bloco para Estilos Globais e navegar sem esforço entre modelos e partes de modelos com partes de modelo coloridas e blocos reutilizáveis.
Mas há muito mais. Vamos explorar em detalhes as principais adições e mudanças na interface do editor.
Interface do editor de site e modo de navegação reformulados
Com o WordPress 6.2, diversas melhorias na interface do editor foram adicionadas ao núcleo. A primeira e mais interessante atualização afeta a interface do Editor de Site. Graças ao novo Modo de Navegação, agora é mais fácil navegar entre modelos e partes de modelos.
A nova interface também permite que você adicione um novo modelo ou parte do modelo diretamente da barra lateral do editor, simplesmente clicando no ícone mais (+) localizado à direita do título do menu.
De acordo com Ryan Welcher, colaborador do WP Core e Documentação, “O trabalho nessa funcionalidade está em andamento e continuará a melhorar à medida que novas versões do Gutenberg forem lançadas.”
O fluxo de trabalho agora é mais suave e sem problemas. Para começar a editar a parte atual do modelo/template, basta clicar no botão Editar no menu à esquerda, ou na visualização do modelo no meio da página.
Modo livre de distrações
O WordPress 6.2 introduz um novo modo de edição livre de distrações, que elimina a bagunça na tela e permite que você se concentre no conteúdo da página.
Você pode ativar essa funcionalidade no painel de opções que aparece ao clicar no ícone de três pontos no canto superior direito.
Uma vez ativado o Modo de Edição Livre de Distrações, as barras laterais e ferramentas extras desaparecem, deixando na tela apenas o conteúdo em que você está trabalhando.
Inspetor de blocos com abas
O WordPress 6.2 introduz um novo Inspetor de Blocos com o objetivo de trazer organização à barra lateral, dividindo os controles de configuração em painéis separados.
As configurações de blocos estão agora divididas em abas para separar as configurações de estilo das outras configurações de blocos.
Se disponível, as abas Inspetor de blocos serão exibidas na seguinte ordem:
- Visualização em Lista: Inclui controles para gerenciar um bloco, tais como submenus e links no bloco de Navegação
- Configurações: Inclui configurações que não estão relacionadas com a aparência do bloco
- Aparência: Inclui configurações especificamente relacionadas ao estilo do bloco atual, como tipografia e cores
Esta é uma melhoria notável na usabilidade da interface, especialmente para blocos avançados com muitas opções de configuração como o Bloco de Grupo ou o Bloco de Navegação.
Note que:
- O novo Inspetor só mostra uma aba quando contém elementos a serem exibidos.
- Se a aba Configurações contém apenas o painel Avançado, ele será movido para a aba Aparência.
- Se o Inspetor de Bloco tiver apenas uma aba, então ele será exibido como era antes do WordPress 6.2.
Confira a nota de desenvolvimento para uma visão mais próxima do novo Inspetor de Bloco.
Partes de modelo coloridos e blocos reutilizáveis
As partes de modelo e os blocos reutilizáveis agora são destacados em cores diferentes na Visualização em Lista, no Inseridor de Blocos, na Barra de Ferramentas de Blocos e no canvas do editor.
Isso acontece tanto no Editor do Site quanto no editor do artigo, como mostrado na imagem abaixo.
Um inseridor de blocos remodelado
O Inseridor de Blocos é afetado por várias alterações que melhoram significativamente a experiência geral de edição.
Primeiro, um novo design de interface melhora a navegação entre as categorias de padrões e mídias e fornece uma visualização maior para padrões e itens de mídia.
Quando a mídia existe no site, uma aba de Mídia aparece no Inseridor de Blocos para simplificar a inserção da mídia no conteúdo. Você pode arrastar e soltar imagens/mídia ou simplesmente clicar na sua mídia para adicioná-la ao conteúdo.
Dentro da aba, um botão Open Media Library (Abrir Biblioteca de Mídia) leva você para a Biblioteca de Mídia WordPress.
Integração do Openverse no inseridor de blocos
O Openverse é uma ferramenta que visa compartilhar trabalhos licenciados abertamente ou de domínio público para uso de qualquer pessoa. Agora, com o WordPress 6.2, o Openverse está integrado ao Inseridor de Blocos.
Para acessar esse novo recurso, clique na aba Mídia do Inseridor de Blocos. Isso mostra um painel com um campo de pesquisa e pré-visualizações de imagem diretamente do repositório do Openverse.
Para os detalhes técnicos, veja o pedido de integração Openverse pull.
Migrar widgets para temas de blocos
A partir do WordPress 6.2, os usuários que rodam um site usando um tema clássico que decidem mudar para um tema de bloco podem migrar suas áreas widget existentes para o novo tema, convertendo em partes de modelo.
Vamos descobrir como isso funciona.
Primeiro, crie uma área widget em um tema clássico. Por exemplo, você poderia ativar o Twenty-Eleven e adicionar um calendário à Área do Rodapé Um.
Agora mude o tema para Twenty Twenty-Three. Abra o Editor do Site, escolha um template para editar e adicione uma parte do modelo.
Na barra lateral do bloco, selecione a área widget para importar no menu suspenso Import Widget Area.
E é isso aí. Agora você pode gerenciar sua área widget anterior como qualquer outra parte do modelo.
Detalhes do documento e visualização em lista combinados
Antes do WordPress 6.2, havia dois botões separados na barra de ferramentas do Editor para Detalhes e Visualização em Lista. Na imagem a seguir, você pode ver o popover de detalhes do documento no WordPress 6.1, incluindo o número de palavras, número de caracteres, tempo de leitura e o número de cabeçalhos, parágrafos e blocos, assim como o Esboço do Documento.
A partir do WordPress 6.2, a Visualização em Lista e os Detalhes foram movidos para um único painel de Visão Geral do Documento dividido em duas guias: Visualização em Lista e Esboço.
Esta mudança deve proporcionar uma maneira mais fácil de gerenciar o documento.
Capacidades de bloco estendido
Com o WordPress 6.2, as capacidades de vários tipos de blocos principais foram estendidas. Isso é especialmente verdadeiro para o bloco de Navegação, afetado por várias alterações e melhorias na experiência de edição.
Vamos dar uma olhada nas principais mudanças em detalhes.
Edição baseada em lista para o bloco de navegação
Com o lançamento do WordPress 6.2, é possível alterar a disposição dos elementos do Bloco de Navegação a partir de uma visualização em lista nas configurações de bloco da barra lateral.
Clicando no item de menu, você será levado às configurações da barra lateral do link da página selecionada, onde você poderá editar os detalhes do link, incluindo etiqueta, URL, descrição, título do link e link rel.
Esta mudança simplifica muito a experiência de edição de menus de navegação, permitindo adicionar, organizar e excluir itens em seu menu, ou mesmo criar novos menus de navegação.
Bloquear navegação
Outra melhoria no bloco de Navegação é a capacidade de bloquear a edição do menu de uma forma mais granular. Agora você pode Restringir edição, Desabilitar movimento e Prevenir remoção, enquanto com o WordPress 6.1, somente as opções Restringir edição e Desabilitar movimento estavam disponíveis.
Além disso, as opções selecionadas também podem ser aplicadas aos blocos internos (links e submenus).
Adicionar/Remover legendas da barra de ferramentas do bloco
Um novo botão Adicionar/Remover legendas permite aos usuários controlar as legendas da barra de ferramentas de blocos para vários blocos (Áudio, Vídeo, Imagem).
Se você já definiu uma legenda, ela será automaticamente incluída quando você adicionar a imagem ao seu conteúdo.
Melhorias no bloco de lista de páginas
Duas melhorias envolvem o bloco de Lista de Páginas.
Primeiro, o bloco Lista de Páginas pode agora ser expandido para mostrar a lista de páginas no painel de Visualização em Lista.
Além disso, uma nova opção na barra lateral do bloco agora permite que você defina uma página inicial e exiba apenas páginas descendentes dela no bloco.
Novo marcador de posição para o bloco de grupo
Agora, o espaço reservado ao Bloco de Grupo exibe um seletor de variação quando o bloco é adicionado ao conteúdo da página.
Suporte de posicionamento fixo para blocos
O WordPress 6.2 introduziu um novo recurso de suporte para blocos de posição, começando com o posicionamento fixo.
Este novo recurso se aplica atualmente apenas a blocos de Grupo, aos quais ele está habilitado por padrão.
Os desenvolvedores de temas podem habilitar o posicionamento fixo em seus temas usando o recurso appearanceTools no theme.json. Se você quiser um controle mais granular sobre as ferramentas de aparência, você também pode configurar a propriedade settings.position.sticky para true.
Você pode habilitar o posicionamento fixo no painel de posição da barra lateral de controle do Inspetor.
Com o posicionamento fixo habilitado, a tag HTML recebe uma classe is-position-sticky, e algumas regras do CSS se aplicam ao elemento correspondente:
.wp-container-6 {
top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
position: sticky;
z-index: 10;
}
O posicionamento fixo só funciona para blocos de grupo na raiz do documento. Embora isso possa evitar confusão e erros para os usuários, você pode achar o posicionamento fixo embutido um pouco complicado no momento (e você pode querer verificar diferentes métodos para adicionar um cabeçalho fixo (sticky header) ao seu site WordPress). Entretanto, de acordo com a nota de desenvolvimento,
… em testes manuais, o feedback indicou que sem trabalho adicional de UI ou UX, poderia ser confuso para os usuários que tentam criar cabeçalho fixo se eles acidentalmente definirem um bloco não-raiz como fixo, ou por exemplo, um bloco dentro de uma peça de modelo de cabeçalho como fixo. A decisão foi reduzir o recurso para apenas os blocos raiz por 6,2 para permitir mais tempo para explorar uma solução adequada para blocos aninhados.
O recurso de posicionamento só está disponível para blocos individuais, então você não o encontrará em Estilos Globais.
Melhorias adicionais na experiência de edição de blocos
Algumas outras atualizações importantes na edição de blocos incluem o seguinte:
- Agora você pode arrastar e soltar imagens em um parágrafo vazio para substituí-lo por um bloco de imagens.
- Os controles tipografia foram agrupados em painéis. Isso torna a interface de Estilos mais consistente com a interface Configurações e melhora sua usabilidade, pois agora você pode mostrar e ocultar os controles como na interface de configurações de blocos.
Controles tipográficos no WordPress 6.1 vs. WordPress 6.2 - Agora é possível modificar o espaçamento das letras dos blocos de título diretamente na interface Estilos Globais.
- Agora você pode definir o fundo, link e cor do texto do bloco Calendário.
- Duas novas categorias de blocos de Banners e Rodapés foram introduzidas para refletir melhor a estrutura das páginas web.
- Agora é possível autocompletar links em qualquer bloco usando o atalho
[[. Antes desta alterção, os blocos tinham que declarar explicitamente o suporte ao autocompletar links usando__experimentalSlashInserter. - Um novo atalho de teclado
control+option+1–6permite que você transforme um parágrafo em um cabeçalho. - O bloco Lista de Páginas agora suporta todas as opções de tipografia, incluindo família de fontes, tamanho da fonte, aparência, altura da linha, espaçamento entre letras, decoração e capitalização de letras.
Configurações de tipografia de bloco de lista de páginas no WordPress 6.2
Ferramentas de design aprimoradas
Muitas dos novos recursos e melhorias introduzidas com o WordPress 6.2 melhoram o estilo e a capacidade de design do CMS. Abaixo está uma lista dos recursos mais interessantes relacionados ao design que vem com o 6.2; detalharemos cada um mais adiante.
Livro de estilos
O WordPress 6.2 introduz um novo recurso de Livro de estilos que permite aos usuários pré-visualizar qualquer bloco que possa ser usado em seus sites sem ter que adicionar esses blocos a uma parte de modelo/template. Você pode abrir o Livro de Estilos clicando no botão Open Style Book (Abrir Livro de estilos) que agora aparece no cabeçalho Estilos em estilos globais.
Isso abre uma interface mostrando uma prévia de cada núcleo e de cada bloco de terceiros por categoria.
A nova interface Livro de Estilos simplifica o processo de design tornando as visualizações de cada estilo de bloco disponíveis em um único local centralizado.
De um ponto de vista técnico, a nova interface é gerada por um novo componente StyleBook adicionado a @wordpress/edit-site para exibir uma prévia de cada bloco registrado em um iframe (veja também PR #45960).
A mesma interface também fornece visualizações de blocos individuais. Como exemplo, a seguinte imagem mostra a visualização de um widget de calendário personalizado.
Os desenvolvedores podem ocultar um bloco de ser inserido e visualizado de duas maneiras. Primeiro, você pode configurar supports.inserter para false no block.json:
{
"supports": {
"inserter": false
}
}Outra maneira de ocultar a visualização do bloco é evitar a propriedade example, usada para criar uma visualização do bloco no Painel de Ajuda do Inspetor (leia mais aqui).
Sombras em Estilos Globais
Com WordPress 6.2, agora é possível adicionar e personalizar sombras a alguns blocos usando Estilos Globais ou theme.json (a partir desta escrita, o recurso de sombras está disponível apenas para o bloco de botões).
Primeiro, em temas que suportam este recurso, você pode adicionar sombras a partir da interface Estilos Globais.
Para ver isso em ação, ative o tema Twenty Twenty-Three, navegue para Estilos > Blocos > Botão e clique no botão Sombra.
Uma janela pop-up permite selecionar uma sombra a partir dos presets do tema.
Desenvolvedores de temas e usuários avançados também podem adicionar uma sombra aos blocos usando o theme.json. A definição a seguir adiciona uma sombra preta de 4px aos blocos de botões:
"styles": {
"blocks": {
"core/button": {
"shadow": "4px 4px #000000"
}
}
},Você também pode definir predefinições para dar aos usuários do tema a capacidade de selecionar uma da interface de Estilos:
"settings": {
"shadow": {
"presets": [
{
"shadow": "4px 4px #FF0000",
"name": "Red",
"slug": "red"
},
{
"shadow": "4px 4px #00FF00",
"name": "Green",
"slug": "green"
},
{
"shadow": "4px 4px #0000FF",
"name": "Blue",
"slug": "blue"
}
]
},
}Uma vez definidas, suas predefinições aparecem no painel Sombra em Estilos de bloco.
Você também pode escolher o valor de uma predefinição e usá-la como padrão de bloco:
"styles": {
"blocks": {
"core/button": {
"shadow": "var(--wp--preset--shadow--blue)"
}
}
}Nova opção de controle de altura mínima
Começando com o WordPress 6.2, o painel Dimensões da barra lateral de configurações de blocos para os blocos de Grupo e Conteúdo do artigo agora fornece um novo controle de Altura Mínima habilitado por padrão nos temas usando o recurso appearanceTools.
Este novo controle permite que os usuários definam uma altura mínima para blocos de Grupo e Conteúdo do artigo e pode ser usado para renderizar o rodapé na parte inferior da página, mesmo com pouco conteúdo.
Combinado com as novas ferramentas de alinhamento vertical, ele também permite alinhar verticalmente os elementos internos na parte superior/central/inferior da página.
Os desenvolvedores podem adicionar suporte para altura mínima aos temas, adicionando a configuração minHeight ao theme.json:
{
"settings": {
dimensions: "minHeight": true
}
}Você também pode usar a propriedade appearanceTools:
{
"settings": {
"appearanceTools": true
}
}A nova propriedade minHeight também pode ser usada para definir um valor específico diretamente no theme.json:
{
"styles": {
"blocks": {
"core/post-content": {
"dimensions": {
"minHeight": "80vh"
}
}
}
}
}Os desenvolvedores de blocos podem adicionar a propriedade supports.dimensions.minHeight ao seu arquivo block.json e definir seu valor para true. Para blocos estáticos, a regra CSS min-height será armazenada como um estilo inline, enquanto para blocos dinâmicos ela será incluída no atributo de estilo retornado por get_block_wrapper_attributes.
CSS personalizado no painel de estilos
Uma das funcionalidades ausentes no Editor do Site em comparação com o Customizador de Temas foi a capacidade de adicionar estilos CSS personalizados. O WordPress 6.2 preenche a lacuna e agora a interface Estilos Globais inclui um campo de texto para adicionar regras CSS personalizadas que não serão sobrescritas quando você atualizar seu tema.
Você pode adicionar estilos personalizados tanto por bloco, a partir do painel de estilos de bloco, ou clicando no botão de ações Mais Estilos na barra de ferramentas Estilos. Isso exibe um menu pop-up mostrando um elemento CSS adicional.
Para oferecer suporte ao CSS personalizado, uma nova propriedade styles.css foi adicionada ao theme.json.
Regras CSS personalizadas podem substituir completamente qualquer estilo personalizado definido no theme.json. Se você não deseja que isso aconteça, pode considerar incluir a folha de estilos usando os métodos existentes de enfileiramento.
Você também pode adicionar CSS personalizado por bloco no theme.json usando a propriedade styles.blocks.block.css:
"styles": {
"blocks": {
"core/button": {
"css": "background: #FF0000"
}
}
}Você também pode usar & para elementos aninhados e pseudo-selecionadores.
Para uma visão mais detalhada sobre o novo recurso CSS personalizado, veja também CSS personalizado para estilos globais e por bloco.
Copiar e colar estilos entre blocos
Um novo grupo no menu Opções da barra de ferramentas do bloco agora exibe dois botões para Copiar estilos e Colar estilos. Antes desta adição, só era possível copiar estilos, mas não estava claro como colar estilos.
Para tentar este novo recurso, adicione um novo bloco, como um cabeçalho. Mude o estilo e escolha Copiar estilos no menu de opções do bloco.
Você pode experimentar essa nova funcionalidade adicionando um novo bloco, como um cabeçalho. Altere o estilo e escolha Copiar estilos no menu Opções do bloco.
Note que este recurso só está disponível em sites seguros (https) em navegadores de suporte. Para detalhes adicionais, veja o pull request.
Aplicar alterações de bloco globalmente
O WordPress 6.2 também introduz um botão Aplicar globalmente sob o painel Avançado para blocos individuais que permitindo que você envie as alterações de estilo do seu bloco para Estilos globais e aplique essas alterações em todo o site.
Graças a este novo recurso, aplicar tipografia de blocos, espaçamento, dimensões e estilo de cor a todos os blocos desse tipo é agora tão fácil quanto clicar em um botão (veja também pull request).
Experiência de design melhorada com os visualizadores de espaçamento
Os Visualizadores de Espaçamento permitem que você visualize a quantidade de margem ou preenchimento que está sendo aplicada a um bloco. Com o WordPress 6.2, esse recurso é aprimorado com algumas adições que melhoram a experiência de edição.
Primeiro, os Visualizadores de Espaçamento agora aparecem assim que você passa o mouse sobre o controle de margem ou preenchimento.
Em segundo lugar, o Visualizador de Espaçamento agora oculta automaticamente a barra de ferramentas do bloco assim que você passa o mouse sobre a configuração de espaçamento. Isso permite visualizar as novas configurações de preenchimento e margem sem sobrecarregar a barra de ferramentas do bloco.
Essas são mudanças pequenas, mas significativas que afetam um bom número de blocos principais.
Mudanças para os desenvolvedores
O WordPress 6.2 também traz muitas novas funcionalidades para desenvolvedores: novas APIs, correções de bugs, melhorias de desempenho e muito mais. Vamos analisar as adições mais interessantes.
Uma nova API HTML
O WordPress 6.2 introduz o HTML Tag Processor, um analisador compatível com HTML5 que fornece uma maneira segura de encontrar tags HTML específicas e adicionar, remover ou atualizar atributos via PHP. O HTML Tag Processor é o primeiro componente em uma nova API de processamento HTML.
A nova API facilita a execução de tarefas anteriormente complexas que muitas vezes exigiam o uso de expressões regulares.
No exemplo a seguir, nós simplesmente adicionamos o atributo alt a uma tag img:
$html = '<img src="/my-image.jpg" />';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag() ) {
$p->set_attribute( 'alt', 'Hello WordPress 6.2' );
}
echo $p->get_updated_html();Este código produziria a seguinte tag img:
<img alt="Hello WordPress 6.2" src="/my-image.jpg">O método $p->next_tag() passa para a próxima tag disponível no HTML. Ele também aceita um nome de tag, uma classe CSS ou ambas para encontrar tags específicas, como mostrado no exemplo acima.
Para editar as tags HTML, você tem primeiro que selecionar a tag de destino:
$p->next_tag();Uma vez que você tenha selecionado a tag alvo, você pode usar os métodos API para realizar várias operações:
$p->get_tag()$p->set_attribute()$p->get_attribute()$p->remove_attribute()$p->add_class()$p->remove_class()
Você pode definir um atributo de estilo:
$html = '<a href="https://example.com">example.com</a>';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag( 'a' ) ) {
$p->set_attribute( 'style', 'text-decoration: wavy underline purple;' );
}
echo $p->get_updated_html();Você também pode adicionar ou remover uma classe, ou um atributo. No código a seguir, adicionamos uma classe personalizada a uma tag h1:
$html = '<div><h1>Page Title</h1></div>';
$p = new WP_HTML_Tag_Processor( $html );
if( $p->next_tag( 'h1' ) ) {
$p->add_class( 'title' );
}
echo $p->get_updated_html();Você pode, então, exibir ou retornar a tag atualizada usando o método $p->get_updated_html().
Para uma visualização mais detalhada da nova API HTML, confira este tutorial PHP interativo de Adam Zieliński, contribuidor principal do WordPress.
API Patterns e uma nova propriedade template_types
A API Patterns permite aos desenvolvedores de WordPress “criar blocos pré-desenhados de conteúdo que podem ser facilmente inseridos em artigos, páginas, tipos de artigos personalizados e modelos”.
Com WordPress 6.2, a API Patterns inclui agora uma nova propriedade template_types para permitir que você especifique em quais modelos um determinado padrão de bloco pode ser usado.
Jorge Costa ressalta que esta é uma atualização apenas de backend-only e não há atualmente nenhuma funcionalidade UX correspondente. Entretanto, podemos esperar ver implementações evoluídas desta funcionalidade com o WordPress 6.3:
A primeira utilização, ao pensar no WordPress 6.3, é mostrar ao usuário alguns padrões que fazem sentido em um template quando o usuário começa a criar um template. Os usuários podem começar a partir de um padrão ao invés de “em branco” ou do modelo fallback.
No lado técnico, a função register_block_pattern() foi modificada para incluir um novo parâmetro template_types, que é um conjunto de strings contendo os nomes dos modelos para os quais o padrão do bloco é destinado.
O REST API também foi modificado para retornar os tipos de modelo de um padrão de bloco, se pelo menos um tiver sido definido.
React v18.0 e o modo concorrente
O WordPress 6.2 também envia uma nova versão da biblioteca React, agora atualizada para a versão 18.0. A nova versão vem com novas APIs, funcionalidades, melhorias e correções de bugs. Uma das principais funcionalidades que vem com o React v18.0 é a introdução do modo de concorrente, “um novo mecanismo de bastidores que permite ao React preparar múltiplas versões da sua interface do usuário (UI) ao mesmo tempo”.
Uma das principais funcionalidades do Modo Concorrente no React é que ele é interrompível:
O React garante que a interface do usuário parecerá consistente mesmo se uma renderização for interrompida. Para fazer isso, ele espera para realizar mutações no DOM até o final, uma vez que a árvore inteira tenha sido avaliada. Com essa capacidade, o React pode preparar novas telas em segundo plano sem bloquear a thread principal. Isso significa que a interface do usuário pode responder imediatamente à entrada do usuário, mesmo que esteja no meio de uma tarefa de renderização grande, criando uma experiência de usuário fluida.
Embora o principal benefício seja que a interface do usuário responde imediatamente à entrada do usuário, em concorrência com o trabalho que ainda está sendo executado em segundo plano.
No entanto, a concorrência também introduz possíveis armadilhas que os desenvolvedores devem estar cientes. Para uma visão geral mais detalhada do Modo Concorrente no React no WordPress 6.2, confira os exemplos fornecidos na nota de desenvolvimento.
Mudanças adicionais para desenvolvedores
Outras mudanças notáveis que os desenvolvedores devem estar cientes incluem o seguinte:
- O WordPress 6.2 introduziu um novo filtro JavaScript que pode ser usado para filtrar configurações de blocos antes que o editor seja renderizado na tela. O novo filtro
blockEditor.useSetting.beforetambém permite que os desenvolvedores modifiquem as configurações com base na localização do bloco, função do usuário atual, blocos vizinhos e muito mais. Para informações adicionais e exemplos de uso, veja Personalizar configurações para qualquer bloco no WordPress 6.2. - Uma nova propriedade
skipBlockSupportAttributesfoi introduzido para excluir atributos e estilos relacionados ao suporte de blocos no componenteServerSideRender. - Uma nova API do theme.json permite agora estilizar variações do núcleo do bloco existente a partir do theme.json.
- As fontes do Google agora estão incluídas localmente e não são buscadas em endereços do Google nos temas integrados do Twenty Twelve ao Twenty Seventeen.
Mas isso não é tudo. O WordPress 6.2 introduz muitas funcionalidades, melhorias e correções de bugs que não mencionamos aqui por uma questão de brevidade. Para uma visão geral mais abrangente, confira o Guia WordPress 6.2.
Resumo
O WordPress 6.2 nos leva mais perto do final da Fase 2 do projeto Gutenberg, chamado de Customização. Mas, como aponta Matias Ventura, isso não significa que o trabalho em customização esteja completo. Como sempre, podemos esperar melhorias adicionais no editor com base no feedback da comunidade.
Neste artigo, exploramos algumas das principais funcionalidades, melhorias e correções de bugs do WordPress 6.2. Com dez versões do plugin Gutenberg integradas ao core – do 14.2 à 15.1 – veremos um novo Modo de Navegação, um Inspetor de Blocos com Abas, migração de Widgets para Temas de Blocos, novas APIs e toneladas de melhorias e correções de bugs. Também haverá melhorias na acessibilidade e internacionalização.
E se você adora WordPress e quer adquirir novas habilidades de desenvolvimento WordPress ou testar e fazer contribuições para o CMS, certifique-se de experimentar o DevKinsta, a suíte de desenvolvimento local do WordPress totalmente gratuita da Kinsta.
Agora, a você: já testou a nova versão em seu ambiente de desenvolvimento? Quais recursos você mais gosta no WordPress 6.2? Compartilhe suas opiniões na seção de comentários abaixo.
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