Como criamos nosso site usando o editor de blocos

Caso você não tenha notado, a aparência do nosso site mudou um pouco . Reestilizamos nosso site, atualizando fontes, estilos, paleta de cores... partindo disso:

para isso:

Mas o mais interessante sobre essas mudanças não é a aparência – decidimos reconstruir nosso site do zero para que ele pudesse se tornar um site completamente baseado em blocos. Hoje eu gostaria de explicar a você como passamos de um tema personalizado baseado em templates de página para outro tema totalmente personalizado que depende de blocos do WordPress para tudo .

De onde viemos

Quando lançamos o Nelio Content há três anos, decidimos reorganizar completamente todos os nossos sites e centralizar nossa presença online em um único domínio e marca: neliosoftware.com . Logicamente, uma das tarefas que fizemos foi entrar em contato com a Silo Creativo para nos ajudar a desenhar a imagem do nosso novo site. Aqui você pode ver uma das primeiras propostas que eles fizeram:

Quando aprovamos aquele design inicial, e atendendo aos nossos pedidos, Ricardo e Veronica começaram a trabalhar e implementaram um tema personalizado com todos os templates necessários para as diferentes partes do nosso site : página principal, blog , posts, ajuda páginas, … Eles projetaram tudo e cada design foi implementado em um modelo de página. Tínhamos uma página rápida que era complicada de editar.

E então Gutenberg chegou.

Entendendo o conteúdo do nosso site

O novo editor de blocos do WordPress , Gutenberg , é uma mudança de paradigma para a criação de conteúdo em um WordPress . Até agora, criar páginas era um processo tedioso e hostil para os usuários, a menos que você estivesse usando um construtor de páginas. Mas Gutenberg veio com uma promessa debaixo do braço : criar conteúdo visualmente atraente no WordPress deve estar ao alcance de qualquer pessoa . E queríamos testar essa afirmação e ver se realmente poderíamos criar um belo site contando apenas com Gutenberg.

Se você já viu a web que tínhamos anteriormente, saberá que ela tinha um design simples e elegante , incluindo elementos como:

• Páginas com uma imagem em destaque na primeira dobra
• Blocos com texto descritivo e imagens e/ou vídeo
• Formulários de contato
• Páginas legais
• Tabelas de preços
• Depoimentos de nossos usuários
• Listagens de recursos

Nada muito extravagante, mas interessante, no entanto. Poderíamos criar tudo isso em Gutenberg ? Pensamos assim e tentamos. Isto é o que fizemos e o que encontramos.

Nosso Novo Tema

A primeira coisa que fizemos para projetar o novo site foi criar um tema do zero. Para isso, decidimos partir do conhecido tema inicial “underscores”. É um tema super básico que vem com os templates mínimos e necessários para ter um tema operacional do WordPress , e está bem documentado e bem organizado.

Adaptando sublinhados

Cada tema do WordPress possui um conjunto de páginas que são comuns a todas as instalações do WordPress e independentes de qual conteúdo você acaba gerando em seu site. Estou falando, por exemplo, da página do blog onde aparecem os últimos posts, o layout de um único post, a página de erro 404, a página de resultados de busca, etc. adaptar sublinhados ao nosso próprio estilo para que estes “genéricos” tenham a aparência que queremos. E foi o que fizemos.

Se você olhar para a captura de tela anterior, verá que baixamos o tema com o _sassify! opção habilitada, assim o tema é baixado com estilos no formato SASS, organizado em vários arquivos e tornando extremamente fácil de editar. Levamos algumas horas escrevendo CSS e algumas customizações PHP em functions.php , mas conseguimos acertar o tema:

Blocos do WordPress como blocos de construção

Uma vez que temos um tema inicial com o qual nos sentimos confortáveis ​​(no nosso caso, o tema que criamos a partir dos sublinhados, mas no seu caso pode ser um tema que você encontrou no wordpress.org , um tema premium que você comprou há algum tempo atrás, ou até mesmo um tema personalizado como o nosso), é hora de organizar todas as nossas páginas usando os blocos do WordPress .

Então, sem mais delongas, vamos dar uma olhada em todos os “desafios” que enfrentamos nessa etapa e como implementamos tudo usando blocos WordPress.

Blocos padrão

Os blocos que o WordPress inclui por padrão são um pouco limitados: parágrafos, imagens, galerias… Nada muito extravagante – todos parecem mais focados na criação de posts do que em layouts de página.

