O WordPress 6.3 “Lionel” já está disponível! Esta é a versão principal final da Fase 2 do roteiro do WordPress.

Durante a segunda fase, o desenvolvimento se concentrou principalmente no Editor de sites, aprimorando sua funcionalidade e aprimorando a interface e a usabilidade.

Agora, os criadores de sites podem projetar layouts e gerenciar conteúdo na mesma interface, sem precisar alternar entre áreas de administração diferentes e sem escrever uma única linha de código.

Com o WordPress 6.3, 10 versões do plugin Gutenberg foram incorporadas ao núcleo, e se você não usa o Gutenberg em seu site, verá muitas mudanças na interface do Editor de Site.

Com o WordPress 6.3, a experiência de edição foi significativamente aprimorada. Várias mudanças técnicas afetaram o Editor de Site, resultando em uma nova forma de explorar temas de bloco e usar o próprio Editor de Site. Navegação aprimorada, modo sem distrações, pré-visualizações de temas de bloco, revisões de estilo e template, uma nova Paleta de Comandos e muito mais.

Há muito a dizer sobre o WordPress 6.3. Portanto, não espere mais e vamos descobrir o que há de novo com a versão final da Fase 2.

Confira nosso guia em vídeo sobre o WordPress 6.3:

Navegação aprimorada no editor de sites

Com o WordPress 6.3, a navegação do Editor de Sites foi significativamente aprimorada com a adição de novos pontos de entrada para diferentes áreas do editor. Antes da versão 6.3, essas seções de administração podiam ser acessadas a partir de pontos de acesso localizados em diferentes menus e telas de administração. O resultado dessas alterações é uma experiência de edição mais fácil e consistente.

A imagem a seguir compara o menu de navegação do editor no WordPress 6.2 e 6.3.

Navegação do editor de sites no WordPress 6.2 e 6.3.
Navegação do editor de sites no WordPress 6.2 e 6.3.

A primeira coisa que você notará na imagem acima são os dois botões exibidos no canto superior direito da barra lateral do editor. O botão View site aparece ao passar o mouse e fornece acesso rápido ao frontend do seu site WordPress. Essa é uma adição pequena, mas útil, que permite acessar rapidamente as páginas do site, independentemente de onde você esteja no editor de sites quando o menu Navegação estiver aberto.

O botão Open command palette (o ícone de lente) fornece acesso a um novo recurso do WordPress 6.3, o Command Palette (mais sobre isso abaixo).

Botões Exibir site e Abrir paleta de comandos no Editor de sites.
Botões Exibir site e Abrir paleta de comandos no Editor de sites.

A nova navegação do editor inclui os seguintes itens.

Navigation

Depois que você criar um menu de navegação, ele aparecerá no menu Navigation (Navegação) do Editor de Site. Aqui, você pode mover os itens do menu para cima ou para baixo ou excluí-los de um menu suspenso. Você também pode arrastar e soltar itens para organizar a ordem do menu.

Menus de navegação no Editor de Site.
Menus de navegação no Editor de Site.

Clicando em um item do menu, você será levado aos detalhes da página. Aqui você também pode editar o conteúdo e o layout da página (veja abaixo).

Styles

No menu Styles (Estilos), você pode acessar variações de estilo no modo de navegação. Aqui, você pode visualizar os estilos disponíveis, aplicar um deles e fazer suas personalizações.

Menu Estilos no WordPress 6.3.
Menu Estilos no WordPress 6.3.

O ícone de olho abre o Style Book, um recurso introduzido na versão 6.2 que fornece uma visualização dos blocos disponíveis com os diferentes estilos aplicados sem que você saia da interface do editor.

Você pode acessar facilmente o Livro de estilos no painel Estilos do editor de site.
Você pode acessar facilmente o Livro de estilos no painel Estilos do editor de site.

Pages

O item de menu Pages (Páginas) dá a você acesso às 10 últimas páginas atualizadas do site, além de vários recursos de edição. Nessa seção, você pode criar novas páginas, editar o conteúdo e o layout das páginas existentes, acessar os detalhes da página e muito mais.

