This week I updated this site’s theme to Twenty Twenty Two and attempted to take advantage of FSE (Full Site Editing) in WordPress 5.9 to design everything you see here.

Typically when developing a client site, I use the Understrap theme framework. It’s based on Bootstrap and is great for hand-coding your site and having complete control over the front-end markup, while still having a ready-made design toolkit at hand. However, when I last designed this site many years ago, I was deep into a love affair with Beaver Builder, which I would still recommend as the best of all page builders, if page building is your thing.

I’ve built plenty of sites on all sides of the spectrum, from fully custom-coded (even to the point of using JS frameworks and the WordPress REST API) to fully designed and developed in a page builder. I have a pretty long background in custom WordPress development, so I also wanted to test some of the flexibility being promised in WordPress 5.9, and get a good sense of the state of all things Gutenberg.

FSE In a Nutshell

Few pieces of software were as polarizing as Gutenberg, the drag-and-drop block-based WYSIWYG editor that WordPress launched a few years back. Time has since passed, and what started as a glitchy bundle of Javascript has mostly been refined into a decent editing experience. For writing posts like this in a desktop browser, Gutenberg is beautiful.

Full site editing is what it says on the box. Instead of modifying code for your site’s header, footer, and various templates for archives, sidebars, etc, the entire site is editable through the Gutenberg interface. Basically there’s three ‘places’ you will find Gutenberg – 1. editing regular content in a post or page, 2. editing widget areas, like sidebars, and now 3. editing the overall flow of these elements by laying out the ‘templates’ of your site. It’s not enabled by default, your theme has to be specifically designed for it.

To accomplish this, the ‘Site Editor’, as it’s called, introduces new blocks for under the hood stuff like navigation menus and queries (loops of posts) and for post elements like the title, featured image, content, or meta information. The theme offers a starting layout for all of these templates, and it offers opinions about colors and typography and other design flourishes, bit is otherwise pretty agnostic as to the general layout of the site. In a way, this makes sense: there are some pretty set ideas about what a website should look like that will handle most use cases.

So after taking FSE for spin (the results being the website you’re currently looking at), here’s my initial thoughts on all thing WordPress 5.9:

So first, the pros.

The new default theme.

I really wanted a theme that was very clean, almost monochromatic, with either a good serif font or just the default system fonts. Twenty Twenty Two actually fit the bill perfectly. It’s a beautiful theme, at least on the demo site. The mobile navigation menu is great. The design is clean and simple, not too opinionated. And ‘block patterns’ as a concept is SO much better than the old methods of widgetizing the front-page template. I could see this theme being used for anything from blogs and portfolios to marketing sites.

Full-Site-Editing as an Idea.

I’m actually on board with the idea of FSE for some portion of the market. Third-party tools like Beaver Themer and Elementor changed the game by making elegant solutions for drag and drop editing of the header, footer, sidebar, and archive templates. Hand-coding a site isn’t always in the budget and it isn’t always necessary. As long as you come to terms with the idea that not everything in your mind will be possible in the editor, FSE as a concept is a great way to WYSIWYG your site from scratch.

Recently I’ve been watching my daughter set up her own WordPress website with Full Site Editing (complete with hot pink Times New Roman and animated Harry Potter GIFs) and it brought be back to my Geocities/Angelfire days. Being able to hack away at something and really showcase your own personality is a great entry-point into web design. On the other hand, this is no Geocities. Even attempting basic updates required a decent amount of tech support from her old man, and even I sometimes come up empty handed.

Which leads us to…

The drawbacks.

The Editor itself.

It’s still surprising that this software is running on a third of the web. It’s at once a great technical achievement, and at other times a completely incomprehensible series of icons and flyout panels that never seem to be in sync with the actions you’re actually trying to take. An quick example list of complaints I had while setting up this site:

• The process of adding new blocks inside of nested blocks (like adding content to a column or a link to the navigation menu block) is literally impossible to understand. Often the new line just disappears, so you have to have exactly the right element selected, then find the correct plus icon located in the bottom right of that element. Building the header menu took way longer than I’m willing to admit.
• Icons everywhere. I don’t understand what 50% of these icons mean. To be fair, I just discovered that there IS an option that replaces the icons with text. In a perfect world I’d have both (like the “link” icon inexplicably offers) so I could learn what the icons do over time.
• Contextual menus everywhere. The post sidebar menu vs the block sidebar menu. The options panel. The settings panel. The floating toolbar. The fixed toolbar. The inserter. The inline inserter. And that’s just core. Wait until the plugins show up: Yoast has a panel AND a metabox on each post?
• Buttons that change their action contextually. The same icon that selects a ‘parent’ block from a nested block also could be used to convert your block. Then sometimes it appears as two separate icons?
• Getting back to the frontend from inside the Site Editor. How many clicks does it take to see the front-end of your site after editing a template? Why does the Site Editor remove the option to disable Fullscreen mode?
• Attempting any text decoration that covers more than one line. You want to bold two paragraphs at once? No such luck.
• Things that show up in the Full site editor (your post thumbnail, the categories) are still locked away in a sidebar on individual posts. Similarly, the title is shown in Gutenberg on the original post, but it’s not reflective of what I’ve done in my template (hide the title so I can control it on each individual page). Basically, if “gutenberg” in FSE knows the visual layout of the content, why doesn’t “gutenberg” when editing a post/page reflect this?
• Random intermittent block errors when you try to save. Never quite gone, though some of the ones I got went away after disabling some plugins.

I could keep going, but most of these tend to be nit-picky. The TLDR is that Gutenberg has A LOT going on, but almost no sense of narrative or cohesion that would make navigating it feel intuitive.

