Noções básicas do construtor: explorando padrões de bloco

A versão mais recente do WordPress chegará no final do mês de 25 de janeiro. Talvez no momento em que você estiver lendo isso, a versão 5.9 já tenha sido lançada para o mundo. Não poderia estar mais entusiasmada. Existem inúmeros aprimoramentos e novos recursos, muitos dos quais abordaremos em artigos futuros, mas o tópico de hoje é “padrões” de blocos.

Embora não seja novo no WordPress, os padrões estão recebendo muita atenção devido à funcionalidade habilitada pela versão 5.9, principalmente temas baseados em blocos. Os padrões estão rapidamente se tornando um componente fundamental do próprio WordPress e parecem prontos para reformular a maneira como projetamos e construímos sites. Então, qual o melhor momento para explorar o que realmente são os padrões de blocos e como você pode usá-los?

O básico

Antes de mergulharmos nos padrões de blocos, vamos começar com o básico e estabelecer alguma terminologia. O WordPress mudou bastante nos últimos anos. É bom ter certeza de que estamos todos na mesma página.

Quadra

Um bloco é a “unidade” fundamental de conteúdo no WordPress. De um parágrafo de texto a uma galeria de imagens, um bloco pode assumir praticamente qualquer forma. Eu gosto de imaginar uma única peça de LEGO . Embora cada bloco possa parecer diferente ou ter uma função única, todos eles se encaixam perfeitamente criando o conteúdo de uma página da web.

Padrão

Um padrão de bloco é simplesmente uma coleção predefinida de blocos que forma um layout específico. Um padrão pode ser um único bloco ou composto de vários. Como veremos mais adiante, os padrões tornam a construção de layouts de página complexos fácil e divertido.

editor

O Editor é a interface do usuário que usamos para criar páginas e postagens a partir de blocos. Desde a sua introdução no WordPress 5.0 em 2018, o Editor foi chamado por muitos nomes. Estes incluem Gutenberg, Editor Gutenberg, Editor de Blocos e outros. Para os propósitos deste artigo, usaremos simplesmente o termo “Editor”.

Insersor

Dentro do Editor, o Inserter é usado para adicionar blocos e padrões à página. Você pode acessar o Inserter clicando no sinal azul (+) no canto superior esquerdo do Editor.

A captura de tela abaixo ilustra nossos termos definidos.

Por que Bloquear Padrões?

O Editor nos permite construir praticamente qualquer design a partir de blocos, seja um simples post de blog ou uma página de destino elaborada. Vamos usar este mesmo artigo como exemplo. O que você está lendo agora é um bloco de parágrafo. O título acima é um bloco de título e a captura de tela é apenas um bloco de imagem. Adicionar esses elementos de conteúdo à página foi fácil. Abri o Inserter, encontrei o bloco apropriado e cliquei para inserir.

Dica rápida: você sabia que blocos também podem ser inseridos usando o comando slash? Comece um novo parágrafo com a tecla “/” e aparecerá uma lista de blocos disponíveis. Digitar letras adicionais ajustará os resultados da pesquisa. De uma chance!

Que tal algo um pouco mais complicado? Considere a tabela de preços a seguir, um design comumente usado para exibir produtos ou serviços em um site.

Olhe atentamente e você poderá reconhecer os blocos individuais que foram usados ​​para criar esse layout. A base é um bloco de colunas com três colunas igualmente espaçadas. Dentro de cada bloco de coluna há um bloco Separador, Cabeçalho, Parágrafo, Botões e Espaçador. Quantos você conseguiu identificar?

Na verdade, esta tabela de preços é composta por 25 blocos individuais. Independentemente do seu nível de habilidade com o WordPress, replicar esse layout do zero seria tedioso e um pouco desafiador.

Agora imagine se esse grupo de 25 blocos já estivesse configurado para você. Com um único clique, você pode inserir a tabela de preços completa e ajustá-la para atender às suas necessidades individuais. Melhor ainda, e se houvesse uma vasta coleção de designs ao seu alcance, cada um combinando com a estética do seu tema? Pense em layouts criativos de imagem e texto, frases de chamariz, cabeçalhos, rodapés e até mesmo layouts de página inteira. Ter esse tipo de “conteúdo inicial” economizaria muito tempo e até tornaria o Editor mais acessível para usuários mais novos do WordPress.

É aqui que entram os padrões de bloco. A tabela de preços acima é na verdade um padrão que está incluído no próximo tema Twenty Twenty-Two, que será lançado junto com o WordPress 5.9!

Espero que este pequeno exercício tenha ilustrado por que estou tão empolgado com o potencial dos padrões de blocos, mas como realmente os usamos?

Como usar padrões

Assim como os blocos, os padrões podem ser adicionados a uma página usando o Inserter. Com o Inserter aberto, navegue até a aba “Padrões” que revela todos os padrões disponíveis segmentados por categorias. Selecione o layout certo para você e clique para inserir. Você pode editar os blocos individuais que compõem o padrão, assim como faria com qualquer outro bloco. Não há limite para o número de padrões que você pode inserir. Misture e combine para criar designs de página exclusivos.