A adição mais interessante aqui é que agora você pode criar novas páginas sem sair da interface do editor.

Quando você clica no ícone + no painel Navegação, um novo modal no meio da página permite que você defina um título para a nova página, mostrando também uma dica de ferramenta com sugestões para o seu título.

Rascunho de uma nova página no WordPress 6.3
Rascunho de uma nova página no WordPress 6.3

Ao clicar em Create draft (Criar rascunho), você é redirecionado para o editor de artigos com uma nova página carregada.

Em Pages, você também pode editar o conteúdo da página diretamente no Editor de site.

Menu Páginas no WordPress 6.3.
Menu Páginas no WordPress 6.3.

Agora você pode editar o conteúdo e o estilo da página no mesmo local. Isso proporciona a você maior controle sobre todos os aspectos da página e deve melhorar significativamente a experiência de edição.

No modo de edição, você pode alternar facilmente entre o editor de páginas e o editor de templates. Isso deve evitar qualquer confusão sobre o que você está editando e permite que você determine se as alterações devem afetar apenas a página atual ou se também se aplicam às outras páginas que estão usando o mesmo template.

A mesma tela também exibe os detalhes da página.

Detalhes da página no Site Editor.
Detalhes da página no Site Editor.

Os detalhes atualmente incluem:

  • Status
  • Slug
  • Template
  • Parent (Principal)
  • Palavras
  • Tempo para ler
  • Última modificação

Templates

Aqui você pode acessar os templates de página. A estrutura da tela Templates não mudou muito. No entanto, com o WordPress 6.3, quando você cria um novo template, uma nova sobreposição modal oferece uma lista de páginas para você escolher para o seu template.

Um novo modal oferece uma lista de páginas padrão para você escolher ao criar um novo template.
Um novo modal oferece uma lista de páginas padrão para você escolher ao criar um novo template.

Como segunda passo, um novo modal oferece uma lista de padrões de blocos que você pode usar para criar seu template.

Escolha um padrão no processo de criação do template.
Escolha um padrão no processo de criação do template.

Patterns

Chamada de Library (Biblioteca) em uma iteração anterior, a seção de administração Patterns (Padrões) reflete uma série de alterações notáveis que envolvem o sistema de padrões de blocos. Estas não são apenas alterações na interface do usuário. É uma revisão completa de toda a arquitetura de padrões de blocos.

Tela de padrões no WordPress 6.3.
Tela de padrões no WordPress 6.3.

Na seção de administração de Patterns, você poderá gerenciar partes e padrões de templates. Aqui você encontrará um menu que lhe dá acesso às partes do template e aos padrões de bloco divididos por categoria. Um ícone de cadeado identifica os padrões de tema que não podem ser modificados pelo usuário.

Partes de templates e padrões de temas na nova seção Padrões do Site Editor.
Partes de templates e padrões de temas na nova seção Padrões do Site Editor.

Nessa seção, você pode criar novas partes de template e padrões de bloco personalizados e gerenciá-los juntamente com os padrões do seu tema.

Como criar novas partes de templates e padrões de bloco no WordPress 6.3
Como criar novas partes de templates e padrões de bloco no WordPress 6.3

Quando você clica no botão Create pattern, um novo pop-up modal permite que você atribua um nome ao seu padrão e defina o tipo de padrão que vai criar, synced ou not synced.

Criando um padrão sincronizado no WordPress 6.3
Criando um padrão sincronizado no WordPress 6.3

Após criar pelo menos um padrão de bloco personalizado, você poderá acessá-lo em My patterns (Meus padrões), que aparecerá na parte superior do menu Patterns (Padrões).

Meus padrões no WordPress 6.3
Meus padrões no WordPress 6.3

Você pode selecionar seu padrão de bloco e acessar um novo painel onde poderá ver os detalhes do padrão. Ao mover a alça para a direita ou para a esquerda, você pode visualizar o padrão em diferentes resoluções e verificar sua capacidade de resposta.

