O que há de novo no WordPress 5.9 — Edição completa do site, estilos globais, blocos, padrões, APIs, aprimoramentos de interface do usuário e muito mais

WordPress 5.9 Josephine está aqui! A primeira versão do WordPress do ano foi inicialmente agendada para lançamento em 14 de dezembro de 2021. Devido a vários problemas em aberto e bugs não resolvidos, o lançamento final foi adiado e foi finalmente lançado em 25 de janeiro de 2022.

Se você está se perguntando o que há de novo no WordPress 5.9, a resposta curta é Full Site Editing (FSE).

E, de fato, muitos recursos do 5.9 só estão disponíveis se você estiver usando um tema que suporte a Edição Completa do Site, como o novo tema padrão, Twenty Twenty-Two.

Com o WordPress 5.9, chegamos ao coração da segunda fase do roteiro do Gutenberg: a fase de personalização , que é principalmente focada na edição de sites completos, padrões de bloco, diretório de blocos e temas baseados em blocos.

Com o 5.9, que sai no próximo mês, estamos – eu diria – no MVP, o Produto Mínimo Viável dessa fase de customização do Gutenberg.

Essas palavras de Matt Mullenweg no State of the Word de 2021 resumem melhor os principais recursos da nova versão do WordPress.

Dito isto, o que há de novo com a primeira versão do WordPress de 2022?

Vamos descobrir!

Estilos globais: uma interface gráfica para theme.json

Com o lançamento do WordPress 5.8 em 2021, a manipulação do arquivo theme.json tornou-se a maneira padrão para os desenvolvedores de temas personalizarem as configurações e os estilos do editor.

O WordPress 5.9 leva as coisas para o próximo nível, introduzindo uma interface gráfica que permite aos usuários personalizar predefinições de estilo para seus sites, globalmente ou em nível de bloco, sem escrever uma única linha de código.

O mecanismo de estilos globais deve alterar significativamente a maneira como você está acostumado a personalizar a aparência de seus sites, pois os estilos globais afetam vários aspectos do design do site WordPress.

Em primeiro lugar, a interface de estilos globais substitui o personalizador e agora é a única maneira de personalizar configurações e estilos com temas de bloco. Da mesma forma, as páginas de administração de opções de temas complexos não serão mais necessárias. Isso fornece uma nova maneira padrão de definir configurações e estilos de temas e, ao mesmo tempo, deve simplificar o fluxo de trabalho de desenvolvimento de temas.

Com o Global Styles, os usuários do WordPress ganham mais controle sobre a apresentação de seus sites, tanto globalmente quanto por tipo de bloco, além do contexto de páginas ou postagens individuais.

Uma nova barra lateral está agora disponível no editor do site, na parte superior da qual você encontrará um pequeno painel de visualização e quatro componentes na seguinte ordem:

• Tipografia
• Cores
• Esquema
• Blocos

Podemos esperar que novos componentes sejam adicionados ao longo do tempo.

Vamos dar uma olhada na nova interface.

Está aqui! Tudo o que você precisa saber sobre o WordPress 5.9, tudo em um mega post Click to Tweet
[CTA]

Visualização de estilo

O primeiro elemento na barra lateral Estilos globais é um painel de visualização. Esse painel permite verificar o resultado de suas personalizações e é particularmente útil quando suas alterações se aplicam a elementos não visíveis na tela do editor do site.

A imagem a seguir mostra três combinações de estilos diferentes comparadas:

Tipografia

O painel Tipografia é onde você controla a tipografia do seu site. É claro que os controles disponíveis neste painel dependem das configurações do seu theme.json .

Por exemplo, o tema Twenty Twenty-One Blocks (TT1 Blocks) declara as seguintes propriedades de tipografia:

 "settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }

A próxima imagem mostra as configurações de Tipografia resultantes na barra lateral Estilos Globais:

Vamos mergulhar um pouco mais fundo e ver como o tema TT1 Blocks declara fontFamilies :

 "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "slug": "system-font", "name": "System Font" }, { "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif", "slug": "helvetica-arial" }, { "fontFamily": "Geneva, Tahoma, Verdana, sans-serif", "slug": "geneva-verdana" }, { "fontFamily": "Cambria, Georgia, serif", "slug": "cambria-georgia" }, { "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif", "slug": "hoefler-times-new-roman" } ]

Você pode verificar essas famílias de fontes no painel de visualização Global Styles:

Cores

