I’m just starting to experiment with the new WordPress “Site Editor” (formerly “Full Site Editing”) to rebuild a client’s very simple site that is showing its age. I’m going to try informally “friction logging” the process, making note of things I got stuck on. I’ll try to highlight some good stuff too!

Heading into the process, my expectation is that based on the site I’m trying to recreate, it should be relatively easy and fast to get 90% of the way there. I have a few questions around responsiveness and how to manage content that shows up on some pages but not others (old-style widgets).

Two quick notes:

1. Even though it’s been retired, I use “FSE” throughout the post as an easy shorthand for the new site editing experience.
2. I have no doubt that a few things in this post are wrong. In fact, I know I went back to update or remove things I wrote that turned out to be untrue. Read this post as my experience rather than a tour of Site Editing.

Here we go!

Day 1: Getting Oriented

Getting Started Hiccup with Local

I’m using Local for my site development. I cloned a site based on a former “blueprint” I had saved. I ran into some issues with the blueprint—it was based on an old version of the site I wanted to clone and a new blueprint didn’t show the correct list of active plugins. I thought about reporting this on the Local community forum, but I found a few similar reports that had no responses so that seemed like a waste of time.

My site is now set up! I installed the Twenty Twenty Three theme which I’ll use to base my site on. I also installed the Create Block Theme plugin.

Using the Create Block Theme

When looking at how to create a block theme with the plugin, there are a lot of options. You can export your site, overwrite your changes of the active theme, create a style variation, or create a new copy of the theme. The explanations are pretty clear, but it’s really hard to know the pros and cons of various options. I decided to create a child theme so I will hopefully benefit from future fixes and improvements to Twenty Twenty Three.

I was very excited to try out the custom font features in the Create Block Theme plugin. I tried both removing fonts from the existing theme and adding new ones from Google fonts multiple times, but neither feature worked. I don’t know if this is a current bug, a compatibility issue with Local or Windows, or something else. I know manually adding fonts to block themes isn’t that hard, so I’m giving up on troubleshooting this. However, it’s still a big bummer and this seemed like a major convenience factor.

Update 3 Feb 2023: Thanks to franzaurus in the comments who tipped me off that I needed to run Local as an Administrator. That works! Remember, kids. Blog your problems.

Customizing the Theme

I jumped right into the site editor to customize my default Page template. I’m very tempted to try editing template files and theme.json which I honestly know more about, but part of this experience is to understand what’s possible right now without code.

I love my MRW Simplified Editor plugin, but I’m deactivating it for now. It turns off a number of features that the plugin removes make sense when using the Site Editor but not the post editor. If I’m going to regularly use the Site Editor, I’ll need to find a way to have different default settings for the Site Editor and post editor. That’s a headache for another day!

Default Page Template

I made some changes to the header, thought I had saved, and then reloaded the page accidentally. Unfortunately I hadn’t saved and the Site Editor doesn’t offer revisions or the autosaving that the block editor does. Big bummer, so I had to start over. Getting a passable header isn’t too hard but involves a lot of nested Group blocks (some with the Row setting).

When trying to drag the navigation block into a Group, I accidentally dragged the nested “Page List” block instead multiple times. This feels weird and unexpected.

Thank goodness for the List View. It’s the best feature, hands down, for making sense of what I’m seeing when I’m nested invisible groups or trying to select a block in the middle of a stack of nested blocks. The List View is staying open while I build this template and I’m very grateful for my monitor that can show a wider window to accommodate it.

Note to self: It’s weird when the default heading font sizes aren’t part of the type scale. There’s no way in Twenty Twenty Three to make paragraph text the same size as a Heading 2 with the default font size scale. That seems strange. I shouldn’t do that in my own themes. (I don’t think I do, but moving forward I’ll make it a point to check.)

I’m going to need a banner on each page that contains the page title and a custom piece of text tied to the page. The Cover block is perfect for this, but the current site stores the text snippet in a custom field. I’m not sure how to get this working yet. I’ll deal with this later. I can’t decide whether I want that banner to be visible on the page when editing the page or more “locked up” in the site template.

I set up the footer with a full-width background color. There’s a huge white gap at the bottom of the page and I don’t know how to get rid of it. (The div with the margin is always there by default, so there must be a custom style on that div.) The footer also has some vertical padding in it in both the Site Editor and Template Part editor, but there’s no padding when I preview the site. What gives?