A seção Details (Detalhes) exibe o status de sincronização do padrão atual.

Visualização de um padrão de bloco personalizado no WordPress 6.3.
Visualização de um padrão de bloco personalizado no WordPress 6.3.

Na parte inferior do menu Padrões, você também encontrará alguns links: Manage all template parts e Manage all of my patterns. Esses links fornecem acesso direto às partes do template e aos padrões personalizados.

Isso é sobre a nova interface de administração de padrões no Editor de Site. Agora vamos descobrir o que muda na estrutura e na funcionalidade do sistema de padrões de blocos.

Um novo sistema de padrões de blocos

A partir do WordPress 6.3 (e do Gutenberg 16.1):

  • Os blocos reutilizáveis foram renomeados para padrões sincronizados,
  • os padrões de blocos regulares agora são denominados Padrão não sincronizado,
  • o tipo de artigo personalizada wp_block foi ampliado para oferecer suporte a campos personalizados e um novo campo de metadados wp_block_sync_status foi adicionado para armazenar o status de sincronização de um padrão,
  • uma propriedade source foi adicionada ao esquema de padrões de bloco e à resposta para distinguir os padrões de núcleo e de usuário,
  • a API REST foi ampliada com um novo atributo
wp-block-sync-status
O campo de metadados wp_block_sync_status é usado para armazenar o status de sincronização de um padrão de bloco.

Agora está mais claro que todas as alterações feitas em um padrão sincronizado serão aplicadas a todas as ocorrências desse bloco em todo o seu site.

Por outro lado, as alterações feitas em um padrão de bloco não sincronizado afetarão somente aquela instância específica do padrão e não serão aplicadas a nenhuma outra instância que você possa ter adicionado a outros artigos ou páginas do seu site.

Graças ao novo sistema de gerenciamento de padrões, agora você pode criar padrões de blocos sincronizados e não sincronizados diretamente no editor de sites ou artigos, onde antes só era possível criar blocos reutilizáveis (agora padrões sincronizados).

Para experimentar esse novo recurso no editor de artigos, abra o painel do WordPress e vá para Posts -> Add New. Lá, crie um novo grupo de blocos ou simplesmente selecione os blocos que você deseja adicionar ao seu padrão de blocos. Em seguida, selecione Create pattern/reusable block no menu pop-up da barra de ferramentas de blocos.

Criar padrão/bloco reutilizável no editor de artigos.
Criar padrão/bloco reutilizável no editor de artigos.

Além disso, no editor de sites, um botão Create pattern permite que você crie um novo template ou padrão de template.

Criar um novo padrão no editor de sites.
Criar um novo padrão no editor de sites.

Ao clicar em Create template part, uma modal/pop-up é aberta para que você possa adicionar um nome para sua parte de template e a área da página para a qual a parte do template é destinada.

Criando parte do template no editor de site.
Criando parte do template no editor de site.

Quando você clica em Create template part, uma janela modal/pop-up diferente permite que você defina um nome para o seu padrão e escolha se deseja criar um padrão sincronizado ou não sincronizado.

Criando padrão no editor de sites.
Criando padrão no editor de sites.

Confirme e crie seu padrão ou parte do template no editor de site.

Criando um padrão de bloco no Editor de Site.
Criando um padrão de bloco no Editor de Site.

Quando você estiver satisfeito com suas edições, salve o padrão de bloco e volte ao Editor de Site. Abra a seção Patterns (Padrões) e clique em Manage all of my patterns. A tela Patterns mostrará o novo padrão de bloco personalizado que você criou.

A tela Padrões no WordPress 6.3
A tela Padrões no WordPress 6.3

Os padrões de bloco também aproveitam os controles de proporção de aspecto do bloco Imagem. Agora, se você definir uma proporção de aspecto para uma imagem, ela será preservada quando você trocar a imagem por outra de dimensões diferentes. Isso será particularmente útil com padrões de bloco, pois você não precisará mais se preocupar com as dimensões da imagem ao substituir imagens em padrões de bloco.

