Construindo uma Biblioteca de Padrões de Blocos de Gutenberg

Gutenberg representa uma grande mudança em direção ao design da web baseado em padrões. Neste artigo, discutirei as abordagens que adotamos ao criar nossa própria biblioteca flexível de blocos de Gutenberg personalizados.

Fundo

O lançamento de Gutenberg em dezembro de 2018 representou a maior mudança no WordPress desde seu início. A nova interface de 'arrastar e soltar' baseada em blocos muda a maneira como os desenvolvedores criam temas, como os designers consideram a divisão dos sites em partes componentes e como os editores de conteúdo gerenciam e planejam a criação de conteúdo.

Esta é uma mudança fundamental para o design de sites baseado em padrões; um sistema de elementos reutilizáveis ​​que podem ser aplicados de forma consistente em um site, para criar a melhor experiência de usuário possível e otimizar o fluxo de trabalho. Embora muitos de nós já estivéssemos trabalhando com padrões, Gutenberg leva adiante essa mudança em um ritmo acelerado. Como o WordPress impulsiona um terço dos sites em todo o mundo, o impacto dessa mudança não pode ser exagerado.

Este artigo destaca alguns dos problemas que enfrentamos como desenvolvedores ao começar a planejar e construir uma biblioteca de padrões, como superamos as limitações inerentes a Gutenberg e a abordagem que adotamos para criar nosso sistema flexível de blocos personalizados.

Nosso objetivo

Como criadores especializados de sites WordPress personalizados, Gutenberg nos deu a oportunidade perfeita para criar uma biblioteca unificada de padrões; um conjunto de blocos adaptáveis ​​para uso com muitas de nossas construções de site personalizadas.

Não queríamos apenas abraçar esta nova experiência de edição, queríamos ser capazes de oferecer uma solução usando nosso próprio sistema sem depender de um conjunto limitado de blocos centrais de Gutenberg ou uma colcha de retalhos de soluções de terceiros disponíveis no mercado.

Um conjunto abrangente de blocos ao nosso alcance também significa que não precisamos criar cada bloco do zero para as novas construções do site Gutenberg. Isso nos permitiria gastar ainda mais tempo refinando a estética de um site e adicionar o tipo de retoques e otimizações que ajudam a separar um site de seus concorrentes.

Desafios

Flexibilidade de design

Precisávamos de um sistema de design versátil com vários padrões que nos desse a flexibilidade de criar uma variedade de temas personalizados.

Encontrar um bom equilíbrio entre ser capaz de manter um número finito e realista de padrões, sem comprometer o design do tema, seria um desafio.

Uma mudança no desenvolvimento do tema

Antes de Gutenberg, adotamos várias abordagens diferentes para o desenvolvimento do tema. O mais comum era criar modelos de página individuais para partes separadas de um site. Os modelos seriam muito prescritivos e incluiriam campos personalizados para cada seção projetada. Um modelo de 'Estudos de caso', por exemplo, pode incluir campos para um editor de texto, galeria de imagens, depoimentos, etc. No entanto, uma vez incluídos no modelo, eles não podem ser alterados facilmente.

Essa abordagem não é apenas restritiva em termos de layout de página, mas geralmente significava que esforços repetidos eram necessários com cada novo site baseado em modelo; campos precisam ser criados, modelos configurados e componentes separados codificados para exibição no front end.

Para nos adaptarmos a Gutenberg, precisávamos mudar nossa abordagem de desenvolvimento, entender como podemos criar componentes reutilizáveis ​​e abraçar a flexibilidade que Gutenberg agora nos oferece para a construção de novos sites.

Gutenberg não é tão flexível

Fora da caixa, Gutenberg tem mais de 30 blocos principais disponíveis. Tudo, desde componentes básicos de conteúdo, como parágrafos, títulos e elementos de lista até widgets e incorporações mais complexos.

Para muitas das construções de nosso site, um bom número desses blocos principais não são relevantes ou não têm o nível de funcionalidade que nossos temas exigiriam deles. Precisávamos de uma maneira de criar nosso próprio conjunto de padrões que desempenhassem funções muito específicas adequadas ao design do tema.

Outro problema que logo descobrimos com Gutenberg é que não é nem fácil nem intuitivo criar layouts mais complexos usando blocos de núcleo.

Um padrão para um bloco de "conteúdo e imagem", por exemplo, pode exigir que um título, parágrafo, lista e botão apareçam ao lado de uma imagem e com a opção de exibir a imagem à esquerda ou à direita desse conteúdo, e que esses elementos sejam exibido em um layout consistente.

Esse nível de liberdade não é fácil com Gutenberg. Embora existam vários blocos que podem adicionar texto, imagens e botões, eles são bastante atômicos por natureza e, quando adicionados individualmente, aparecem como blocos separados empilhados. Ficou claro desde o início que Gutenberg não era flexível o suficiente e precisávamos ser capazes de construir nossos próprios blocos personalizados.

Nossa Solução