Mas tudo bem.

Tudo bem porque, para começar, há muitas páginas em um site que parecem postagens de blog. Por exemplo, páginas com informações legais ou uma política de privacidade e cookies estão mais perto de uma postagem de blog do que você imagina.

Mas também está tudo bem porque podemos construir belas páginas com componentes extremamente simples. Por exemplo, podemos combinar texto e vídeos. Isso é algo que podemos alcançar facilmente com blocos de mídia e texto :

Bem perto, hein?

Combinando blocos padrão

Blocos simples podem ser extremamente poderosos quando combinados. Por exemplo, considere a captura de tela a seguir, onde temos uma lista de recursos:

Como alguém lidaria com isso? Bem, se você olhar com cuidado e lógica, verá que cada recurso é uma combinação de uma imagem e algum texto (isso soa familiar?). Então, você verá que claramente temos três colunas, então… e se combinarmos blocos de Mídia e Texto com um bloco de Colunas ?

Nada mal, estamos bem perto! Ao combinar blocos, você precisa ser inteligente. O uso de um único bloco de Colunas significa que os recursos podem não ser alinhados horizontalmente corretamente, pois cada coluna é organizada independentemente da outra. Para resolver esse problema, você precisa ser um pouco esperto: em vez de adicionar um único bloco Columns com vários recursos em cada coluna, vamos criar vários blocos Columns para garantir que haja apenas um recurso em cada coluna:

E BUM! Agora temos três colunas de recursos com linhas alinhadas corretamente.

Blocos padrão com esteróides

Há casos em que os blocos padrão estão próximos o suficiente do que queremos, mas não parecem certos. Se estivermos enfrentando um problema visual, é muito provável que possamos resolvê-lo usando CSS, e a melhor parte é que Gutenberg funciona extremamente bem com classes CSS.

Por exemplo, se queremos que nossos blocos de imagem tenham uma sombra (opcional), podemos criar uma classe CSS simples que adiciona a sombra à imagem e depois aplica essa classe usando a seção Avançado do bloco de imagem:

O problema com esta solução é que estamos misturando a interface do usuário com detalhes de implementação (o nome de uma classe CSS). Por que diabos eu deveria saber que existe uma classe chamada shadow que adiciona uma sombra a uma imagem? Bem, isso também tem uma solução simples.

A interface de programação do editor de blocos do WordPress expõe uma função chamada registerBlockStyle para, como o próprio nome sugere, registrar estilos de bloco. Algo tão simples como:

 registerBlockStyle ( 'core/image', { name: 'image-with-shadow', label: __( 'Shadow', 'nelio' ), } );

permite registrar um novo estilo para o bloco de imagem ( core/image ) chamado Shadow que, quando aplicado, resulta no bloco de imagem com a classe has-style-image-with-shadow :

Blocos personalizados

Finalmente, para aqueles casos em que nenhum bloco padrão o corta, você pode criar seu próprio bloco (ou usar um bloco de terceiros já existente). Implementamos essa solução em vários casos: nas tabelas de preços Nelio Content e Nelio A/B Testing, o mapa que aparece em nossa página de contato (que, aliás, foi mostrado detalhadamente em nosso post sobre como criar um bloco), e os resultados em termos de usabilidade são impressionantes:

se você não sabe ou não quer criar seus próprios blocos, vou deixar alguns plugins que incluem blocos adicionais para muitas coisas:

• GhostKit
• Blocos Atômicos
• CoBlocks
• Blocos de Kadence

Nossa experiência

Alguns meses atrás, decidimos que tínhamos que renovar um pouco nosso site e implementá-lo usando o Gutenberg. Nosso objetivo era duplo: por um lado, queríamos atualizar um pouco o site e dar-lhe um ar mais fresco. Por outro lado, queríamos aprender mais sobre Gutenberg, tanto no nível do usuário quanto no nível do desenvolvedor. No final, conseguimos migrar toda a web para Gutenberg e o resultado foi um sucesso absoluto. Nós encorajamos você a fazê-lo também e, se tiver alguma dúvida, não hesite em deixá-la nos comentários.

Aliás, o post de hoje foi inspirado na palestra que dei no WordCamp Lisboa 2019. Aqui estão meus slides:

Imagem em destaque de Samuel Zeller no Unsplash .