O controle de proporção de aspecto do bloco de imagem
O controle de proporção de aspecto do bloco de imagem

Para obter uma visão geral mais detalhada das alterações feitas no sistema de padrão de bloco, consulte os PRs nº 51078, nº 51144 e nº 50028.

Revisões de estilo expostas no Editor de Site

O Editor de Site agora apresenta um histórico de revisões que permite que você navegue pelas alterações e escolha uma para restaurar.

Para acessar o histórico de revisões, clique no novo botão Revisions no painel de Estilos.

Acesse o histórico de revisões no WordPress 6.3.
Acesse o histórico de revisões no WordPress 6.3.

Esse painel fornece uma lista de revisões em uma linha do tempo. Também fornece o nome do autor de cada revisão e a data e a hora de cada revisão em uma dica de ferramenta. Você pode visualizar todas as revisões e escolher a que deseja restaurar.

Revisões de estilo no WordPress 6.3
Revisões de estilo no WordPress 6.3

Você pode navegar pelas revisões na interface Global Styles, visualizar e restaurar seu conteúdo a qualquer momento.

O desenvolvimento das revisões não termina aqui. À medida que avançamos para a Fase 3, as revisões devem ser afetadas por novas adições e aprimoramentos que devem melhorar ainda mais sua usabilidade e desbloquear novos recursos.

A paleta de comandos

A Paleta de Comandos é uma nova funcionalidade que permite executar ações frequentemente utilizadas, como saltar para outras páginas ou templates no editor, usando comandos.

No Editor de Site, clique no ícone de lente ou pressione cmd + k (ctrl + k no Windows e no Linux). Isso abre a Paleta de Comandos.

Quando você começa a digitar um comando, a Paleta de Comandos sugere uma variedade de comandos para você escolher. Isso proporciona uma maneira rápida de você executar tarefas ou acessar áreas específicas do Editor de Site.

A Paleta de Comandos no WordPress 6.3.
A Paleta de Comandos no WordPress 6.3.

A primeira implementação desta funcionalidade traz um recurso de pesquisa rápida e algumas ações, como navegar no editor do site, criar um novo artigo/página, alternar elementos da interface, redefinir ou excluir um template, ou parte de um template, e ainda mais. Mais comandos devem ser adicionados em futuras iterações.

A nova ferramenta desbloqueia uma infinidade de casos de uso. Por exemplo, a paleta de comandos pode ser necessária para exibir opções de design para artigos ou páginas específicas.

Você também pode registrar seus próprios comandos graças à nova API da Paleta de Comandos para renderizar, registrar e cancelar o registro de comandos.

Existem diferentes maneiras de registrar comandos, dependendo do tipo de comando que você está registrando.

  • Comandos estáticos: Os desenvolvedores podem registrar comandos estáticos personalizados usando a ação wp.data.dispatch( wp.commands.store ).registerCommand ou o hook React wp.data.useCommand.
  • Comandos dinâmicos: Esses comandos são incluídos na lista de comandos dependendo do termo de pesquisa inserido pelo usuário no campo de entrada da paleta de comandos ou quando um comando só está disponível quando algumas condições são atendidas.
  • Comandos contextuais: Esses comandos têm prioridade em contextos específicos, o que significa que eles aparecem automaticamente no contexto certo (por exemplo, quando você está editando um template). Os comandos Reset template e Reset template são exemplos de comandos contextuais. No momento, dois contextos foram implementados:
    • site-editor: Esse contexto é definido quando você está navegando no editor de site.
    • site-editor-edit: esse contexto é definido quando você está editando algo (template, parte do template ou página) no editor

Você pode obter a lista dos comandos disponíveis executando wp.data.select( wp.commands.store ).getCommands() no console do navegador.

Listagem de comandos no WordPress 6.3
Listagem de comandos no WordPress 6.3

Inicialmente disponível nos editores de Artigos e de Site, a Paleta de Comandos deverá ser estendida para todo o painel de controle no futuro.

Para uma prévia destinada aos desenvolvedores da Paleta de Comandos, confira a Solicitação para callback.