Na seção Cores, você pode visualizar e editar paletas de cores e personalizar a cor de vários elementos do site.

Ao clicar nesses elementos, você obtém acesso a um novo painel onde pode escolher cores de três paletas de cores: Core, Theme e Custom palette (leia mais em Default Colors, Theme Colors e Custom Colors).

Neste painel, você poderá definir e modificar a cor do elemento atual.

Esquema

O último grupo de ferramentas destina-se a personalizações de layout. No contexto global, isso é limitado ao contêiner do site.

Blocos

Com a implementação do mecanismo Global Styles, agora também é possível alterar a aparência de blocos específicos, como Parágrafo (tipografia e cores), Botões (layout) e Coluna (cores e layout).

Observe que os estilos de bloco podem ser personalizados na interface Global Styles somente se o bloco declarar suporte para uma funcionalidade específica no arquivo block.json correspondente. Por exemplo, o bloco core/post-title atualmente suporta os seguintes estilos:

 "supports": { "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, "link": true }, "spacing": { "margin": true }, "typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true, "fontAppearance": true, "textTransform": true } } },

Uma vez que o bloco core/post-title suporta cores, espaçamento e tipografia, você encontrará as entradas correspondentes nas configurações de Global Styles do bloco Post Title.

A imagem a seguir mostra as configurações de tipografia, que você pode comparar facilmente com o código acima:

Vale a pena notar que o WordPress 5.9 oferece apenas a primeira implementação da interface Global Styles. Como Matias Ventura aponta, podemos razoavelmente esperar um maior desenvolvimento do novo recurso de controle de estilo:

No futuro, haverá fluxos integrados ao sistema, permitindo que você mude de estilos locais para globais — como fazer personalizações em um bloco de botões e optar por aplicá-los globalmente em todos os botões desse tipo.

Portanto, podemos ver grandes melhorias em breve. A imagem abaixo é apenas um exemplo do que podemos esperar:

Melhorias adicionais podem incluir a capacidade de os temas fornecerem paletas de cores alternativas e várias variações de estilo global.

Na semana passada, construí um punhado de variações de cores + fontes do Twenty Twenty-Two em temas filhos supersimples. Eles são realmente leves e eu adoro a ideia de oferecer às pessoas um site drasticamente diferente com um clique.https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

— kjellr (@kjellr) 15 de novembro de 2021

Os desenvolvedores podem se aprofundar no mecanismo de estilo global no artigo de suporte Configurações e estilos globais (theme.json). Você encontrará exemplos adicionais em nossa introdução ao tema padrão Twenty Twenty-Two.

O bloco de navegação

O bloco de navegação foi apelidado de “um dos blocos temáticos mais impactantes”, e não temos medo de dizer que concordamos.

O bloco está na fase embrionária há algum tempo (veja também Problema de Rastreamento do Bloco de Navegação e Problema de Rastreamento i2). Ainda assim, agora que todos os problemas pendentes e bloqueadores listados como WordPress 5.9 must-haves foram corrigidos, podemos finalmente começar a usar um dos recursos mais poderosos mesclados ao núcleo do WordPress 5.9.
[CTA]

Uma visão geral rápida da interface do bloco de navegação

Usar o novo bloco pode ser um pouco confuso no começo, mas quando você pegar o jeito, apreciará todo o seu potencial.

Quando você adiciona um bloco de navegação pela primeira vez, o espaço reservado do bloco fornece três opções para selecionar um menu baseado em bloco existente, criar um menu com todas as páginas ou começar do zero com um menu vazio.

O novo menu de Navegação também permite importar menus criados através da Tela de Menus de Aparência que está disponível com temas clássicos.

Isso significa que, se você estiver fazendo a transição de um tema clássico para um tema de bloco, não precisará reconstruir seus menus existentes. Você só precisa escolher um dos seus “Menus Clássicos” atualmente disponíveis e ele será automaticamente convertido em um menu de navegação baseado em blocos.

Você pode adicionar o bloco de navegação em qualquer lugar em suas páginas. Por exemplo, você pode achar útil em artigos de formato longo criar um índice, permitindo que os usuários saltem para seções de conteúdo específicas.

Novos Links de Navegação são adicionados instantaneamente ao bloco de Navegação clicando no ícone de mais ( + ) no lado direito (veja também as notas de lançamento do Gutenberg 11.7), a menos que outros tipos de blocos já tenham sido adicionados ao menu.

