Justin Tadlock
As I was looking over the latest releases from the WordPress theme directory this week, I came across one that caught my eye. Onia was clean and minimal while reserving its flourishes to bring attention to just a few elements across the page.
Could this be one of those diamonds in the rough I am always looking for in the free theme directory?
It had the potential, but it fell short. As I explored the theme, it felt like the author had spent 90% of their time designing an eye-catching front page. Diving into inner pages showed no attention to typography as the character count per line was pushing 150 and beyond, more than twice what it should be for comfortable reading.
That is the sort of thing that is easy to address. I was more disappointed that Onia was not a block theme. All the elements were there. It did not do anything particularly complex, and there was no evident reason for it to be a classic theme.
Yesterday evening, I sat down and recreated Onia as a block theme. Technically, I built its homepage directly from the editor on top of a base theme project I already had on hand. There were a couple of challenges, but I did the bulk of the work in roughly an hour. The other pieces took a little longer as I ran through possible solutions.
The following is a comparison of the two front pages (Onia is first, followed by my recreation):
I obviously took a few liberties with spacing, sizing, and coloring. I was not attempting an exact replica. Instead, it was a bit of a reboot with a few spins on the original.
One of the things that often frustrates me with themes is that they show off these beautiful logos in the demo but offer no way for the user to work with the same font. I was unsure of what the original font family was used in the logo, but I added Sacramento as a cursive handwriting option:
These features can make a difference for the average user. Not everyone can load up Photoshop and create their own specialized logo. However, they can type their site’s 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 that I used. The first is the Read More block. Onia had this in its post grid. As a theme author, I would have simply waited for this feature if it was a holdup. Considering that both the featured image and post title link to the single post page, it was not a make-or-break element.
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. Either way, this was not a blocker for this theme being released as a block theme.
Every other design element of the theme is possible through the block system.
I said there were challenges, but I use that term to mean “the fun stuff.” These are the pieces where designers and developers can dive into a problem and attempt to innovate, and they are the solutions that 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 heading:
The theme used an old-school method of wrapping a <span> element inside an <h1>. This applies the brush background to the last few words of the text. However, that implementation is problematic with smaller devices, not keeping up with 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 of doing this while offering ultimate flexibility to users.
Fortunately, WordPress News recently relaunched with a brand-new design that leaned heavily on brushstrokes. Plus, the theme is licensed under the GPL, so its assets are freely available.
Honestly, I wish I had looked at its source code before reading over various CSS help and support sites. Our community’s designers had already solved the problems I was hitting. All I had to do was adjust their solutions to fit my needs.
After a bit of wrangling, I managed to create a customizable brushstroke background for Headings:
Users can adjust the text color as always. However, modifying the background color changes the brushstroke color. The stroke always aligns with the last line of text, so it will work regardless of the screen size. That may not always be desirable. However, other solutions exist for use cases like highlighting specific text.
The following screenshot is an editor view as I change the color:
To create the brushstroke background for Heading blocks, I added the following code to my theme’s functions.php file:
Then, I downloaded the brush-stroke-big.svg file from the WordPress News repo and added it to an /assets/svg folder in my theme.
The final step was adding custom CSS to my theme’s stylesheet. I covered adding styles in more depth in my previous Building with Blocks tutorial for those who need a refresher.
Most of those rules can be adjusted on a case-by-case basis. Some may need a bit of fudging, depending on the theme.
This solution could work for other blocks. I encourage theme authors to experiment and use other SVGs to see what they come up with.
Note: the Onia theme links to a CDN for its SVG background image, which is not supposed to be allowed on WordPress.org. I also could not find any licensing info on it. Being unsure if it was compatible with the GPL, I did not use the asset from the theme.
SHARE THIS:
LIKE THIS
This solution could work for other blocks. I encourage theme authors to experiment and use other SVGs to see what they come up with.
This brush stroke style gives me an idea for something. I’m gonna go totally overboard with it though!
One thing I noticed is that with the z-index: 1 on the heading block, if it is located close to a navigation block with a submenu, the submenu is obscured. This is despite the submenu specifying a higher z-index.
Dropping the z-index from the heading but keeping the -1 on :before doesn’t seem to stop it from working correctly, and the nav submenu was no longer obscured. At least that’s what I found in my limited testing.
Thanks for the note on the z-index. I’ll do some testing.
I could not reproduce the z-index issue. Tested with menu:
However, if I removed the z-index: 1 from the Heading, it seems to hide the background. Of course, there could be differences in our themes that is causing this. Most of the code is the stock wp-block-library stylesheet, but I do not use core’s theme.css.
This is why I am sometimes reluctant to post CSS solutions. There are so many variables between designs that nothing is ever 100% guaranteed.
Apologies Justin, when I said I was going to go overboard with it, I really did… adding “grungy” style backgrounds all over the place expanding it to block groups too. So attempting to add the style to the header was the cause and could be fixed as a one off, but would probably be tricky for a general release theme that has to work in all circumstances.
I think a bit of restraint maybe a better way to go with this solution.
This is really cool Justin! Thank you! To practice with blocks, I’ve been re-creating my old sites in a block pattern, and kept hitting limits and not knowing a good workaround. That brushstroke background solution opened up so many doors for me!
I’d love to see more stuff like this!
That’s good to hear! Building with blocks definitely forces you to approach theme dev differently. One of the best things I’ve done is try to forget about recreating old stuff and seeing what the new system has to offer.
Basically, instead of thinking in terms of workarounds, ask yourself what advantages the block system has that you didn’t have before. That’s how I try to look at things anyway.
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
WordPress Tavern is a website about all things WordPress. We cover news and events, write plugin and theme reviews, and talk about key issues within the WordPress ecosystem…
© All Rights Reserved. Powered by WordPress, hosted by Pressable
Subscribe now to keep reading and get access to the full archive.
Continue reading
Digital Marketing & Design by Yellow Falcon
