O que há de novo no WordPress 6.0: novos blocos, mudança de estilo, edição de modelos, API Webfonts e muito mais
Publicados: 2022-05-05Estamos a pouco tempo do lançamento do WordPress 6.0 e, como de costume, espiamos por trás das cortinas para dar aos nossos leitores uma prévia do que eles podem esperar com o próximo grande lançamento do WordPress.
Digamos desde já que, se o WordPress 5.9 nos trouxe ao coração da Fase 2 do Gutenberg, o WordPress 6.0 visa consolidar as ferramentas de personalização já disponíveis.
Mas a nova versão não será apenas isso. Como Matias Ventura apontou no Roteiro Preliminar para 6.0, a introdução do editor do site foi um grande marco, mas também apenas um primeiro passo na jornada.
Com o WordPress 6.0 podemos esperar, de fato, melhorias consideráveis em várias áreas do CMS, da usabilidade ao desempenho, incluindo o seguinte:
- Arquitetura de informações aprimorada e experiência de navegação de modelos
- Criação de modelo aprimorada
- Uma nova IU de navegação
- Um novo modo de navegação para o editor do site
- Estilos globais alternativos
- Um bloco de navegação aprimorado
- Novas ferramentas de design
- E muito mais…
Mas espere, isso não é tudo. O WordPress 6.0 também traz um número impressionante de alterações, recursos e correções de bugs, incluindo mais de 400 atualizações e 500 correções de bugs para o editor. Mais de 189 tickets foram corrigidos, incluindo 91 novos recursos e melhorias.
Sim, há muito o que falar. Então não vamos demorar mais e descobrir o que há de novo no WordPress 6.0.
API WebFonts
Uma nova API Webfonts agora fornece uma maneira padronizada de carregar webfonts no WordPress, garantindo desempenho e privacidade do usuário.
A partir do WordPress 6.0, você só pode registrar uma nova webfont do seu theme.json .
Usar o theme.json é bastante simples. Tudo o que você precisa fazer é adicionar uma nova família de fontes à seção de typography . O código a seguir fornece um exemplo de registro de webfont:
"typography": { "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" }, { "fontFamily": "\"Inter\", sans-serif", "name": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontWeight": "200 900", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/inter/Inter.ttf" ] } ] } ] } Com o código acima, adicionamos a fonte Inter ao conjunto padrão de fontFamilies em Twenty Twenty-Two. Se você quiser tentar por conta própria, baixe a Inter webfont do Google Fonts para a pasta ./assets/fonts e adicione o código acima à seção settings.typography do theme.json do Twenty Twenty-Two. Quando terminar, salve o arquivo e volte para a interface de edição do site.
A imagem a seguir mostra o resultado no editor.
A API Webfont registra apenas fontes que são necessárias para renderizar blocos na página atual e isso é particularmente útil com webfonts definidas em variações de estilo. Além disso, a API otimiza o número de solicitações HTTP registrando e enfileirando fontes por família de fontes.
Você pode ler mais sobre a nova API na solicitação pull da API Webfonts e em Status da API Webfonts para inclusão do WordPress 6.0.
Troca de estilos globais
As variações de estilos globais são um dos recursos mais aguardados do WordPress 6.0. Os autores de temas agora podem agrupar vários conjuntos de estilos globais com seus temas, permitindo que os usuários alternem entre variações de estilo com um único clique.
É como ter temas filhos prontos para usar, com um conjunto predefinido de estilos para cada um.
Para adicionar uma variação de estilo ao seu tema de bloco, você adicionará um arquivo JSON alternativo em uma pasta de estilos localizada na raiz do seu tema.
O tema que suporta variações de estilos globais mostra um novo item de estilos de navegação na barra lateral de estilos globais . Isso leva a um painel onde os usuários do tema encontram uma lista dos estilos disponíveis.
Escolha um estilo global na lista e o estilo será aplicado automaticamente a todo o seu site.
O novo recurso permite que os desenvolvedores de temas criem um número ilimitado de variações de estilo e combinam perfeitamente com a nova API Webfonts.
A imagem a seguir mostra um estilo personalizado do exemplo anterior, com uma fonte diferente aplicada aos títulos.
Se você quiser tentar você mesmo, adicione uma pasta de estilos à raiz do seu tema de bloco, crie um novo arquivo JSON com um nome significativo, abra-o em seu editor de código favorito e adicione o seguinte código:
{ "version": 2, "settings": { "color": { "duotone": [ { "colors": [ "#143F6B", "#EFEFEF" ], "slug": "foreground-and-background", "name": "Foreground and background" }, { "colors": [ "#143F6B", "#FEB139" ], "slug": "foreground-and-secondary", "name": "Foreground and secondary" }, { "colors": [ "#143F6B", "#F6F54D" ], "slug": "foreground-and-tertiary", "name": "Foreground and tertiary" }, { "colors": [ "#F55353", "#EFEFEF" ], "slug": "primary-and-background", "name": "Primary and background" }, { "colors": [ "#F55353", "#FEB139" ], "slug": "primary-and-secondary", "name": "Primary and secondary" }, { "colors": [ "#F55353", "#F6F54D" ], "slug": "primary-and-tertiary", "name": "Primary and tertiary" } ], "palette": [ { "slug": "foreground", "color": "#143F6B", "name": "Foreground" }, { "slug": "background", "color": "#EFEFEF", "name": "Background" }, { "slug": "primary", "color": "#F55353", "name": "Primary" }, { "slug": "secondary", "color": "#FEB139", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F54D", "name": "Tertiary" } ] }, "typography": { "fontFamilies": [ { "fontFamily": "\"Inter\", sans-serif", "name": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontWeight": "200 900", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/inter/Inter.ttf" ] } ] } ] } }, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "core/query-title": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)" } } }, "elements": { "h1": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h2": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h3": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h4": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h5": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h6": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } } }, "typography": { "fontFamily": "var(--wp--preset--font-family--inter)" } } }Você pode encontrar o código completo usado no exemplo acima no GitHub e no gist.
Os desenvolvedores encontrarão visões gerais detalhadas de Estilos globais e Theme.json nos artigos de documentação Configurações e estilos globais e Theme.json.
Você também pode conferir a versão mais recente do Twenty Twenty-Two, que agora apresenta três novas variações de estilo.
Padrões de bloco em todos os lugares
Uma coisa é certa, os padrões de bloco desempenham um papel central na fase atual de desenvolvimento do WordPress. Introduzido pela primeira vez com o WordPress 5.5, os padrões de bloco foram aprimorados regularmente ao longo do tempo.
Além disso, a partir do WordPress 5.9, os padrões apresentados no diretório Patterns chegaram aos nossos sites WordPress, sendo recuperados dinamicamente do diretório Patterns e carregados no insersor de blocos.
E agora qualquer um pode se tornar um desenvolvedor de padrões, graças a uma nova ferramenta online. O Pattern Creator permite que você crie, edite e envie seus melhores padrões de bloco para o Diretório de padrões . Tudo o que você precisa para começar é uma conta WordPress.org.
E o WordPress 6.0 apresenta outras melhorias nos padrões de bloqueio.
Primeiro, os padrões de bloco são mais fáceis de encontrar na edição de modelos. Agora o insersor rápido só mostra padrões de bloco quando você o acessa no nível superior de um template, ou seja, quando o bloco que você vai adicionar ao seu template é o descendente direto do documento.
É quando as seguintes condições se encontram:
- Você está editando um modelo de bloco
- O inseridor rápido está no nível da raiz
- Você está adicionando um bloco entre outros blocos (ou seja, nem o primeiro nem o último bloco da página)
Outro recurso útil agora permite que os desenvolvedores de temas adicionem padrões recomendados ao theme.json . Para experimentar, pesquise no diretório Patterns, encontre os padrões que deseja recomendar aos usuários do seu tema, pegue o slug de padrão do URL e adicione-o ao seu theme.json da seguinte maneira:
"patterns": [ "image-with-angled-overlay-shape-call-to-action-button-and-description", "hero-section-with-overlap-image" ],Os usuários encontrarão seus padrões recomendados no insersor de blocos.
Um poderoso recurso relacionado a padrões que vem com o WordPress 6.0 é o registro implícito de padrões. Os temas agora podem registrar padrões implicitamente declarando-os como arquivos PHP em um novo diretório /patterns na raiz do tema.
O processo é bastante simples:
- crie uma nova pasta de padrões na raiz do seu tema,
- construa um grupo de blocos no editor de blocos,
- copie e cole seu HTML em um novo arquivo de texto,
- preceder o seguinte título,
- e salve o arquivo como PHP em sua pasta de padrões .
<?php /** * Title: My pattern * Slug: my-theme/my-pattern * Categories: text */ ?>E é isso. Agora você tem um novo padrão de bloco para aparecer no insersor de bloco.
Para obter uma visão geral mais abrangente do desenvolvimento do padrão de bloco, você pode seguir o Tracking Issue no GitHub.
Recursos de edição do site
O desenvolvimento da edição completa do site não terminou com o WordPress 5.9. O WordPress 6.0 leva as coisas um passo adiante, melhorando as funcionalidades visuais de criação de temas e oferecendo novas opções de modelos para temas de blocos. E mais recursos estão a caminho.
Criação de temas visuais
O WordPress 6.0 apresenta uma ferramenta de exportação de tema de bloco aprimorada, que permite baixar o tema atual com todas as suas alterações e personalizações.
Se você não usou a ferramenta de exportação de tema de bloco até agora, é uma poderosa ferramenta de edição de site que permite exportar seus estilos e modelos como um tema inteiro.
Quando estiver satisfeito com suas alterações, na interface do editor do site, abra a barra lateral Opções e encontre a seção Ferramentas . Aqui, um botão Exportar permite que você baixe o tema atual com todas as suas personalizações de estilo e modelo em um arquivo zip.
Você pode exportar seu tema e instalá-lo em qualquer site WordPress.
Testamos a ferramenta de exportação de temas aprimorada em uma instalação local do WordPress e descobrimos que quase tudo funciona como esperávamos…
De qualquer forma, a ferramenta de exportação ainda está em desenvolvimento, e hoje só podemos vislumbrar seu tremendo potencial. Pense na possibilidade de criar seus temas a partir da interface de edição do seu site e distribuí-los em um número arbitrário de instalações. E isso é se você é ou não um desenvolvedor…
Ainda há muitos problemas em aberto a serem corrigidos, o que nos faz pensar que veremos várias melhorias em breve. Se você está curioso e quer saber mais sobre Visual Theme Building (como nós), você pode seguir o Tracking Issue no GitHub.
Mais opções de modelo em temas de bloco
Nas versões anteriores do WordPress, tínhamos um número limitado de tipos de modelos disponíveis.
Agora, o WordPress 6.0 apresenta vários novos tipos de modelos, incluindo Autor, Categoria, Data, Tag e Taxonomia.
Essa adição deve agilizar o fluxo de trabalho de edição do seu site. Para experimentá-lo, basta escolher um novo modelo na lista suspensa, adicionar os blocos necessários, salvar suas alterações e verificar como ele fica no front-end. Sim, é fácil assim. Agora, considere isso em conjunto com o recurso de exportação de temas mencionado acima e você entenderá melhor o que podemos esperar com a edição do site em breve.
Melhorias de interface e usabilidade
O WordPress 6.0 introduz uma série de mudanças na interface do usuário, muitas das quais são destinadas a fazer a ordem na barra lateral. Juntas, essas mudanças devem ter um impacto considerável na experiência geral de edição. Aqui mencionaremos apenas alguns deles, mas você pode verificar as notas de lançamento do Gutenberg para obter uma lista mais abrangente de alterações (consulte Gutenberg 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13.0).
Melhorias na visualização de lista
A Visualização de Lista é afetada por um número considerável de mudanças que melhoram a usabilidade do componente.
Expandir a exibição de lista na seleção
Quando você clica em um bloco no editor, agora o bloco é realçado automaticamente na Visualização de lista. Se o bloco estiver aninhado em um bloco pai, o bloco pai se expandirá mostrando o item na árvore de blocos.
Visualização de lista recolhida por padrão
Antes do WordPress 6.0, quando você abre o painel List View, ele é expandido por padrão.
Mas como uma postagem geralmente consiste em estruturas complexas de blocos aninhados, fazer com que a árvore de blocos entre em colapso ao abrir a Visualização de Lista faz todo o sentido.
Com o 6.0, o modo de exibição de lista é recolhido por padrão em todos os editores, tornando a árvore de blocos muito mais compreensível à primeira vista.
Foco no botão de exibição de lista
Quando você abre o painel de exibição de lista, o foco agora retorna corretamente ao botão de exibição de lista. Isso é particularmente útil quando você navega no modo de exibição de lista do teclado e resulta em uma experiência de edição mais suave e perfeita.
Seleção de vários blocos e arrastar e soltar
Outra alteração na Visualização de lista permite selecionar vários blocos no mesmo nível e arrastá-los e soltá-los em outra posição na lista.
Visualizações de estilo de bloco
Antes do WordPress 6.0, as visualizações de estilo de bloco eram colocadas na barra lateral do bloco, ocupando uma parte considerável do painel Estilos.
Com a versão 6.0, apenas os nomes das variações de estilo aparecem no painel Estilos, enquanto as visualizações de estilo são exibidas fora da barra lateral quando o nome do estilo passa o mouse ou recebe foco.
Essa alteração reduz as dimensões da barra lateral e deve tornar os nomes dos estilos mais evidentes.
Seção de tipografia de parágrafo
Com o objetivo de fazer a ordem na barra lateral do bloco, o controle Drop Cap do bloco Parágrafo foi movido de sua seção para a seção Tipografia.
Com essa alteração, todos os controles de configurações de tipografia agora são colocados na mesma seção, levando a uma experiência de usuário mais consistente.
Configurações de borda e cor movidas para o painel de ferramentas
Com o objetivo de fazer a ordem em uma barra lateral de configurações confusas, os controles de configurações de borda e configurações de cores foram movidos para o ToolsPanel e podem ser expandidos e recolhidos em vários contextos.
Essa mudança deve simplificar a experiência de edição com vários blocos e trazer mais consistência à barra lateral.
Lembrete de categoria do painel de pós-publicação
Quando você está com pressa ou publica regularmente um bom número de postagens no blog, pode facilmente esquecer tags ou categorias. Se você costuma se ver em tal situação, você achará o lembrete de tag que aparece no painel Publicação de postagem extremamente útil.
Agora, para ajudar os administradores e autores do site a garantir que suas postagens tenham as categorias necessárias atribuídas, com o WordPress 6.0, uma nova sugestão: Atribuir uma categoria aparece no painel Publicar postagem quando uma categoria ainda não foi adicionada à postagem.
A imagem abaixo compara o painel Publicar Post no WordPress 5.9 vs. 6.0.
Editor de código adicionado ao editor do site
A partir do WordPress 6.0, o Code Editor agora também está disponível no Site Editor. Assim como no Editor de postagem, você encontrará o Editor de código no menu Opções.
Melhorias adicionais
Seleção múltipla – Agora é possível selecionar texto em vários blocos.
Bloquear a interface do usuário – Um novo item de bloqueio no menu suspenso Mais configurações abre um pop-up onde você pode impedir que os usuários movam ou removam blocos (ou ambos).
Isso é particularmente útil na edição de modelos e blocos reutilizáveis, onde você também pode restringir a edição de blocos.
Retenção de estilo – Ao transformar blocos ou criar novos botões, vários estilos agora são mantidos.
A imagem abaixo mostra um bloco List com diferentes estilos.
Quando você transforma o bloco de lista em parágrafos, os novos blocos mantêm os mesmos estilos dos itens de lista anteriores.
O mesmo aprimoramento se aplica a novos botões adicionados a um bloco Buttons, que agora herda o estilo dos botões adjacentes.
Novos blocos principais
O número de blocos de núcleo está aumentando constantemente. Se você está se perguntando quais são os blocos principais atualmente disponíveis, agora há uma página do Manual que fornece uma lista completa dos blocos principais incluídos no plug-in Gutenberg. Para cada bloco, são fornecidos Nome, Categoria, Suportes e Atributos, bem como um link útil para o código-fonte que os desenvolvedores de blocos vão adorar.
E mais blocos estão chegando com o WordPress 6.0. Encontre aqui os blocos que você pode esperar com a próxima versão.
Loop de consulta de comentários
Semelhante ao bloco Query Loop, um novo bloco Comment Query Loop exibe comentários de postagem. É um bloco avançado que inclui vários blocos internos que você pode editar e configurar separadamente.
Como mostra a imagem abaixo, você pode selecionar qualquer um dos blocos contidos no bloco Comment Query Loop para personalizar sua aparência como desejar. Você também pode adicionar mais blocos ou mover ou remover blocos existentes (código-fonte).
consulte Mais informação
Um novo e personalizável bloco Leia mais permite personalizar diferentes aspectos do botão Leia mais: bordas, cores, cantos, tipografia e muito mais (código-fonte).
Essa é uma ótima adição porque permite adicionar e personalizar o link Leia mais fora do contexto do bloco Excerpt.
Nenhum resultado no loop de consulta
O bloco Sem resultados é um contêiner de bloco no qual você pode adicionar qualquer texto ou bloco para mostrar quando a consulta não tiver resultados. Para adicionar o bloco No Results a um Query Loop, basta selecionar o Query Loop e clicar no ícone de mais no canto inferior direito para iniciar o insersor rápido. Em seguida, procure por Sem resultados. O bloco não está disponível fora do Query Loop (código fonte).
Avatar e biografia do autor do post
O WordPress 6.0 também apresenta novos tipos de blocos para dividir o bloco Author em seus componentes e usá-los separadamente em seu conteúdo.
O bloco Post Author Biography fornece a descrição dos autores (código-fonte).
O bloco Avatar simplesmente mostra o avatar de um usuário permitindo que você escolha entre os autores do site (código fonte).
Este bloco é particularmente útil para mostrar o avatar de um autor fora do contexto do bloco Author Info ou de comentários. Por exemplo, você pode usá-lo em uma página dedicada a todos os autores ou em uma página que mostre comentários de seus usuários/leitores.
Melhorias nos Blocos Existentes
O WordPress 6.0 também apresenta várias alterações e melhorias nos blocos existentes que potencialmente terão um forte impacto no seu fluxo de trabalho de edição. O bloco de navegação será afetado por várias alterações, mas você também verá melhorias em outros blocos, incluindo Query Loop, Featured Image, Group e Social Icons.
Melhorias no Bloco de Navegação
Nos últimos meses, o bloco de navegação recebeu várias melhorias e agora apresenta uma interface significativamente mais fácil de usar.
Primeiro, uma visualização avançada foi adicionada ao bloco Navigation Link. Quando você adiciona um link apontando para um recurso acessível publicamente, clicar no botão de link na barra de ferramentas do bloco mostra uma imagem de visualização desse recurso.
Algumas alterações adicionais afetam a experiência geral de edição.
Agora, quando você adiciona um novo menu e existe apenas um Menu de Navegação, o padrão é o único menu disponível. Essa alteração deve acelerar seu fluxo de trabalho de edição se você tiver apenas um único menu de navegação.
Os Links de Navegação já possuíam um campo de descrição onde os usuários podem inserir um texto descrevendo seus links de navegação. No entanto, nas versões anteriores do WordPress, os temas não suportavam esse recurso.
Agora, com o WordPress 6.0, um <span class="wp-block-navigation-item__description"> aparece após o rótulo do link.
No Twenty Twenty-Two, o .wp-block-navigation-item__description está oculto via CSS, mas os temas podem adicionar uma propriedade display: block para mostrar a descrição do link.
Filtros de loop de consulta e imagens em destaque
A seção de configurações de Filtros de Loop de Consulta agora mostra campos de entrada para taxonomias personalizadas. Isso permite que os usuários filtrem o tipo de postagem atual por uma ou mais taxonomias personalizadas registradas para o tipo de postagem selecionado.
Agora também é possível filtrar postagens por vários autores, enquanto nas versões anteriores você só tinha permissão para selecionar um único autor em uma lista suspensa.
Além disso, agora você também pode definir as dimensões da imagem em destaque dentro de um bloco Query Loop.
Tipografia e suporte de fronteira em blocos de grupos responsivos
Blocos de grupo e linha agora suportam configurações de tipografia. Essa alteração permite que os usuários apliquem as mesmas configurações de tipografia a um grupo inteiro de blocos de uma só vez, economizando alguns cliques na hora de formatar um grupo contendo vários blocos aninhados.
O bloco Agrupar foi aprimorado e agora você pode agrupar facilmente blocos em Pilha ou Linha com um único clique.
Basta selecionar os blocos que deseja agrupar e escolher um dos três controles disponíveis na barra de ferramentas do bloco: Group , Row , Stack .
Depois de agrupar os blocos, um novo painel na barra lateral de configurações mostra as descrições das variações do grupo, permitindo que você alterne a variação com apenas alguns cliques.
O WordPress 6.0 também apresenta suporte de margem para blocos de grupo, permitindo que os usuários controlem as margens superior e inferior separadamente.
Imagem em destaque no bloco de capa
Agora você pode usar imagens em destaque em blocos de capa como no WordPress 6.0, uma alternância Usar imagem em destaque foi adicionada à barra de ferramentas do bloco. Graças a este novo controle, você pode alternar da imagem atual para a imagem em destaque com um único clique.
Mostrar/ocultar marcadores em ícones sociais
Um pequeno, mas útil aprimoramento no bloco de ícones sociais agora permite que os usuários alternem os rótulos de link de ícone.
Ao habilitar esta opção, você pode exibir o nome do serviço padrão ou definir rótulos personalizados para seus ícones separadamente.
Melhorias de bloco adicionais
A próxima versão do WordPress também traz um grande número de melhorias para muitos outros blocos.
Por exemplo, agora você pode controlar as bordas dos blocos de Colunas (Gutenberg 12.7).
Outra melhoria útil do UX permite inserir links internos usando um simples [[ acionador de teclado.
Agora é mais fácil controlar o espaço ao redor das imagens em um bloco da Galeria graças ao novo controle de espaçamento entre blocos .
Mas essas são apenas algumas das melhorias que você verá a partir do WordPress 6.0. Para uma lista completa, confira as notas de lançamento do Gutenberg.
Resumo
Como mencionado acima, agora podemos dizer que estamos no meio da fase dois do desenvolvimento do Gutenberg, a Fase de Personalização .
A Edição Completa do Site agora faz parte do núcleo do WordPress e 6.0 e as versões a seguir trarão mais melhorias para o que já temos e podemos usar agora. Tudo isso terá um enorme impacto no ecossistema WordPress e na web como um todo, considerando também que, no momento da redação,
O WordPress é usado por 64,2% de todos os sites cujo sistema de gerenciamento de conteúdo conhecemos. Isso é 43,0% de todos os sites. (Fonte W3Techs)
Vamos parar por aqui por enquanto. Nossa lista de recursos e melhorias que vêm com o WordPress 6.0 não pode ser esgotada em um único post, mas esperamos pelo menos destacamos as adições que terão o maior impacto na maneira como estamos usando o WordPress no dia a dia.
Agora gostaríamos de concluir este artigo com algumas perguntas para nossos leitores!
Por favor, compartilhe seus pensamentos com a comunidade na seção de comentários abaixo.