First adventure in WordPress Full-Site Editing (FSE)

John Coonrod
CodeX
Published in
3 min readMay 30, 2022

--

Screenshot of my first FSE — mcld.org

No sooner had I built several sites with hand-crafted PHP classic themes than — boom — the new Gutenberg Full-Site editor appeared. Did I really need to learn this? And what to do with all my nicely tweaked CSS?

Well, of course I did. After watching several of the encouraging YouTube videos by Jamie Marsland, I exported a site to my local machine and went with the Blockbase theme as a started in WordPress 6.0.

Groups. Who knew?

I had a beginner’s notion of the “Group” block — I saw it appearing now and then when looking at the Blocks list. What I didn’t know is that they get to have more style settings than blocks. For instance, I had a dark blue background and white text in my footer, but how to change the color of the links? The friendly Blockbase support person showed me where it was hiding behind three dots in the text settings of the group block.

The Hidden Customizer is your friend

You will notice there is no link to use the theme customizer in Blockbase — but it is still there! You can go to wp-admin/customize.php and get access to its ability to enter Additional CSS. This is very handy if you’ve added css for things like different colorful borders, etc. The effect of the CSS shows up in the Customizer window and the life site but not in the Gutenberg editor (annoyingly).

Exporting a theme, but not settings

One thing I had to get my head around was that while you can create new templates and export the theme to import into your live site, you won’t get any of the block or site settings — those go into the database, not the theme package. So, while my local installation was nice for learning, in my case when I went to my live site, I could have just started with a fresh copy of Blockbase and repeated the steps to set up the header, footer and even the site-wide custom colors.

If I had frozen the database itself, I could have exported and imported it with all those settings, but I’m pretty sure the contents in the live site had changed since my experiment. The nice thing about Blockbase is that I could accept a lot of its defaults. The Site Editor settings apply so quickly, it was not a problem really.

Changing page and post widths

I think the single most import thing that wasn’t obvious to me was how to change widths. Post Content is a block in the Single Post template. When you edit it, you see

The default width in Blockbase is quite narrow in desktop mode. Clicking the “inherit” button off reveals how to change the settings, which I changed to 900px

Cutting and Pasting Blocks

With 6.0 you can cut and paste multiple blocks, and I was hoping I could do that with the site editor open in both the local and live site — but that did not seem to work, even with individual blocks. I could cut and paste text but not blocks. If someone know how to do it, I’ll update this page.

Remaining Annoyances

The biggest annoyance I believe people are finding with FSE is that the Gutenberg editor has a width of 620px even on pages set to be wide or full width. Hopefully they will fix this in 6.1!

Wanted: an FSE Cheat Sheet

The documentation of Full-Site Editing on Wordpress.org is very thorough and seems to be nicely up to date, but it really forces you to learn things in depth using their pedagogy. Personally, I prefer a cheat sheet which I hope somebody other than me will create.

--

--