Recursos adicionais e melhorias para o Editor de Site

Além dos recursos e melhorias discutidos nas seções anteriores, o WordPress 6.3 nos traz:

Visualização do tema no Editor de site

A partir da versão 6.3, um novo parâmetro theme_preview permite que cada tema de bloco seja carregado no Editor de Site e visualizado antes da ativação.

Pré-visualização do tema TT1 Blocks no Editor de Site.
Pré-visualização do tema TT1 Blocks no Editor de Site.

Para visualizar um tema de bloco, navegue até a tela Appearance > Themes (Appearance > Temas) e passe o mouse sobre qualquer tema de bloco. Você verá um botão Live Preview acima de cada tema de bloco. Basta clicar nesse botão para iniciar a visualização do tema no Editor de Site. Para temas que não sejam de bloco, o botão Live Preview inicia o Customizador de temas.

Melhorias no estado de carregamento

Com o WordPress 6.3, o estado de carregamento do editor foi aprimorado para evitar que o usuário interaja com o editor antes que ele seja totalmente carregado.

Agora, o usuário não pode interagir com o editor até que o carregamento seja concluído.
Agora, o usuário não pode interagir com o editor até que o carregamento seja concluído.

Modo livre de distrações

O WordPress 6.3 introduziu um modo de edição sem distrações no editor de site. Esse é o mesmo recurso disponível no editor de artigos desde o WordPress 6.2.

Modo livre de distrações no editor de site.
Modo livre de distrações no editor de site.

Você pode ativar esse recurso no painel de opções do editor de site. Quando o modo Sem Distração é ativado, as barras laterais e as barras de ferramentas desaparecem, deixando você livre para se concentrar em suas edições.