Yet, if I had to pick between Gutenberg and the Classic Editor for editing post or page content, at this point I’d choose Gutenberg every time. It really is an improvement, and I’m grateful I’m not still writing inside that TinyMCE box that served us all for so long. But the block editor has a long ways to go to bring back that sense of simplicity that a simple WYSIWYG offered.

Mobile writing experience.

For kicks, I’m writing this section from an iPhone. This is not recommended. Number one, I just personally hate typing on an iPhone. That has nothing to do with WordPress, but it may be coloring my views here slightly. Either way, the mobile editor typing experience is sluggish. Words often show up long after my fingers have moved on to the next. There’s some default expectations that simply aren’t working for me, like pressing the spacebar two times for a period. Lastly, I am finding it nearly impossible to scroll to the bottom of this post as I write it. It just keeps pushing me up or covering it with the keyboard.

Otherwise, I will say that the responsive ‘design’ of the editor is really nice. It looks great on my iPhone, as long as we ignore that classic Steve Jobs quote about design being ‘how something works’ not just how it looks. (And I’ll ignore that there’s two “sideways ellipses” icons always on my screen, one right on top of the other. I’m sure they both do… things?)

Custom CSS.

My biggest dealbreaker so far. The default WordPress site running FSE does not include a link to the Customizer. For now, I still see the ‘Customize’ link on the front-end of my site, which means there’s some plugin somewhere on the site that registers it’s settings in the Customizer. For most sites, however, no Customizer. You can access it by typing in the URL directly, but it no longer shows up in the UI anywhere for many users.

I have mixed feelings about the Customizer. While it clearly languished as a feature, I actually loved that it showed a real front-end preview, rather than this weird mixed-bag Gutenberg editor (it sort of looks like the front of your site, but doesn’t really). However, one must-have feature that I’m really missing is the ability to add my own CSS to the site. There’s just a few weird layout issues with this theme that I would love to override with a line or two of code. But without the Customizer and quick access to the ‘Additional CSS’ option (with an automatically reloading live view of any page of the site!), I’m actually not sure how to fix design issues that can’t be solved in Gutenberg. No custom CSS feels like a major impediment to running an FSE theme.

Options. Options Everywhere!

This sort of leads into my final complaint- there’s just so many damn options, but never the one you want. One of the newer features has been the addition of Spacing options, the ability to change the margins or padding between elements. The spacing options sort of worked, but there was some amount of padding in the original design that I just couldn’t remove from some elements. So why offer the setting? And I can’t change the markup or add my own CSS. So I was sort of stuck. That’s one of many examples of times where I just had to say ‘good enough’.

This is sort of my final question: in order to decide if Full Site Editing is any good, I’m really asking who is it good for?

Who is it good for?

The WordPress user base is vast and varied. There’s bloggers and influencers, affiliate marketers and small business owners, there’s web developers and web designers. Some people write code and build plugins, others use Figma or Sketch to create something never before seen. Some people outsource their site to a marketing agency or offshore development team, others try to install Woocommerce and just rock and roll with the Storefront Theme. Some users build their whole site in Elementor, others use WordPress as the application layer of static site or web app. That’s an amazing amount of versatility and unique approaches to the same chunk of code.

So who is WordPress 5.9, essentially Full Site Editing, for? Well, in my mind you need to have some very specific requirements for this to be useful:

• You need to be open-minded about the final product. If you’re trying to match an XD file or get a pixel-perfect design, this is not for you.
• But you need to have opinions about things like design. If you’re interested in changing the front-end of your site, modifying font sizes and page layouts, then this is for you. Of course, if you’re interested in doing those things AND you understand the SEO and accessibility implications of those choices, that’s even better.
• So you probably need to have a basic understanding of CSS concepts, like line-height, padding vs margin, font size hierarchy, responsive design, and so on. You need to have, or want to have, familiarity with these sorts of concepts, because that’s what you’re taking control of and modifying in the sea of settings panes.
• But you can’t plan on coding. If you want to write the CSS, you’re sort of out of luck.
• You need to have an understanding of the WordPress template hierarchy – what is an archive and why do I need it? What is a post versus a page?
• But you can’t expect to use PHP to build these templates anymore. So don’t plan on changing them.
• In summary- you need to have a solid understanding of all of the fundamentals of WordPress / web design but not plan on using those actual tools in the editor.

I’m not sure how easy it would be to pull off the stuff I typically do in my day job (often a lot of ACF and CPTs with some PHP and custom DBs and throw in some APIs, you know), but it would probably require a vast rethinking of our client relationships and expectations. For our work, this probably isn’t useful in any meaningful way.

So I’m not sure who meets these requirements, and why this was such a priority feature. Gutenberg phases 3 & 4, Google docs-style collaboration and multilingual support, sound much more exciting to me personally. But I’m just part of one of the many different types of WordPress users

I’m excited that this opens up a little more control to curious end users, but I’m less excited about it’s ability to turn that curiosity into real skill building. Geocities and Angelfire got me into web development because they let me peek under the hood and rewrite the HTML and CSS of a page. FSE is almost the opposite- ‘under the hood’ is a tangle of Javascript frameworks that even I struggle with understanding. There’s no translation to actual coding ability, even if it assumes a pretty decent amount of knowledge about coding and design concepts.

I’m a seasoned WordPress developer and FSE is the most constrained I’ve ever felt trying to get a basic site set up. But maybe I’m the old man yelling at the cloud, mad that I can’t just build it myself. And maybe there’s some potential here that I can’t even imagine, some new shift on the horizon. I sincerely hope that’s the case, but for now, FSE feels like a decent tool waiting on a real world use-case.

But I dig this new default theme.