Justin Tadlock
One of my favorite activities each week is to peruse the latest themes to land in the WordPress theme directory. Often, there are intriguing design concepts. However, much of the time, I am disappointed to learn that homepage designs of many rely on theme options instead of the block editor.
While the editor has several design limitations, theme authors have tons of room to explore. It has enough power to pull off some of these custom homepage designs with far less code work.
Music Artist was one of the latest themes to catch my eye. I loved the large hero area and several elements of the theme’s design. After installing it, I realized the homepage layout was handled through theme options. However, the theme author could have built this page entirely out of blocks and wrapped each section or even the entire design into block patterns.
This is all doable with the block editor.
So that I am practicing what I am preaching, I took a couple of hours and recreated the homepage demo for the theme directly from the block editor. No code required. There were a few tricky pieces, which I will get into. However, it was not that hard to build and could have been made easier if the theme supported the block editor.
The plan was to replicate the custom page with the Music Artist theme installed. However, the theme’s lack of block support meant that some things were fundamentally broken. Instead, I activated a theme with design similarities, such as fonts and colors. Because I already knew Ariele Lite worked with the block editor, it made sense to see if I could build with it. It proved to be a solid foundation.
The following is a comparison of the original Music Artist theme homepage (first) and a recreation using blocks via the Ariele Lite theme (second):
There are obviously differences in spacing, colors, typography, and other elements. Much of this comes down to stylistic choices by the theme designers. Given more time and modifications via a plugin like Editor Plus, I could have adjusted this enough to get a closer replica. However, my goal was to stick as close as possible as I could to core WordPress. Technically, I have the latest version of the Gutenberg plugin installed, so there might be a few items that have yet to land in WordPress.
For this experiment, I used:
I only needed Editor Plus to make a couple of margin adjustments on the Group block. I could have left it alone, but I wanted to reduce some of the spacing between sections on the page to get a closer recreation. In the future, we will see more spacing controls in WordPress, so I considered this a fair trade-off.
This experiment is to show theme authors that they can build their custom designs with the block system. Dropping old-school theme options means a lot less code work for developers, allowing them to focus more on styling. End-users also benefit from more flexibility, such as adding custom elements or removing parts they do not want. That does not even include the style options on the individual block level.
The secondary purpose is to show users that they can create some of these homepages without code. The block editor and a well-rounded, block-ready theme can get you pretty far.
Starting with a base of Ariele Lite meant that the design was boxed. However, the theme has a custom “Blank Canvas” page template that lets users design the entire page.
There were elements I could not recreate entirely because of limitations with the block editor. Other parts were issues or design choices coming from the theme.
The following is a general overview of how I accomplished building out each section of the homepage. I will skip over parts like adding colors and changing font sizes while focusing on the layout-related concepts.
WordPress’s Cover block remains one of my favorite blocks. It allows users to create hero sections without much work. I grabbed the background image from the original demo and plopped it in. I had taken the first real step down this journey.
Then, I added a Heading block, adjusting its size a bit. I followed it with a Spacer and Social Icons block.
I immediately hit two snags. The first was that WordPress does not include an iTunes social icon. I was unable to find an open issue on the Gutenberg repository for this. Perhaps it is not an oft-requested feature. The second issue was that the Social Icons block does not output the social network labels, so I could not replicate that part of the design.
There are a few ways to handle this section. Assuming the albums listed are a custom post type, whatever plugin these albums came from would ideally have a custom block for outputting them. Users could also use the Latest Posts block if these are blog posts or the upcoming Query block.
For simplicity, I decided to add a Columns block and drop three linked images in.
My plan for this section was to use the core Media & Text block. However, it only supports self-hosted media. There was no way for me to embed a YouTube video.
Instead, I went with a Columns block. In the left column, I dropped a YouTube video URL. On the right, I added Heading, Paragraph, and Buttons blocks.
This was a relatively simple section to recreate. For the layout, it took only a Heading block followed by a Columns block. Then, I grabbed a couple of video links from YouTube and pasted the URLs into the editor.
This was the part of the layout that I had the most trouble with. WordPress provides the Latest Posts block, which can be set in a grid. However, Ariele Lite did not correctly handle the columns.
So, I cheated a bit.
I switched to a block-based theme that supports the upcoming Full Site Editing feature. Then, I dropped in a Query block to get more control over the columns of posts. Afterward, I switched back to the Ariele Lite theme.
The original design could be done with the current Latest Posts block, so this is not a block-editor problem.
Technically, the footer sidebar is outside the scope of the homepage design. It is a part of the theme’s footer across the entire site. However, I decided to add it since I was already on a roll.
This section requires the Columns block. From that point, it is a matter of dropping in a Heading block for each column. I added a Paragraph, Calendar, and Gallery block to recreate the three “widgets.”
Ariele Lite’s Calendar block design works better on a light-colored background. It was a small pain point that I overlooked. In the long term, WordPress should provide design controls on blocks that are missing them.
The custom padding controls coming to WordPress 5.7 are a good start, but Gutenberg desperately needs margin controls to go alongside it.
I really love posts like these, I hope to see more of them!
Great post! I wish theme authors would start exploring this so that they could see the benefits and how it will allow them to create themes faster and with predictable markup.
The number of themes with block styles and pattern are still low.
Overall, it looks good—a bit longer than the original, but more even heights.
What bugs me is having to use separate blocks for header and paragraph—why not simple text styles in a single block?
I agree with the comment about custom padding and margin controls. I would probably use a plug-in calendar, so not sure how that would work with the calendar block, but yes, the white calendar on the black background is jarring.
Structurally, the header and paragraph are two different things. I could see some use cases for what you’re saying too. The block editor needs a line break (
<br /> ) inserter.I’m sure the biggest calendar-related use case for a musician site would be an events plugin. There are probably some good options out there for better handling the style. The core Calendar block is so limited.
“The block editor needs a line break ( ) inserter.”
Shift + Enter is your friend here.
YES! Please, a paragraph break inside the block! Given that it is all text, all the same story, it seems odd for me as a user to break it up.
I use Events Manager and create a calendar page with WPFullCalendar; I have not tried to put a smaller calendar on the home page, but have thought about it. One of those “when-I-get-to-it” items.
You can hold
Shift+Enter to create a line break, but having that be a keyboard shortcut isn’t very discoverable.Thanks! That is a standard line break when typing on a computer, but it keeps the paragraph style the same, so would not serve the purpose for a header—hmm, realizing that screen readers pick up headers differently, but shouldn’t they be able to do that whether alone in a block or with a lower-level header or paragraph of text in the same block? We want features to make things easy for those who post, not for machines! (though of course we want the best possible results for those actually using the device to read, but the machine should adapt to us, not the other way around—just my 2¢ as an amateur)
Hey! Thank you for testing out the Ariele Lite theme of ours. I took me a few moments to realize after reading…
“Because I already knew Ariele Lite worked with the block editor, it made sense to see if I could build with it. It proved to be a solid foundation.”
I just had to read the rest of the article while making some notes for upcoming theme adjustments :)
Overall, it was interesting to see the recreation and what simplicities and challenges you faced.
To be able to recreate an entirely custom homepage like this is a testament to how solid the theme is. Right now, I know of only a handful of themes that I could do this with.
Hi Justin and Carolina,
Editor Plus injects inline styles, is that okay to use?
As far as I know, Editor Plus adds a class to blocks and injects the styles in the page footer.
Great post!
Personally when I have to create some designs with Columns block like `Discography or Video section (with same width columns), I find it faster to create the blocks and then transform them to Columns block.
For example in Videos section just pasting the links, select them and then transform. This is really small but I enjoy it a lot :)
Yes, definitely. I do this a lot with both the Columns and Group block.
“Dropping old-school theme options means a lot less code work for developers, allowing them to focus more on styling.”
This.
I wonder if one of the main reasons for theme authors not being so quick to adopt the blocks system is a perceived slow user takeup?
When users expect blocks and patterns, developers will provide them, but we need developers to provide block based themes for users to use them.
It will reach a tipping point where theme options as we know them will be the old way. Articles like this are helping to nudge it in the right direction.
You’re probably right. I am a user, not a developer, and I hate blocks. I am not an expert, work sporadically on 2 sites and transferring another group’s site from inherited Joomla to WordPress, with which I am more familiar. The classic editor with the ability to switch between HTML and WYSIWYG is where I started and where I am most comfortable.. I am not creating a lot from scratch, more duplicate and edit.
I really think block patterns are that stepping stone that theme authors need to offer for users. When users can insert pretty much any layout they need at the click of a button, it makes it so much easier.
Imagine, as a user, being able to insert this entire homepage design by simply selecting it from the patterns inserter. Then, just customizing the content bits. The user experience time goes from a couple hours down to minutes.
Without more theme authors leading the way with patterns, it’s a hard sell to get more users to take that next step.
I don’t want to be pushed into patterns that a theme designer sets. Maybe I am an anomaly (I often am), but if I want to use blocks at all, it is to put a specific item where I want it, not where someone else thought it should go.
Yes, I appreciate being able to click on a button block and customize it, but I have had issues with getting the button where I want it in Elementor and simply referred the issue to my colleague who has a lot more experience than I. That is fine for that site, but I don’t have someone like that on whom to rely in the site that I am migrating from Joomla (when I have time to sit down with the support team at my host and make the plug-in work!).
Patterns are nothing more than pre-packaged starting points, which can be fully edited by the user and inserted wherever the user decides. Some folks like them; some won’t. It really just depends on your personal preferences.
That makes sense; as long as they are not restrictive, they probably make a good starting point.
Really Great Post. Gutenberg is approaching what many envisioned it might and with the speed that websites and applications demand. Also the more “tests” that are done like this, the community will see some of the blind spots that end users might be looking for.
Great post showcasing the capabilities of Gutenberg. But, if you take a closer look at how the layout is build, its just sections with inner squares and texts. In short, the layout is very basic. However, the real world usage is far from the example.
Please take a look at the examples below (they are all built in Elementor). I literally have to wrangle with CSS and Editor to achieve something like the following:
https://library.elementor.com/travel-testimonials/
https://library.elementor.com/barbershop-home/
https://library.elementor.com/travel-blog-home/
https://library.elementor.com/flooring-company/
IMHO, adding margin and padding to individual columns/rows fundamentally required to any page builders.
The example is not at all far from real-world usage. The layout elements are modern and in use across the web.
I agree that WordPress needs margin and padding controls (they are coming). From the Elementor examples provided, the only two things that stand out to me as not being possible from the end-user is the overlapping and some custom background stuff. The overlapped element design needs custom block styles at the moment as we have seen in themes like Twenty Twenty-One. Some of the custom background things would need a plugin or a theme style.
The animation on a few items will probably always fall into plugin territory.
I also want to add a reminder that this post is not about comparing the block editor to third-party page builders (those are good to look at as the project continues to move forward). It’s about showing how layouts from the theme directory could be handled by the block editor right now.
Thanks for the insight, Justin.
However, in my comment, I didn’t really compare Gutenberg to Elementor. What I was comparing is the user experience for the end-user on how to achieve similar layouts (e.g. overlapping), in other page builders this can be done by offsetting a negative margin.
It just so happened that the examples that are given are from the Elementor, but you can find the same layouts all over the web.
I agree animations can be declared inside the theme or a plugin via additional class or custom block settings.
But to be honest, as a regular user. I find it hard to use Gutenberg or create sections using Gutenberg, its just so weird and frustrating. For example, when I add a background color, it automatically adds padding (I don’t know who made this decision) but it should be the end-user who’ll want to decide whether to add padding or not. Maybe it’s for developers, and not for end-users like me who don’t know how to write CSS when something needs to be overwritten.
Thanks
I have not used Gutenberg yet; I am not sure what third-party page builder we are using on one site, using Elementor on another, and will use the a child of the twenty-twenty theme as my starting point on a site I am transferring. So far, not a fan of either third-party choice; I knew pretty much what I was doing on WordPress itself before blocks, it is a bit of a learning curve to adjust to working with blocks.
First, that is a nice “Music Artist” theme! -nice recreation as well using block editor.
Second, good point mentioned previously about real world examples, sometimes the layout can get pretty advanced. I was looking how I can re-create this homepage with just blocks https://creativedigital.tech/anada/
Some items like the hero image look simple enough, but other items look like they would not be so simple…block patterns can be useful to create sections with custom classes to handle the advanced stuff..maybe some custom blocks would need to be created.
Yeah, you wouldn’t be able to create that particular layout with just core blocks alone. Of course, recreating everything from core is not the goal. It’s possible for a theme to handle most of it with custom block styles and patterns, but you’d need a block plugin or two that handled some things like tabs, sliders, and animation.
All of it is definitely within the realm of what the block editor can do though.
Even a traditional theme wouldn’t be able to handle all of those elements without a boatload of theme options either. And, generally, that would be far less flexible for the end-user if they wanted to make any changes, such as moving sections around or adding in new ones.
Justin, you mentioned above that there were other themes that you could do this with. Could you provide the name of one that handles the blog posts correctly?
Newspack, Genesis Block, GT Basic, and Chaplin all handle the grid Latest Posts block. Newspack does the best, which is not surprising to me. I probably could have used it in this experiment too.
Here’s what the Latest Posts looks like with Newspack:
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
source
