Impressionando: como criar um cabeçalho de post-herói com blocos

Sou obcecado por direção de arte na web desde que me lembro. O termo é frequentemente usado para descrever o ato de projetar páginas individuais em torno do próprio conteúdo. Isso é o oposto de como a maioria dos usuários normalmente opera ao escrever postagens. O modelo ou design está desconectado da palavra escrita.

O site de Jason Santa Maria é provavelmente a vitrine mais citada dessas postagens. Eu recomendo navegar, especialmente ver os artigos do Candygram.

Há momentos em que as histórias exigem mais ênfase visual. O design do conteúdo pode pintar uma imagem que não é possível apenas com o texto. Às vezes, esses são layouts elaborados de página inteira. Em outros, é a inserção de imagens e outros elementos que chamam a atenção do leitor.

É uma das razões pelas quais tenho gostado de usar o tema Archeo da Automattic ultimamente. Seus padrões trazem à tona memórias antigas, pré-internet doméstica, de revistas folheadas, cada história em destaque com seu próprio layout.

Ao longo dos anos, tentei desenvolver vários sistemas para design por postagem, mas eles sempre ficaram aquém de onde eu queria que estivessem. Parte do problema era que eu não tinha uma estrutura sólida que parecesse à prova de futuro o suficiente para que eu não estivesse corrigindo seus problemas uma década ou mais adiante.

Quando o WordPress lançou seu editor de blocos, essas ideias antigas começaram a voltar à superfície. Poderia permitir que as pessoas contassem suas histórias visualmente e oferecer alguma garantia de que os layouts não quebrariam alguns lançamentos mais tarde?

Hoje, estou confiante de que o WordPress torna isso mais possível do que antes. Há algumas coisas que ele poderia fazer melhor, como estender seu kit de ferramentas CSS compartilhado e trazer sua gama de controles de design para mais blocos. Mas, em sua essência, o editor de blocos é uma linguagem de design que permite aos usuários finais contar suas histórias por meio de elementos visuais e de texto. Isso só ficará melhor com a versão 6.0 e posteriores.

Eu queria oferecer um pequeno vislumbre de como os usuários podem utilizar essas ferramentas para criar histórias visualmente únicas. Esta entrada na série Building with Blocks destina-se a fornecer um ponto de partida.

Para aqueles que estão acompanhando, construiremos uma seção de cabeçalho/intro do post para uma história fictícia sobre Gotham City:

Não é um design de página inteira, mas minha esperança é que ajude as pessoas a começarem a experimentar mais com seu conteúdo. O WordPress tem uma tonelada de ferramentas de design sólidas para trabalhar agora.

Na verdade, juntei dois padrões diferentes para este tutorial. No entanto, não me senti confortável com os métodos usados ​​para o original:

Em particular, alinhar o conteúdo à esquerda e em um contêiner de largura máxima tem seus problemas. Há pelo menos duas maneiras de fazer isso. O método mais utilizado é inserir um bloco de 50/50 Colunas, utilizando a primeira coluna para conteúdo e deixando a segunda vazia. Isso tem a maior compatibilidade entre temas, mas pode ser confuso em alguns tamanhos de tela.

A segunda é contar com o controle de posicionamento do bloco Cover para alinhar um bloco Group interno à esquerda. Esta é a melhor opção para um layout responsivo puro. No entanto, sua saída foi inconsistente ao testar vários temas de bloco.

Por fim, deixei o primeiro layout de lado. No entanto, eu queria pelo menos compartilhá-lo com aqueles que queriam dar uma chance a ele.

Construindo o herói do cabeçalho da postagem

Para este padrão, trabalhei com a versão 12.9 do plugin Gutenberg. Tentei manter os recursos disponíveis para usuários do WordPress 5.9, mas a interface mais antiga parece mais lenta e volumosa do que as atualizações mais recentes do plug-in.

Eu também usei um tema de bloco personalizado. Qualquer um deve funcionar, mas deve ter um modelo “em branco” ou uma opção de tela aberta equivalente de largura total. Caso contrário, você pode criar um a partir do editor de modelos integrado. Ele só precisaria do bloco Post Content dentro dele.

Etapa 1: criando o plano de fundo

O bloco Cover é minha escolha ao criar muitos layouts. É uma das opções mais versáteis do WordPress, abrindo caminho para muitos tipos de designs. Não é nenhuma surpresa que eu comecei aqui.

O primeiro passo é inserir um novo bloco de capa e selecionar uma imagem para ele. Em seguida, defina-o como largura total e ative a opção de altura total.

Dependendo da imagem escolhida, você pode personalizar a opção de sobreposição para combiná-la. Selecionei o gradiente “azul ciano vívido a roxo vívido” com 70% de opacidade. Eu queria o suficiente da imagem de fundo espiando para vê-la, mas não tanto a ponto de sobrecarregar todo o resto.

