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

Ariele Lite Is a Fun and Refreshing Theme for WordPress Bloggers

Ariele Lite theme homepage.

Ariele Lite, the latest theme from Rough Pixels, went live in the WordPress theme directory today. In an ecosystem where designers are dubbing most themes as multipurpose, it is refreshing to see a well-designed theme that is unafraid to cater specifically to bloggers.

It is not often that I get the opportunity to test a brand new theme from the official WordPress theme directory that supports block editor styles. Or, at least it’s not often that I test one that lives up to the claim. Despite a couple of trivial issues, Ariele Lite is a theme that will appeal to a wide audience.

Whenever I see the word “lite” appended to the end of a theme name, it is immediately off-putting. Far too often, I have been burned when activating such themes. My already low expectations are generally met with unfulfilled promises, missing styles for basic features, and a metric ton of advertising for the real product (i.e., the non-lite version that I can buy). However, I was pleasantly surprised by the work that went into Ariele Lite. It was a complete and fully-functioning theme and did not feel like crippleware. Plus, most of the upsell features in the commercial version were not that appealing to me. I can find most of them in plugin form. However, they could be nice additions for the user who wants integrated features that will look and feel like they are a part of the theme without the hassle of hunting down the perfect plugin.

What makes Ariele Lite a great theme is that it has an opinionated style, even if it is merely some subtle flavoring, for nearly every element or block. It never goes overboard into lavishness, which means it doesn’t break readability. It is a theme that has fun with its design while being well-groomed enough for professional bloggers.

Even if Ariele Lite is not to your taste, Rough Pixels has a history of releasing clean, well-designed themes. There is a little something for almost anyone. The company is also one of the few theme-makers with multiple themes that support the block editor in the free directory.

Theme Design and Features

Ariele Lite WordPress theme customizer options.
Ariele Lite customizer options.

Ariele Lite is not stock full of custom features, but it has enough flexibility to satisfy most people who want to do some customization. More than anything, my favorite thing about the theme is that it does not take much cajoling to achieve the look of the demo the theme author has put together. There should be a WordPress theme directory filter tag titled “what you see in the demo is what you get.”

The theme comes with a reasonable number of theme design options. Users can change nearly every aspect of their front end. The theme has options for all its colors, several labels, and other theme-specific elements. It stops short of adding font settings, which is likely a good thing given the theme’s attention to detail with typography.

The one particular design element that caught my eye was the theme’s blockquote style. Some bloggers may want something a bit less pronounced in design, depending on how they want to present quotes. However, I am a sucker for beautiful quote designs, and Ariele Lite did not disappoint.

Ariele Lite theme blockquote style.
Ariele Lite’s blockquote style.

The quote design is representative of the attention that Rough Pixels has given to other elements in the theme. From the bold headings to the caption design that overlays the featured image, the team has left few stones unturned.

For bloggers, the most important element is the typography. It is one of those elements that too many theme authors overlook, but it is paramount when catering a theme to bloggers. This is one area the theme excels at. However, if selecting the sidebar-less layout option, there are too many characters per line for comfortable reading. Stick with either the left or right sidebar option to stay on point.

The theme comes with Jetpack infinite scrolling support, a custom posts widget with thumbnails, and enough sidebars to put widgets anywhere you might want. I like the default setup well enough, so these features are less important to me. However, they are likely welcome additions for many users.

Not Without Issues

I have been building this theme up thus far in the review. Now, it is time to take it down a notch or two. Ariele Lite is by no means perfect. No software is. I hit a few snags.

The biggest issue I ran into was the theme did not handle full-aligned blocks well. Instead of capping them to the width of the content container, they would break out into the sidebar. Even when selecting a layout with no sidebar, the same issue persists.

Broken full-aligned image in the Ariele Lite theme.
Full-width image creates a design issue.

This would be an absolute deal-breaker for me as a user. As a developer, I know that it is simply an oversight and can be corrected. The theme author can correct it with a single line of CSS. Users should simply be aware of the problem, at least until the theme author has a chance to address it.

Outside of that, nested lists in sidebars need a little TLC. The spacing is off. It is also missing support for pagination via the <!--nextpage--> quick tag on single post views.

These few items are relatively trivial issues to address. They are worth noting for the 1.0.4 version of the theme and will likely be fixed in future iterations.

Final Thoughts

Ariele Lite does not break much new ground. It is simply a solid blogging theme that supports the block editor. Nearly two years in, such themes are still few and far between. It is ideally suited for people who love to write, and it has enough options to keep those who want to do a bit of tweaking happy.

If the theme’s development team is proactive about addressing the few minor issues, I would recommend it to anyone who wants a good theme that fully supports the latest version of WordPress.