Prepare os fogos de artifício! Com a versão 7.0, o WordPress entra em uma nova e ousada era.
É provável que este seja o maior salto da plataforma nos últimos anos.
O WordPress 7.0 refina a interface de administração e apresenta novos blocos e ferramentas para desenvolvedores, como o editor de artigos em iframe e blocos somente em PHP.
Prepare uma xícara de café e fique à vontade, porque esta será uma leitura longa e empolgante.
Integração com IA
Com a versão 7.0, o WordPress deu um grande salto evolutivo. Esqueça a plataforma de blog dos seus primeiros dias. Hoje, o WordPress é uma plataforma colaborativa nativamente preparada para inteligência artificial.
Esse projeto ambicioso teve como objetivo fornecer uma infraestrutura confiável e segura, permitindo que usuários do WordPress e desenvolvedores de plugins interajam com Grandes Modelos de Linguagem (LLMs) de forma padronizada.
O novo paradigma arquitetônico abre caminho para o “WordPress autêntico”. É uma mudança em direção à usabilidade agêntica, em que o WordPress é nativamente capaz de interagir com agentes de IA externos por meio de interfaces padronizadas e legíveis por máquinas.
Há muito a dizer, mas antes de entrar nos detalhes da integração da IA, aqui estão algumas definições preliminares.
Arquitetura de IA do WordPress: conceitos básicos
Para entender a arquitetura de IA do WordPress 7.0, é essencial identificar quatro componentes críticos.
- AI Client: uma infraestrutura de IA independente de provedor que oferece uma forma padronizada para o código PHP e JS do WordPress interagir com modelos de IA generativa. Como o AI Client é independente de provedor, o sistema pode operar sem depender de qualquer provedor específico de IA.
- Provedor de IA: a entidade ou empresa que desenvolve, possui e gerencia modelos de linguagem grandes (LLMs), como Anthropic, Google e OpenAI.
- Conector: o componente que permite a integração entre o WordPress e os provedores de IA. O WordPress 7.0 inclui três conectores padrão – OpenAI, Anthropic e Google – acessíveis em Settings > Connectors.
- Abilities API: uma nova interface funcional projetada para permitir que plugins, temas e o núcleo do WordPress exponham seus recursos em formatos legíveis por humanos e máquinas, permitindo que os agentes de IA interajam com os recursos do WordPress (por exemplo, criar artigos ou adicionar um resumo) de forma estruturada. Isso é o que torna o WordPress 7.0 nativamente agêntico.
Conectores
As versões anteriores do WordPress exigiam um plugin para cada provedor de IA que você quisesse usar em seu site. O WordPress 7.0 apresenta uma interface unificada para o gerenciamento de conectores de IA em Settings > Connectors.
Você não precisa mais colar suas chaves API em vários lugares. Você digita suas chaves uma vez na tela Connectors e todos os plugins compatíveis poderão usar essa conexão por meio do AI Client.
Além disso, a nova interface permite alternar entre provedores de IA em um único local, sem o risco de quebrar nada.
Na interface Connectors, clique no botão Install do seu provedor de IA e insira sua chave API. Salve suas configurações e você estará pronto para interagir com o provedor de IA em seu site WordPress.
Se você não sabe por onde começar, instale e ative o plugin AI Experiments. Esse plugin permite que você adicione imagens em destaque geradas por IA, texto alternativo, trechos e muito mais.
A nova integração com IA não apenas apresenta uma nova interface do usuário, mas também permite que desenvolvedores registrem novos provedores de IA por meio da API Connectors.
Agora, os desenvolvedores podem registrar e gerenciar conectores usando as novas classes e métodos do core. Depois de registrado, cada conector aparece como um cartão na tela Connectors.
A nova API também oferece três funções públicas.
wp_is_connector_registered(): verifica se um conector está registrado.wp_get_connector(): recupera os dados de um único conector.wp_get_connectors(): recupera todos os conectores registrados.
Além disso, o novo hook de ação wp_connectors_init permite que você substitua os metadados dos conectores registrados.
Construindo com o AI Client
A tela Connectors fornece a interface de IA. O AI Client é o mecanismo por trás dela, uma camada de abstração unificada que padroniza a forma como o WordPress interage com a IA. Seja OpenAI, Anthropic ou Google Gemini, seu código permanece o mesmo. O WordPress cuida da tradução, permitindo que você se concentre na lógica do seu aplicativo.
A nova função wp_ai_client_prompt() está no centro dessa implementação.
Aqui está um exemplo simples em PHP:
$ai_response = wp_ai_client_prompt( "Create a professional post about WordPress" )
->generate_text();
if ( is_wp_error( $ai_response ) ) {
wp_die( $ai_response->get_error_message() );
}
echo wp_kses_post( $ai_response );O exemplo a seguir mostra como você define o schema de resposta para deixar os dados prontos para uso.
$taxonomy_schema = array(
'type' => 'object',
'properties' => array(
'category' => array( 'type' => 'string' ),
'tags' => array(
'type' => 'array',
'items' => array( 'type' => 'string' )
),
),
'required' => array( 'category', 'tags' ),
);
$post_body = "Working from a small tavern in Crete was a game-changer. I realized that Greece is becoming the ultimate hub for remote workers in 2026.";
$json = wp_ai_client_prompt( "Based on this text, suggest the most appropriate category and 3-5 relevant tags: $post_body" )
->using_temperature( 0.1 )
->as_json_response( $taxonomy_schema )
->generate_text();
if ( is_wp_error( $json ) ) {
return $json;
}
$suggested_taxonomies = json_decode( $json, true );Neste código,
- Com
as_json_response(), o WordPress garante que a saída seja um JSON puro que esteja em conformidade com o schema especificado ($taxonomy_schema). using_temperature()controla a resposta da IA, tornando-a mais ou menos determinística (ou aleatória). Uma temperatura baixa (0,1) produz maior precisão, enquanto uma temperatura alta incentiva uma resposta mais criativa.- O array
$suggested_taxonomiesfornece as categorias e as tags geradas pela IA. Você pode atribuí-las automaticamente ao seu artigo.
Uma saída estruturada garante resultados previsíveis e fornece um formato ideal para uso com a Abilities API. Por exemplo, o código acima poderia ser usado para criar automaticamente um artigo com a categoria e as tags especificadas.
A API não é compatível apenas com texto. Graças ao método generate_image(), o AI Client também pode gerar imagens.
Você pode solicitar vários resultados com uma única chamada. Por exemplo, você pode solicitar 3 opções de texto ou imagem passando um valor numérico para os métodos generate_text() ou generate_image(): chamar generate_image( 3 ) retorna 3 variações da mesma imagem.
A API também fornece um conjunto de métodos que retornam informações adicionais. Esses métodos retornam um objeto GenerativeAiResult que contém metadados avançados, como o uso do token, o provedor e o modelo que respondeu ao prompt:
generate_text_result()generate_image_result()convert_text_to_speech_result()generate_speech_result()generate_video_result()
Como você pode ver, esses métodos oferecem uma variedade de funcionalidades adicionais, incluindo suporte para conversão de texto em fala, fala e vídeo.
Outros métodos da API incluem:
using_max_tokens(): limita o tamanho da resposta (por exemplo,->using_max_tokens( 500 ))using_model_preference(): define um modelo específico (por exemplo,->using_model_preference( 'gemini-2.5-flash' ))
Para uma análise mais detalhada e exemplos adicionais de código, consulte a página do projeto WP AI Client no GitHub e as alterações feitas em preparação para o WordPress 7.0.
Novos blocos e ferramentas de design
O WordPress 7.0 apresenta novos blocos e ferramentas de design que melhorarão significativamente a experiência de edição. Veja o que há de novo e como seus fluxos de trabalho criativos mudam.
Novo bloco Breadcrumbs
O WordPress 7.0 apresenta um novo bloco Breadcrumbs que reflete a hierarquia exibida da página.
Em sua essência, o novo bloco inclui um componente dinâmico que consulta a estrutura de dados do WordPress para identificar automaticamente a localização atual dos visitantes do site com base na hierarquia da página (principal/child theme) ou nos termos de taxonomia do artigo.
Na imagem abaixo, o bloco Breadcrumbs exibe a hierarquia de categorias de um artigo de blog comum.
O bloco Breadcrumbs também oferece suporte ao Query Loop. Quando você adiciona um bloco Breadcrumbs a um bloco Query Loop, o bloco exibe os caminhos dos artigos individuais extraídos da query.
O bloco Breadcrumbs tem algumas opções de configuração que permitem:
- Mostrar/ocultar o link para a página inicial como ponto de partida da navegação.
- Mostrar/ocultar o breadcrumb atual.
- Alterar o separador de breadcrumb.
- Mostrar breadcrumbs na página inicial.
- Preferir a hierarquia de artigos (padrão) ou a hierarquia de termos de taxonomia.
O bloco Breadcrumbs é compatível com as ferramentas de design do Gutenberg e apresenta dois filtros que permitem que os desenvolvedores controlem os breadcrumbs de forma programática.
O novo filtro block_core_breadcrumbs_post_type_settings permite que os desenvolvedores especifiquem qual taxonomia e termo devem ser usados nos breadcrumbs quando um artigo tem várias taxonomias ou termos.
No exemplo a seguir, o filtro é usado para exibir tags em vez de categorias:
add_filter( 'block_core_breadcrumbs_post_type_settings', function( $settings, $post_type ) {
if ( 'post' === $post_type ) {
$settings['taxonomy'] = 'post_tag';
}
return $settings;
}, 10, 2 );O filtro block_core_breadcrumbs_items permite que os desenvolvedores modifiquem, adicionem ou removam itens da trilha final do breadcrumb antes que ela seja renderizado. Aqui estão alguns casos de uso:
- Substituir o ícone Home por uma imagem (um SVG, a logo da sua empresa etc.) para economizar espaço ou tornar a saída do bloco mais consistente com a marca do seu site.
- Encurtar o título de um artigo nos breadcrumbs se ele for muito longo.
- Injetar categorias ou termos personalizados, por exemplo, forçando uma etapa no caminho de breadcrumbs.
O código a seguir usa o novo filtro para truncar rótulos de breadcrumb quando o comprimento excede 20 caracteres:
add_filter( 'block_core_breadcrumbs_items', function( $items ) {
foreach ( $items as $key => $item ) {
if ( mb_strlen( $item['label'] ) > 20 ) {
// Truncate the string to 17 characters and append '...'
$items[$key]['label'] = mb_strimwidth( $item['label'], 0, 17, '...' );
}
}
return $items;
}, 10, 1 );Para uma visão geral mais detalhada dos filtros de bloco Breadcrumbs e outros exemplos de código, consulte a nota do desenvolvedor.
Novo bloco de ícones
Um novo bloco ícone permite adicionar ícones SVG ao seu conteúdo. O novo bloco tem como objetivo fornecer uma solução padrão nativa para gerenciar marcação e garantir consistência de acessibilidade, sem exigir a instalação de plugins de terceiros apenas para adicionar alguns ícones.
Atualmente, o novo bloco Icon vem com um conjunto padrão a partir do qual você pode selecionar seus ícones. No entanto, há planos para adicionar no futuro a possibilidade de os usuários registrarem conjuntos de ícones de terceiros.
O bloco é baseado em uma nova API de registro de ícones SVG no lado do servidor. Isso garante que as atualizações no registro de ícones sejam propagadas para todos os usuários sem erros. A introdução do novo bloco de ícones está associada a um novo endpoint da API /wp/v2/icons.
Sobreposições de navegação personalizáveis
Antes do WordPress 7.0, os menus de navegação móvel eram fixos e você não podia alterar o design, o layout ou o conteúdo padrão. O WordPress 7.0 apresenta sobreposições de navegação personalizáveis, dando a você controle total sobre seus menus de navegação. Você pode criar uma sobreposição de menu usando blocos e padrões e um novo bloco de fechamento de sobreposição de navegação para adicionar um botão de fechamento em qualquer lugar da sobreposição de navegação.
Tecnicamente, as sobreposições de navegação são partes do modelo e, depois de criar a sua, você a encontrará na seção Patterns (Padrões) da barra lateral do Editor do Site. Cada sobreposição é atribuída a um bloco de navegação, mas você pode atribuir vários blocos de navegação à mesma sobreposição.
Basicamente, eles são uma tela de blocos que pode conter qualquer tipo de bloco. Você pode adicionar um bloco de navegação, mas depende totalmente de você quais blocos adicionar. Eles podem ser ícones sociais, um campo de pesquisa, a logo do seu site e muito mais.
As sobreposições de navegação só podem ser usadas no bloco Navigation. Para evitar uso acidental em outras partes de um template, elas são excluídas do inserter de blocos.
Você pode criar uma sobreposição de navegação personalizada na seção Overlays, na barra lateral do bloco Navegação, no Editor do Site.
Quando você seleciona o bloco Navegação, a barra lateral da parte do modelo exibe as configurações de Sobreposição de navegação divididas em duas seções. A seção Content (Conteúdo) mostra os tipos de bloco incluídos na sobreposição, enquanto a seção Design oferece uma variedade de designs predefinidos.
A barra lateral do bloco é dividida em duas guias, uma para configurações e outra para estilos da parte do modelo Navigation Overlay.
A aba Styles (Estilos) da aba do bloco Navigation Overlay é onde você pode personalizar a aparência da sua sobreposição definindo cores, imagem de fundo, tipografia, tamanho, borda e sombra.
Os desenvolvedores de de temas podem adicionar facilmente sobreposições de navegação predefinidas aos seus temas. Você pode fornecer tanto uma parte de template de sobreposição padrão (a própria sobreposição) quanto um conjunto de padrões de sobreposição (designs predefinidos que aparecem ao editar uma sobreposição de navegação).
Para obter uma visão geral mais detalhada e exemplos de código, consulte a nota oficial do desenvolvedor e esta pull request.
Aprimoramentos no bloco Parágrafo
Várias novas adições ao bloco Parágrafo oferecem maior flexibilidade no estilo do texto.
Primeiro, uma nova opção nas configurações de Tipografia permite que você defina o recuo da primeira linha.
Você pode controlar o recuo de texto para parágrafos individuais ou aplicá-lo a todos os parágrafos por meio das configurações de Global Style em Editor > Styles > Blocks > Paragraph.
Desenvolvedores de temas podem habilitar/desabilitar e controlar granularmente o recuo de linha no arquivo theme.json usando a nova propriedade textIndent.
O bloco Parágrafo agora também suporta alinhamento amplo e total. A imagem a seguir mostra o novo controle Align.
Outra adição útil ao bloco Parágrafo é o suporte a colunas de texto. Essa nova opção está disponível nas configurações de Tipografia na barra lateral do bloco.
Vídeos de fundo incorporados para o bloco Cover
Com o WordPress 7.0, você pode usar vídeos incorporados, como os do YouTube ou Vimeo, como vídeos de fundo para o bloco Cover. Anteriormente, você só podia usar vídeos carregados.
Esse recurso é particularmente útil para quem deseja economizar largura de banda hospedando vídeos em plataformas externas.
Para adicionar um vídeo hospedado, clique em Add Media na barra de ferramentas do bloco Cover e selecione Embed Video from URL.
Em seguida, você será solicitado a inserir a URL do vídeo.
Seu vídeo incorporado aparecerá como vídeo de fundo do seu bloco Cover, tanto no editor quanto no frontend.
Bloco de grade responsiva
O bloco Grid foi atualizado para ser nativamente responsivo. Nas versões anteriores do WordPress, os usuários só podiam escolher entre os modos Auto e Manual. No modo Automático, você podia definir a largura mínima da coluna para tornar o bloco responsivo. No modo Manual, você podia definir o número de colunas, que permanecia fixo.
A partir do WordPress 7.0, o bloco Grid é nativamente responsivo. O número de colunas agora se comporta como o máximo, e você pode fazer o ajuste fino do tamanho mínimo da coluna e do número máximo de colunas, mantendo o bloco responsivo.
Suporte a CSS personalizado para blocos individuais
Agora você pode adicionar estilos personalizados a instâncias de blocos específicos nas configurações avançadas do bloco.
Quando você adiciona estilos personalizados a um bloco, o WordPress adiciona automaticamente a classe has-custom-css. Se você inspecionar o bloco no editor de código, verá um bloco de código semelhante ao seguinte:
<!-- wp:image {
"id":848,
"sizeSlug":"large",
"linkDestination":"none",
"style":{ "css":"border: 4px solid blue;" }
} -->
<figure class="wp-block-image size-large has-custom-css">
<img src="http://example.com/wp-content/uploads/2026/03/example-768x1024.jpg" alt=" class="wp-image-848"/>
</figure>
<!-- /wp:image -->O estilo personalizado é carregado após os padrões do WordPress e os estilos globais, garantindo que as alterações que você fizer não afetem a aparência de outras instâncias do mesmo bloco.
Visibilidade do bloco com base na janela de visualização
No WordPress 7.0, você pode ocultar ou mostrar blocos individualmente, dependendo de o usuário estar em um dispositivo móvel, tablet ou desktop.
Essa primeira iteração adiciona a nova propriedade viewport a blockVisibility.
{
"metadata": {
"blockVisibility": {
"viewport": {
"mobile": false,
"tablet": true,
"desktop": true
}
}
}
}Você pode ativar o controle de visibilidade adicionando o objeto JSON acima ao bloco diretamente no editor de código ou por meio da paleta de comandos.
Depois de habilitar o controle de visibilidade do bloco, você pode acessar as opções de visibilidade abrindo o modal pela barra de ferramentas do bloco, pela barra lateral do inspetor do bloco ou pela paleta de comandos.
Versões futuras devem incluir breakpoints configuráveis e integração com theme.json para visibilidade de blocos.
Opções de estilo para o bloco Math
Antes do WordPress 7.0, os usuários não podiam personalizar a aparência do bloco Math. A nova versão do WordPress adiciona opções de estilo de Cor, Tipografia, Dimensões e Borda para o bloco Math.
A imagem a seguir fornece um exemplo de estilo do bloco Math:
Atualizações do bloco HTML
O bloco HTML foi totalmente reformulado. Agora, quando você insere um bloco HTML no seu conteúdo, aparece uma janela modal com três guias separadas para inserir HTML, CSS e JavaScript.
Se precisar de mais espaço, um botão no canto superior direito da janela modal permite que você ative ou desative o modo de tela cheia.
Melhorias no bloco de imagens
O bloco de imagens foi atualizado com vários aprimoramentos que oferecem mais opções de personalização.
O bloco de imagens agora oferece suporte ao controle da proporção para alinhamento wide e full (PR #74519). Esse novo recurso está disponível na aba Styles da barra lateral de configurações do bloco.
Outra adição útil é o controle de ponto focal. Com esse novo recurso, você pode ajustar a parte visível de uma imagem quando ela é cortada. (PR #73115)
O componente de corte de imagens no editor foi movido para um pacote específico e agora pode ser usado em todo o aplicativo, e não apenas no editor de blocos (PR #73277)
Experiência de administração aprimorada
Com o lançamento do WordPress 7.0, a área de administração do WordPress foi redesenhada e modernizada. É uma melhoria substancial na experiência de administração, com o objetivo de tornar a navegação do site mais fluida, consistente e visualmente atraente.
Melhorias visuais
Ao abrir o painel de controle do WordPress 7.0, você perceberá imediatamente como os elementos da interface estão diferentes. Essas alterações foram amplamente discutidas e consideradas necessárias para modernizar a aparência do painel e reduzir as inconsistências entre o painel antigo e o editor de blocos.
O objetivo é modernizar a aparência do painel de administração, reduzir as inconsistências entre as telas antigas e as telas mais recentes do editor de blocos/editor de sites e alinhá-lo melhor com o sistema de design do WordPress como um todo.
O redesign visual se concentrou em uma série de componentes principais que aparecem em toda a área de administração do WordPress. Como Fabian Kaegy apontou, essas são mudanças puramente visuais, sem atualizações arquitetônicas ou funcionais.
Você pode explorar os novos menus, botões e transições do WordPress 7.0 no sistema oficial de design do WordPress no Figma.
Revisões visuais
As revisões agora são apresentadas como visualizações em uma interface semelhante a um editor que destaca as diferenças visuais. Você não precisa mais ler o artigo inteiro para ver o que foi alterado, pois as diferenças entre as versões do mesmo conteúdo agora são destacadas no nível do bloco. O sistema também identifica alterações de estilo, facilitando a identificação de ajustes na paleta de cores, tipografia, dimensões e assim por diante.
Cores diferentes identificam tipos diferentes de alterações:
- Amarelo destaca um bloco ou texto que foi modificado.
- Vermelho destaca um bloco ou texto que foi excluído.
- Verde identifica um bloco ou texto que foi adicionado.
Com as revisões, você pode ver todo o poder do Yjs porque, ao restaurar uma versão anterior, o sistema restaura apenas as alterações feitas no documento por bloco, e não o conteúdo inteiro.
Espera-se que o sistema seja aprimorado com futuras atualizações, e podemos esperar novos e poderosos recursos. Para obter uma visão geral mais detalhada do que foi feito e do que devemos ver no futuro, confira esta publicação de Mathias Ventura de 2023, bem como as edições nº 60096 e nº 61161.
Exibir transições
Com o WordPress 7.0, o pacote boot – o componente responsável por inicializar o editor e gerenciar as transições entre diferentes telas de administração – recebe uma atualização significativa. Graças a essa nova infraestrutura, a navegação entre as telas do painel não exige mais recarregamentos abruptos da página, mas apresenta transições elegantes que aprimoram significativamente a experiência do administrador.
Tecnicamente falando, ao implementar a API View Transitions no pacote de inicialização, o WordPress agora pode orquestrar animações de zoom e deslizamento durante as alterações de estado. Isso evita a remontagem do canvas em mudanças de rota, garantindo uma transição fluida para a navegação raiz.
Alterações para desenvolvedores
O WordPress 7.0 é mais do que uma simples atualização visual; ele apresenta mudanças estruturais que simplificam drasticamente o fluxo de trabalho de desenvolvimento. Os principais destaques incluem redução de CSS personalizado graças a um theme.json mais poderoso, gerenciamento de layout mais previsível por meio do uso expandido de iframes e novas ferramentas declarativas para interfaces de administração, com melhorias em DataViews, DataForm e Field API, além de uma nova Client-side Abilities API, que fornece uma forma padronizada de expor e interagir com recursos do aplicativo via JavaScript.
Se você é um desenvolvedor, aqui estão as mudanças técnicas mais significativas que virão com o WordPress 7.0 e que você deve conhecer.
Suporte a pseudoclasses no theme.json
Ótimas notícias para os desenvolvedores de temas. A partir do WordPress 7.0, você pode usar seletores de pseudoclasse (:hover, :focus, :focus-visible e :active) diretamente em seus blocos e variações de estilo no seu theme.json.
Antes do WordPress 7.0, as pseudoclasses eram compatíveis apenas com elementos HTML, como botões e links, e seu uso no nível do bloco só era possível em CSS personalizado.
Para usar pseudoclasses no nível do bloco, você precisa adicionar sua configuração de estilo na seção de estilos do arquivo theme.json. Aqui está um exemplo simples de uso de pseudoclasses para um bloco de botões (consulte também PR #71418):
{
"version": 3,
"styles": {
"blocks": {
"core/button": {
"border": {
"width": "2px",
"style": "solid",
"color": "#000000"
},
":hover": {
"border": {
"color": "#ff4400"
},
"shadow": "0 8px 15px rgba(255, 68, 0, 0.3)",
"typography": {
"textDecoration": "underline"
}
},
":active": {
"filter": "brightness(0.8)",
"shadow": "none"
}
}
}
}
}A imagem a seguir mostra os diferentes estados do bloco Botão.
O exemplo a seguir mostra como você pode usar pseudoclasses para uma variação de bloco em theme.json:
{
"version": 3,
"styles": {
"blocks": {
"core/button": {
"variations": {
"neon": {
"border": {
"width": "2px",
"style": "solid",
"color": "#00ff00"
},
"color": {
"text": "#00ff00",
"background": "transparent"
},
":hover": {
"border": {
"color": "#ffffff"
},
"shadow": "0 0 20px #00ff00, 0 0 40px #00ff00",
"color": {
"text": "#ffffff"
},
"typography": {
"textDecoration": "none"
}
},
":active": {
"filter": "brightness(1.5) blur(1px)",
"shadow": "0 0 10px #ffffff"
}
}
}
}
}
}
}Editor de artigos com estrutura de iframe
A partir do WordPress 7.0, o editor de artigos é carregado em um iframe se o conteúdo contiver apenas blocos que usam a API de blocos versão 3 ou superior. Antes da versão 7.0, o editor de artigos só era carregado em iframe se todos os blocos registrados, mesmo os que não estavam incluídos no conteúdo, usassem a Block API v3+.
A principal vantagem de carregar o editor em um iframe é que ele isola os estilos da interface do editor dos estilos de conteúdo do tema. Sem um iframe, as folhas de estilo do editor e do tema coexistem no mesmo documento, o que muitas vezes leva a problemas de compatibilidade e dificulta para os desenvolvedores alcançar consistência visual entre o backend e o frontend.
As principais vantagens do editor de artigos com iframe incluem:
Isolamento de estilo
- Não há vazamento de CSS: o iframe evita que os estilos de administração do WordPress “vazem” para a tela do editor e vice-versa, garantindo que a aparência dos blocos não seja afetada pela interface do usuário ao redor.
- Não há necessidade de redefinição de CSS: os desenvolvedores não precisam mais redefinir manualmente as regras CSS do administrador do WordPress para fazer com que o conteúdo do editor corresponda à aparência do frontend.
- Sem prefixação: os desenvolvedores de temas não precisam mais adicionar prefixos ou seletores de alta especificidade às suas regras de CSS para evitar a quebra da interface de administração.
Consistência de layout
- Unidades relativas à janela de visualização: sem iframes, unidades como
vw(largura da janela de visualização) evh(altura da janela de visualização) referem-se a toda a página de administração (incluindo a barra lateral); elas devem ser usadas somente na tela do editor. - Consultas de mídia nativas: as consultas de mídia funcionam nativamente dentro do iframe, refletindo o tamanho da tela do editor em vez de toda a janela do navegador.
Experiência do desenvolvedor
- Fluxo de trabalho simplificado: os autores de temas e plugins podem “transferir” estilos de frontend para o editor com o mínimo ou nenhuma alteração.
- Seleções persistentes: os iframes mantêm a seleção no editor (por exemplo, texto selecionado) visível mesmo quando o usuário interage com elementos da interface do usuário, como controles da barra lateral.
- Previsibilidade: o editor iframe também resolve o problema de inconsistência visual, evitando que o editor mude repentinamente de modo com base nos plugins instalados.
Compatibilidade com versões anteriores
Se um artigo contiver um bloco usando versões mais antigas da API, o iframe será removido automaticamente para garantir a compatibilidade com versões anteriores. Para aproveitar esses aprimoramentos, os desenvolvedores de blocos são incentivados a atualizar seus blocos para a versão 3 da API de blocos.
Registro de bloco somente em PHP
O WordPress 7.0 introduz a capacidade de registrar blocos exclusivamente via PHP com controles de inspetor gerados automaticamente. Essa adição simplifica os fluxos de trabalho dos desenvolvedores e incentiva os sites que usam temas híbridos ou funções PHP legadas e códigos de acesso a adotar e desenvolver o editor de blocos. Aqui está um exemplo de um bloco registrado via PHP:
/**
* Render callback (frontend and editor)
*/
function my_php_only_block_render( $attributes ) {
return '<div>
<h3>🚀 PHP-only Block</h3>
<p>This block was created with only PHP!</p>
</div>';
}
/**
* Register the block on the 'init' hook.
*/
add_action( 'init', function() {
register_block_type( 'my-plugin/php-only-test-block', array(
'title' => 'My PHP-only Block',
'icon' => 'welcome-learn-more',
'category' => 'text',
'render_callback' => 'my_php_only_block_render',
'supports' => array(
// Automatically registers the block in the Editor JS (previously auto_ssr)
'auto_register' => true,
),
) );
});No momento em que este artigo foi escrito, os blocos somente em PHP não são dinâmicos e só podem usar controles de configuração específicos. Mas ainda há muitos casos de uso a serem explorados. Por esse motivo, publicamos um tutorial que abrange apenas os blocos somente em PHP. Se você for um desenvolvedor de PHP, vale a pena dar uma olhada.
Melhorias em DataViews, DataForm e Field API
O WordPress 7.0 apresenta várias melhorias em DataViews, marcando um passo decisivo em direção a uma interface administrativa mais moderna e modular. Essa atualização transforma o gerenciamento de dados em uma experiência altamente personalizável com uma abordagem declarativa. Agora, os desenvolvedores podem criar interfaces personalizadas complexas simplesmente definindo suas regras em formato JSON, permitindo que o core gere a interface.
As novas adições incluem:
- Melhorias na visualização de dados (DataViews): o novo layout Activity usa um estilo de feed de atividades em linha do tempo. Também há um novo modo de visualização compacto para listas.
- Melhorias no formulário (DataForm): o novo layout Details agora está disponível, juntamente com ícones de edição para o layout Panel. Esses ícones podem ser configurados para serem exibidos somente quando necessário.
- Aprimoramentos no controle de dados (Field API): a validação automática de campo está disponível, juntamente com novas opções de personalização de formatação para tipos de campos numéricos e de data.
A seguir está um exemplo de como definir uma visualização que agrupa e exibe dados em modo compacto:
const myCompactView = {
type: 'list',
layout: {
density: 'compact'
},
groupBy: {
field: 'status',
direction: 'desc',
showLabel: true
}
};Para obter uma visão geral detalhada dos aprimoramentos da API DataViews, DataForm e Field, consulte a nota do desenvolvedor.
API de habilidades do lado do cliente
O WordPress 6.9 introduziu a API Abilities, uma nova interface funcional que fornece um registro padronizado para plugins, temas e núcleo do WordPress para interagir com o WordPress, expondo seus recursos em formatos legíveis por humanos e máquinas.
Agora, o WordPress 7.0 apresenta uma API JavaScript que permite que você implemente recursos do lado do cliente, como navegar ou adicionar blocos ao seu conteúdo diretamente do JavaScript, de forma segura e padronizada.
A nova API de recursos do lado do cliente é dividida em dois pacotes.
@wordpress/core-abilities: se o seu plugin precisar acessar as habilidades registradas no servidor, você precisará se conectar ao pacote@wordpress/core-abilities. Esse pacote recupera todas as habilidades e categorias registradas por meio da API REST e as armazena no repositório@wordpress/abilities.@wordpress/abilities: esse pacote fornece o armazenamento de habilidades sem carregar as habilidades registradas no servidor. Se o seu plugin precisar registrar apenas os recursos do lado do cliente e não exigir acesso aos recursos registrados no servidor, ele deverá carregar@wordpress/abilities.
Consulte a nota do desenvolvedor para obter uma análise detalhada da nova API de recursos do lado do cliente e vários exemplos de código.
Alterações na API de interatividade
A API de interatividade é uma API nativa do WordPress que permite que os desenvolvedores adicionem interatividade a seus sites de forma padronizada. O WordPress 7.0 aprimora a API de interatividade com uma nova função watch() que permite que você observe programaticamente as alterações de estado. Anteriormente, só era possível usar a diretiva data-wp-watch para reagir a alterações de estado.
Outras alterações feitas no WordPress 7.0 estão relacionadas ao armazenamento core/router.
Para obter uma descrição mais detalhada das alterações na API de interatividade, consulte a nota do desenvolvedor.
Outras alterações para desenvolvedores
Aqui estão algumas outras alterações para desenvolvedores que vale a pena mencionar:
- A partir do WordPress 7.0, os atributos de bloco que suportam API de vinculação também suportam Pattern Overrides. Isso significa que você pode usar substituições de padrão com qualquer bloco, inclusive blocos personalizados.
- Padrões e partes de modelos não sincronizados agora são definidos como
contentOnlypor padrão. Os usuários verão controles para editar texto e mídia primeiro, sem correr o risco de quebrar acidentalmente a estrutura do bloco. Se você tiver criado blocos personalizados e quiser que eles permaneçam editáveis, certifique-se de definir"role": "contentOnly"no arquivoblock.json. Os desenvolvedores podem desativar esse recurso via PHP usando o filtroblock_editor_settings_allou via JavaScript, definindodisableContentOnlyForUnsyncedPatternscomotrue. - O WordPress 7.0 deixa de oferecer suporte ao PHP 7.2 e 7.3. A versão mínima recomendada do PHP continuará sendo a 8.3.
- O sistema de suporte ao bloco Dimensions foi significativamente aprimorado. Você pode usar
widtheheightcomo suportes de bloco padrão emdimensionsemblock.json, e os temas podem definir predefinições de tamanho de dimensão em seutheme.json.
Olhando para o futuro: a versão 7.0 marca uma nova era para o WordPress
O WordPress 7.0 não é apenas uma atualização; ele representa um ponto de virada para usuários e desenvolvedores. Graças à integração com IA e à Abilities API, a IA agora pode navegar pelo painel de controle, criar novo conteúdo e editar artigos existentes. Realmente sentimos que estamos diante de um ponto de virada histórico, e mal podemos esperar para explorar essas ferramentas baseadas em IA e começar a criar algo totalmente novo por conta própria.
Mas o WordPress 7.0 é mais do que IA. A experiência de edição foi completamente repensada, uma nova arquitetura de revisões em nível de bloco, novos blocos do core e atualizações significativas no sistema de design.
Além da integração com a IA, os desenvolvedores se beneficiarão de aprimoramentos que simplificam o fluxo de trabalho de desenvolvimento e abrem possibilidades nunca antes vistas. Desde o editor iframed e o suporte a pseudoclasses no theme.json até a API Client-side Abilities e os blocos somente PHP, o WordPress 7.0 oferece uma infinidade de ferramentas para você criar sites e aplicativos cada vez mais avançados.
Para aproveitar totalmente o potencial do WordPress 7.0, você precisa de um serviço de hospedagem de ponta, otimizado para desempenho e segurança. Na Kinsta, você encontrará tudo o que precisa para levar o WordPress ao seu potencial máximo. Confira nossos planos e encontre o que melhor se adapta às necessidades do seu site.
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.
