So here it is – my new website, in all its unglory. And it’s completely built with Full Site Editing. Here’s the how and why.
For my own website, I always like to use new tools and techniques – to try them out and get a feeling for them. I’ve used Hugo and Gatsby in the past. For my new website, I wanted to try and build everything with WordPress’ new Full Site Editing, with as little code as possible.
That’s a complete different approach to how I normally build sites for customers, but I wanted to try FSE for a few reasons:
- My needs are very limited, and I’m okay with some trade-offs,
- I’ve never used FSE except for the FSE outreach program and wanted to see it in a real-world environment,
- I wanted to test the Frost theme, because the author (Brian Gardner) and WP Engine have been a big help in block editor education,
- I’m not a designer, and having a well pre-designed theme and flexible patterns is exactly what I need.
How I went about it
The Theme
I early on chose the Frost theme, an alternative was the Ollie theme. I’m using WordPress 6.3 (RC2) and the Gutenberg Plugin with version 16.3.
The Frost theme has some great patterns and style variations. Setting my own brand colors in the color palette immediately made the site look very well.
Patterns & Blocks
Most of the patterns use the core columns block, which has responsive wrapping built-in. But I wanted to use the group block with its layout features, which gives me more possibilities regarding aligning and other flex-options. This means, that for wrapping these columns on mobile, I had to write custom CSS. I’ve just built a sm:flex-column helper class which I apply to those groups/rows. I probably could have built a custom control for groups, but just didn’t want to bother.
Core blocks have come a long way and the support for flex-layouts, margins, paddings and block-gap make laying out sites really easy. I just wished auto was a valid value for those fields.
For listing my projects on the front page I built a pattern with core group blocks. Saving it in the new pattern library directly from the UI is a breeze.
Site Editor
Editing the site templates (e.g. for single-posts, homepage) actually worked really well. I still find that it takes a few too many clicks to really get into editing and the new feature where I can edit a page directly in the site editor still seems kind of confusing, but it works.
For this simple website template parts and templates work well together. Although I can’t find a way to include a self-built template-part into a template – there seems to be now “template-part” block (or I just couldn’t find it).
The global styles interface is great for managing colors and fonts. Combine it with the style book, and it’s a great way to customize a block theme to your style.
The custom CSS I’ve had to add is mainly for responsive styles (e.g. wrapping flex rows to columns) or applying auto-margins to some things to align them better.
Multilanguage
For the first time I’m using Polylang (have been using WPML ever since) and it seems to integrate well with the block editor and site editor. Polylang can only translate template parts (not templates) – I don’t know if that is a shortcoming of Polylang or the FSE system (AFAIK both are posts with a custom post type).
Third Party Blocks
I’ve actually only added one third party block: The great Icon Block by Nick Diego. Its quality and implementation make it feel like a core block – just in line with his Social Sharing Block. Oh, how good plugins can be, when they just try to do things the WordPress way.
What I learned about full site editing
All in all, the process went really smooth, and I got the website to a satisfying point very quickly. One reason for that for sure were my low expectations in comparison to a high-profile client site.
Low Code is possible, no code probably not
I’ve worked with Webflow in the past for a few smaller sites. Their UI IMHO is built for developers, because it’s mainly a UI representation of (nearly) all CSS properties, and they are named the same. WordPress is miles away from this, even from something like Elementor.
Still, there are always things which require some custom CSS code, even if it’s just a few lines. Adding auto-margin is a pain, which GeneratePress has solved well for the block editor.
I’m not advocating that low-/no-code is the right direction for WordPress, but it certainly is the direction Automattic wants to push.
Everything’s in the database
When building the site completely in the site editor, everything (including styles, custom CSS, templates, template-parts, patterns, …) is stored in the database. Of course, I can export the whole block theme and save it as a folder. This way I could start to build everything in the site editor and then work on the code files from there.
For my website, I’m okay with everything being in the database and using revisions + backups. For larger sites, I will always prefer files which can be committed to git and have a file history. Fortunately, that’s absolutely possible.
The site editor has no way to add custom CSS properties or more (nested) settings for blocks, that’s something you would have to do in theme.json. Right now I’m customizing the “Frost” theme directly, which I think is okay since all changes are stored in the database (and no original theme files get overwritten) – but it still feels kind of weird, because for a long time “make a child theme!” was the #1 rule in WordPress theming.
Writing in the Block Editor is fun
I’ve mostly used the editor as a layout/landing-page building tool. My clients have some blog/news sections, but they are also very media-heavy. Writing text-focused blog posts directly in the editor is a first for me but feels really nice.
The editor can be fast and well to use
If you use no or few block-plugins which are also well programmed, the block editor keeps its vanilla performance and is great to use. As soon as you have a lot of 3rd party plugins or a lot of nested blocks, performance seems to degrade.
Conclusion
So these are my first impressions in building a small website using Full Site Editing. I have to admit, all in all, I was really surprised how well it went. Let’s see if that feeling stays.