Posted on

Recreating the Music Artist WordPress Theme Homepage With the Block Editor

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):

  • Original Music Artist Homepage
  • Block-Designed Homepage

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:

  • WordPress 5.7 Beta
  • Gutenberg 10.1 Beta
  • Ariele Lite 1.0.8
  • Editor Plus 2.6

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.

Recreating the Music Artist Homepage

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.

Hero Section

Cover block with a music album background and social icons section.

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.

Discography Section

Discography section that lists an artist's albums.

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.

Media and Text Section

Two columns. On the left, an embedded YouTube video. On the right, a heading, paragraph, and button.

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.

Videos Section

A section with two columns, each with an embedded YouTube video.

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.

Latest Posts Section

Three-columned latest posts section with featured images.

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.

Footer Sidebar Section

A three-columned section: about us, calendar, and image gallery.

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.

Posted on

Exploring Seedlet, Automattic’s Block-First WordPress Theme

Decorative screenshot of the Seedlet WordPress theme.

On August 26, Automattic launched a new theme titled Seedlet that focused on integrating with the WordPress block editor. A few days later, it was also live in the WordPress.org theme directory. The theme development team wanted to produce a theme that would be in a good position to transition to full-site editing later this year as WordPress 5.6 lands.

Seedlet makes wide use of features that integrate with the block editor. It does so in what is the simplest of ways, which is a testament to how much easier theme development is becoming in the dawn of the block-based themes era. The theme makes liberal use of theme-supported features like custom font sizes, colors, and gradients. It takes its integration an extra step by registering block styles and patterns.

Seedlet almost feels like a skin around the block editor. It is a prime example of the future that we’re hurtling toward, which will mean less focus on code and more focus on design configuration. Themes will not be themes in the traditional sense. I use the term “skin” because it harkens to various systems in days gone by where designers simply added CSS to skin a site. WordPress themes will always be a bit more complex than a simple stylesheet but not much more so. We will be getting back to the basics of CSS and HTML.

That is what I see when I look through the Seedlet theme’s code. While it still has copious PHP, there is an unmistakable structure that clearly says that that theme development is changing — and here is what it looks like as we transition.

I have seen many themes that developers have built to work with the block editor. However, I have seen only a few that have taken a block-editor-first approach. It is almost subtle, and unless you have been neck-deep into theme development for years, you may miss it. Automattic’s theme team is riding the winds of change. Theme authors who want to ride along should pay attention to where this project goes in the coming months.

The one thing I do not understand is why Automattic did not choose to add the “Block Editor Styles” tag to the theme. It clearly adds such styles. This is a missed opportunity to help users find themes compatible with the block editor.

The theme will not suit everyone’s taste. It is a basic blogging theme at its core. However, its wide-open canvas makes it suitable for a variety of sites. The theme’s typography is on point, creating a comfortable reading pace for longer-form work. There is a lot to like about the theme, but I am primarily interested in what the development team has built for the block editor.

Kjell Reigstad, the primary designer on the theme, also announced the team is working on a completely block-based version called Seedlet Blocks. The current plan is to continue iterating on it and launching it as a separate, standalone theme in the future.

Experimenting With Block Patterns

While Seedlet includes only three block patterns, they immediately stood out to me. The patterns are not overly complex, but they are unique designs that make use of core blocks with a mixture of the theme’s presets, such as custom gradients and block styles.

The “Group with Split Background” pattern uses a Group block with the theme’s preset diagonal gradient to create a background for an Image block. It is not a particularly groundbreaking design. However, the beauty is in the simplicity. It shows that theme authors can create interesting designs without adding extra CSS code.

Seedlet Group with Split Background block pattern in the editor.
Group with Split Background pattern in the editor.

The theme’s “Group with Image Overlap” pattern kicks it up a notch in complexity. Starting with the same concept of a Group block with another custom gradient preset, it throws in a Columns block. In the left column, users can add two images, stacked. In the right column, users can add one image. The end result is a custom layout — primarily because of the gradient background — where the two images from the left column overlap the solid background.

Seedlet WordPress theme's Group with Image Overlap pattern on the front end.
Front-end output of the Group with Image Overlap pattern.

The technique is simple in terms of code, but it takes a good designer to create the concept. We are just now scratching the surface of what theme designers will be able to accomplish when they begin thinking about applying various techniques to the block system. Seedlet has some of that sort of outside-the-box thinking with its use of gradients. We need to see more of that from the theming community.

Admittedly, I am not a fan of the third pattern the theme adds. “Alternating Grid of Latest Posts” inserts the Latest Posts block into the editor with the theme’s custom “Alternating Grid” style. Mostly, I just do not care for the layout, but that is simply based on my personal taste.

View of the Alternating Grid of Latest Posts pattern in the block editor.
Alternating Grid of Latest Posts pattern in the editor.

On the whole, I love what the theme is doing with block patterns. This type of exploration is exactly what the WordPress community needs right now.