Creating Block Themes with Full Site Editing

By now, if you’ve been paying attention to the world of WordPress, you’ve likely heard of full site editing (FSE) or at least seen the reference to it. Even if you don’t know what it is, you’ve likely seen chatter about it, and maybe wondered what it would mean for you.

There’s good news for you, whether you’re a developer or a regular WordPress user. That good news is that there’s nothing to fear, and that all of this will end up in a good spot making things easier for you.

How do I know?

The World of WordPress is Changing Again

This isn’t the first time we’ve seen this kind of shift in WordPress. Three or so years ago (it’s hard to remember given that at least one of these past years disappeared without any advance planning), we were all introduced to Gutenberg. 

Today you can call it the block editor. But initially it was code-named Gutenberg when it was first merged into the core of WordPress. Most people freaked out a bit because change is hard. For all of us.

But now, several years later, Gutenberg has been seen to be relatively helpful, often nice to use, and consistently improving. That’s how I know that this change will also turn out good. But it’s a bigger shift than before.

The Shift in Focus – From Users to Builders

The earlier introduction of the block editor was a change in how we created content. But as disruptive as it might have felt for people who were building sites and designing pages, for the people who were writing blog posts, it wasn’t a huge disruption.

Users benefited from the shift to blocks and many cool features arrived because of the shift, like defining a block of content and then dynamically placing it anywhere (and everywhere) within the site. This is now possible for anyone and everyone without any code.

But this shift is a bit different.

The shift to Full Site Editing isn’t just about how you edit your site. It’s about the underlying structure of your site. This isn’t just where you define your header or footer. It’s about what makes up a theme.

In other words, this shift to Full Site Editing will benefit users at some point, but right now, the shift feels like a move in focus towards making things better for builders (those who build sites and those who build themes).

Builder or user, many of us got used to the season of life where we embraced page builders. We could shape our pages to look any way we wanted. But then we started noticing performance problems. Google gave us lower scores and told us our DOM was too large (whatever that was).

We know performance is king, and that means there’s no better time to dig into FSE and how it can change the sites we’re building.

Why is Full Site Theme Building Important?

Before Elementor, there was Beaver Builder. In the agency I worked for, we built large sites for enterprise clients using it. But when they needed to adjust the header and footer of pages (or posts), they either needed their second product, Beaver Themer, or we needed to help them with a theme that had support for custom (and dynamic) headers and footers.

When themes started building those features out – like Astra, Blocksy, and Kadence – it was a joy. But it also created a bit of lock-in. 

And you know what happens next – a customer would add a plugin to their site and then discover it wasn’t compatible with the page builder or the theme.

Suddenly fingers are pointing in every direction. Theme companies are saying it’s not them. Page builders are saying it’s not them. Hosts (getting in the game) are saying it’s not them. And so the fingers ended up pointing to the builders (freelancers and agencies) that created the site to begin with.

The same happened when Google’s page speed scores started complaining about how slow these sites were because of the code that these page builders had output. Freelancers and agencies were blamed.

This shift to block themes – ones that embrace full site editing – is a fundamental change to how sites are built.

With this shift, everything on the page, and everything on the site, are blocks. Headers, footers, menus, sidebars, and content. All blocks.

And that means themes can be more lightweight. 

But there are still things the theme needs to do – like create a single articulation of the global styling for blocks across the site. Or issues with typography. 

All of that is available for developers to configure in the new themes.json file. But it’s not just for defining settings. It’s also how a developer can change the customer’s editor experience.

And while there aren’t a ton of UI components to the themes.json configurator right now, it’s not hard to imagine it will drive the next version of what we got used to with the customizer.

In short, this is the next generation of how themes get built and how we’ll eventually control what users get to do with these new themes.

How Do You Figure This All Out?

As exciting as it sounds, the bigger challenge is figuring out how we’ll all figure this out. No one wants to create a new kind of theme that ends up being super basic. No one wants to create a new kind of theme that annoys customers.

We want the power of the “new,” with the comfortability of the “tried and true.”

And we have more questions than we have answers.

Introducing Building Block Themes – A Developer Course

Imagine a course that covered all the details of what you needed to know. I’m talking about the following fourteen topics (plus more):

• Get an overview of Full Site Editing to understand how it changes theme development.
• Build the minimal Index Template and use blocks to pull posts from the database.
• Implement a complete blog home template without writing a single line of code.
• Add theme headers and footers.
• Understand how navigation menus are handled in full-site editing.
• Discover how to use the theme.json file to preconfigure the block editor settings.
• Learn how to create flexible layouts with the built-in layout controls.
• Implement the global typography and color styles using theme.json.
• Leverage the spacing controls to manage paddings and margins.
• Discover how to preconfigure the block editor with settings that align with the theme.
• Implement a font picker, color palettes, gradients, and other customization options.
• Learn how to remove undesired customization options from blocks so you can control how much your clients can deviate from the default design.
• How to use patterns to speed up the page building process for yourself and your clients.
• Leverage the power of template parts to avoid duplicating block components across templates.

That’s a powerful list of things to learn. 

And the great news is that it’s not a course that is just information delivery. It’s a course that invites you to get your hands dirty. 

You learn by doing.

The good news is that you don’t have to imagine it. The course is built. It’s ready. And it’s been developed by Frank Klein – a developer who is known and trusted by WordPress experts.