Build Brushstroke Backgrounds With WordPress Blocks – WP Tavern

0

While browsing through the latest releases in the WordPress theme directory this week, I found one that caught my eye. Onie was clean and minimal while reserving its flourishes to draw attention to just a few elements on the page.

Could this be one of those rough diamonds I always look for in the free theme directory?

He had potential, but he didn’t live up to it. While exploring the theme, I felt like the author spent 90% of his time designing an eye-catching front page. Diving into the inside pages showed no attention to typography as the number of characters per line pushed 150 and beyond, more than double what it should be for comfortable reading.

It’s the kind of thing that’s easy to fix. I was more disappointed that Onia was not a block theme. All the elements were there. He didn’t do anything particularly complex, and there was no obvious reason for it to be a classic theme.

Last night I sat down and recreated Onia as a block theme. Technically, I built its homepage directly from the editor on a basic theme project I already had on hand. There were a few challenges, but I did the heavy lifting in about an hour. The other parts took a bit longer as I went through the possible solutions.

The following is a comparison of the first two pages (Onia is the first, followed by my recreation):

I obviously took some liberties with spacing, size and coloring. I wasn’t trying for an exact replica. Instead, it was a bit of a reboot with a few twists on the original.

A few quick notes

One of the things that often frustrates me with themes is that they show these nice logos in the demo but offer no way for the user to work with the same font. I wasn’t sure of the original font family used in the logo, but added Sacramento as a cursive writing option:

Site header with a cursive site title, followed by a horizontal navigation menu.
Nice font that users can customize.

These features can make the difference for the average user. Not everyone can load Photoshop and create their own specialized logo. However, they can enter their site name and select a font option for the plain text version.

Technically there are two features currently in Gutenberg but not in WordPress 5.9 which I used. The first is the Block Read more. Onia had that in her publication grid. As a theme author, I would have just expected this feature if it was a heist. Considering the featured image and post title link to the single post page, this was not a deal breaker.

The second missing feature is the “show labels” option for the Social Icons block. A workaround for the original design would have been to use a navigation block instead since the links were just plain text. Another option would have been a custom block style for social icons. Anyway, it was not a hindrance to release this theme as a block theme.

All other theme design elements are possible through the block system.

Brush Stroke Block Style

I said there were challenges, but I use that term to mean “the fun stuff”. These are the rooms where designers and developers can delve into a problem and attempt to innovate, and these are the solutions I want to share.

One of my favorite design elements of the theme was its use of an SVG to create a brushstroke behind the intro title:

Two columns: text + image.  On the left, the in-text title is followed by a gray brushstroke.
Presentation of the Onia home page.

The theme used an old-school way to wrap a element inside a

. This applies the brush background to the last words of the text. However, this implementation is problematic with smaller devices, not following the natural flow of text breaks as the screen changes. There was also no way for users to control the color of the brushstroke or text.

I wanted to know if there was a better way to do this while still providing ultimate flexibility to users.

Luckily, WordPress News recently relaunched with a brand new design that relied heavily on brush strokes. Also, the theme is under GPL licenseso that its assets are freely available.

Honestly, I wish I had looked at its source code before reading various CSS help and support sites. The designers in our community had already fixed the issues I was having. All I had to do was adapt their solutions to my needs.

After a bit of wrangling, I managed to create a customizable brushstroke background for the titles:

Users can adjust text color as always. However, changing the background color changes the color of the brushstroke. The stroke always aligns to the last line of text, so it will work regardless of screen size. This may not always be desirable. However, other solutions exist for use cases like highlighting specific text.

The following screenshot is a view of the editor when I change the color:

Editor view that displays a block of media and text.  The title on the left is selected and has a brushstroke background.  On the right, the background color tool is open.
Customizing the background color of the brush stroke.

To create the brushstroke background for the header blocks, I added the following code to my theme functions.php file:

add_action( 'init', 'tavern_register_block_styles' );

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

Then I downloaded the brush-stroke-big.svg file of the WordPress News Repository and added it to a /assets/svg folder in my theme.

The final step was to add custom CSS to my theme’s stylesheet. I covered adding styles in more depth in my previous tutorial on building with blocks for those who need a refresher.

/* 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%;
}

Most of these rules can be adjusted on a case-by-case basis. Some may need a little trickery, depending on the theme.

This solution might work for other blocks. I encourage theme authors to experiment and use other SVGs to see what they come up with.

To note: Onia theme is linked to a CDN for its SVG background image, which is not supposed to be allowed on WordPress.org. I couldn’t find any licensing information on this either. Not knowing if it was compatible with the GPL, I didn’t use the theme’s asset.

Share.

Comments are closed.