If This Is Modern WordPress Theme Development, Sign Me Up – WP Tavern

I’ve had a block theme concept rattling round in my mind for some time. For months, I’ve thought-about constructing a single-page profile/card theme, and I lastly sat down and put within the work over the weekend. Partially, I simply needed to do that for enjoyable. Nevertheless, one other a part of me needed to see how block theming has progressed from a developer perspective.

Inspiration for this theme got here from a couple of different individuals and tasks. Kjell Reigstad’s two-column landing page experiment from October 2020 first triggered it. A latest query to the Ask the Bartender column about compact-and-cozy themes acquired my artistic juices flowing once more. Nevertheless, seeing the Themes Crew approve an identical block theme, Miniblock OOAK, by Carolina Nymark meant that the principles have been now lax sufficient to probably put one thing like this out into the world.

One of many issues is that block-based theming has burned me earlier than. I spent months constructing a brand new challenge final yr in my valuable free time solely to have Gutenberg plugin updates wipe out my progress weeks later. I knew issues might change with the unstable basis of alpha-level software program, nevertheless it was nonetheless deflating. Evidently, I might by no means discover the motivation to select it again up.

With WordPress 5.9 and a extra secure block-theming system simply mere days forward, it was time to provide it one other shot.

I needed to be taught block theming deeply. The one method I might do this was to return to the start. I wanted to reacquaint myself with these foundational components of plain ol’ HTML, CSS, and PHP. And neglect every little thing I believed I knew constructing on high of the fashionable internet. I wanted to turn into a noob once more.

Technically, it’s unattainable to neglect every little thing I do know with out incurring some kind of amnesia. Nevertheless, perhaps — simply perhaps — I might get again to the constructing blocks of the online.

May I spin up a WordPress theme and not using a complicated internet of dependencies spanning over 900 tasks in my /node_modules folder?

May I create one thing with out dutifully pulling in my base PHP scripts through Composer?

May I, you realize, simply construct a WordPress theme?

Step one was to verify my ego on the door. Once I put aside years of contemporary tooling and a workflow constructed round them, what I discovered was a beautifully-simple theming system that pays homage to WordPress’s roots however is versatile sufficient to increase for superior builds.

This isn’t to say that there have been no hiccups alongside the best way, however we hear about these sufficient. Plus, I think about programming/growth to be the artwork of fixing issues.

I had a stressed weekend. I acquired 4, perhaps 5, hours of stable sleep between Friday and Saturday evening. Maybe I had so many tasks and issues occurring that my thoughts couldn’t shut them out. Regardless, I used to be again awake at 3:30am on Sunday morning, drained however unable to catch these much-needed Z’s. So, I cracked open my code editor and created a brand new theme challenge.

Inside an hour, it was working. It was in first rate sufficient form to share with buddies over Twitter in two.

The next is a screenshot of the present homepage. Technically, it’s the solely web page. I’ve tinkered a bit since I pushed my first commits stay.

It is a block sample named “Reflections.” The mountain reflecting on the lake photo is from WordPress Pictures and shot by Anne McCarthy. The gradient used for the background is a mirrored image of the picture’s colours too, which I believed was a pleasant contact.

The theme contains a number of different patterns. The purpose is to permit customers to select their favourite for his or her profile card, customise the content material, and save. Straightforward peasy. I hit a snag with this, which I dive into on the finish of the submit. For essentially the most half, every little thing went effectively.

What I Discovered from the Expertise

Creating WordPress themes with blocks is straightforward. Most issues are structured and play by an ordinary algorithm. Templates go right here. Elements go there. Plug in your settings over yonder. We’re more likely to see much more construction in future WordPress variations.

I constructed the theme from scratch utilizing solely my code editor and an area WordPress set up. No Node modules. No PHP libraries. No construct setup by any means.

I’ll possible use these issues earlier than this challenge is full. Some instruments merely make growth simpler. Nevertheless, not needing them or diving into extra complicated PHP APIs has lowered the barrier to entry.

It felt like I had been transported again to the mid-2000s, simply with a greater system in place to deal with all of the complicated bits. For as soon as, I might virtually solely deal with the design.

There are points aplenty with the underlying system. Oddities like further wrapper components round wide-aligned blocks nonetheless exist within the editor. And, a number of blocks want updating — I’m taking a look at you File block for not reusing the present Button block.

Principally, there are quirks. As a themer, you be taught to work with them in thoughts, look ahead to a repair upstream, or threat your sanity looking for workarounds.

I’m hesitant about sharing unfinished work, however I must also present proof. These can try the GitHub repo on the date of this text, no less than earlier than I do something too loopy with it.

Some theme authors might have a look at my challenge and suppose it’s too easy of an instance. Nevertheless, I might simply apply every little thing about it to a full-blown theme. The requirements are the identical, whatever the dimension.

Perhaps we should always begin rethinking what a theme is. With block-based theming being so younger, we should always all be doing a little bit of experimentation.

A Missed Alternative

I’ll get barely technical on this bit as a result of it’s essential for explaining a missed alternative for a well-rounded consumer expertise. The location editor is in a spot the place it’s simple to construct for extra superior customers. Patterns assist bridge the hole for these much less technical, however they aren’t sufficient.

Take into consideration the most important sections of a webpage. Items just like the header, footer, sidebar, content material, and even sub-sections of these. As a consumer, how do you change your complete content material space design that’s already on the display screen with a special content material sample?

You possibly can delete the one that’s there and insert a brand new sample. Nevertheless, deleting and inserting sections of a web page is a high-risk motion.

If the world you wish to change is a template half, you possibly can change one with one other. That’s assuming the theme creator has registered any for that space. It is a low-risk motion and top-of-the-line options of the location editor.

For instance, listed here are header templates that Twenty Twenty-Two registers as they seem underneath the “Change” toolbar menu merchandise:

Nevertheless, that isn’t the theme’s complete array of header patterns — it has 18 in whole. I think about that almost all end-users won’t ever uncover them.

One of many downsides of making patterns meant for particular template components is that end-users haven’t any method of changing or remodeling a component wholesale with a brand new sample.

Theme authors can duplicate their efforts by copying the sample code into the template half, assuming it has no PHP blended in. Or, they will create these components and pull within the related sample through the Sample block:

<!-- wp:sample { "slug":"namespace/slug" } -->

The problem with this strategy is that the location editor doesn’t show the sample content material within the “Change” dropdown (did I simply uncover a bug?):

The answer ought to be easy. Patterns registered for a template half ought to be interchangeable through the UI. Or, components that use the Sample block ought to show accurately within the “Change” dropdown.