Embora o Inserter forneça acesso fácil aos padrões de bloco, você notará que a visualização de cada padrão é bem pequena e todos estão empilhados em uma única coluna. Pode ser difícil visualizar e comparar layouts, tornando difícil escolher o correto.

Para resolver esse problema, o WordPress 5.9 inclui o Pattern Explorer. Esse novo recurso empolgante pode ser acessado clicando no botão "Explorar" ao lado da lista suspensa de categorias na guia "Padrões".

O Explorer abre uma janela modal que fornece uma experiência de navegação aprimorada com os padrões exibidos em uma grade. Eles também podem ser facilmente pesquisados ​​ou filtrados por categoria.

A captura de tela acima é a primeira iteração do Pattern Explorer. Espera-se que as futuras versões do WordPress expandam a funcionalidade do Explorer. Os experimentos atuais adicionam visualizações em dispositivos móveis/tablets e a opção de padrões de demonstração individualmente, em oposição ao layout da grade. Embora nada seja confirmado, fique de olho em melhorias adicionais no WordPress 6.0 em meados de 2022.

Com toda essa discussão sobre padrões, você deve estar se perguntando, de onde eles realmente vêm?

Onde encontrá-los

Padrões a serem registrados de uma das três maneiras, seja por meio do seu tema atual, um plug-in de terceiros ou o próprio WordPress por meio do Diretório de padrões. Vamos explorar cada método.

Tema

Seu tema provavelmente será a maneira mais direta de disponibilizar padrões em seu site. Como vimos na tabela de preços acima, muitos temas baseados em blocos incluem suas próprias coleções de padrões sob medida. Essa é apenas outra maneira de os temas se diferenciarem e um conjunto robusto de opções de layout será um grande benefício para os usuários. No momento em que escrevo, o tema Twenty Twenty-Two será lançado com mais de 60!

Diretório de padrões (WordPress)

A partir do lançamento do WordPress 5.9, o WordPress fornecerá seus próprios padrões através do Diretório de Padrões.

O Diretório de Padrões é um repositório de padrões orientado pela comunidade, muito parecido com os repositórios de plugins e temas do WordPress, e estará aberto para envios públicos até a versão 5.9. Todos os padrões enviados e aprovados estarão prontamente disponíveis para você navegar e inserir diretamente do Pattern Explorer. Isso significa que os usuários do WordPress terão acesso a centenas, senão milhares, de padrões de blocos.

Dica rápida: alguns temas podem desabilitar padrões incluídos pelo WordPress no Diretório de padrões. Isso geralmente é feito quando os desenvolvedores de temas incluem suas próprias coleções de padrões e desejam fornecer uma experiência de usuário mais organizada.

Plug-ins de terceiros

Finalmente temos plugins. Como os padrões existem há vários anos, muitos plugins de terceiros, como Genesis Blocks e Redux, criaram extensas bibliotecas de padrões. Muitas vezes, essas bibliotecas não são integradas diretamente com recursos como o Pattern Explorer e apresentam blocos personalizados não encontrados no núcleo do WordPress. Eles também tendem a usar seus próprios métodos de inserção de padrões, mas com o tempo espero que muitos comecem a se adequar à nova abordagem padronizada do WordPress.

Se você estiver procurando por blocos e layouts de nicho enquanto o Diretório de padrões continua a amadurecer, ou se não estiver usando um tema com seus próprios padrões, definitivamente recomendo explorar o que os plugins de terceiros têm a oferecer.

O futuro dos padrões

O WordPress 5.9 trará muitos aprimoramentos para bloquear padrões. Como discutimos, o Pattern Explorer facilitará a escolha do design certo para o seu site. O Diretório de Padrões lhe dará acesso a uma vasta coleção de padrões criados pela comunidade que se integrarão perfeitamente ao seu tema.

Embora você sempre possa criar designs exclusivos a partir de blocos individuais, acredito que a maioria de nós irá direto para o Pattern Explorer. Escolheremos um layout, fornecido pelo nosso tema ou do Diretório, e depois ajustaremos conforme necessário. Eu sei que vou.

Além disso, podemos esperar que novos temas baseados em blocos sejam julgados pela extensão de sua coleção de padrões de blocos integrados. Temas com mais de cem padrões, todos bem categorizados e cobrindo uma ampla variedade de casos de uso, provavelmente se tornarão a norma. Embora a estética de um tema seja importante, fornecer aos usuários as ferramentas necessárias para criar belas páginas da Web sem esforço é fundamental.

Padrões são o futuro do WordPress, e o futuro é brilhante.

Empacotando

Neste artigo, analisamos o que são padrões de bloco, como você pode usá-los e por que eles mudarão fundamentalmente a maneira como construímos sites WordPress. No próximo artigo do Builder Basics vamos mergulhar um pouco mais fundo e ensiná-lo a realmente criar seus próprios padrões!

E aí, o que você acha dos padrões? Você está usando-os em seu site? Você tem alguma dúvida que não foi abordada neste artigo? Deixe-nos saber nos comentários.