Um sistema de design versátil

Antes do lançamento de Gutenberg, já havíamos investido muito tempo na pesquisa e visualização de padrões para nossa biblioteca de padrões.

Isso envolveu a auditoria de vários de nossos sites e protótipos existentes para compilar uma biblioteca wireframe de elementos comumente usados.

Nossos designers e desenvolvedores continuaram a trabalhar juntos para entender como esses elementos podem ser combinados em blocos de Gutenberg e como um tipo de bloco específico pode ser criado para que, com opções de personalização limitadas, um único bloco possa ser feito para parecer significativamente diferente de tema para tema.

Depois de categorizar nossos padrões em blocos, estávamos prontos para começar a construir.

Blocos de construção com campos personalizados avançados

Todo desenvolvedor de tema quase certamente encontrou Advanced Custom Fields (ACF) em algum ponto. Por meio de uma interface intuitiva, vários tipos de campos diferentes podem ser criados; qualquer coisa, desde campos de texto básicos e editores de conteúdo a selecionadores de datas, incorporações de mapas e campos de galerias. Eles podem ser facilmente atribuídos a diferentes áreas de um site, como tipos de postagem, modelos de página, categorias e páginas de usuário.

A última versão do ACF, blocos ACF, estende toda essa funcionalidade familiar a Gutenberg. Grupos de campos podem ser criados e atribuídos a diferentes blocos baseados em ACF da mesma forma que em outras áreas do site.

Com algumas linhas de código necessárias para registrar um bloco e campos de saída, é possível criar um bloco personalizado básico em questão de minutos. A facilidade com que os blocos podem ser criados com essa abordagem nos permitiu focar na configuração, saída e estilo do bloco.

Agora fomos capazes de criar um conjunto de blocos personalizados que deu toda a flexibilidade de Gutenberg, mas restrito ao design do tema que ajudaria com layouts consistentes.

Plugin de biblioteca de padrões

Depois de criar alguns blocos de exemplo, decidimos empacotar nossos blocos em um plug-in personalizado com a ajuda da equipe de engenharia.

Este plug-in baseado em bloco permite a implantação rápida de padrões personalizados para novas construções de sites. Em seguida, eles são personalizados no nível do tema.

Nosso plug-in de biblioteca de padrões inclui alguns recursos úteis:

1. Arquivos de modelo de bloco básico para nos permitir adicionar novos blocos rapidamente;
2. Funções para permitir que os blocos principais e os blocos personalizados sejam inicializados e incluídos nas categorias personalizadas;
3. Uma tela de configurações de administrador onde cada bloco pode ser habilitado ou desabilitado;
4. Capacidade de substituir o layout e a estrutura de um bloco dentro do tema;
5. A capacidade de substituir o estilo do bloco no nível do tema;
6. Carregamento de folhas de estilo de nível de tema dentro do Gutenberg para que a visualização do administrador de bloco tenha a mesma aparência que os blocos de front end. O uso da grade CSS nos ajudou a maximizar a flexibilidade na estética e no layout, ao mesmo tempo em que minimizamos as mudanças estruturais;
7. Blocos específicos podem ser limitados a certos tipos de post para manter a consistência.

O desenvolvimento do plugin Pattern Library será uma evolução contínua, mas agora temos mais de 15 blocos que podem ser usados ​​para construir uma proporção significativa de nossos designs de tema flexível.

Nosso conjunto de blocos inclui padrões de conteúdo e imagem, depoimentos, artigos relacionados e blocos de equipe, juntamente com mais padrões de estilo de 'demonstração', incluindo galerias, estatísticas e controles deslizantes.

Resumo

Estamos realmente entusiasmados com as oportunidades que Gutenberg e nossa Biblioteca de Padrões personalizados abriram.

Não apenas podemos continuar a conduzir nossa oferta de site sob medida usando a mais recente experiência de edição, como também podemos produzir sites altamente flexíveis com uma abordagem de desenvolvimento unificada, ajudando-nos a criar experiências ricas para usuários finais.

Já se passaram quase 2 meses desde que começamos a usar nossa Biblioteca de Padrões de blocos de Gutenberg, que agora estamos usando em muitas novas construções de sites. Os clientes estão ansiosos para usar o Gutenberg e o feedback dos clientes tem sido muito positivo até agora.

“Matt e Pammy deram um tutorial sobre os elementos do site que você criou e eles são incríveis !! A flexibilidade e o profissionalismo são fantásticos e estou muito grato por todo o seu incrível trabalho até agora .. Estou muito animado com o site agora. Obrigada"

- Rachel Smith, YMCA Nottingham

Continuaremos a expandir nossa biblioteca de padrões de blocos personalizados e refinar com mais melhorias à medida que passarmos mais tempo com Gutenberg. No momento, estamos trabalhando em nosso quinto site com base em Gutenberg, então, em breve consulte um estudo de caso!

Se precisar de ajuda com seu desenvolvimento WordPress, não hesite em nos contatar.