Daniel Kossmann

WordPress Brasil Meetup Online #4: Novidades do WordPress 7.1

in

Em 19 de agosto de 2026, realizei o #04 WordPress Brasil Meetup Online sobre o lançamento do WordPress 7.1. A ideia é fazer um encontro online a cada lançamento de versão principal do WordPress, e esta foi a segunda vez que organizei um assim.

Como no meetup do lançamento do WordPress 7.0, convidei algumas pessoas da comunidade para apresentar as novidades e criei um Google Doc compartilhado com todos os itens, onde cada pessoa podia escrever seu nome na frente de um item, assim ficava fácil identificar quais ainda estavam sem apresentador. Também adicionei um ✅ na frente de cada item já coberto, para enxergar rapidamente na guia do documento se algum tópico estava faltando. For fim, durante o evento marquei com fundo verde todos os itens que apresentamos. Aqui está uma captura de tela de como o documento ficou.

E para que este documento seja útil para outras pessoas usarem nas próprias apresentações sobre as novidades do WordPress 7.1, montei uma lista mais elaborada e organizada com referências para cada item.

Público (utilize a busca do navegador): [todos] · [usuário final] · [admin do site] · [criação de temas] · [criação de plugins] · [desenvolvedor] · [empresarial]

1. Destaques

Estilos responsivos para blocos

[criação de temas] [admin do site] [usuário final]

Estilos diferentes por tamanho de tela, direto no editor, sem CSS.

Mostre na prática: Para ativar clique no ícone do computador no canto superior direito da tela do editor de blocos e depois selecione “Responsive styles”.

  • Tamanho computador é o padrão.
  • Funciona para as opções da barra lateral: tipografia, espaçamento, cores, proporção de imagem.
    • Vai aparecer na barra lateral uma informação sobre qual é o tamanho do dispositivo para a configuração específica.
  • Alterar estilos gerais do site: Aparência > Editor > Estilos > Blocos > (selecione um bloco tipo parágrafo) > Ao lado direito do nome do bloco clique em ¨States¨ e selecione o tamanho de tela desejado > faça a alteração de estilo desejada > salve clicando no botão azul no canto inferior esquerdo da tela.

Referências:

Estilos para pseudoestados (hover, foco, ativo) em botões

[usuário final] [admin do site] [criação de temas]

Estados interativos dos botões podem ser estilizados sem CSS personalizado.

  • Após adicionar um botão, na barra lateral direita clique nos 3 pontos ao lado do nome “Botão¨ e depois selecione um dos estados (padrão, :hover, :focus, :active).
  • Também funciona nos Estilos globais dos botões
  • Suporte à outros blocos devem vir nas próximas versões

Referências: Pseudo and custom style states in WordPress 7.1

Processamento de mídia no lado do cliente

[desenvolvedor] [admin do site] [empresarial]

O processamento de imagens sai do servidor (PHP) e passa para o navegador.

  • Menos erros de falta de memória, menos CPU e RAM no servidor
  • Imagens ~15% menores e envios mais resilientes (nova tentativa automática)
  • Só no Google Chrome e Microsoft Edge 137+ no desktop, por causa do cabeçalho Document-Isolation-Policy

Referências:

Suporte a formatos modernos de imagem

[usuário final] [admin do site]

Mais formatos são aceitos sem depender do que a hospedagem tem instalado.

  • HEIC (padrão do iPhone), convertido para JPG pelo navegador
  • JPEG com HDR gain maps (UltraHDR, Adaptive HDR)
  • AVIF e WebP funcionam mesmo sem suporte no servidor
  • GIF animado convertido em vídeo MP4/WebM (precisa ser ativado)

Referências: Client-Side Media Processing in WordPress 7.1

Nova tela de edição de mídia

[usuário final] [admin do site]

Uma janela única reúne recorte, rotação e metadados.

Mostre na prática: como era antes e como está agora. Depois de selecionar uma imagem clique no ícone de ¨Recortar¨

  • Recorte livre ou por proporção, espelhamento e rotação com guias
  • No bloco Cobertura, abra pelo botão “Recortar imagem de fundo”
  • A Cobertura recalcula sobreposição e contraste depois da edição
  • Evita ter que usar ferramentas externas para edições básicas