Etapa 2: espaçadores e um grupo

Neste ponto, ainda estamos construindo o layout geral do conteúdo. Dentro da Capa do passo #1, adicione um Espaçador, Grupo e outro Espaçador.

Defina cada espaçador para 2rem ou seu valor preferido. Isso é apenas para mostrar um pouco mais da imagem de fundo na parte superior e inferior do padrão. Alternativamente, você pode ajustar a opção de preenchimento no bloco de cobertura externo para obter o mesmo efeito.

Para o bloco Group, alterei apenas as configurações de borda. Selecionei 3px para a largura, configurei o estilo para sólido e escolhi branco para a cor.

Nota: o bloco Grupo nesta etapa será desnecessário no futuro. Idealmente, poderíamos apenas colocar a Capa do passo #3. No entanto, ele ainda não oferece suporte a bordas personalizadas. Há um ticket aberto para adicionar o recurso. Não está claro se o WordPress oferecerá isso para Covers na próxima versão 6.0. Por enquanto, devemos adicionar um wrapper extra.

Etapa 3: tampa interna

Adicione um novo bloco de capa dentro do grupo da etapa 2. Defina-o para alinhamento de largura total e ative a altura total. Em seguida, selecione uma cor de fundo de sua escolha e ajuste a opacidade para algo que se encaixe no seu design. Essa camada deve ser escura o suficiente para que seu texto seja legível. Você pode optar por modificar isso mais tarde, dependendo da aparência de tudo.

Para aqueles que testam com a versão mais recente do Gutenberg, veja a nota no final da próxima etapa.

Etapa 4: grupo de conteúdo

Prometo que esta é a camada final de contêineres aninhados para fazer esse padrão funcionar. Para esta etapa, insira um novo bloco de Grupo dentro da Capa da etapa #2.

A única configuração necessária é ativar a opção “Herdar layout padrão” no painel da barra lateral do bloco. Ajustei a configuração de “espaço de bloco” para 4rem para dar ao conteúdo bastante espaço para respirar, mas isso pode mudar de tema para tema. Você também deve selecionar branco ou outra cor clara para as opções de cor do texto e do link.

Nota: este é, mais uma vez, um cenário em que o WordPress 5.9 fica um pouco tímido de oferecer as ferramentas que precisamos para reduzir algumas das sujeiras. O bloco Cover do passo #3 era necessário para um fundo transparente. No entanto, o WordPress 6.0 permite que os usuários ajustem a opacidade de qualquer cor. Para aqueles que testam com o plugin Gutenberg, você pode simplesmente usar o bloco Group nesta etapa e colocar um fundo transparente nele.

Etapa 5: título atraente

Agora, estamos chegando à parte divertida – o conteúdo real. Basta lembrar que com o WordPress 6.0 pode ser possível cortar as etapas anteriores pela metade.

Querendo espaço extra entre o título e seu container, inseri um bloco Spacer com 2rem de altura dentro do bloco Group do passo #3. Depois disso, adicionei o bloco Post Title e o configurei para alinhamento de largura total. Lembre-se, estamos usando um modelo “em branco” para este post, então precisamos adicionar o título em algum lugar.

É aqui que as coisas ficam complicadas, e eu quase optei por não compartilhar este tutorial específico por causa disso. Os tamanhos das fontes no WordPress são tão bons quanto o seu tema ativo. A plataforma principal não tem tratamento responsivo para eles e suas alturas de linha associadas, e cada tema pode ser muito inconsistente com as opções que oferece.

A melhor opção é escolher um tamanho de fonte razoavelmente grande, se oferecido pelo tema para o bloco Post Title. Um design completo fornecerá uma variedade de opções e lidará com o redimensionamento delas para telas menores. Se não estiver disponível, você precisará adicionar um tamanho de fonte e altura de linha personalizados. Os valores usados ​​na minha configuração são 6rem e 1 , respectivamente.

Em seguida, selecione a opção “Preto” para as opções de Aparência ou Peso, dependendo de qual estiver disponível.

Etapa 6: adicionar uma imagem

Você tem duas opções para esta etapa: o bloco Post Featured Image ou Image. O primeiro não tem tantas configurações no WordPress 5.9. Seu tema ativo também pode disponibilizar alguns estilos personalizados para um e não para o outro.

Optei pelo bloco Imagem principalmente porque queria adicionar uma legenda para a foto. Em seguida, configurei para alinhamento de largura total e selecionei um estilo “Border” disponível pelo meu tema para separá-lo um pouco do plano de fundo.

Passo 7: Finalizando

Deste ponto em diante, apenas divirta-se com as coisas. Adicionei um lede para minha história fictícia e outro bloco Spacer, mas você pode mexer com outras opções, como exibir o autor e a data da postagem.

Isso parecia muito trabalho para montar. No entanto, o WordPress 6.0 deve tornar as coisas muito mais simples.