Melhorias adicionais na interface do usuário

  • Um novo componente <ViewLink> agora exibe um botão para abrir qualquer tipo de artigo publicado em uma nova janela. Esse é um recurso pequeno, mas útil, que permite que você visualize o tipo de artigo atual sem precisar procurar o link na barra lateral de configurações (PR #50260).
  • As descrições dos templates foram aprimoradas para explicar melhor o que cada template faz exatamente. Isso deve ajudar os usuários a escolher o template certo para personalizar no Editor de Site.
  • Anteriormente, as configurações do filtro Duotone estavam disponíveis apenas na barra de ferramentas de blocos. Com a versão 6.3, os controles do Duotone agora estão disponíveis na barra lateral de configurações (PR #49838).
  • Antes do WordPress 6.3, as fontes grandes não eram suficientemente dimensionadas em telas pequenas. Agora, a tipografia fluida é dimensionada sem problemas graças a um fator de escala logarítmica usado para calcular um tamanho mínimo de fonte para telas pequenas (PR #49707).

Novos blocos e ferramentas de design aprimoradas

O WordPress 6.3 também oferece dois blocos úteis que devem deixar muitos redatores de conteúdo felizes.

Novo bloco de notas de rodapé (Footnotes)

O WordPress 6.3 também nos traz um bloco de Notas de Rodapé (Footnotes) super útil.

Adicionando uma nota de rodapé a um bloco de texto.
Adicionando uma nota de rodapé a um bloco de texto.

Com essa excelente adição, você pode adicionar uma nota de rodapé para um bloco de texto (parágrafo, título e listas) com apenas alguns cliques. Posicione o cursor onde você deseja adicionar o link e clique no botão Footnote disponível no menu de contexto do bloco. Isso fará com que você adicione uma nota de rodapé na parte inferior da página.

O bloco de Notas de rodapé no WordPress 6.3.
O bloco de Notas de rodapé no WordPress 6.3.

O bloco de Notas de Rodapé (Footnotes) adiciona, remove e reorganiza automaticamente suas notas de rodapé enquanto você edita seu texto, e isso é extremamente útil, especialmente em artigos de formato longo.

Novo bloco de detalhes (Details)

Agora você pode ocultar um parte de conteúdo até que o leitor esteja pronto para ler suas perguntas frequentes (FAQ), assistir ao seu vídeo ou ouvir seu ótimo podcast, graças ao novo bloco de Detalhes (Details).

Um bloco Details vazio com resumo e conteúdo oculto.
Um bloco Details vazio com resumo e conteúdo oculto.

O novo bloco consiste em dois elementos separados: resumo e conteúdo oculto. Por padrão, o conteúdo está oculto, mas você pode alterar a configuração na barra lateral de configurações do bloco.

Um bloco Details com resumo e conteúdo de vídeo.
Um bloco Details com resumo e conteúdo de vídeo.

O bloco usa um elemento details com um rich text summary e um div contendo o elemento oculto (consulte também o PR #45055).

Melhorias no bloco de capa (Cover)

O bloco de capa foi aprimorado com alguns recursos de design que facilitam o uso e abrem mais possibilidades de personalização.

O bloco de capa agora é compatível com a ferramenta de design de cores de texto. Graças a essa inclusão, os usuários e autores de temas podem alterar a cor para todos os blocos internos simplesmente configurando a cor do texto no Bloco de Capa. Além disso, facilita lidar com transformações do Bloco de Mídia e Texto, pois as cores do texto agora são transmitidas suavemente para os blocos resultantes.

O bloco de capa (Cover) agora é compatível com a ferramenta de design de cores de texto.
O bloco de capa (Cover) agora é compatível com a ferramenta de design de cores de texto.

Outra inclusão ao bloco de Capa no WordPress 6.3 é o suporte para todas as ferramentas de design relacionadas a bordas. Essa adição deve diminuir a necessidade de estilização personalizada para o bloco.

Controles de borda para o Cover Block.
Controles de borda para o Cover Block.

O WordPress 6.3 também adiciona suporte para layout restrito/fluxo ao bloco de capa, que agora pode ser tratado como no bloco de Grupo. Essa alteração acrescenta consistência ao manuseio do layout e, sem dúvida, deve facilitar tanto para os usuários quanto para os desenvolvedores de temas para personalizarem suas configurações.

Configurações de layout para o bloco capa (Cover).
Configurações de layout para o bloco capa (Cover).

No entanto, os desenvolvedores de temas devem fazer alguns testes em seus temas existentes, pois o sistema de layout do bloco pode substituir as implementações personalizadas.

Filtro Duotone aprimorado

Algumas alterações aprimoram a maneira como usamos o Filtro Duotone.

Primeiro, agora você pode definir um filtro de tom duplo globalmente no painel Estilo do Editor de Site. Anteriormente, você só podia aplicar filtros de tom duplo globalmente a partir do theme.json.

Aplicando o filtro de dois tons no painel Estilo do Editor de Site.
Aplicando o filtro de dois tons no painel Estilo do Editor de Site.

Isso é possível porque os valores de tom duplo agora são definidos usando slugs de cor em vez de valores de cor. Isso também significa que você pode definir os valores de tom duplo uma vez e aplicá-los independentemente do tema atual ou da variação do tema, desde que ele use o mesmo slug.

Por fim, para aqueles que são mais experientes em tecnologia, os estilos duotones agora são gerados usando o mecanismo de estilo do WordPress e são armazenados com suporte a blocos CSS em vez de serem incorporados.

Melhorias adicionais

  • O bloco Button agora suporta a cor, o estilo e a largura da borda (PR #44574)
  • Controle de Excerpt length adicionado ao bloco Post Excerpt (PR #44964)
  • Agora você pode controlar a relação de aspecto do bloco Post Featured Image (PR #47854)
  • A interface Global Styles agora inclui controles de cor e tipografia para o elemento Caption (PR #49141)
  • Uma variação do Post Modified Date foi adicionada ao bloco Post Date. É útil se você quiser adicionar rapidamente a data de modificação do artigo em vez da data de publicação (PR #49111)
  • Agora é possível substituir a Logo do Site a partir da barra lateral (PR #49992)

Aprimoramentos de desempenho e alterações para desenvolvedores

O WordPress 6.3 também traz muitas alterações e novos recursos destinados a melhorar o desempenho do site e os fluxos de trabalho do desenvolvedor. Entre as muitas adições, escolhemos as seguintes:

Descontinuação do suporte ao PHP 5

A partir do WordPress 6.3, você não terá mais suporte ao PHP 5. A nova versão mínima suportada será o PHP 7.0.0. A versão recomendada do PHP é a 7.4 ou superior. 7.a versão 4 também é a mais usada em 50,8% dos sites do WordPress.

Versões do PHP usadas em sites existentes do WordPress em julho de 2023
Versões do PHP usadas em sites existentes do WordPress em julho de 2023 (Fonte da imagem: WordPress.org).

Isso é importante não apenas para os desenvolvedores, mas para todos os usuários do WordPress, pois melhora a segurança e o desempenho do seu site.

Essa também é a razão pela qual a hospedagem da Kinsta só permite versões suportadas do PHP. Executamos regularmente nossos benchmarks de desempenho das versões suportadas do PHP para verificar as melhorias de desempenho que vêm com as versões mais recentes.

Versões PHP suportadas a partir de julho de 2023
Versões PHP suportadas a partir de julho de 2023 (Fonte da imagem: PHP.net).

Melhorias de desempenho no carregamento de imagens

A partir do WordPress 6.3, o atributo fetchpriority com um valor de "high" é atribuído à imagem para determinar se ela é a imagem LCP (Largest Contentful Pain), enquanto o Largest Contentful Pain é uma métrica que informa o tempo de renderização do maior elemento dentro da janela de visualização.

O atributo fetchpriority instrui o navegador a priorizar essa imagem, mesmo antes de o layout ter sido computado.

Outro aprimoramento é o tratamento automático do carregamento lento de imagens com o atributo loading. Esse atributo foi introduzido pela primeira vez no WordPress 5.5 e, em seguida, foi aprimorado com o WordPress 5.9 para omitir o atributo loading="lazy" para a primeira imagem de conteúdo (consulte Melhorias de desempenho de carregamento lento no WordPress 5.9). Agora, com o WordPress 6.3, todos os problemas devem ter sido corrigidos, resultando em boas melhorias de desempenho.

Os atributos fetchpriority e loading agora são controlados pela nova função wp_get_loading_optimization_attributes(). Essa função retorna uma array associativa de atributos para otimizar o desempenho do carregamento. Atualmente, os possíveis atributos retornados por essa função são:

  • loading com um valor de "lazy"
  • fetchpriority com um valor de "high"

Observe que nenhum elemento deve ter ambos os atributos, pois eles são mutuamente exclusivos. Caso um elemento contenha ambos os atributos, um aviso será acionado.

Para obter uma visão geral mais detalhada da função wp_get_loading_optimization_attributes() e dos atributos fetchpriority e loading com exemplos de uso, consulte Melhorias de desempenho de imagem no WordPress 6.3.

Suporte para atributos async e defer do HTML 5

async e defer são dois atributos HTML 5 que instruem o navegador a fazer download do JavaScript sem pausar a análise do HTML.

Há uma diferença fundamental entre os dois atributos:

  • Os scripts com o atributo async são executados de forma assíncrona assim que são carregados. Quando o script é carregado, o navegador pausa a análise do HTML e executa o script.
  • Os scripts com o atributo defer são executados somente quando a análise da página é concluída.

A partir do WordPress 6.3, agora você pode registrar scripts com os atributos async e defer usando o parâmetro booleano $in_footer das funções wp_register_script() ou wp_enqueue_script() (consulte também Como enfileirar seus ativos no WordPress).

Esse parâmetro foi sobrecarregado e agora aceita um novo parâmetro de array $args que permite que você especifique uma estratégia de carregamento para seus scripts.

Aqui está um exemplo de como você pode definir uma estratégia defer no arquivo PHP de um plugin usando wp_register_script (o código seria o mesmo com wp_enqueue_script):

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'strategy' => 'defer'
	) 
);

A compatibilidade com versões anteriores é garantida, portanto, você pode continuar a instruir o WordPress a carregar seu script no rodapé:

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'in_footer' => true,
		'strategy' => 'defer'
	) 
);

Graças às novas implementações, agora é possível evitar que um script seja carregado em uma ordem inesperada na árvore de dependência de scripts, o que não era possível com as ferramentas disponíveis antes do WordPress 6.3. Para obter uma visão geral mais detalhada das alterações na API de Scripts, com exemplos adicionais e detalhes técnicos, consulte a nota de desenvolvimento de Simon Dowdles.

Modo de desenvolvimento

O WordPress 6.3 apresenta um novo modo de desenvolvimento que os desenvolvedores podem ativar usando uma nova constante WP_DEVELOPMENT_MODE. Essa nova constante é recomendada para qualquer site de desenvolvimento e seu valor depende do tipo de desenvolvimento em andamento.

WP_DEVELOPMENT_MODE a constante pode assumir um dos seguintes valores possíveis:

  • core – Usado para indicar que um site está sendo utilizado como ambiente de desenvolvimento central.
  • plugin – Usado para o desenvolvimento de plugins.
  • theme – Usado para o desenvolvimento de temas.
  • all – Isso é usado para indicar que um site é utilizado para os três tipos de desenvolvimento.
  • Uma string vazia é o padrão e indica que o site não está sendo utilizado como um ambiente de desenvolvimento.

WP_DEVELOPMENT_MODE deve ser usado somente em instalações de desenvolvimento. Não é relevante na produção.

O modo de desenvolvimento afeta alguns aspectos de baixo nível do comportamento do WordPress. No momento em que este artigo foi escrito, a única diferença diz respeito ao armazenamento em cache do arquivo theme.json, sendo ignorado quando WP_DEVELOPMENT_MODE é definido em 'theme'.

WP_DEVELOPMENT_MODE funciona de maneira diferente das constantes WP_ENVIRONMENT_TYPEWP_DEBUG que são normalmente usadas no desenvolvimento, pois WP_DEBUG e WP_ENVIRONMENT_TYPE não afetam o comportamento do WordPress de forma alguma. Você provavelmente usaria WP_DEVELOPMENT_MODE quando WP_ENVIRONMENT_TYPE estiver definido como 'development' ou 'local', já que o desenvolvimento nunca deve ocorrer em sites de produção.

Você pode ativar o modo de desenvolvimento dessa forma:

define( 'WP_DEVELOPMENT_MODE', 'theme' );

O WordPress 6.3 também apresenta uma nova função wp_in_development_mode() que permite que você verifique se o seu site está no modo de desenvolvimento. A nova função também permite que você verifique o tipo de desenvolvimento atualmente em andamento, graças a um parâmetro $mode cujos valores possíveis são 'core', 'plugin' e 'theme':

if ( wp_in_development_mode( 'theme' ) ) { ... }

Você também pode verificar o valor atual de WP_DEVELOPMENT_MODE no painel de Info da ferramenta Site Health.

Alterações adicionais para desenvolvedores

Resumo

Com o WordPress 6.3, chegamos ao fim da Fase 2: Personalização do roteiro de desenvolvimento do Gutenberg. Essa nova versão nos traz melhorias significativas na experiência de edição, incluindo novos recursos de edição no Editor de Site, um sistema de padrões de blocos novo e mais flexível, novos blocos, melhor desempenho, melhorias na acessibilidade e internacionalização e muito mais.

Com a próxima versão do WordPress, prevista para novembro de 2023, entraremos na Fase 3: Colaboração, cujo principal objetivo é trazer recursos avançados de colaboração para o editor.

Se quiser testar e/ou contribuir com o WordPress, você deve usar o DevKinsta, nosso pacote de desenvolvimento local gratuito para WordPress.

Agora, a palavra está com você: Você já testou o WordPress 6.3 em seu ambiente de desenvolvimento? Quais recursos do WordPress 6.3 você mais gostou? Compartilhe seus pensamentos nos comentários abaixo.

Carlo Daniele Kinsta

Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.