Referências: Media Editor Modal task tracking (#73771)

Barra de administração em todo lugar

[todos]

A barra de administração passa a aparecer também nos editores.

Mostre na prática: como era antes e como está agora.

  • Só some com tela cheia e escrita sem distrações ativadas juntas
  • Ícone do site migrou para a barra de administração
  • No Editor do site, o ícone W virou um botão de voltar explícito
  • Atalho da paleta de comandos foi para a barra

Referências: Consistent navigation in WordPress 7.1 with persistent toolbar

Novos blocos

Bloco Playlist

[todos]

Playlists de áudio com visualização em forma de onda, pode ser usado para podcast e música.

Mostre na prática: o bloco e faça alteração de estilos.

  • Metadados por faixa (capa, artista, número, duração), cada um pode ser exibido ou ocultado
  • Controles de estilos: Forma de onda, botão Reproduzir e Forma
  • Aceita todos os formatos de áudio suportados pela instalação
  • Primeira versão: embaralhar e pular faixa serão lançados em futuras versões

Referências:

Bloco Abas

[todos]

Conteúdo organizado em painéis com abas, sem plugin.

Mostre na prática: o bloco e faça alteração de estilos.

  • Lista de abas (navegação) + Painéis de aba (conteúdo, qualquer bloco)
  • Botões das abas com cor, tipografia, borda e espaçamento próprios
  • Segue o padrão de abas do W3C ARIA Authoring Practices Guide

Referências: Stabilize Tabs Blocks (#73230)

Melhorias em blocos

Gradiente sobre imagem de fundo

[usuário final] [criação de temas] [admin do site]

O gradiente se sobrepõe à imagem em vez de um substituir o outro.

Mostre na prática: crie um bloco de grupo, adicione um conteúdo dentro dele, selecione o bloco de grupo e na opção ¨Fundo¨ adicione uma Imagem e um gradiente (mudando a transparência dele para poder ver a imagem)

  • Novo painel Plano de fundo com Imagem, Cor e Gradiente separados
  • Cor do texto e cor de fundo agora ficam em painéis diferentes
  • Seis blocos com suporte: Grupo, Verso, Sanfona, Citação destacada, Conteúdo do post e Citação

Referências: New Block Support in WordPress 7.1: Background Gradient (background.gradient)

Bloco Imagem: marcar como decorativa

[usuário final] [admin do site]

Caixa de seleção que manda os leitores de tela ignorarem a imagem.

Mostre na prática: adicione uma imagem e marque essa opção.

  • É publicada com role="none" no site
  • Limpa o texto alternativo e desativa legenda e link
  • Acaba com a dúvida “esqueceram o texto alternativo ou foi proposital?”

Referências: PR #78064

Loop de consulta: excluir o post atual

[criação de temas] [admin do site] [usuário final]

Novo filtro para tirar o post atual da listagem, ideal para posts relacionados.

Mostre na prática: adicione um bloco de Loop de consulta > Tipo de consulta: Personalizado > Filtros > Excluir > Excluir atual

Referências:

Galeria com imagens anexadas ao post

[usuário final] [admin do site]

O editor finalmente aproveita a relação entre post e imagens anexadas.

  • Filtro “Enviado para este post” na Biblioteca de mídia
  • Botão “Usar imagens anexadas” monta uma galeria dinâmica
  • Botão “Desanexar” volta a galeria para estática
  • Aproxima o bloco do antigo shortcode

Referências: WordPress 7.1: dynamic galleries and post-attached media iteration issue (#77117)

Transformações com pré-visualização

[usuário final] [admin do site]

Dá para ver como o bloco vai ficar antes de confirmar a troca.

Mostre na prática: adicione um ou mais blocos (ex: vários parágrafos), selecione ele(s) e depois clique no ícone do bloco na barra flutuante para transformá-lo e passe o mouse pelas diferentes opções

  • Pré-visualização ao passar o mouse nos estilos
  • Transformação direta para variações (Linha, Pilha) sem passar por Grupo
  • Shortcode vira bloco Código incorporado de verdade
  • Bloco Shortcode oferece conversão para o bloco equivalente

Referências: PR #78713

Bloco Cobertura: limitar provedores de vídeo

[criação de temas] [criação de plugins] [empresarial] [desenvolvedor]

Novo atributo allowedVideoProviders restringe ou desativa a incorporação por URL.

  • Libera só alguns provedores, ou nenhum
  • Vídeos já incorporados continuam funcionando

Referências: Cover (Block Editor Handbook)

Blocos editáveis dentro do HTML personalizado

[desenvolvedor] [usuário final]

Dá para misturar HTML estático e blocos editáveis no mesmo código.

Mostre na prática: cria um bloco ¨HTML personalizado¨ com o código abaixo, salve e mostre que somente o parágrafo é editável. 

<div class="banner"><h1>Título em HTML</h1><!-- wp:paragraph -->
<p>Parágrafo editável do editor de blocos</p>
<!-- /wp:paragraph --><footer>Rodapé em HTML</footer></div>
HTML
  • Só funciona no bloco HTML personalizado
  • Blocos internos não podem ser movidos nem removidos pelo editor visual
  • O código continua editável no editor de código

Referências: Editable blocks inside the Custom HTML block

Melhorias no editor

Notas mais perto de um fluxo de comentários

[usuário final] [admin do site] [desenvolvedor] [empresarial]

As Notas da versão 6.9 ganharam o que faltava para virar ferramenta de revisão de verdade.

Mostre na prática: selecione parte de um texto e adicione uma nota. Mostre também como era antes.

  • Notas em linha: ancoradas em um trecho de texto, não só no bloco
  • Várias notas por bloco ou seleção
  • Formatação por atalhos de teclado (negrito, itálico, link, código, emoji) e @menções com e-mail
  • Notas longas recolhidas por padrão e divisor “Resolvidas” na barra lateral

Referências: Notes iteration for WordPress 7.1 (#76316)

Tela Identidade no Editor do site

[admin do site] [criação de temas] [usuário final]

Novo item Identidade, no menu Design, reúne a identidade básica do site.

Mostre na prática: mostre a tela, opcionalmente mostrando como era antes.

  • Título, descrição, logo e ícone em um lugar só
  • Edição na própria tela, com recorte de imagem ali mesmo

Referências:

“Aplicar globalmente” com painel de revisão

[admin do site] [criação de temas]

O botão agora abre uma janela de revisão em vez de aplicar tudo de uma vez.

Mostre na prática: Altere as configurações de um bloco.

Depois de clicar em ¨Aplicar globalmente¨ é exibido a tela de confirmação:

  • Lista cada estilo com valor atual e novo
  • Tudo vem marcado; você desmarca o que quer manter local

Referências: PR #79839

Esquema de cores no Editor do site

[usuário final] [admin do site]

A barra lateral deixa de ser sempre escura e respeita o esquema do perfil.

  • Consistência entre painel, editor de posts e Editor do site

Referências: PR #78397

Painel e fluxo de trabalho

Paleta de comandos organizada

[todos]

Resultados agrupados em seções e memória dos comandos recentes.

Mostre na prática: antes e depois.

  • Seções: recentes, sugestões e resultados
  • Os recentes ficam salvos entre sessões
  • Janela redimensionada (512px), comandos mais legíveis

Referências: PR #75691

Biblioteca de mídia: rolagem infinita por padrão

[usuário final] [admin do site]

A grade carrega anexos continuamente, com opção individual de desligar.

Mostre na prática: antes e depois e como desativar na tela do perfil do usuário.

  • Caixa de seleção na tela de perfil (só para quem pode enviar arquivos)

Referências: Media Library infinite scrolling is now enabled by default, with a per-user opt-out

Sistema de ícones SVG

Registrar e remover ícones

[criação de temas] [criação de plugins] [desenvolvedor] [empresarial]

O conjunto de ícones do 7.0 permite agora ser personalizado.

  • wp_register_icon_collection() e wp_register_icon() (string SVG ou arquivo .svg)
  • wp_get_icon() imprime com tamanho, classe e rótulo acessível
  • SVG sanitizado com wp_kses: só <svg>, <path> e <polygon>
  • Quebra de compatibilidade: os 330 ícones do @wordpress/icons v15 usam fill="currentColor": troque fill por color no CSS

Referências:

Biblioteca de ícones e bloco Ícone

[usuário final] [admin do site]

A biblioteca agrupa ícones por coleção e o bloco ganhou controles novos.

  • Barra lateral com as coleções, uma aba por coleção e uma aba “Todos”; a pesquisa se mantém ao trocar de aba
  • Ícones de plugins e temas aparecem junto dos nativos
  • O bloco insere o ícone Informação em vez de aparecer vazio
  • Novos controles para virar o ícone na vertical e na horizontal

Referências: SVG Icon API: Iteration for WordPress 7.1 (#75715)

Endpoints da API REST para ícones

[desenvolvedor] [criação de plugins]

Endpoints somente leitura para consultar coleções e ícones.

  • GET /wp/v2/icon-collections e /wp/v2/icon-collections/<collection>
  • GET /wp/v2/icons/<collection> e /wp/v2/icons/<collection>/<name>
  • Importante: Exige autenticação com a capacidade edit_posts

Referências: Registering and rendering SVG icons in WordPress 7.1

Referências: WordPress 7.1 Source of Truth: Global Styles and theme.json

Para pessoas desenvolvedoras

Editor de posts sempre em iframe

[desenvolvedor] [criação de plugins] [criação de temas]

O editor de posts passa a rodar sempre isolado, independente do tema ou da versão da API, inclusive em sites que registram meta boxes antigas.

  • Antes dependia dos blocos do post, o que fazia o editor variar de post para post
  • Impacto: o iframe tem document e window próprios
  • Correção: usar ownerDocument / defaultView e useRefEffect para os listeners

Referências:

Design tokens e ThemeProvider

[desenvolvedor] [criação de plugins]

Primeira versão do sistema de design, seguindo a especificação W3C Design Tokens.

  • Permite que plugins expressem a marca sem destoar do painel

Referências:

Abilities API: novos filtros e controles

[desenvolvedor] [criação de plugins] [empresarial]

A API de habilidades do 6.9 ganha filtros e mais controle de exposição.

  • Quatro novos filtros: wp_pre_execute_ability, wp_ability_normalize_input, wp_ability_permission_result, wp_ability_execute_result
  • Validação extra: wp_ability_validate_input e wp_ability_validate_output
  • Nova ação wp_ability_invoked, útil para registro e auditoria
  • wp_get_abilities() aceita filtros por category, namespace e meta
  • Sinalizador meta.public declara de uma vez que a habilidade é para clientes externos

Referências:

Connectors: senha de aplicativo

[desenvolvedor] [criação de plugins] [empresarial]

O framework que conecta o WordPress a serviços externos aceita nome de usuário + senha de aplicativo.

  • Formulário padrão de conector para esse método
  • Senhas mascaradas na interface e na API REST
  • Credenciais podem vir de constantes ou variáveis de ambiente

Referências: Connectors: proposal for a PHP-side field registry for connector configuration (#78647)

Referências gerais

Obrigado ao Rudá Almeida e ao Gilberto Tavares por ajudarem a fazer a apresentação comigo e a todo mundo que participou. Pelo que contei, tivemos um pico de 16 pessoas online durante o evento.

Daniel Kossmann

Sou apaixonado por aprendizado contínuo e compartilhamento de conhecimento, por isso defendo o código aberto e o Creative Commons. Acredito que compartilhar conhecimento pode impulsionar a inovação e melhorar o mundo.

Comments

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Descubra mais sobre Daniel Kossmann

Assine agora mesmo para continuar lendo e ter acesso ao arquivo completo.

Continuar lendo