WordPress 6.1 “Misha” foi lançado em 1 de novembro de 2022. A terceira grande atualização do ano segue o WordPress 6.0 Arturo, lançado em 24 de maio, e WordPress 5.9 Josephine, lançado em 25 de janeiro.
Como sempre acontece, novas versões do WordPress trazem novas funcionalidades, melhorias e correções de bugs das últimas versões do plugin Gutenberg para o núcleo. E o WordPress 6.1 não é exceção, já que 11 versões do plugin Gutenberg foram fundidas no núcleo, de 13.1 a 14.1.
Neste artigo, apresentaremos as novas funcionalidades que virão com o novo grande lançamento do WordPress.
Matias Ventura nos deu algumas ideias sobre o Roadmap para 6.1, onde ele disse que o objetivo do 6.1 é refinar as experiências introduzidas com 5.9 e 6.0 e corrigir algumas coisas à medida que nos aproximamos da fase 3 do Roadmap de Gutenberg.
1. Melhorias no editor de templates: Uma das principais novidades é o Editor de Template. O WordPress 6.1 deve introduzir a capacidade de navegar, visualizar e editar a estrutura do site.
2. Padrões de templates: O objetivo é dar aos padrões de blocos um papel central na criação de templates e páginas, adaptando aos tipos de artigos e tipos de blocos personalizados, melhorando o gerenciamento de padrões salvos, etc.
3. Estilos e blocos globais e ferramentas de design: O WordPress 6.1 permitirá gerenciar webfonts, implementar tipografia responsiva, e expandir o conjunto de ferramentas disponíveis para blocos.
Dito isso, daremos uma olhada mais de perto em alguns dos recursos mais poderosos que vêm com o WordPress 6.1.
Tipografia e espaçamento de fluidos
WordPress 6.1 adiciona suporte para tipografia de fluidos via calc/clamp Funções do CSS.
A expressão Fluid tipografia descreve a capacidade do texto de se adaptar à largura do viewport, suavemente escalando de uma largura mínima para uma largura máxima.
É algo diferente do que você pode conseguir com as consultas de mídia, pois as consultas de mídia permitem que os temas redimensionem o texto dependendo do tamanho específico do viewport, mas não fazem nada entre valores diferentes.
Alguns temas já suportam tipografia fluida. Twenty Twenty-Two, por exemplo, usam a função CSS clamp() para vários tamanhos de fontes. Por exemplo, a função CSS :
"settings": {
...
"custom": {
"spacing": {
"small": "max(1.25rem, 5vw)",
"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
"large": "clamp(4rem, 10vw, 8rem)",
"outer": "var(--wp--custom--spacing--small, 1.25rem)"
},
"typography": {
"font-size": {
"huge": "clamp(2.25rem, 4vw, 2.75rem)",
"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
}
}
}
}Como você pode ver no código acima, os valores do tamanho da fonte fluida são usados para cada tamanho de fonte.
Agora, a partir do WordPress 6.1, os temas são habilitados para gerar automaticamente tamanhos de fontes fluidas, declarando a nova propriedade typography.fluid da seguinte forma:
"settings": {
....
"typography": {
"fluid": true,
"fontSizes": [
{
"size": "2rem",
"fluid": {
"min": "2rem",
"max": "2.5rem"
},
"slug": "medium",
"name": "Medium"
}
]
}Usando typography.fluid e typography.fontSizes[].fluid, o valor de cada tamanho de fonte é calculado automaticamente usando a seguinte fórmula:
--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});Por exemplo:
--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});Note que, no momento em que escrevemos este artigo, a Tipografia Fluida é uma funcionalidade experimental. Você pode explorar os detalhes técnicos em Suportes de bloco: adicionar tipografia de fluidos.
Fluid typography is a significant improvement for building modern #WordPress websites. We just updated @frostwp to include this feature. Here’s a great read from @richard_tabor into what it is and why it matters. https://t.co/Bq5YuHX3wi
— Brian Gardner (@bgardner) August 8, 2022
Veja também Como adicionar Tipografia de Fluidos aos Temas de Bloco do WordPress por Rich Tabor e Tipografia de Fluidos com Gutenberg por Carolina Nymark.
Da mesma forma que a Tipografia Fluida, o WordPress 6.1 também introduz suporte para Espaçamento Fluido.
Antes do WordPress 6.1, só era possível definir valores de espaçamento personalizados no editor, e os autores do tema não tinham permissão para especificar valores fixos para preenchimento, margem e espaço. Portanto, não era possível transferir configurações de espaçamento de um tema para outro ou manter valores de espaçamento ao copiar e colar conteúdo entre diferentes sites.
Agora os desenvolvedores de temas podem declarar suporte a espaçamento de fluidos usando as configurações spacing.spacingScale e spacing.spacingSizes[] (veja também Theme.json: Adicione predefinições de tamanho de espaçamento e Estenda o theme.json para fornecer predefinições de tamanho de espaçamento).
"settings": {
"spacing": {
"spacingScale":
{
"steps": 0
},
"spacingSizes": [
{
"size": "clamp(1.5rem, 5vw, 2rem)",
"slug": "30",
"name": "1"
},
{
"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
"slug": "40",
"name": "2"
},
{
"size": "clamp(2.5rem, 8vw, 6.5rem)",
"slug": "50",
"name": "3"
},
{
"size": "clamp(3.75rem, 10vw, 7rem)",
"slug": "60",
"name": "4"
},
{
"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
"slug": "70",
"name": "5"
},
{
"size": "clamp(7rem, 14vw, 11rem)",
"slug": "80",
"name": "6"
}
],
...
}
}Configurações Globais & Presets de Estilos e no referencial vivo da API theme.json V2.
Você encontrará as propriedades de tipografia fluida e espaçamento documentadas em Global Settings & Styles Presets e no referencial em tempo real do theme.json API V2.
Edição apenas de conteúdo de blocos
O WordPress 6.1 introduz a edição apenas de conteúdo para blocos, padrões e templates. Com a edição apenas de conteúdo ativada, os usuários só podem alterar o conteúdo de um bloco ou padrão, evitando que eles quebrem acidentalmente o layout ou alterem os estilos.
Atualmente, não é possível habilitar a edição apenas de conteúdo pela interface do Editor Visual. Para ativar esse recurso, o atributo templateLock deve ser definido como contentOnly e você pode usar o Editor de Código para isso.
A imagem a seguir fornece um exemplo simples.
Quando a edição somente de conteúdo é habilitada em um bloco ou padrão, as configurações da barra lateral mudam. Você não verá os controles de configurações usuais, mas uma lista de blocos incluídos no grupo. Você pode selecionar qualquer um desses blocos clicando no bloco na tela do editor ou no item da lista correspondente na barra lateral.
Você pode desativar a edição somente de conteúdo clicando no botão Modify na barra de ferramentas do grupo.
Uma vez que você tenha terminado suas edições, você pode reativar a edição somente de conteúdo clicando no botão Done.
Além disso, blocos que não têm conteúdo são escondidos da visualização da lista e não podem receber foco na lista de blocos.
Você pode ler mais sobre edição de conteúdo apenas na nota do dev e neste artigo do blog por Rich Tabor.
Tipos de blocos melhorados
Com tantas versões do Gutenberg fundidas no núcleo, o WordPress 6.1 vai trazer toneladas de alterações e melhorias para os tipos de blocos existentes.
Adicionado suporte de borda para o bloco de colunas
Agora, o bloco de colunas utiliza o novo componente BorderBoxControl, que permite aos usuários do WordPress especificar bordas personalizadas para as colunas, além de definir estilos completamente diferentes para cada borda (consulte também o pull request “Column: Add border support to column blocks“.
As bordas individuais também podem ser definidas no arquivo theme.json como segue:
"core/column": {
"border": {
"top": {
"color": "#CA2315",
"style": "dashed",
"width": "6px"
},
"right": {
"color": "#FCB900",
"style": "solid",
"width": "6px"
}
}
}Os desenvolvedores podem ler mais sobre o novo controle em Referência de Componentes – BorderBoxControl.
Controles de bordas para blocos de imagem
Gutenberg 13.8 introduziu suporte para todos os controles de borda para o bloco de imagens. A alteração será adicionada ao núcleo com o WordPress 6.1, abrindo a porta para novas e grandes oportunidades para os criativos da web.
Melhorias no bloco de comentários
O WordPress 6.1 também nos traz um bloco de comentários melhorado. A partir da próxima versão do WordPress, os usuários poderão usar recursos de edição mais avançados no bloco de Comentários.
Na imagem abaixo, você pode ver a barra lateral de configurações de bloco de comentários e as alterações aplicadas ao título dos comentários.
Variações de blocos de termos de artigos para termos de taxonomia personalizados
O bloco de Termos de artigos foi aprimorado com uma nova variação de taxonomia personalizada. Agora é possível registrar uma nova taxonomia personalizada, por exemplo, “Atores em um Filme”, e será possível adicionar uma lista de termos de taxonomia ao artigo atual ou ao tipo de artigo personalizado.
A imagem abaixo mostra uma lista de atores em um tipo de artigo de filme.
Um novo filtro principal para o bloco de consulta
Um novo filtro principal está agora disponível para o Bloco de Consultas para exibir artigos hierárquicos e páginas com o mesmo bloco principal.
Controles de família de fontes no bloco de título
O Bloco de Título agora suporta controles de Família de Fontes.
Espaçamento horizontal e vertical em bloco de galeria
Começando com o WordPress 6.1, um novo controle de espaçamento axial permite que você defina diferentes espaços horizontais e verticais para imagens no bloco da Galeria.
Esta alteração resulta em uma maior flexibilidade na criação do layout das galerias de imagens.
Imagens em destaque no bloco de capa
As imagens em destaque ainda recebem muita atenção, e no WordPress 6.1, o escopo do seu uso é ainda mais ampliado. A partir de 6.1, a imagem em destaque pode ser selecionada diretamente do bloco de cobertura, como mostrado nas imagens a seguir.
Esta alteração deve ajudar a criar uma experiência de usuário mais consistente, tornando mais claro para o usuário o que ele está personalizando.
Além disso, uma alavanca de imagem em destaque foi adicionada para substituir o fluxo de mídia.
Ferramentas de aparência para links de navegação de artigos
A propriedade de configuração appearanceTools permite que você opte por várias configurações desabilitadas por padrão.
Desde o WordPress 6.1, para temas que suportam a propriedade de configuração appearanceTools, você pode personalizar a cor do link e a família de fontes no link de navegação de artigos.
Você pode ler mais sobre a propriedade appearanceTools em nossa introdução ao tema dos Twenty Twenty-Two.
Bloqueio dentro do bloco de contêineres com um clique
Agora, um novo botão de alternância permite que os usuários bloqueiem blocos dentro de um contêiner de blocos com apenas um clique. Isso se aplica aos blocos de Grupo, Capa e Coluna.
Bloco da lista aprimorada
O bloco da Lista foi melhorado e agora utiliza blocos internos.
Esta alteração facilita classificar e recuar itens da lista e definitivamente leva a uma experiência melhor para o usuário.
Suporte a pseudo-elementos em temas de blocos
Agora os temas de blocos podem personalizar a aparência dos elementos e blocos dependendo de seu estado (ativo/foco/destaque).
Este é um exemplo de uso de pseudo-selecionadores com links, como definido no theme.json do Twenty Twenty-Three:
"styles": {
...
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--contrast)"
},
":hover": {
"typography": {
"textDecoration": "none"
}
},
":focus": {
"typography": {
"textDecoration": "underline dashed"
}
},
":active": {
"color": {
"text": "var(--wp--preset--color--secondary)"
},
"typography": {
"textDecoration": "none"
}
},
"typography": {
"textDecoration": "underline"
}
}
}
}Estilos de botões de código:
"styles": {
...
"elements": {
"button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--contrast)"
},
":hover": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--base)"
}
}
}
}
}Você pode ver o resultado nas seguintes imagens.
Mas você também pode estilizar elementos em nível de bloco. A única diferença é que você deve definir estilos dentro de um bloco. Como exemplo, o seguinte código do theme.json do Twenty Twenty-Three aplica estilos aos links no bloco de navegação principal:
"styles": {
"blocks": {
"core/navigation": {
"elements": {
"link": {
":hover": {
"typography": {
"textDecoration": "underline"
}
},
":focus": {
"typography": {
"textDecoration": "underline dashed"
}
},
":active": {
"typography": {
"textDecoration": "none"
}
},
"typography": {
"textDecoration": "none"
}
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}
}
}
}Recursos adicionais e melhorias no editor de blocos
Embora seja uma versão consolidada, o WordPress 6.1 trará tantas alterações e melhorias que seria impossível listar todas elas em um único artigo (mas verifique este artigo de Anne McCarty para uma lista abrangente de ferramentas de design por bloco).
Aqui, analisaremos as seguintes alterações:
Variações de partes de template no inseridor de blocos
As variações das partes de template estão agora disponíveis no inseridor de blocos, facilitando a adição de partes de template ao seu site.
Esta alteração torna o processo de edição mais simples e rápido, permitindo que os usuários visualizem as variações de uma parte de template tudo de uma só vez com apenas alguns cliques.
Visualização de margens e preenchimentos
Uma pequena, mas útil melhoria é o destaque das margens e preenchimentos enquanto o usuário os ajusta. Isso torna muito mais claro quanto espaço está sendo adicionado dentro ou fora dos elementos.
Melhorias na barra lateral de configurações
O WordPress 6.1 também mostrará várias melhorias na interface da barra lateral de configurações.
A barra lateral de configurações de artigos foi ligeiramente redesenhada. Agora, os campos para formato de artigos, slug, template e autores estão alinhados e têm a mesma largura. Além disso, o agendador de artigos foi simplificado para tornar a experiência mais compreensível. A seção de template também foi movida para um popover para economizar espaço e limpar a interface.
Além disso, o painel de templates foi substituído por um link de template. Quando clicado, o link do template exibe o template padrão em um popover.
Atualizações de design no popover de publicação
O seletor de data e hora no popover de publicação foi redesenhado e agora utiliza “componentes existentes do WordPress e estilização Emotion”.
Mais informações técnicas estão disponíveis em Atualizações de design para o popover de publicação (DateTimePicker).
Tempo de leitura no painel de informações
O painel de informações disponível na barra de ferramentas superior foi aprimorado e agora exibe o “Tempo de Leitura“, além das palavras, caracteres, cabeçalhos, parágrafos e blocos.
O tempo de leitura estimado é calculado em uma média de 189 palavras por minuto. Leia mais em @wordprespress/editor: Adicione o tempo estimado de leitura à tabela de conteúdo no editor.
Controle de espaçamento de blocos adicionado ao styles UI
Agora os usuários podem ajustar o espaçamento vertical e horizontal do Styles UI para blocos que suportam este recurso.
Novas e melhoradas ferramentas de builder
O WordPress 6.1 também estenderá a funcionalidade do Construtor de Sites. Os Padrões de Blocos estarão disponíveis em mais lugares e uma ampla variedade de tipos de modelos melhorará a experiência de edição no editor de templates.
Padrões de criação para tipos de artigos
O WordPress 6.0 introduziu Padrões de Criação de Páginas, que são uma forma de fornecer uma seleção de padrões cada vez que um usuário cria uma nova página. Desta forma, você não precisa construir a página do zero, mas pode escolher um padrão a partir de um modal e preencher o conteúdo, e você está pronto para começar.
Para ativar este recurso, pelo menos um padrão de blocos deve declarar o suporte para os tipos de blocos core/post-content.
Agora, começando com o WordPress 6.1, este recurso se estende a todos os tipos de artigos. Tudo o que você precisa fazer é incluir core/post-content no seu padrão blockTypes e definir o postTypes relevante.
Agora vamos descobrir como tirar proveito desta nova funcionalidade com um exemplo prático. Suponha que você tenha um tipo de artigos de filme.
Primeiro, você precisa registrar um padrão de bloco, como discutido aqui.
Ou você pode seguir o caminho mais fácil e usar o registro de padrão implícito (para simplificar neste exemplo, usaremos o registro de padrão implícito).
Crie um arquivo PHP para o seu padrão de bloco em um diretório /patterns na pasta do seu tema (para este exemplo, nós usamos Twenty Twenty-Two). Então adicione o seguinte cabeçalho:
<?php
/**
* Title: Pattern with columns
* Slug: twentytwentytwo/pattern-with-columns
* Block Types: core/post-content
* Post Types: movie
* Categories: text
*/
?>
<h2>Hello there!</h2>
E é isso aí. Agora, cada vez que você cria um novo tipo de artigos de Filme, um Modal Choose a pattern aparece na tela.
Se você quiser que o modal apareça em vários tipos de artigos, basta adicionar as indicações correspondentes separadas por vírgulas:
<?php
/**
* Title: Pattern with columns
* Slug: twentytwentytwo/pattern-with-columns
* Block Types: core/post-content
* Post Types: movie, book
* Categories: text
*/
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- /wp:heading -->
Para obter uma visão mais detalhada dos padrões de criação, consulte a capacidade de usar padrões de criação para outros tipos de postagens além de páginas.
Mais tipos de templates no editor do site
Com o WordPress 6.0, apenas um número limitado de templates pode ser criado no Editor do Site:
Começando com o WordPress 6.1, será possível criar um template diferente para cada tipo de artigo individual.
E você também pode adicionar e editar templates para taxonomias centrais e personalizadas, mesmo para categorias ou tags únicas.
Se você registrar tipos de artigos personalizados ou uma taxonomia personalizada, eles serão automaticamente listados na caixa de seleção de templates do Editor do Site.
Uma vez selecionado o tipo de mensagem, um modal solicita ao usuário se ele deve criar um template para todas as mensagens desse tipo ou criar um novo template para uma mensagem específica do tipo selecionado.
Então um novo modal fornece uma lista dos artigos disponíveis para aquele tipo de artigo.
Twenty Twenty-Three e outros melhorias de temas
O WordPress 6.1 também oferece um tema padrão totalmente novo: Twenty Twenty-Three. É um tema minimalista, sem imagens ou funcionalidades adicionais.
O novo tema padrão reúne todas as últimas funcionalidades de edição do site em um só lugar e é perfeita para testar templates e partes de templates, variações de estilo, tipografia flexível e espaçamento, e todas as funcionalidades introduzidas com as últimas versões do WordPress.
E por causa disso, é também uma ótima ferramenta para aprender como desenvolver temas, templates e padrões de blocos com exemplos de trabalho.
Você pode explorar mais no novo tema padrão do WordPress em nossa visão detalhada.
Além do novo tema padrão, o WordPress 6.1 também introduz várias melhorias temáticas.
Atualização do cabeçalho do URI em temas
Antes do WordPress 6.1, se um tema tinha o mesmo nome de um tema disponível no diretório de temas do WordPress, uma mensagem de atualização disponível era mostrada ao usuário.
Com o WordPress 6.1, um novo cabeçalho Update URI impede a sobrescrita acidental de arquivos de temas de terceiros. Essa funcionalidade é especialmente útil se você tiver um tema desenvolvido internamente com o mesmo nome de um tema no diretório de Temas do WordPress, mas não deseja compartilhá-lo com a comunidade.
Agora, se o valor do campo de cabeçalho de tema Update URI não corresponder a https://wordpress.org/themes/{$slug}/ ou w.org/theme/{$slug}, o WordPress não tentará atualizá-lo.
Se estiver definido, Update URI deve ser um URI com nome de host único, como https://wordpress.org/themes/my-theme/ ou https://example.com/my-theme/.
Os desenvolvedores de temas encontrarão uma visão mais detalhada do novo cabeçalho do tema Update URI na nota oficial de desenvolvimento.
Filtro de temas de bloco na tela “Adicionar Temas”
Agora, há um novo atalho que permite filtrar temas de bloco ao adicionar um novo tema à sua instalação do WordPress.
Além disso, foi adicionada uma nova aba de ajuda para Temas de Bloco na mesma tela.
Alterações para desenvolvedores
O WordPress 6.1 também adiciona uma nova API e muitos recursos e alterações para os desenvolvedores.
Nova API de persistência de preferências
O WordPress 6.1 apresenta uma nova API de persistência de preferências que salva as preferências do editor no banco de dados do WordPress em vez do armazenamento local.
Dessa forma, as preferências do usuário podem ser armazenadas em todos os navegadores e dispositivos.
Para esse fim, o sistema de persistência anterior no pacote @wordpress/data foi descontinuado, e um novo pacote de preferences-persistence foi introduzido. O novo pacote salva os dados nas metas do usuário por meio da Rest API. Os dados também serão salvos no armazenamento local como alternativa caso o usuário fique offline ou ocorra uma interrupção na solicitação (consulte também pull #39795).
Suporte para estilos de botões no theme.json
Com o WordPress 6.1, você pode adicionar estilos de botões aos seus temas usando o theme.json. Isso permite que os desenvolvedores de temas adicionem consistência aos botões através de blocos. Um exemplo é o bloco de pesquisa, mas também blocos de terceiros serão beneficiados com esta alteração.
Para tornar isso possível, uma nova classe wp-element-button será adicionada aos elementos de botões para compartilhar o mesmo estilo.
Você pode testar esta alteração adicionando o seguinte código ao seu theme.json em um ambiente de desenvolvimento:
{
"styles": {
"elements": {
"button": {
"color": {
"background": "blue"
}
}
}
}
}Pesquisar variações de blocos agora suporta vars de consulta
O WordPress 6.1 suportará variações de blocos de pesquisa baseados em vars de consulta. Isso significa que você conseguirá fornecer aos seus usuários requisitos de pesquisa para serem usadas para pesquisar qualquer tipo de conteúdo.
No exemplo a seguir, estamos registrando uma variação de bloco para um tipo de artigo movies. O exemplo é baseado no tutorial de Carolina Nymar sobre variações de blocos.
No arquivo de funções do seu tema (child), adicione o seguinte código:
function movies_editor_assets() {
wp_enqueue_script(
'movies-block-variations',
get_template_directory_uri() . '/assets/block-variations.js',
array( 'wp-blocks' )
);
}
add_action( 'enqueue_block_editor_assets', 'movies_editor_assets' );Agora, crie o seguinte arquivo block-variations.js na pasta de ativos do seu tema (child):
wp.blocks.registerBlockVariation(
'core/search',
{
name: 'movie-search',
title: 'Movie Search Block',
attributes: {
query: {
post_type: 'movies'
}
}
}
);Agora recarregue seu painel de controle do WordPress e procure por uma variação do bloco de pesquisa de Filmes no inseridor de blocos.
Você pode ler mais sobre variações de blocos na documentação oficial.
Um novo elemento de botões em estilos globais
O WordPress 5.9 introduziu uma interface de Estilos Globais para permitir que os usuários personalizem as predefinições de estilo para seus sites, seja globalmente ou de nível de bloco.
Com a primeira implantação, você poderia personalizar as cores para Fundo, Texto e Links. Agora, começando com o WordPress 6.1, um novo elemento de Botões foi adicionado ao painel de Cores para permitir que os usuários controlem a aparência dos botões em todos os seus sites.
Isso afetaria o estilo dos botões em tudo o site, desde o bloco Botões até o bloco Procurar e blocos de terceiros fazendo uso de botões.
Ferramentas de aparência disponíveis para qualquer tema
Antes do WordPress 6.1, as Appearance Tools só estavam disponíveis em blocos de temas. Com 6.1, qualquer tema pode incluir este recurso simplesmente adicionando suporte em seu arquivo de funções:
add_theme_support( 'appearance-tools' );Isso permitiria todas as seguintes configurações de uma só vez:
- borda: cor, raio, estilo, largura
- cor: link
- espaçamento: BlockGap, margem, preenchimento
- tipografia: lineHeight
Nova função is_login_screen()
Uma nova função is_login_screen() agora permite que você determine se a página atual é a tela de login. Locais de login personalizados também são suportados.
Você pode usar a nova etiqueta condicional como segue:
function add_text_to_login() {
if ( is_login_screen() ) {
echo( "<h1>Welcome to Kinsta!</h1>" );
}
}
add_action( 'init', 'add_text_to_login' );O resultado na tela seria o seguinte:
Novo site health checks para cache de objetos persistente e cache de página inteira
O WordPress 6.1 introduz duas verificações de Saúde do Site para Cache de Objeto Persistente e Cache de Página. Ambas as verificações são executadas apenas em ambientes de produção.
Você pode ver os resultados desses novos testes na aba Status do Site Health.
O teste de Cache de Objeto Persistente determina se o site está usando um cache de objeto persistente e, caso contrário, recomenda o uso dele se fizer sentido para o site.
Além do novo teste, o WordPress 6.1 introduz vários novos filtros que os provedores de hospedagem podem usar em seus respectivos ambientes.
Com site_status_persistent_object_cache_url, os provedores de hospedagem de sites podem substituir o link padrão “Saiba mais” para o cache de objeto persistente com um link personalizado. Por exemplo:
add_filter( 'site_status_persistent_object_cache_url', function() {
return 'https://example.com/persistent-object-cache';
} );Com site_status_persistent_object_cache_notes os provedores de hospedagem podem substituir as notas padrão para recomendar sua solução preferida de cache de objetos. Aqui está um exemplo de uso:
add_filter( 'site_status_persistent_object_cache_notes', function( $notes ) {
$notes = __( 'Custom notes.', 'text-domain' );
return $notes;
} );site_status_persistent_object_cache_thresholds filtra os limites usados para determinar se deve ser sugerido o uso de um cache de objetos persistentes. Os valores padrão são:
$thresholds = apply_filters(
'site_status_persistent_object_cache_thresholds',
array(
'alloptions_count' => 500,
'alloptions_bytes' => 100000,
'comments_count' => 1000,
'options_count' => 1000,
'posts_count' => 1000,
'terms_count' => 1000,
'users_count' => 1000,
)
);Você pode usar o filtro da seguinte forma:
add_filter( 'site_status_persistent_object_cache_thresholds', function( $thresholds ) {
$thresholds = array(
'alloptions_count' => 700,
'alloptions_bytes' => 150000,
'comments_count' => 1500,
'options_count' => 1500,
'posts_count' => 2000,
'terms_count' => 1000,
'users_count' => 2000,
);
return $thresholds;
} );site_status_should_suggest_persistent_object_cache é um filtro de curto-circuito que filtra se deve sugerir o uso de um cache de objetos persistentes e verificações de limiar de desvio padrão. Você pode usá-lo da seguinte forma:
add_filter( 'site_status_should_suggest_persistent_object_cache', '__return_true' );O teste de cache de página inteira verifica se o site está usando cache de página inteira e se o tempo de resposta está OK:
Dois novos filtros também permitem que os provedores de hospedagem de sites personalizem o limite de resposta e adicionem cabeçalhos de cache personalizados para serem detectados.
O site_status_good_response_time_threshold filtra o limite abaixo do qual um tempo de resposta é considerado bom. O valor padrão é 600 ms (veja também Tempos de resposta lentos do servidor afetam o desempenho).
site_status_page_cache_supported_cache_supported_cache_headers permite que os provedores de hospedagem adicionem cabeçalhos de cache personalizados e os callbacks de verificação correspondente. A nota de desenvolvimento fornece o seguinte exemplo de uso:
add_filter( 'site_status_page_cache_supported_cache_headers', function( $cache_headers ) {
// Add new header to the existing list.
$cache_headers['cf-cache-status'] = static function ( $header_value ) {
return false !== strpos( strtolower( $header_value ), 'hit' );
};
return $cache_headers;
});Os desenvolvedores podem se concentrar mais nas novas verificações de integridade do site:
- Proposta: Verificações de saúde do site para cache de Objetos Persistentes e Cache de Página Inteira
- Novas verificações de saúde do site de cache no WordPress 6.1
- Port Audit Cache de página inteira do plugin de desempenho do núcleo
- class-wp-site-health.php
Atualizações da ferramenta create-block scaffolding
O WordPress 6.1 também introduz novos recursos e atualizações no plano @wordpress/create-block disponível para desenvolvedores de andaimes novos blocos.
O bloco de scaffolding é a estrutura de diretórios de suporte que permite ao WordPress reconhecer um bloco.
WordPress 6.1 apresenta algumas novas funcionalidades e várias melhorias.
Uma nova flag –variant permite que os desenvolvedores de blocos escolham uma variante de bloco a ser andaimes. Os templates internos fornecidos pela ferramenta create-block suportam as variantes dynamic e static, o que significa que você pode usar o scaffold em um bloco dinâmico ou estático, respectivamente. O padrão é static.
Você pode usar a nova flag da seguinte forma:
npx @wordpress/create-block my-first-block -variant=dynamicOs desenvolvedores podem definir variantes personalizadas, adicionando um objeto variants à definição do template.
Um recurso adicional agora permite que desenvolvedores de blocos adicionem novos blocos a um plugin existente, graças à flag --no-plugin.
npx @wordpress/create-block custom-block --no-pluginA execução do comando acima cria um novo conjunto de arquivos de bloco em um subdiretório para o diretório atual.
Note que o script não está ciente de sua localização:
Ao executar o comando npx
@wordpress/create-block block-name --no-plugin, será criado um novo bloco dentro dofolderNamedirectoryonde o comando foi chamado.
Você pode ler mais sobre as atualizações das ferramentas de criação de blocos scaffolding.
Resultados das consultas de cache em WP_Query
O WordPress 6.1 muda a forma como as consultas ao banco de dados são executadas na classe WP_Query. A partir de 6.1, as consultas serão colocadas em cache com o resultado de que se uma consulta for executada mais de uma vez, os resultados serão carregados a partir do cache.
Ambos os sites que utilizam o cache de objetos persistentes e os sites que utilizam o cache em memória se beneficiarão desta alteração, embora os benefícios para estes últimos sejam menores.
Por padrão, todas as chamadas para WP_Query serão armazenadas em cache, mas os desenvolvedores podem optar por não fazer consultas em cache usando o parâmetro cache_results:
$args = array(
'posts_per_page' => 20,
'cache_results' => false
);
$query = new WP_Query( $args );Você também pode desativar o cache de consultas globalmente usando a hook disable_caching, embora isso não seja recomendado.
É importante notar que alguns parâmetros de consulta não são considerados para fins de cache de consulta. O parâmetro mais comumente usado é o parâmetro fields. A razão é que levar fields em consideração teria produzido múltiplos caches para vários subconjuntos dos mesmos dados, levando assim à degradação do desempenho.
Para uma visão mais detalhada do cache WP_Query, veja Melhorias no desempenho do WP_Query em 6.1 dev note.
Partes de template em temas clássicos
A partir do WordPress 6.1, os temas clássicos suportam partes de templates baseados em blocos. Para adicionar este recurso, os temas precisam adicionar suporte para block-template-parts como mostrado abaixo:
function add_block_template_part_support() {
add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'add_block_template_part_support' );Temas clássicos podem incluir partes de templates em modelos PHP usando a função block_template_part. Você pode ler mais sobre este recurso em Block-based “template parts” nos temas tradicionais dev note.
Uma nota sobre a conversão de imagens JPEG para WebP
Inicialmente parecia que o WordPress 6.1 também teria introduzido o suporte para conversão automática de imagens JPEG para WebP.
No entanto, muitos colaboradores relataram vários problemas. Especificamente, foi notado que:
Os recursos para gerar imagens quando você faz o upload de uma imagem aumentarão drasticamente, porém os recursos para servir uma imagem serão reduzidos. Uma vez que o upload de imagens é muito raro em comparação ao serviço de imagens, o esforço extra para comprimir e armazenar imagens deve valer a pena.
E:
Na verdade, esse aumento dramático do uso de recursos ao fazer upload de uma imagem é um efeito colateral muito ruim aqui. Isso significa que muitos uploads falharão e deixarão os usuários presos. Isso também aumentará drasticamente as solicitações de suporte tanto para o WordPress quanto para as empresas de hospedagem. Não pense que isto é aceitável. Por causa disso, mesmo que o suporte a imagens multimídia seja necessário no WordPress, a abordagem atual não parece ser uma boa solução.
Finalmente, após um artigo de Matt Mullenweg no WordPress.org, a conversão automática JPEG para WEBP foi retirada do WordPress 6.1.
Eu tenho interesse em suportar novos formatos e melhorar o desempenho, mas acredito que essa mudança sendo empurrada por padrão para os usuários quando eles atualizarem para a versão 6.1 é muito para o momento atual, especialmente considerando algumas das interações complicadas que os sistemas operacionais ainda têm com arquivos webp (e HEIC!).
Fico satisfeito que o suporte para webp e arquivos HEIC continue no núcleo, pois devemos ser flexíveis em relação ao que aceitamos e trabalhamos, mas não concordo com a mudança de converter tudo para webp quando imagens JPEG são enviadas.
Isso é excelente terreno para um plugin canônico, um conceito que acredito que todas as equipes de desenvolvimento deveriam explorar muito mais como um local para experimentar e oferecer novas funcionalidades…
De qualquer forma, usuários e desenvolvedores WordPress podem testar a conversão automática de imagens JPEG para WebP instalando o plugin Performance Lab do Grupo Performance do WordPress.
Alterações adicionais para desenvolvedores
Além das funcionalidades e melhorias que discutimos acima, o WordPress 6.1 introduz várias outras mudanças para desenvolvedores. Você pode querer explorar mais a fundo essas mudanças nas notas de desenvolvimento (dev notes):
- Melhor desempenho PHP para registro de blocos principais
- Bloco de navegação Fallback Behavior no WP 6.1
- Tamanho de espaçamento predefinido no theme.json
- Escaping Table and Field names with wpdb::prepare() in WordPress 6.1
- WP_List_Table::get_views_links() no WordPress 6.1
- Funções e hooks para campos obrigatórios no WordPress 6.1
- Movendo a ação send_headers para mais tarde na carga
- Melhorias de desempenho para o REST API
- Atualizações dos componentes do editor no WordPress 6.1
- Melhorias em vários sites no WordPress 6.1
- Mudanças diversas no núcleo do WordPress 6.1
- Guia de campo de desempenho para WordPress 6.1
- Melhorias diversas da API REST no WordPress 6.1
- Bloqueio de mudanças na API do WordPress 6.1
- Mudanças diversas no editor do WordPress 6.1
- Suporte ao layout do editor atualizado em 6.1 após o refactor
- Mudanças nas preferências do editor de blocos no WordPress 6.1
- Geração de estilos de bloco (Style Engine)
- Estilos de referência valores em theme.json
Resumo
Com o WordPress 6.1, estamos vendo a consolidação das capacidades de edição do site WordPress. Ainda estamos na fase dois do script de longo prazo do Gutenberg, mas as ferramentas e recursos disponíveis estão se tornando mais confiáveis e robustos com o tempo. O WordPress 6.1 traz Tipografia Fluida, novas ferramentas de construção de sites e toneladas de melhorias para os blocos existentes.
Mas não só isso. O WordPress 6.1 também traz melhorias significativas no desempenho do CMS. Duas novas verificações do Site Health detectam o uso de Cache de Página Inteira e Cache de Objeto Persistente, o cache de consulta melhora o desempenho WP_Query e também há melhorias no desempenho do PHP para o registro do bloco central.
Em resumo, 6.1 é uma versão que os usuários e designers do WordPress vão adorar, assim como os desenvolvedores, que se beneficiarão de muitas melhorias em diversas áreas do CMS.
Agora é com você. O que você mais gosta no WordPress 6.1? Você já testou uma nova versão em seu ambiente de desenvolvimento? Compartilhe conosco suas ideias sobre o WordPress 6.1 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.
