Category Archives: UI

WordPress Full-Site Editing

Maybe you heard about it. Do you want it? Not sure? This post might help you decide.

Not wanting to fall behind in the world of WordPress Full-Site Editing, I did a deep dive into the current state of free themes. If you already dipped your toe into Gutenberg (aka the Block Editor) or jumped in head-first, then you’re somewhat up to date with the current state of WordPress. I say “somewhat” because Full-Site Editing seems like the next stage in terms of innovation for WordPress.

Whether or not that means anything for your blog or business, that’s up to you, not the core WordPress developers. Fortunately, all of this is optional. You could just keep using the Classic Editor forever and continue grinding out content. Frankly, that’s what I plan to do most of the time. But I still need to keep up with the latest advancements. That’s my job, is it not?

At this point I feel confident I understand Full-Site Editing in WordPress, and I think it’s worth giving it a try. Is it for everyone?

Full-Site Editing might be for you, if you’re…

– Patient and comfortable learning a new UI.
– Creative and want to design your own theme.
– Have a fast PC that won’t choke on lots of Javascript code.
– Have a 5+ Mbps Internet connection.
– Don’t need “pixel perfect” design.
– OK using the provided widgets, working within the limits of Gutenberg.
– Have time to spare. DIY costs less than hiring a designer or developer.

Full-Site Editing is not for you, if you’re…

– Already very comfortable with the Classic WordPress editor.
– Heavily invested in your existing theme and/or plugins.
– Going to use HTML in your blog posts.
– Using a slow PC with slow Internet.
– Going to have someone else design your theme.
– Don’t want Gutenberg in the way of your specific vision, because you are a developer, or can afford to hire one. For example, you don’t like the default navigation widget provided by WordPress Full-Site Editing.

Can I switch back to the Classic Editor?

Without going into every possible scenario, I would assume Gutenberg with Full-Site Editing is a one way ticket. The deeper you get into it, the harder it will be to get back out. One way to think about it, Gutenberg will probably work best with themes that were made for Gutenberg. Seems like WordPress engineers did a pretty good job getting Gutenberg to work in their own “Automattic” themes. (Granted, the technology is “open source” but it’s not widely used yet.) If you’re not sure, contact me and tell me your specific situation.

It’s not super hard to remove all the Gutenberg code from your content, to get back to the Classic Editor, but if you have a lot of blog posts created with Gutenberg, it could take a while to redo all your posts to “get back to normal.” And of course it depends on how many Gutenberg widgets you used.

Will Gutenberg content work with non-Gutenberg themes?

Probably not, the content will look wonky, especially in terms of the spacing between elements.

What is Full-Site Editing?

First you’ll need a FSE theme. Probably Blockbase or a derivative (child theme) like Videomaker. Then enable Gutenberg, disable the Classic Editor, and click “Edit site” and that drops you into the Full-Site Editor. Technically this is still “beta” software, but it does work. It’s somewhat like using the Gutenberg content editor for all of your pages, for your entire blog. At the very least, you’ll be editing:

– The homepage (index)
– The single page (blog post)
– The header
– The footer

To the left of your design layout you can turn on a “List View” that is somewhat like the SquareSpace user interface. “List View” shows you all the blocks and their place in the hierarchy of the page. For example, your list should look something like this, for the top level of your homepage…

– header
— group (logo, title, navigation, etc.)
– query loop (your posts)
– footer
— group (copyright, mailing address, etc.)

The “group” in List View is similar to the “div” in HTML, same concept, it’s an empty container. A group can also be a “row” for stacking blocks horizontally. Then you can have groups within groups within groups and that’s where things get a little confusing at times. In terms of the structure, it’s just like writing code, but you’re doing it visually with the GUI. The result, you might save time, but you have less control over what happens to the page.

Another way to think about Full-Site Editing, it’s similar to using the Hello Theme by Elementor. What is the Hello Theme? It’s the most minimal WordPress theme possible that gets WordPress out of the way, handing control over to Elementor. All the style code in “Hello Theme” is setup to work specifically with the Elementor plugin page editor. Hello Theme by Elementor seems like the equivalent of Blockbase for WordPress.

Full-Site Editing vs. Elementor, Who Wins?

Elementor wins, for now. I was skeptical at first, but I had to use Elementor for part of my work at SparkCognition. Although I was the “Senior Web Developer” for, the job title was misleading. I was the most experienced WordPress architecture expert at the company (the only WordPress expert they had) and yet I was left out of architecture decisions, my role buried under four levels of management. In any case, the decision was made to use Elementor for some pages, mainly because the marketing team didn’t know any HTML and they wanted to build landing pages for products and ad campaigns.

Why Elementor is Better

1. Widgets are easier to access, and so far Elementor offers more functionality. Over time, this could change, as the WordPress ecosystem is relatively larger than the Elementor ecosystem. But for now, I think Elementor is superior in functionality.

2. Concepts are more 1-to-1 with HTML. Therefore it’s easier for a developer to jump in and get to work. For example, you can always do padding and margins in Elementor. With WordPress Full-Site Editing, you only get padding as an option in some widgets, and you get no margins. Instead of using a top or bottom margin in FSE, you’ll probably use “spacer” blocks.

On the other hand, at SparkCognition I found it was a chore to get any consistency between various Elementor pages, because one page might use a percentage margin, another page might use a pixel margin, and another page might use an ’em’ margin. The marketing team had no clue what the difference was, and was not interested in learning HTML from me. So what can you do?

With Great Power Comes Great Responsibilitya) Ignore the problem, because nobody seems to care.

b) Convince everyone to use a standard page margin.

In other words, Elementor offers a little more visual control. And with more power comes more responsibility. Depending on your point of view, this could be seen as an advantage for WordPress Full-Site Editing. However, a massive open source project like WordPress tends to get more complicated over time as more developers contribute more code. So this might be a short-term advantage for Full-Site Editing that erodes over time.

With FSE I’m spending more time looking around for the option to do what I want. For example, the “comments” widget block doesn’t offer much customization. So I ended up making the necessary changes with CSS. Of course, this will improve over time.

Overall, I think Elementor’s UI is a little more intuitive and I felt more productive using it.

3. I found it really easy to add custom code into Elementor, including Javascript. While this subverts your version control system, and all the stages of your build process, it is incredibly convenient and practical for making changes on-the-fly, which is partly the point of using Elementor in the first place, to take back control from slow developers that are often buried under layers and layers of cumbersome architecture. The reality is, inexperienced engineers tend to over-engineer everything they get their hands on, and this is a real pain point for getting anything done in a reasonable amount of time.

Take Action

In short, if you want to use WordPress Full-Site Editing, or not, I fully support your decision. I can set you up with either system: Classic Editor, Full-Site Gutenberg Blocks, or Elementor with the Hello Theme. They all have advantages and disadvantages. Contact me to discuss your specific situation. Maybe I can help you decide.