A few more random thoughts:

• Why does the default mobile menu icon only have two lines!?!?!?! I do not like this at all. At least I can change it to three.
• There’s an option for the mobile menu toggle to be an icon or a label but not my preference of an icon and label.
• The icons for settings in the toolbar of the Search block are very small and not super clear. I can work backwards to what they are, but I really wish these just used text labels or were in the sidebar instead of the toolbar.
• Having to click “Save” twice when updating a Template and Template part at the same time provides some good context/warnings, but once I start moving quickly, I often forget to click “Save” twice. I kinda wish there was a way to avoid the second click after a while, just like the pre-publish sidebar in the post editor.
  • When you click the black square with the site icon (the WordPress by default) in the top-left corner, the behavior is different when you’re in the Site Editor vs. editing a post. I think there are plans to eventually iron this out, but the variable behavior is quite strange even when you know what to expect.

Global Styles

I’m ready to update the site colors now. I know I need to find “Global Styles” for this but it takes me a while to find it. I didn’t expect the styles to be part of the Template Editor. It feels like Styles are the foundation that then apply to Templates that then apply to Pages. Since Templates and Pages are separate, I assumed Styles would be too. But whatever, I found it behind the half-moon icon in the sidebar of the Template Editor. (Even though it’s trite and cliche, I think a paintbrush/palette icon would make more sense. Global Styles are very clearly the new version of the Customizer, so using the same icon would make sense in a lot of ways.)

I’m able to quickly replace the default color palette. I wish I could remove the default colors. I’m not sure if I’ll add any custom colors or not. I’ll come back for that.

I then go to try to customize the buttons used across multiple blocks. I think that works, but it doesn’t seem to be fully reflected by the Search block.

Default Page Template

I’m about 90% sure that I want the global default banner included in the page’s content template rather than the global “Page Template” so that it can be edited separately for each page (or even removed when necessary). I was hoping this would be possible through the interface, but I don’t think it is. To have default blocks when creating a new Page, it seems to still require using the block_editor_settings_all filter.

And so also a quick shoutout to Block Locking. I know this feature is going to be super useful for this purpose, and so I’m very excited to build it out and see my first locked blocks in action on a live site. Getting to train editors on this site is going to be incredibly interesting, but I’m optimistic that features like this will be very positive for them.

Responsiveness and Headers

Back to modifying the global page template, I’m really seeing the need for some minor responsive settings in the site editor. The problem with this need is that everyone’s “minor” features will be different, and I do fear the added complexity this requires.

As I write this, it occurs to me that I should consider using columns for this layout since those are responsive by default. I do love flexbox and find it very useful for this exact purpose when coding my own header designs, but in this case, Columns may be a better fit.

For me, the one responsive thing I want is to a set a breakpoint for when my row block does and doesn’t require wrapping, so that the logo is stacked above the menu on small screens and side-by-side on larger screens. I wonder if the “allow wrapping” setting should be responsive-by-default like columns are, e.g. only apply the setting above a certain width (probably 600px to match other block breakpoints).

Day 2: Good progress mixed with some pretty weird UX and bugs

I’m starting by overwriting the theme I created on Day 1 with the changes I’ve since made in the Global Styles (and template?) editors. I hope that’s the right move. My goal is to make this a portable theme that I can install on the site we’re updating.

I had to make a quick little [[year]] shortcode to show an always-right copyright date. Not sure about doing that vs. putting a dynamic value in a template part (which I don’t think is possible right now because they are plain HTML?).

First Custom CSS (I tried to avoid it)

Back to that mysterious spacing below the footer. That seems to be a hard-coded rule that uses the --wp--style--root--padding-bottom CSS custom property. I’m going to try to set custom properties as much as possible for future compatibility with core CSS changes. I searched for a way to change this property with Global Styles or theme.json but couldn’t find it, so I had to add something to style.css. GOTCHA! Style.css isn’t enqueued by default because there’s not even a functions.php by default in FSE themes. Added that and we’re good to go.

The Global Banner

Now that I have custom CSS and I’ve had time to mull over whether to include the site-wide banner that includes the page title and excerpt in it, I’m going back to Plan A: putting it into the default global Page template and using the Excerpt block. This has big advantages:

1. We can choose to change the banner image site-wide
2. We can update the banner styles site-wide

To make this work, I’ll need to:

1. Add a “plain” default template that only shows the title without the banner
2. Add custom CSS (or use a filter?) to remove the read more link

Weird issue: You can’t set the Excerpt to be bold or italic like it is on the current site. I’ll have to use more CSS. I tried to see if styles.blocks.core/post-excerpt.elements.p could be used to set font-weight: bold but that either doesn’t work or I made a mistake somewhere. Adding this to style.css.

I have to use functions.php to add Excerpt support for pages, but I have it working now!

Saving is SUPER confusing when you start navigating the site editor

I decided I want to move the banner to a Template Part and put that part in the template. I start bouncing around between the template and new template part and don’t save my work (I have nothing really to save yet). Once I’m ready to save, I see that hitting “Save” will save all the Templates and Template parts I have been working on, not just the one that I’m looking at on my screen. This seems like it’s begging for trouble. Saving something that is off-screen and has been intentionally left is not expected behavior. in fact, leaving without saving is often one of the safest ways to back out of unwanted changes.

Bug: Site Logo Width

I’ve completed converting my Row Block to a 25/75 Columns block so that I can get more-predictable responsive behavior in my header.

I discover that the Site Logo block has to have an absolute value width (e.g. 200px) and there is no max-width: 100%; style in the Site Editor to constrain it to it’s parent width. There is a style for that on the front-end, so this is a Site Editor issue and not a theme issue (though maybe core should include img {max-width: 100%:} by default in all FSE themes?).

Trying again with fonts

The Create Block Theme plugin pushed out a number of updates since the last time I tried it. I think I just updated from 1.3.7 to 1.4.0. I give editing fonts another try and it still doesn’t work. Bummer!

I wonder if you can’t manage custom fonts if you’re in a Child Theme? I still can’t remove or add new Google Fonts.

I add Nunito Sans to the child theme’s assets/fonts folder and define settings.typography.fontFamilies with the custom fontFace values. This works, although it: 1) overwrites all the fonts from the parent theme and 2) creates a duplicate setting in the Font Family setting where Default and Nunito Sans are now the same. How do I set the default font-family setting in an FSE theme?

Update: see update about this problem.

Custom Template Names?

I made two custom templates after I set up the banner in the default one. I was able to give the templates the names of “Page without banner” and “Page without title” (the latter mostly for the home page). Sometime between then and when I resaved my theme using Create Block Theme, the template names turned into their internal slugs like “wp-custom-template-page-without-banner”. I don’t think it’s possible to rename them in the Site Editor UI, so I had to manually add them in the customTemplates section of my theme.json so I could give them names. The same thing happened to the custom Banner Template Part. Annoying.

There is also some really weird bug where adding a templatePart in theme.json will lower-case one (and only one) templatePart from the parent theme. I then add that templatePart to my theme.json so it has the right casing and a new template part goes lower case.

Conclusion

I’m going to stop here. Here’s what I did:

• Explored the Create Block Theme plugin and used it to make a child theme. I then continued using that plugin to save the changes I made to the child theme in the Site Editor back to the child theme. That worked pretty well.
• I was able to recreate a simple site’s design to a satisfactory level, and this included some design and accessibility improvements over the old one.
• Getting the site how I wanted required custom modifications to theme.json, style.css (only twice), and functions.php. It’s clear that my prior knowledge of WordPress and following the FSE work from afar helped me get started and go farther than a less-technical or familiar user.

Here’s what the result looked like. The “Before” is on the right and the “After” is on the left. I know that’s a little weird.

Overall, I’d say I easily cleared the “90% of what I want” goal I set out for myself. However, I still have questions around what issues I’ve overlooked so far, paths I’ve taken that may back me into corners, and potential features or techniques I overlooked. Like I said, it’s clear my existing knowledge of WordPress development made it possible for me to get this far as quickly as I did (~4 hours, including this post).

Like many other places in the block editor, there are still quite a few “paper cuts”. None prevent you from continuing, but they can really build up and turn into frustration after a couple hours of work. The “Beta” label still feels about right to me. That said, I think I can make it work for this site, and so I’m pushing forward to put this theme on the site and see how much content cleanup I have to do to get it working.