Recriando o Onia: construindo fundos de pinceladas com blocos do WordPress

Enquanto eu estava olhando os últimos lançamentos do diretório de temas do WordPress esta semana, me deparei com um que chamou minha atenção. O Onia era limpo e minimalista, enquanto reservava seus floreios para chamar a atenção para apenas alguns elementos da página.

Este poderia ser um daqueles diamantes brutos que estou sempre procurando no diretório de temas gratuitos?

Tinha potencial, mas ficou aquém. Ao explorar o tema, parecia que o autor havia gasto 90% do tempo criando uma primeira página atraente. Mergulhar nas páginas internas não mostrou atenção à tipografia, pois a contagem de caracteres por linha estava chegando a 150 e além, mais que o dobro do que deveria ser para uma leitura confortável.

Esse é o tipo de coisa que é fácil de resolver. Fiquei mais desapontado que Onia não era um tema de bloco. Todos os elementos estavam lá. Não fez nada particularmente complexo, e não havia razão evidente para ser um tema clássico.

Ontem à noite, sentei-me e recriei Onia como um tema de bloco. Tecnicamente, construí sua página inicial diretamente do editor em cima de um projeto de tema base que já tinha em mãos. Houve alguns desafios, mas fiz a maior parte do trabalho em cerca de uma hora. As outras peças demoraram um pouco mais enquanto eu analisava as possíveis soluções.

A seguir, uma comparação das duas primeiras páginas (Onia é a primeira, seguida pela minha recriação):

Obviamente, tomei algumas liberdades com espaçamento, dimensionamento e coloração. Eu não estava tentando uma réplica exata. Em vez disso, foi um reboot com alguns giros no original.

Algumas notas rápidas

Uma das coisas que muitas vezes me frustra com os temas é que eles mostram esses belos logotipos na demonstração, mas não oferecem nenhuma maneira de o usuário trabalhar com a mesma fonte. Eu não tinha certeza de qual família de fontes original foi usada no logotipo, mas adicionei Sacramento como uma opção de caligrafia cursiva:

Esses recursos podem fazer a diferença para o usuário médio. Nem todo mundo pode carregar o Photoshop e criar seu próprio logotipo especializado. No entanto, eles podem digitar o nome do site e selecionar uma opção de fonte para a versão em texto simples.

Tecnicamente, existem dois recursos atualmente no Gutenberg, mas não no WordPress 5.9 que eu usei. O primeiro é o bloco Leia mais. Onia tinha isso em sua grade de postagem. Como autor de um tema, eu teria simplesmente esperado por esse recurso se fosse um atraso. Considerando que tanto a imagem em destaque quanto o título do post linkam para a página do post único, não era um elemento decisivo.

O segundo recurso ausente é a opção “mostrar rótulos” para o bloco Ícones sociais. Uma solução alternativa para o design original seria usar um bloco de navegação, já que os links eram apenas texto simples. Outra opção seria um estilo de bloco personalizado para ícones sociais. De qualquer forma, isso não foi um bloqueador para este tema sendo lançado como um tema de bloco.

Todos os outros elementos de design do tema são possíveis através do sistema de blocos.

Estilo de bloco de pincelada

Eu disse que havia desafios, mas uso esse termo para significar “as coisas divertidas”. Estas são as peças onde designers e desenvolvedores podem mergulhar em um problema e tentar inovar, e são as soluções que quero compartilhar.

Um dos meus elementos de design favoritos do tema foi o uso de um SVG para criar uma pincelada atrás do título de introdução:

O tema usava um método antigo de envolver um elemento <span> dentro de um <h1> . Isso aplica o fundo do pincel às últimas palavras do texto. No entanto, essa implementação é problemática com dispositivos menores, não acompanhando o fluxo natural de quebras de texto à medida que a tela muda. Também não havia como os usuários controlarem a cor da pincelada ou do texto.

Eu queria saber se havia uma maneira melhor de fazer isso, oferecendo flexibilidade máxima aos usuários.

Felizmente, o WordPress News foi relançado recentemente com um design totalmente novo que se apoiava fortemente em pinceladas. Além disso, o tema é licenciado sob a GPL, portanto, seus recursos estão disponíveis gratuitamente.

Honestamente, eu gostaria de ter olhado seu código-fonte antes de ler vários sites de ajuda e suporte CSS. Os designers da nossa comunidade já haviam resolvido os problemas que eu estava enfrentando. Tudo o que tive que fazer foi ajustar suas soluções para atender às minhas necessidades.

Depois de um pouco de discussão, consegui criar um plano de fundo de pincelada personalizável para títulos:

Os usuários podem ajustar a cor do texto como sempre. No entanto, modificar a cor de fundo altera a cor da pincelada. O traço sempre se alinha com a última linha do texto, portanto funcionará independentemente do tamanho da tela. Isso pode nem sempre ser desejável. No entanto, existem outras soluções para casos de uso, como destacar um texto específico.

A captura de tela a seguir é uma visualização do editor conforme eu mudo a cor:

Para criar o plano de fundo da pincelada para os blocos Heading, adicionei o seguinte código ao arquivo functions.php do meu tema:

 add_action( 'init', 'tavern_register_block_styles' ); function tavern_register_block_styles() { register_block_style( 'core/heading', [ 'name' => 'brush', 'label' => __( 'Brush', 'tavern' ) ] ); }

Em seguida, baixei o arquivo brush-stroke-big.svg WordPress News e o adicionei a uma pasta /assets/svg no meu tema.

A etapa final foi adicionar CSS personalizado à folha de estilo do meu tema. Cobri a adição de estilos com mais profundidade em meu tutorial anterior Construindo com Blocos para aqueles que precisam de uma atualização.

 /* Cancel out WP's padding on headings with backgrounds. */ :is( h1, h2, h3, h4, h5, h6 ).is-style-brush.has-background { padding: 0; } /* Add default background to headings. Clip it to the text. */ :where( h1, h2, h3, h4, h5, h6 ).is-style-brush { position: relative; z-index: 1; background-color: #b5b5b5; background-clip: text !important; -webkit-background-clip: text !important; } /* Adds the brushstroke to ::before. Using ::after can conflict with editor. */ :where( h1, h2, h3, h4, h5, h6 ).is-style-brush::before { content: ""; position: absolute; z-index: -1; bottom: -1rem; left: -1rem; height: calc( 1.25em + 1rem ); width: 100%; background-color: inherit; -webkit-mask-image: url('assets/svg/brush-stroke-big.svg'); mask-image: url('assets/svg/brush-stroke-big.svg'); -webkit-mask-position: left bottom; mask-position: left bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

A maioria dessas regras pode ser ajustada caso a caso. Alguns podem precisar de um pouco de falsificação, dependendo do tema.

Esta solução pode funcionar para outros blocos. Eu encorajo os autores de temas a experimentar e usar outros SVGs para ver o que eles criam.

Nota: o tema Onia está vinculado a um CDN para sua imagem de fundo SVG, que não deveria ser permitida no WordPress.org. Eu também não consegui encontrar nenhuma informação de licenciamento sobre ele. Não tendo certeza se era compatível com a GPL, não usei o ativo do tema.