What’s in a block theme?

Imagine you have a really cool toy that you can build and change however you want. Well, WordPress is like that toy but for making websites. It helps people make really nice websites without knowing a lot of complicated coding stuff.

Now, there’s a new way to make websites called “Full-Site Editing Block Themes.” It’s like having a special set of blocks that you can use to build your website. These blocks are like different shapes that you can put together to make something awesome. You can have a block for pictures, a block for text, a block for buttons, and many more.

With Full-Site Editing Block Themes, you can use these blocks to create your website and make it look just the way you want. You can move the blocks around, change their colors and sizes, and add cool things to make your website special. It’s like playing with building blocks to make your own unique creation!

So, WordPress Full-Site Editing Block Themes is a fun and easy way to build your own website using special blocks that you can move around and change to make it look really cool.

https://twitter.com/tomfinley/status/1699841112876138992?s=20

When it comes to Full Site Editing (FSE) and block themes in WordPress, I’m frequently seeing experienced developers and implementers raising very valid questions that go beyond the technical functioning of these themes. They’re delving into how to work with them effectively and what sets one block theme apart from another.

In reality, these questions aren’t entirely new or exclusive to FSE. WordPress has always existed in a state of constant evolution, with developers and designers engaged in a cat-and-mouse game of innovation and compromise. However, the emergence of premium WordPress themes, led by pioneers like Brian Gardner of StudioPress and its Genesis theme framework, significantly transformed the WordPress landscape in the early 2010s. This marked the beginning of a market that became flooded with premium-looking themes, each employing its own tricks to showcase unique features. Some stood out more than others, and preferences varied widely ever since.

Classic WordPress themes, as they’re now called, have been around for well over a decade and it’s fair to say have also become quite commodified over that time. At their core, many of classic themes aren’t vastly different from one another. They consist of HTML, CSS, JavaScript, and PHP, all working together to produce content in a specific style and usually for a specific purpose. Unless they rely on a framework to abstract some of the templating, classic themes all require the wheel to be reinvented (or at least the loop respecified) in each template file. Users have the freedom to modify them as they see fit, within which has been a hallmark of WordPress’s flexibility. Interestingly, people are still buying Classic themes today, despite the advent of block-based editing.

One of the reasons behind the success of Genesis was its ability to abstract the complexities of templating. It simplified the process by centralizing essential elements in functions.php and styles.css. This approach accelerated the time it took to go from concept to a live website and ensured long-term stability. If you wanted a new template, you could easily grab a new child theme, create a filename.php file, and customize it as needed. The theme-switching process was relatively seamless, allowing you to maintain a consistent core while making visual changes.

It was all about accelerating time-til-live, and stability into the future — ensuring your content was StudioPress’s central focus. Want a new template? Cool, grab a new child theme, do a filename.php and Bob’s your uncle. Take out the parts you don’t need. Hate your theme? Switch! Mostly everything stays the same!

The introduction of WordPress’s Appearance Menu Widgets added a paradigm for governing shared elements across templates — and new complexity. Widgets were fantastic for their drag-and-drop functionality, which allowed users to easily manipulate their widgetized content and have said content show up across multiple pages and/or posts. Clients generally this visual approach, but there was a catch. Widgets often posed challenges in terms of user-friendliness, especially when compared to the simpler, but more intuitive TinyMCE post editing experience.

Entered the era of builders. Visual Composer, Beaver Builder, Elementor, Divi, and more recently Oxygen overtook standard themes and gave rise to entirely new niches within WordPress itself. I saw a claim today that approximately 20% of WordPress sites are Elementor-based. Probably sensing that they were effectively overtaking the WordPress market and experience, Matt Mullenweg gave us a challenge: learn Javascript, and build with blocks.

This brings us to the era of block themes. Conceptually, block themes serve the same purpose as classic themes. They offer style variations, patterns, and template parts that expedite the production process. They help streamline the appearance of plugin outputs, and they allow for overrides where necessary. Additionally, block themes empower clients by demonstrating the control they have over their content.

I am still struggling to understand what a block theme does. FSE is supposed to give total control over fonts, colors, layout – everything a theme has done in the past. So what does a block theme offer that FSE doesn’t? Patterns? But isn’t there a pattern directory?

— Derek Ashauer (@DerekAshauer) September 7, 2023

Block themes dictate layouts much like classic themes, defining visual rhythms, typographic scales, style cascades, and various other design elements that laypeople and non-designers prefer not to delve into. However, the difference lies in how these themes are created and what users can change at their level.

In essence, block themes represent the next chapter in the ongoing evolution of WordPress themes. They bring together the best of both worlds, offering designers and developers the flexibility they need while providing clients with intuitive control over their content. As WordPress continues to adapt and change, the landscape of themes will evolve with it, ensuring that users have the tools they need to create unique and engaging websites.

Primary Questions:

• What are the advantages and disadvantages of using WordPress block themes in the current ecosystem?
• How do block themes relate to Full Site Editing (FSE)?
• What is the role of traditional themes, and how do block themes impact this?

---

Advantages of WordPress Block Themes:

1. Integration with Full Site Editing (FSE): Block themes seamlessly integrate with FSE, enabling users to have more control over site customization, including fonts, colors, and layout.
2. Opinionated Design Decisions: Block themes provide opinionated design decisions, making them useful for users with varying levels of expertise. They serve as a starting point for site design.
3. Framework and Style Guide: The theme.json file and HTML templates define a theme, serving as a framework and style guide, facilitating consistent design across the website.
4. Customization Workflow: Users have the flexibility to customize block themes while still maintaining an opinionated workflow, and tools exist for exporting theme changes.

Disadvantages of WordPress Block Themes:

1. Complexity: Some users find it challenging to understand the concept of block themes, their relationship with FSE, and the necessity of traditional themes.
2. Redundancy: There is uncertainty about the role of traditional themes when FSE includes the Site Editor. This raises questions about redundancy and the need for both block themes and traditional themes.
3. Clarity and Terminology: The terminology surrounding block themes and their role could be confusing. Some participants suggest redefining the term “themes” as a framework or style guide to align with the new concept.
4. Block Patterns vs. Themes: The discussion highlights the potential of block patterns to define entire pages, leading to questions about the necessity of full block themes and the space for opinionated design within block patterns.

In summary, the advantages of WordPress block themes include their integration with FSE, provision of design decisions, framework functionality, and customization workflows. However, challenges include complexity, questions about redundancy, terminology clarity, and the evolving role of block patterns. Participants are actively exploring the evolving landscape of WordPress themes in the context of Full Site Editing.