Clicar no botão Editar na barra de ferramentas do bloco Link de navegação converte um item de menu em um link personalizado. Isso permite adicionar, editar, reordenar e remover itens individualmente.

Você também pode transformar links em blocos clicando no botão Transformar na barra de ferramentas do bloco. Isso permite adicionar blocos específicos diretamente ao menu de navegação.

Link personalizado, espaçador, logotipo do site, link inicial, ícones sociais e blocos de pesquisa agora são expostos aos usuários ao adicionar blocos aos menus de navegação.

Na barra lateral Configurações, você encontrará um conjunto abrangente de opções para controlar vários aspectos de seus menus de navegação.

O painel Layout inclui controles para justificação, orientação e disposição.

O bloco de navegação também apresenta um painel de configurações de exibição aprimorado com uma opção para um menu de hambúrguer sempre ativo.

Você também pode personalizar o texto e as cores de fundo para seus menus e submenus.

Outra adição útil recentemente adicionada ao bloco de navegação é o suporte a Block Gap, que adiciona a capacidade de os usuários controlarem a distância entre os itens do menu.

O painel Tipografia fornece um conjunto de controles para família de fontes, aparência, altura da linha, decoração e letras maiúsculas. Todos esses controles podem ser ativados/desativados em um menu suspenso que aparece quando você clica no ícone de reticências à direita.

O bloco de navegação: sob o capô

Os dados do bloco de navegação são armazenados no banco de dados usando um tipo de postagem dedicado wp_navigation .

Por que isso é interessante para usuários do WordPress e como funciona?

Digamos que você tenha criado um menu de navegação composto por dois links personalizados e uma caixa de pesquisa. Com o tema Twenty Twenty-Two instalado, o menu pode ficar como mostrado na imagem a seguir:

O bloco de navegação acima é armazenado no banco de dados como tipo de postagem wp_navigation da seguinte forma:

 <!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

