O WordPress 5.9 foi inicialmente programado para ser lançado em 14 de dezembro de 2021. Devido a várias questões em aberto, o lançamento final foi adiado e agora está agendado para 25 de janeiro de 2022.
Se você está se perguntando o que há de novo no WordPress 5.9, a resposta curta é Edição Completa do Site (FSE).
E de fato, muitos recursos 5.9 só estão disponíveis se você estiver usando um tema que suporte a Edição Completa do Site, como o novíssimo tema padrão, Twenty Twenty-Two.
Com o WordPress 5.9, chegamos ao coração da segunda fase do roteiro de Gutenberg: a fase de Customização, que é focada principalmente na edição completa do site, Padrões de Bloco, Diretório de Blocos e temas baseados em blocos.
Com 5.9, que sairá no próximo mês, nós estamos – eu diria – no MVP, o Produto Mínimo Viáveis desta fase de customização do Gutenberg.
Estas palavras de Matt Mullenweg em 2021 State of the Word resumem melhor as principais características da próxima versão do WordPress.
Dito isto, o que você pode esperar ver 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 customizarem as configurações e 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, seja globalmente ou em nível de bloco, sem escrever uma única linha de código.
O mecanismo de Estilos Globais deve alterar significativamente a forma como você está acostumado a personalizar a aparência de seus sites, já que os Estilos Globais afetam vários aspectos do design do site WordPress.
Primeiro, a interface de Estilos Globais substitui o Customizador e agora é a única maneira de personalizar configurações e estilos com temas de blocos. Da mesma forma, páginas de administração de opções complexas de temas não serão mais necessárias. Isto fornece uma nova forma padrão de configuração das configurações e estilos de temas e, ao mesmo tempo, deve agilizar o fluxo de trabalho de desenvolvimento do tema.
Com Estilos Globais, 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 artigos individuais.
Uma nova barra lateral está agora disponível no editor do site, no topo da qual você encontrará um pequeno painel de visualização e quatro componentes na seguinte ordem:
Nós podemos esperar que novos componentes sejam adicionados ao longo do tempo.
Vamos dar uma olhada mais de perto na nova interface.
Pré-visualização de estilo
O primeiro elemento na barra lateral de Estilos Globais é um painel de pré-visualização. Este painel permite que você verifique o resultado de suas customizações e é particularmente útil quando suas mudanças 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 em comparação:
Tipografia
O painel de tipografia é onde você controla a tipografia do seu site. É claro, 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 tipográficas:
"settings": {
"typography": {
"customLineHeight": true,
"fontSizes": [],
"fontFamilies": []
}
}A imagem seguinte mostra as configurações de tipografia resultantes na barra lateral de Estilos Globais:
Vamos mergulhar um pouco mais fundo e ver como o tema de Blocos TT1 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 estas famílias de fontes no painel de visualização de Estilos Globais:
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ê tem acesso a um novo painel onde você pode escolher cores entre três paletas de cores: Cor, Tema e Paleta Personalizada (leia mais em Cores Padrão, Cores Temáticas e Cores Personalizadas).
Neste painel, você será capaz de definir e modificar a cor para o elemento atual.
Layout
O último grupo de ferramentas é destinado a customizações de layout. No contexto global, isto se limita ao contêiner do site.
Blocos
Com a implementação do mecanismo de Estilos Globais, agora também é possível mudar a aparência de blocos específicos, tais como Parágrafo (tipografia e cores), Botões (layout), e Coluna (cores e layout).
Note que os estilos de bloco podem ser personalizados a partir da interface de Estilos Globais somente se o bloco declarar suporte a funcionalidades específicas 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
}
}
},Como o bloco core/post-title suporta cores, espaçamento e tipografia, você encontrará as entradas correspondentes nas configurações de Estilos Globais do bloco Título do Artigo.
A imagem seguinte mostra as configurações de tipografia, que você pode facilmente comparar com o código acima:
Vale a pena notar que o WordPress 5.9 só entrega a primeira implementação da interface de Estilos Globais. Como Matias Ventura aponta, podemos razoavelmente esperar um desenvolvimento adicional do novo recurso de controle de estilo:
No futuro, haverá fluxos embutidos no sistema permitindo que você passe de estilos locais para globais – como fazer customizações para um bloco de botões e optar por aplicá-las 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 poderiam incluir a capacidade de temas para fornecer paletas de cores alternativas e múltiplas variações de estilo global.
Last week I built a handful of Twenty Twenty-Two's color + font variations into super-simple child themes. They're really lightweight, and I love the idea of offering folks a drastically different site with one click.🎉https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A
— kjellr (@kjellr) November 15, 2021
Os desenvolvedores podem mergulhar profundamente no mecanismo de estilo global em Global Settings & Styles (theme.json) artigo de suporte. 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 tem sido chamado de “um dos blocos de temas mais impactantes”, e não temos medo de dizer que concordamos.
O bloco está na fase embrionária há algum tempo (veja também Navegação Block Tracking Issue e Tracking Issue i2). Ainda assim, agora que todos os problemas pendentes e bloqueadores listados como WordPress 5.9 devem ter sido corrigidos, nós podemos finalmente começar a usar um dos recursos mais poderosos fundidos no núcleo com o WordPress 5.9.
Uma visão geral rápida da interface do Bloco de Navegação
Usar o novo bloco pode ser um pouco confuso no início, mas uma vez que você pegar o jeito, você vai apreciar todo o seu potencial.
Quando você adiciona um bloco de Navegação pela primeira vez, o espaço reservado ao bloco fornece três opções para selecionar um menu baseado em blocos existente, criando um menu com todas as páginas, ou começando de novo com um menu vazio.
O novo menu de Navegação também permite que você importe menus criados através da tela de Menus de Aparência que está disponível com temas clássicos.
Isto significa que se você estiver passando de um tema clássico para um tema de bloco, você não terá que 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 achá-lo útil em artigos de forma longa para criar uma tabela de conteúdo, permitindo que os usuários saltem para seções de conteúdo específicas.
Novos Links de Navegação são imediatamente adicionados ao bloco de Navegação clicando no ícone 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.
Clicando no botão Editar na barra de ferramentas do Bloco de Links de Navegação, um item do menu é convertido em um link personalizado. Isto permite adicionar, editar, reordenar e remover itens individualmente.
Você também pode transformar links para blocos ao clicar no botão Transformar na barra de ferramentas de blocos. Isto permite que você adicione blocos específicos diretamente ao menu de navegação.
Link personalizado, Espaçador, Logo do site, Link para página 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 de configurações, você encontrará um conjunto abrangente de opções para controlar vários aspectos dos seus menus de navegação.
O painel de Layout inclui controles para justificação, orientação e embrulho.
O bloco de Navegação também apresenta um painel de configurações de Display melhorado com uma opção para um menu de hambúrgueres sempre ligado.
Você também pode personalizar as cores de texto e fundo para seus menus e submenus.
Outra adição útil recentemente adicionada ao bloco de Navegação é o suporte Block Gap, que adiciona a capacidade dos usuários de controlar a distância entre os itens do menu.
O painel de tipografia fornece um conjunto de controles para família de fontes, aparência, altura da linha, decoração e caixa de letras. Todos esses controles podem ser ativados/desativados a partir de um menu suspenso que aparece quando você clica no ícone da elipse à direita.
O Bloco de Navegação: Debaixo do capuz
Os dados do bloco de navegação são armazenados no banco de dados usando um tipo de artigo dedicado wp_navigation.
Por que isso é interessante para os usuários do WordPress, e como funciona?
Digamos que você tenha criado um menu de navegação composto de dois links personalizados e uma caixa de pesquisa. Com o tema Twenty Twenty-Two instalado, o menu poderia parecer como mostrado na imagem seguinte:
O bloco de navegação acima é armazenado no banco de dados como wp_navigation tipo de correio como segue:
<!-- 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} /-->O armazenamento do 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 blocos. Se o menu não for imediatamente visível, você simplesmente escolheria o menu de navegação desejado no seletor de menu (veja também a edição #36087 e PR #36178).
A imagem seguinte mostra o menu acima com o tema Twenty Twenty-One Blocks:
O bloco de Navegação passou por várias iterações. Você pode mergulhar mais profundamente 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 no novo artigo de suporte ao Bloco de Navegação e Nota de Desenvolvimento do Bloco de Navegação.
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 novas funcionalidades e melhorias em vários blocos. O Bloco da Galeria foi completamente revisado, enquanto várias mudanças na Imagem em Destaque e blocos de ícones do site dão aos usuários um controle mais granular sobre as respectivas imagens.
Um Bloco de Galeria reconstruído
No WordPress 5.8, a capacidade de personalizar a aparência das imagens nas galerias era um pouco limitada. Não havia maneira de mudar o estilo da imagem ou aplicar um filtro duotônicos.
Além disso, características importantes estavam faltando nas imagens da galeria, tais como a adição de links personalizados para imagens individuais em uma galeria.
Para entender melhor a razão desta 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:
Note que os detalhes das imagens são armazenados apenas no delimitador de blocos da Galeria (veja também O que é um Bloco Gutenberg?).
Isto fez com que imagens individuais se comportassem de forma diferente das imagens em galerias.
Para fazer as imagens se comportarem consistentemente nos dois contextos diferentes, o WordPress 5.9 introduz um bloco de Galeria completamente reconstruído, que agora se comporta como um recipiente para uma coleção de elementos de figuras ao invés de uma lista não ordenada de imagens.
No WordPress 5.9, imagens de galeria são aninhadas usando o núcleo innerBlocks APIs, e cada imagem armazena seu próprio conjunto de detalhes, exatamente como imagens individuais.
Isso é uma grande melhoria, uma vez que as imagens do bloco de galeria agora suporta as mesmas funcionalidades disponíveis nos blocos de imagens centrais, tais como dimensões da imagem e filtros duotônicos, bem como funcionalidades padrão do bloco, tais como arrastar e soltar, copiar, duplicar e remover funcionalidades.
Com o novo bloco da Galeria, você será capaz de estilizar as imagens individualmente. Isto garante uma grande variedade de oportunidades de personalização.
A imagem abaixo mostra várias imagens em uma galeria, cada uma com cantos arredondados diferentes:
Você também pode usar diferentes filtros duotônicos em imagens diferentes na mesma galeria.
E, é claro, você pode designar uma classe CSS específica para cada imagem, o que lhe dá superpoderes adicionais para adicionar qualquer personalização que você precise às imagens de sua galeria.
Para uma visão mais próxima do novo bloco da Galeria, veja também Gallery Block Refactor Dev Note, Upcoming Gallery Block improvements, e Gutenberg 11.4 release notes.
Melhorias de Imagem em Destaque
Várias melhorias também foram trazidas para o bloco Imagem em Destaque.
Controles básicos de dimensões
O bloco de Imagem em Destaque agora apresenta um novo painel de ajustes 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 Query Loop, como mostrado na imagem seguinte:
Filtros duotônicos em Imagens em Destaque
Nós mencionamos acima que agora podemos aplicar o filtro duotônico em imagens embrulhadas no novo bloco reconstruído da Galeria.
Agora, começando com o WordPress 5.9, filtros duotônicos também estão disponíveis em blocos de imagens em destaque em qualquer contexto, desde modelos de artigos e páginas até blocos de Query Loop.
Esta característica abre a porta para combinações de cores criativas e consistentes em todo o site.
Corte de imagem da logo do site
Antes do WordPress 5.9 (e Gutenberg 11.6), as imagens da logo só podiam ser editadas antes de serem carregadas. Com o WordPress 5.9, você pode recortar, ampliar e girar as imagens usadas no bloco da logo do site diretamente da barra de ferramentas de bloco.
Novas ferramentas de design, blocos e melhorias de IU
Onze versões do Gutenberg são fundidas no núcleo com o WordPress 5.9, fornecendo tantas funcionalidades, melhorias e correções de bugs que não seria possível cobri-las todas em um único artigo.
Então nós escolhemos algumas das que achamos mais dignas de atenção. Para uma visão mais profunda dessas funcionalidades e melhorias, você também pode querer verificar os artigos 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 cobrirá as seguintes mudanças:
Suporte de dordas UI
Começando com WordPress 5.9, quando o theme.json declara configurações border e um bloco declara suporte a bordas através da API Block Supports, um novo painel de configurações fornecerá controles para o raio da borda, largura, estilo, cor e unidades (veja também Gutenberg 11.1).
O bloco central do grupo é um bom exemplo desse útil aprimoramento da IU. O arquivo block.json do bloco do Grupo agora inclui as seguintes declarações em 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
}
},
...
},
...
}Este recurso permite que os usuários criem incríveis efeitos gráficos 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 um novo artigo ou página, crie um novo bloco de Grupo e selecione-o. Você verá um painel de Borda na barra lateral de configurações do bloco. Mude a largura e o estilo das bordas conforme necessário e aproveite o resultado.
Se você é um desenvolvedor de temas e quer adicionar este recurso aos seus temas, abra seu arquivo theme.json e declare o suporte de borda como 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 de controle do WordPress. Em um novo artigo ou página, crie um novo bloco de Grupo e selecione-o. Agora você deve ver um painel de Borda na barra lateral de configurações do bloco (veja também este theme.json experimental).
Melhorias na exibição da lista
Com o WordPress 5.9, a visualização da lista foi melhorada e agora apresenta seções de arrastar e soltar, seções dobráveis e âncoras HTML.
Arrastar e soltar na exibição da lista
Como mencionado no pedido pull #33320, o arrastar e soltar foi implementado na exibição dalista, mas foi desativado devido a problemas de desempenho.
Começando com WordPress 5.9, o Arrastar e soltar na exibição da lista foi reimplementado. Você pode novamente arrastar e soltar blocos e grupos de blocos em qualquer lugar da Visualização da Lista. Isto é uma grande melhoria na usabilidade do editor, pois permite que você mova blocos e grupos de blocos de forma rápida e fácil ao redor de suas páginas. É fundamental em artigos e páginas de forma longa, e gerencia estruturas complexas de blocos aninhados.
Seções da lista
Outra melhoria significativa para a exibição da lista é a habilidade de expandir/colapsar seções de blocos aninhados. Isto permite que você navegue facilmente em estruturas de blocos complexos, expandindo grupos únicos de blocos enquanto deixa todos os outros blocos colapsados.
Você também pode expandir e colapsar as seções de exibição da lista usando as setas esquerda e direita.
Âncoras HTML em itens de exibição da lista
Outra melhoria útil é a capacidade de adicionar âncoras HTML aos seus blocos de exibição da lista e vê-los num piscar de olhos.
Controle de espaçamento de blocos
Apresentado pela primeira vez no Gutenberg 11.4 e agora fundido no núcleo com o WordPress 5.9, o novo controle de espaçamento de blocos permite que você defina uma distância personalizada entre itens dentro de um bloco. Abaixo, você pode ver uma visualização com diferentes valores de espaçamento de blocos em um bloco de colunas com o tema padrão Twenty Twenty-Two:
O Gap Spacing estará inicialmente disponível para blocos específicos, incluindo botões, imagens, colunas, títulos e navegação, mas o suporte deve ser estendido para mais blocos no futuro.
Os temas devem habilitar o Gap Spacing no theme.json usando a nova propriedade de ferramentas de aparência. Você pode ler mais sobre ferramentas de aparência em nosso artigo detalhado do [Twenty Twenty-Two. Veja também os pedidos #33991 e #34630.
Pré-visualização de URL rica para controle de links
Aproveitando o novo endpoint de detalhes de url-details do REST, o controle de link agora fornece uma rica pré-visualização de URL mostrando detalhes para um recurso alvo de link.
Em sua primeira implementação, este recurso só estava disponível no componente richtext do Post Editor. Na época em que foi escrito, ele também está disponível no Editor do Site, mas não nos editores de Navegação e Widget.
Crie páginas a partir do Link Popup
O WordPress 5.9 também apresenta uma interface de link inline melhorada, mostrando um botão novinho em folha para criar novas páginas diretamente do popup de link inline. Este recurso só está disponível dentro do Post Editor.
Melhorias no Bloco de Pesquisa
O bloco de pesquisa agora mostra as configurações de botão e cor da borda.
Agora você também pode personalizar a cor do fundo e do texto e a cor e raio da borda.
Novos controles para dimensões de blocos
Um novo painel de configurações Dimensions 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 blocos encontrarão o componente <DimensionControl /> documentado no GitHub, mas note que ele ainda está marcado como um recurso experimental e pode estar sujeito a mudanças de ruptura no momento em que for escrito.
Um novo bloco de grupo de widgets adicionado à tela de Widgets
Um novo bloco de grupo de widgets está agora disponível no editor de widgets baseado em blocos. O último bloco permite a você adicionar um grupo de blocos em um widget com um título no Editor de Widgets dos temas clássicos e no Customizador.
Você pode ler mais sobre o editor de widgets no Block-Based Widgets Editor e Block Widgets no Customizador.
Layout fex e o Novo bloco de fileiras
Originalmente introduzido como um recurso experimental com o Gutenberg 11.2, o layout flex 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 da barra de ferramentas e configurações da barra lateral que permitem que você personalize o layout flexível.
Esta mesma funcionalidade está disponível no bloco Navegação e bloco de fileiras, uma nova variação do bloco de grupo introduzida 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 de fila no frontend e na ferramenta de inspetor do Chrome.
Aperfeiçoamentos do bloco padrão
Apresentado pela primeira vez com o WordPress 5.5, os blocos padrões permitem aos usuários do WordPress incluir 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 & capacitação do usuário, introduzindo algumas melhorias no sistema de padrão de blocos.
Então, o que há de novo com os padrões de blocos no WordPress 5.9?
Padrões em Destaque do Diretório de Padrões
O Inseridor de Blocos agora exibe 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 encorajados a criar e publicar mais e mais padrões ao longo do tempo, resultando em capacidades de design cada vez mais avançadas para os usuários.
Um Novo Explorador de Padrões em Tela Cheia
Como o número de blocos padrão disponíveis no Pattern Directory continua a crescer e mais temas os utilizam, o WordPress 5.9 introduz uma nova interface de navegação de blocos padrões: o Pattern Explorer.
Um novo botão Explore agora abre um modal de tela cheia que permite aos usuários navegar, procurar e inserir blocos padrões com apenas alguns cliques. O resultado é uma experiência melhorada para o usuário.
Você também encontrará notas adicionais e vários exemplos de blocos padrões em nosso mergulho profundo no tema Twenty Twenty-Two WordPress.
Se você está interessado e quer saber mais, ouça o podcast de Josepha Haden Chomphosy, Episódio 16 e 21, e assista ao vídeo Exploring WordPress 5.9 YouTube de Anne McCarthy.
O tema Twenty Twenty-Two e temas de blocos do WordPress
Com o WordPress 5.9, você não precisará mais instalar o plugin Gutenberg para habilitar a Edição Completa do Site no seu site WordPress. Você só precisará permitir que um tema de bloco aproveite todos os recursos do FSE.
Além disso, o WordPress 5.9 foi incluído com um novo tema padrão, Twenty Twenty-Two, e é uma mudança de jogo, já que Twenty Twenty-Two é o primeiro tema padrão de bloco de sempre.
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, melhorias na interface e todos os recursos de edição do site 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 o Twenty Twenty-Two. Uma vez que o tema esteja ativo, um novo item de menu Editor (beta) aparecerá no menu de administração do painel de controle do WordPress.
A interface do Editor do site agora apresenta um fluxo de edição do site renovado. A partir da interface de edição, você será capaz de editar visualmente a página inicial do site, modelos e partes de modelos, assim como acessar a interface de Estilos Globais.
Quando você ativa um tema de bloco, você não vai encontrar o Customizador. Isso porque o Customizador não suporta temas de blocos, que só usam o Editor do Site. Essa também é a razão pela qual você não pode visualizar os temas de blocos inativos.
Então, a partir do WordPress 5.9, o ponto de acesso ao Customizador 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 plugin que faça uso dele).
Se você ainda está ligado a temas tradicionais e está preocupado com a compatibilidade retroativa, descanse facilmente: Você pode continuar usando seu tema.
Atualmente você tem quatro categorias diferentes de temas para escolher:
- Temas de blocos: Temas desenhados para o FSE
- Temas universais: Temas que funcionam tanto com o Customizador como o Editor do Site
- Temas Híbridos: Temas clássicos que suportam características FSE como theme.json
- Temas clássicos: Temas com templates PHP, functions.php, etc.
Devido ao impacto que os temas de blocos provavelmente terão no ecossistema WordPress, nós temos um artigo inteiro cobrindo o tema Twenty Twenty-Two e os temas de blocos do WordPress. Não deixe de conferir para ter uma visão mais aprofundada.
Melhorias do desempenho
Aqui em Kinsta, nós somos obcecados pela velocidade do site. É por isso que estamos entusiasmados com as melhorias do desempenho que virão com o WordPress 5.9.
Essas melhorias afetarão diversas áreas do CMS, desde o editor de blocos até temas de blocos, carregamento preguiçoso e muito mais. Vamos mergulhar.
Melhorias no inseridor de blocos
Desde o WordPress 5.9, os tipos de blocos, padrões e categorias são preguiçosamente renderizados no Inseridor de Blocos. O navegador carrega primeiro o conteúdo com maior prioridade, dando ao usuário uma experiência de edição mais suave e um melhor desempenho.
Outras melhorias notáveis de desempenho 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 cortou drasticamente a quantidade de CSS carregados por temas de blocos, levando ao carregamento de páginas significativamente mais rápido.
A principal melhoria que deve ser notada neste contexto é a introdução do mecanismo de configurações e estilos do theme.json, que impede que os temas utilizem folhas de estilo maciças, incluindo centenas de declarações CSS. A quantidade de código CSS que um tema utiliza agora foi reduzida para algumas propriedades personalizadas CSS que qualquer tipo de bloco pode reutilizar.
Melhorias de performance do carregamento preguiçoso
O carregamento preguiçoso de imagens foi introduzido pela primeira vez no WordPress 5.5. A partir do WordPress 5.7, a funcionalidade de carregamento preguiçoso 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 da LCP (Largest Contentful Paint), verificou-se que a atribuição do atributo loading="lazy" a todas as imagens e iframes na página causa uma ligeira degradação do desempenho.
Simplesmente pular o atributo loading="lazy" não era uma solução porque fazê-lo levaria a perder as vantagens claras da carga preguiçosa.
A solução ideal seria omitir apenas o atributo loading="lazy" nas imagens que aparecem acima da dobra. Entretanto, 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 trade-off, começando com o 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 out-of-the-box sem requerer um desenvolvedor para personalizar o comportamento, o WordPress agora vai pular a primeira “imagem de conteúdo ou iframe” na página de ser carregado preguiçosamente. O termo “imagem de conteúdo ou iframe” aqui denota qualquer imagem ou iframe que é encontrado dentro do conteúdo de qualquer artigo no loop principal da consulta atual, assim como qualquer imagem destacada de tal artigo. Isto se aplica tanto ao conteúdo “singular” quanto ao conteúdo “arquivado”: Em um contexto “singular” a primeira imagem ou iframe do (somente) artigo não é carregada com o carregamento preguiçoso, enquanto em um contexto “archive” a primeira imagem ou iframe do primeiro artigo da consulta não é carregada com o carregamento preguiçoso.
Os desenvolvedores de temas podem agora usar o novo filtro wp_omit_loading_attr_threshold para mudar o número de imagens/ iframes a serem pulados do carregamento preguiçoso.
Múltiplas stylesheets (folhas de estilo) por bloco
Blocos e desenvolvedores de temas podem registrar múltiplas folhas de estilo em cada bloco e carregar estilos de outros blocos quando necessário. Isto permite carregar folhas de estilo dependendo do conteúdo da página, evitando que os temas carreguem folhas de estilo enormes em cada página.
De acordo com Ari Stathopoulos:
Os blocos agora serão capazes de registrar múltiplas folhas de estilo, e carregar estilos de outros blocos quando necessário. Os temas serão capazes de adicionar estilos por bloco, ao invés de carregar folhas de estilo monolíticas que são carregadas à força em qualquer lugar. Isto tem um impacto maior nos temas de blocos 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 das muitas características e melhorias de IU discutidas até agora, o WordPress 5.9 também introduz várias características para desenvolvedores.
Um novo atributo para bloquear blocos
Os desenvolvedores de blocos podem agora impedir que os usuários movimentem ou excluam blocos individuais adicionando um atributo lock nas configurações de blocos:
{
...
"attributes": {
"lock": {
"type": "object",
"default": {
"move": true,
"remove": true
}
}
}
}Com este recurso habilitado, 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:
Definindo o atributo lock, como visto no código acima, esconde os movimentadores de blocos e os controles Move to e Remove da barra de ferramentas do bloco. A imagem abaixo mostra o resultado final na tela:
Você também pode travar um bloco específico em um bloco padrão. Para um exemplo, veja também Bloqueios de Blocos no WordPress 5.9.
Nova API para acessar configurações e Estilos Globais
WordPress 5.9 introduz uma nova API pública PHP para ler dados do theme.json.
Configurações e Estilos de Leitura do theme.json
Há duas novas funções para ler dados das seções 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é um array que define o contexto para esses dados. Os desenvolvedores podem ler a partir de uma seção específica de configurações de blocos – por exemplo,array( 'block_name' => 'core/paragraph' ). O conjunto de chavesoryginparabasepermite ignorar os dados personalizados salvos pelo usuário.
O seguinte código de exemplo retornaria o valor da configuração contentSize. No 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 de propriedade requerido enquanto considera as configurações padrão, configurações de tema e dados do usuário. O valor personalizado será fornecido se o usuário configurar o raio da borda do botão na interface de Estilos Globais.
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' )
);
}Obtenha a folha de estilos gerada
O WordPress 5.9 também introduz uma nova função para obter a folha de estilo resultante dos estilos padrão, temático e personalizado:
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 os desenvolvedores
As mudanças adicionais do WordPress 5.9 para desenvolvedores que você pode querer saber incluem:
- Temas de blocos, uma nova maneira de construir temas no WordPress 5.9
- Atualizações para Configurações, Estilos e theme.json
- Mudanças e filtros focados em temas no WordPress 5.9
- Novas Consultas de Capacidade no WordPress 5.9
- Miscelânea de mudanças no WordPress 5.9
- Mudanças diversas no editor de blocos no WordPress 5.9
- Assuma mais controle sobre Áreas de Blocos Internos (como um desenvolvedor de blocos)
Resumo
Nós vamos encerrar este artigo com uma nota rápida sobre a participação de mercado WordPress. O WordPress atualmente 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.
Estes números são impressionantes, especialmente quando comparados com os concorrentes mais próximos com menos de 5% de participação de mercado, como o Shopify.
E isto também significa que você não pode ignorar a evolução do WP CMS. Cada nova versão do WordPress traz novas funcionalidades, melhorias na interface, melhorias de desempenho e o WordPress 5.9 não é exceção. Tudo que você precisa para testar as novas funcionalidades é um tema de bloco, como o novo tema padrão Twenty Twenty-Two, e você estará pronto para ir.
Você está pronto para fazer a mudança para o tema de blocos e FSE? E quais são as suas mudanças favoritas que vêm com o WordPress 5.9?
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.
Deixe um comentário