Armazenar o conteúdo do bloco de navegação no banco de dados permite que os usuários usem os mesmos menus de navegação em diferentes temas de bloco. Se o menu não estiver imediatamente visível, basta escolher o menu de navegação desejado no seletor de menu (consulte também a edição #36087 e PR #36178).

A imagem a seguir mostra o menu acima com o tema Twenty Twenty-One Blocks:

O bloco de navegação passou por várias iterações. Você pode se aprofundar em cada implementação nas notas de lançamento do Gutenberg 11.7, 11.8 e 11.9.

Você também pode ler mais sobre o bloco de navegação na nova nota de desenvolvimento do bloco de navegação e no artigo de suporte do bloco de navegação.
[CTA]

Galerias de imagens, imagens em destaque e ícones do site

Com o objetivo de fazer com que as imagens se comportem de forma mais consistente em diferentes contextos, o WordPress 5.9 oferece novos recursos e melhorias para diversos blocos. O Bloco de Galeria foi completamente revisado, enquanto várias alterações nos blocos Imagem em Destaque e Ícone do Site dão aos usuários um controle mais granular sobre as respectivas imagens.

Um bloco de galeria refatorado

No WordPress 5.8, a capacidade de personalizar a aparência das imagens nas galerias era um pouco limitada. Não havia como alterar o estilo da imagem ou aplicar um filtro duotônico.

Além disso, faltavam recursos importantes nas imagens da galeria, como adicionar links personalizados a imagens individuais em uma galeria.

Para entender melhor o motivo dessa assimetria entre imagens nos dois contextos diferentes de uma única imagem e uma imagem em uma galeria, vamos dar uma olhada no bloco Galeria na visualização de código no WordPress 5.8:

Observe que os detalhes da imagem são armazenados apenas no delimitador de bloco da Galeria (consulte também O que é um bloco Gutenberg?).

Isso fez com que as imagens individuais se comportassem de maneira diferente das imagens nas galerias.

Para fazer com que as imagens se comportem de forma consistente nos dois contextos diferentes, o WordPress 5.9 apresenta um bloco Gallery completamente refatorado, que agora se comporta como um contêiner para uma coleção de elementos de figura em vez de uma lista desordenada de imagens.

No WordPress 5.9, as imagens da galeria são aninhadas usando as APIs principais do innerBlocks , e cada imagem armazena seu próprio conjunto de detalhes, exatamente como imagens individuais.

Isso é um grande aprimoramento, já que as imagens de bloco de Galeria agora suportam as mesmas funcionalidades disponíveis em blocos de imagem principais , como dimensões de imagem e filtros duotônicos, bem como recursos de bloco padrão, como arrastar e soltar, copiar, duplicar e remover funcionalidades .

Com o novo bloco Galeria, você poderá estilizar imagens individualmente. Isso concede uma ampla gama de oportunidades de personalização.

A imagem abaixo exibe várias fotos em uma galeria, cada uma com cantos arredondados de forma diferente:

Você também pode usar diferentes filtros duotônicos em diferentes imagens na mesma galeria.

E, é claro, você pode atribuir uma classe CSS específica a cada imagem, o que lhe dá superpoderes adicionais para adicionar qualquer personalização que você precise às imagens da sua galeria.

Para uma visão mais detalhada do novo bloco Gallery, consulte também a Nota de desenvolvimento do Gallery Block Refactor, Próximas melhorias no Gallery Block e as notas de versão do Gutenberg 11.4.

Aprimoramentos de imagem em destaque

Várias melhorias também foram trazidas para o bloco de Imagem em Destaque.

Controles de Dimensões Básicas

O bloco Imagem em destaque agora apresenta um novo painel de configurações de Dimensões, fornecendo controles de altura, largura e escala.

O controle de dimensões também se aplica a imagens em destaque em blocos de Loop de consulta, conforme mostrado na imagem a seguir:

Filtros Duotone em Imagens em Destaque

Mencionamos acima que agora podemos aplicar o filtro duotônico em imagens agrupadas no novo bloco de Galeria refatorado.

Agora, a partir do WordPress 5.9, os filtros duotone também estão disponíveis em blocos de imagens em destaque em qualquer contexto, desde modelos de postagem e página até blocos de loop de consulta.

Esse recurso abre as portas para combinações de cores criativas e consistentes em todo o site.

Corte de imagem no logotipo do site

Antes do WordPress 5.9 (e Gutenberg 11.6), as imagens do logotipo só podiam ser editadas antes de serem carregadas. Com o WordPress 5.9, você pode cortar, ampliar e girar imagens usadas no bloco Logotipo do site diretamente da barra de ferramentas do bloco.

Novas ferramentas de design, blocos e aprimoramentos de interface do usuário

Onze versões do Gutenberg são mescladas no núcleo com o WordPress 5.9, oferecendo tantos recursos, aprimoramentos e correções de bugs que não seria possível cobri-los todos em um único artigo.

Por isso, escolhemos alguns dos que achamos mais dignos de atenção. Para uma visão geral mais profunda desses recursos e melhorias, você também pode verificar as postagens de lançamento do Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 e 11.9.

Com isso dito, esta seção abordará as seguintes alterações:

Interface de usuário de suporte de borda

A partir do WordPress 5.9, quando o theme.json declara configurações de border e um bloco declara suporte de borda por meio da API Block Supports, um novo painel de configurações fornecerá controles para raio de borda, largura, estilo, cor e unidades (veja também Gutenberg 11.1) .

O bloco de grupo principal é um bom exemplo desse aprimoramento útil da interface do usuário. O arquivo block.json do bloco Group agora inclui as seguintes declarações supports :

 { ... "supports": { "align": [ "wide", "full" ], "anchor": true, "html": false, "color": { "gradients": true, "link": true }, "spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true } }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, "radius": true, "style": true, "width": true } }, ... }, ... }

Esse recurso permite que os usuários criem efeitos gráficos incríveis em seus sites com o mínimo de esforço. Você pode vê-lo em ação com o novo tema Twenty Twenty-Two.

Em uma nova postagem ou página, crie um novo bloco de grupo e selecione-o. Você verá um painel Border na barra lateral de configurações do bloco. Altere a largura e o estilo da borda conforme necessário e aproveite o resultado.

Se você é um desenvolvedor de temas e deseja adicionar esse recurso aos seus temas, abra seu arquivo theme.json e declare o suporte de borda conforme mostrado no código a seguir:

 { "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }

Salve o arquivo e volte ao seu painel do WordPress. Em uma nova postagem ou página, crie um novo bloco de grupo e selecione-o. Agora você deve ver um painel Border na barra lateral de configurações do bloco (veja também este theme.json experimental).

Melhorias na visualização de lista

Com o WordPress 5.9, a visualização de lista foi aprimorada e agora apresenta arrastar e soltar, seções recolhíveis e âncoras HTML.

Arraste e solte no modo de exibição de lista

Conforme mencionado na solicitação pull nº 33320, o recurso arrastar e soltar foi implementado na exibição de lista, mas foi desabilitado devido a problemas de desempenho.

A partir do WordPress 5.9, o recurso de arrastar e soltar no modo de exibição de lista foi reimplementado. Você pode novamente arrastar e soltar blocos e grupos de blocos em qualquer lugar da Visualização de lista. Este é um grande aprimoramento na usabilidade do editor, pois permite mover blocos e grupos de blocos de maneira rápida e fácil em suas páginas. É fundamental em artigos e páginas de formato longo e no gerenciamento de estruturas complexas de blocos aninhados.

Seções recolhíveis do modo de exibição de lista

Outra melhoria significativa na exibição de lista é a capacidade de expandir/recolher seções de blocos aninhados. Isso permite que você navegue facilmente em estruturas de blocos complexas, expandindo grupos únicos de blocos enquanto deixa todo o resto recolhido.

Você também pode expandir e recolher as seções do Modo de exibição de lista usando as setas para a esquerda e para a direita.

Âncoras HTML em itens de exibição de lista

Ainda outro aprimoramento útil é a capacidade de adicionar âncoras HTML aos seus blocos na Visualização de lista e vê-los rapidamente.

Controle de espaçamento do intervalo do bloco

Introduzido pela primeira vez no Gutenberg 11.4 e agora integrado ao núcleo com o WordPress 5.9, o novo controle Block Spacing permite definir uma distância personalizada entre os itens dentro de um bloco. Abaixo, você pode ver uma prévia com diferentes valores de espaçamento de bloco em um bloco de Colunas com o tema padrão Twenty Twenty-Two:

O espaçamento entre lacunas está inicialmente disponível para blocos específicos, incluindo botões, imagens, colunas, títulos e navegação, mas o suporte deve ser estendido a mais blocos no futuro.

Os temas devem habilitar o espaçamento entre intervalos em theme.json usando a nova propriedade AppearTools . Você pode ler mais sobre ferramentas de aparência em nosso mergulho profundo no Twenty Twenty-Two. Consulte também pull requests #33991 e #34630.

Visualização de URL avançada para controle de links

Aproveitando o novo ponto de extremidade de detalhes de URL REST, o controle Link agora fornece uma visualização de URL avançada mostrando detalhes para um recurso de destino de link.

Em sua primeira implementação, esse recurso estava disponível apenas no componente richtext do Post Editor. No momento da redação deste artigo, ele também está disponível no Editor do Site, mas não nos editores de Navegação e Widget.

Criar páginas a partir do pop-up do link

O WordPress 5.9 também apresenta uma interface de usuário de link inline aprimorada, mostrando um novo botão para criar novas páginas diretamente do pop-up de link inline. Esse recurso está disponível apenas no Editor de postagem.

Melhorias no bloco de pesquisa

O bloco de pesquisa agora mostra as configurações de cor do botão e da borda.

Agora você também pode personalizar a cor do plano de fundo e do texto e a cor e o raio da borda.

Novos controles para dimensões de bloco

Um novo painel de configurações de Dimensões está agora disponível para os usuários controlarem o espaço ocupado por um bloco na página. O painel deve incluir controles de altura, largura, preenchimento, margem e possivelmente alinhamento, mas nem todos os atributos estarão disponíveis para cada bloco.

Os desenvolvedores de bloco encontrarão o componente <DimensionControl /> documentado no GitHub, mas observe que ele ainda está marcado como um recurso experimental e pode estar sujeito a alterações importantes no momento da redação deste artigo.

Um novo bloco de grupo de widgets adicionado à tela de widgets

Um novo bloco Widget Group está agora disponível no editor de widgets baseado em bloco. O bloco mais recente permite adicionar um grupo de blocos em um widget com um título no Editor de widgets dos temas clássicos e no Personalizador.

Você pode ler mais sobre o editor de widgets em Block-Based Widgets Editor e Block Widgets no Customizer.

Layout flexível e o novo bloco de linhas

Originalmente introduzido como um recurso experimental com o Gutenberg 11.2, o layout flexível foi estendido para vários blocos, incluindo links sociais e blocos de grupos.

Alguns blocos, como o bloco de Links Sociais, agora fornecem um conjunto de controles de barra de ferramentas e configurações de barra lateral que permitem personalizar o layout flexível.

Esta mesma funcionalidade está disponível no bloco de navegação e no bloco de linha, uma nova variação do bloco de grupo introduzido com o Gutenberg 11.5.

A imagem a seguir mostra o bloco de linhas com controles de layout na barra lateral de configurações:

Abaixo, você pode ver o mesmo bloco Row no frontend e na ferramenta de inspeção do Chrome.

Aprimoramentos de padrão de bloco

Introduzidos pela primeira vez com o WordPress 5.5, os padrões de bloco permitem que os usuários do WordPress incluam estruturas complexas prontas para uso de blocos aninhados em seu conteúdo com apenas alguns cliques.

Agora, o WordPress 5.9 dá um passo à frente em direção à democratização do design e capacitação do usuário, introduzindo algumas melhorias no sistema de padrões de blocos.

Então, o que há de novo nos padrões de bloco no WordPress 5.9?

Padrões em destaque do diretório de padrões

O Block Inserter agora exibe os padrões de bloco em destaque recuperados dinamicamente do diretório de padrões, fornecendo aos usuários uma maneira rápida e fácil de encontrar padrões populares para usar em seu conteúdo.

Da mesma forma, à medida que os padrões entram diretamente no painel do WordPress, os desenvolvedores do WordPress devem ser incentivados a criar e publicar cada vez mais padrões ao longo do tempo, resultando em recursos de design cada vez mais avançados para os usuários.

Um novo explorador de padrões de tela cheia

À medida que o número de padrões de bloco disponíveis no Diretório de Padrões continua a crescer e mais temas os utilizam, o WordPress 5.9 apresenta uma nova interface de navegação de padrão de bloco: o Explorador de Padrões.

Um novo botão Explorar agora abre um modal de tela cheia que permite aos usuários navegar, pesquisar e inserir padrões de bloco com apenas alguns cliques. O resultado é uma experiência de usuário aprimorada.

Você também encontrará notas adicionais e vários exemplos de padrões de bloco em nosso mergulho profundo no tema Twenty Twenty-Two WordPress.

Se você estiver interessado e quiser saber mais, ouça o podcast de Josepha Haden Chomphosy Episódio 16 e 21 e assista ao vídeo Explorando o WordPress 5.9 no YouTube de Anne McCarthy.

The Twenty Twenty-Two Theme e WordPress Block Themes

Com o WordPress 5.9, você não precisa mais instalar o plugin Gutenberg para habilitar a edição completa do site em seu site WordPress. Você só precisa permitir que um tema de bloco aproveite todos os recursos do FSE.

Além disso, o WordPress 5.9 foi empacotado com um novo tema padrão, Twenty Twenty-Two, e é um divisor de águas, já que Twenty Twenty-Two é o primeiro tema de bloco padrão de todos os tempos.

Twenty Twenty-Two é um tema altamente flexível e personalizável. Ele fornece uma sandbox perfeita para experimentar o novo fluxo de edição de modelos, novos blocos, aprimoramentos de interface e todos os recursos de edição de sites adicionados ao núcleo, começando com o WordPress 5.9.

Como mencionado acima, tudo o que você precisa fazer é instalar e ativar um tema de bloco, como Twenty Twenty-Two. Quando o tema estiver ativo, um novo item de menu Editor (beta) aparecerá no menu de administração do painel do WordPress.

A interface do Editor de site agora apresenta um fluxo de edição de site renovado. Na interface de edição, você poderá editar visualmente a página inicial, os modelos e as partes do modelo do site, bem como acessar a interface de Estilos globais.

Ao ativar um tema de bloco, você não encontrará o Personalizador. Isso porque o Personalizador não suporta temas de bloco, que usam apenas o Editor do Site. Essa também é a razão pela qual você não pode visualizar temas de blocos inativos .

Portanto, a partir do WordPress 5.9, o ponto de acesso ao Personalizador não está mais disponível no menu de administração quando um tema de bloco está ativo (a menos que você esteja usando um plug-in que faça uso dele).

Se você ainda está preso a temas tradicionais e está preocupado com a compatibilidade com versões anteriores, fique tranquilo: você pode continuar usando seu tema.

Atualmente, você tem quatro categorias diferentes de temas para escolher:

• Temas de bloco : Temas projetados para FSE
• Temas universais : Temas que funcionam com o Personalizador e o Editor do Site
• Temas híbridos: temas clássicos que suportam recursos FSE como theme.json
• Temas clássicos : Temas com templates PHP, functions.php, etc.

Devido ao impacto que os temas de bloco provavelmente terão no ecossistema do WordPress, temos um artigo inteiro cobrindo o Twenty Twenty-Two e os temas de bloco do WordPress. Certifique-se de verificá-lo para uma visão mais detalhada.

Melhorias de desempenho

Aqui na Kinsta, somos obcecados pela velocidade do site. É por isso que estamos empolgados com as melhorias de desempenho que vêm com o WordPress 5.9.

Essas melhorias afetarão várias áreas do CMS, desde o editor de blocos até temas de blocos, carregamento lento e muito mais. Vamos mergulhar.

Aprimoramentos do Insersor de Blocos

Desde o WordPress 5.9, os tipos, padrões e categorias de blocos são renderizados preguiçosamente no Block Inserter. O navegador carrega primeiro o conteúdo de prioridade mais alta, proporcionando ao usuário uma experiência de edição mais suave e desempenho aprimorado.

Outras melhorias de desempenho notáveis ​​no contexto do editor de blocos afetam os blocos reutilizáveis ​​e a Visualização de lista.

Menos CSS carregado

Quanto ao frontend, o WordPress 5.9 reduziu drasticamente a quantidade de CSS carregado por temas de bloco, levando as páginas a carregar significativamente mais rápido.

A principal melhoria que deve ser observada neste contexto é a introdução do mecanismo de configurações e estilos theme.json , que impede que os temas usem folhas de estilo massivas, incluindo centenas de declarações CSS. A quantidade de código CSS que um tema usa agora foi reduzida a algumas propriedades personalizadas CSS que qualquer tipo de bloco pode reutilizar.

Melhorias no desempenho de carregamento lento

O carregamento lento de imagem foi introduzido pela primeira vez no WordPress 5.5. A partir do WordPress 5.7, a funcionalidade de carregamento lento foi estendida para iframes, permitindo que os proprietários de sites construíssem sites mais rápidos e melhorassem seu SEO.

De qualquer forma, após uma análise do Largest Contentful Paint (LCP), descobriu-se que atribuir o atributo loading="lazy" a todas as imagens e iframes na página causa uma leve degradação no desempenho.

Simplesmente ignorar o atributo loading="lazy" não era uma solução, porque isso levaria à perda das claras vantagens do carregamento lento.

A solução ideal seria apenas omitir o atributo loading="lazy" nas imagens que aparecem acima da dobra. No entanto, como o atributo loading="lazy" é atribuído no lado do servidor, o WordPress não pode determinar exatamente quais imagens são exibidas acima da dobra. É algo que depende principalmente do tema ativo.

Agora, como uma solução de troca, a partir do WordPress 5.9, o atributo loading="lazy" não é aplicado à primeira imagem de conteúdo ou iframe. Uma análise realizada em 50 temas populares do WordPress descobriu que esta solução leva a melhorias consideráveis ​​de desempenho e carregamento de páginas até 30% mais rápido.

Felix Arntz explica como funciona:

… para melhorar o desempenho pronto para uso sem exigir que um desenvolvedor personalize o comportamento, o WordPress agora ignorará a primeira “imagem de conteúdo ou iframe” na página do carregamento lento. O termo “imagem de conteúdo ou iframe” aqui denota qualquer imagem ou iframe encontrado no conteúdo de qualquer postagem no loop de consulta principal atual, bem como qualquer imagem em destaque de tal postagem. Isso se aplica tanto ao conteúdo “singular” quanto ao “arquivo”: em um contexto “singular” a primeira imagem ou iframe do (único) post não é carregado lentamente, enquanto em um contexto de “arquivo” a primeira imagem ou iframe do a primeira postagem na consulta não é carregada com preguiça.

Os desenvolvedores de temas agora podem usar o novo filtro wp_omit_loading_attr_threshold para alterar o número de imagens/iframes a serem ignorados do carregamento lento.

Várias folhas de estilo por bloco

Blocos e desenvolvedores de temas podem registrar várias folhas de estilo em cada bloco e carregar estilos de outros blocos quando necessário. Isso permite carregar folhas de estilo dependendo do conteúdo da página, evitando que os temas carreguem folhas de estilo enormes em todas as páginas.

De acordo com Ari Stathopoulos:

Os blocos agora poderão registrar várias folhas de estilo e carregar estilos de outros blocos quando necessário. Os temas poderão adicionar estilos por bloco, em vez de carregar folhas de estilo monolíticas que são carregadas à força em qualquer lugar. Isso tem um impacto maior em temas de bloco onde o carregamento de folhas de estilo é otimizado com base no conteúdo da página e layout, mas também pode ser usado por temas clássicos.

Recursos adicionais para desenvolvedores

Além dos muitos recursos e aprimoramentos de interface do usuário discutidos até agora, o WordPress 5.9 também apresenta vários recursos para desenvolvedores.

Um novo atributo para bloquear blocos

Os desenvolvedores de blocos agora podem impedir que os usuários movam ou excluam blocos individuais adicionando um atributo de lock nas configurações do bloco:

 { ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }

Com esse recurso ativado, os usuários podem editar o conteúdo do bloco, mas não podem mover o bloco na página ou removê-lo da tela do editor. A imagem a seguir mostra um bloco personalizado com um conjunto padrão de controles da barra de ferramentas:

Definir o atributo de lock , conforme visto no código acima, oculta os movimentadores de bloco e os controles Mover para e Remover da barra de ferramentas do bloco. A imagem abaixo mostra o resultado final na tela:

Você também pode bloquear um bloco específico em um padrão de bloco. Por exemplo, veja também Bloqueando Blocos no WordPress 5.9.

Nova API para acessar configurações e estilos globais

O WordPress 5.9 apresenta uma nova API pública PHP para ler dados de theme.json .

Lendo configurações e estilos de theme.json

Existem duas novas funções para ler dados das seções de settings e styles declaradas no theme.json :

 wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );

• $path é um array listando o caminho para a configuração especificada
• $context é uma matriz que define o contexto para esses dados. Os desenvolvedores podem ler a partir de uma seção específica de configurações de bloco — por exemplo, array( 'block_name' => 'core/paragraph' ) . A chave orygin definida como base permite ignorar dados personalizados salvos pelo usuário.

O código de exemplo a seguir retornaria o valor de configuração contentSize . Em Twenty Twenty-Two, seria 650px :

 wp_get_global_settings( array( 'layout', 'contentSize' ) );

Ao definir um contexto, você pode recuperar estilos para blocos específicos. O código a seguir mostra como recuperar o valor do raio da borda para o bloco core/button :

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button' ) ); }

A função acima retorna o valor da propriedade necessária enquanto considera as configurações padrão, as configurações do tema e os dados do usuário. O valor personalizado será fornecido se o usuário configurar o raio da borda do botão na interface Global Styles.

Para ignorar os dados do usuário, você usaria o seguinte código:

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button', 'origin' => 'base' ) ); }

Obtendo a folha de estilo gerada

O WordPress 5.9 também apresenta uma nova função para obter a folha de estilo resultante do padrão, tema e estilos personalizados:

 wp_get_global_stylesheet( $types = array() );

$types é uma lista dos estilos a serem gerados.

Você pode ler mais sobre a nova API em Nova API para acessar configurações e estilos globais.

Mais recursos para desenvolvedores

Alterações adicionais do WordPress 5.9 para desenvolvedores que você pode querer conhecer incluem:

• Temas de bloco, uma nova maneira de criar temas no WordPress 5.9
• Atualizações para configurações, estilos e theme.json
• Alterações e filtros focados no tema no WordPress 5.9
• Novas consultas de recursos no WordPress 5.9
• Diversas alterações principais no WordPress 5.9
• Alterações diversas no editor de blocos no WordPress 5.9
• Assuma mais controle sobre as áreas de blocos internos (como desenvolvedor de blocos)

Seu guia definitivo para o WordPress 5.9: de aprimoramentos de interface de usuário a estilos globais (e muito mais!) Click to Tweet

Resumo

Vamos encerrar este artigo com uma nota rápida sobre a participação de mercado do WordPress. Atualmente, o WordPress alimenta mais de 65% de todos os sites cujo sistema de gerenciamento de conteúdo é conhecido e fica ao norte de 43% de todos os sites .

Esses números são impressionantes, especialmente quando comparados aos concorrentes mais próximos com menos de 5% de participação de mercado, como Shopify.

E isso também significa que você não pode ignorar a evolução do WP CMS. Cada nova versão do WordPress traz novos recursos, aprimoramentos de interface, melhorias de desempenho e o WordPress 5.9 não é exceção. Tudo o que você precisa para testar os novos recursos é um tema de bloco, como o novo tema padrão Twenty Twenty-Two, e você estará pronto para começar.

Para você, agora! Você está pronto para mudar para bloquear temas e FSE? E quais são suas mudanças favoritas no WordPress 5.9?