More logging! After getting the basic site template set up, now I needed to handle some more advanced layout stuff involving Custom Post Types and taxonomies.

If you aren’t sure what this is, read the introduction of that last link and that’ll get you up to speed.

Same caveat as last time: There are likely things here that are either wrong, suboptimal, or already have fixes in the works. This is a log of my experience from my perspective while doing client work and not an exhaustively researched Site Editor best practices guide.

Custom Post Type Templates

The site uses a custom post type that needs a custom template. It was easy enough to figure out how to define the single post template for the CPT. I was able to add the bit of metadata required that comes from two related taxonomies. There’s not a good way to associate a label with a taxonomy terms block. Ideally, there’d be an optional, built-in label so we could have output something like this:

<p id="term-label-1">Terms:</p>
<ul aria-labelledby="term-label-1">
    <li><a href="#">Term</a></li>
</ul>

Another missing feature: I want to show the Featured Image at a small size in the post body. As best I can tell, there’s no image size setting for the Featured Image block. Can that possibly be right?

This template also has a navigation menu in the sidebar. It looks like the menu—and also menu items—doesn’t support a border setting. If I really want that, I guess I can use a Group block, though that feels unfeasible for each menu item. Anything we can do to avoid nested blocks is good given the difficulty that can quickly add to the editor when trying to select blocks.

Custom Post Type Archive

I do not love “Read More” links and don’t want them. I eventually realize that no “Read More” link is the default of this template when using the Excerpt block. The faint “Add ‘read more’ link text” space in the editor confused me into thinking that there was a “Read More” link by default that I could change the wording of. I wonder if “Optional read more text” would be better.

A quick test of the Read More function shows me that it sadly creates an immediate accessibility problem. Every link’s text is identical. It would be much better if the output included the post’s title as hidden screen reader text.

There’s a similar issue where a linked Featured Image creates a redundant link (to the linked title in my case). Because of how the Featured Image alt text is set, the link text will be the alt text of the image which is not correct, it should be the post title.

I’m adding the two taxonomies to the post template on the archive page. I wish that I could insert a general “Taxonomy” widget and then change taxonomies. That would let me do things like Duplicate one set of blocks including one taxonomy and then switch the taxonomy to use the other.

Back to my taxonomy labeling issue from before. On the Archive template, I can add a Prefix and Suffix to my taxonomy terms. This didn’t seem to be an option on the single template and it’s really fidgety to edit even when I can see it. This gives me output that isn’t really any better for accessibility than what I can get with a paragraph and taxonomy block.

Spacing woes

The Twenty Twenty Three spacing scale is customized and only uses 5 steps. Five is not enough to make the type of design I’m hoping for, especially on the lower end of the scale where there is nothing available in spacing between 0 and 1.5rem. I’m sad to discover that setting settings.spacing.spacingScale in theme.json doesn’t seem able to override the custom spacingSizes in the parent theme. I can imagine how that works out, but it’s still disappointing. This ended up requiring a spreadsheet’s worth of math to build my own scale, but it’s working now!

I’ve had a slight sense of doom since the moment I decided to take the Child Theme route with the Create Block Theme plugin. This type of downside feels like it’s quickly balancing against any potential upsides of future updates. I suppose I won’t really know if this is the right approach for another year or two, but my doubts about the child theme route are growing.

Taxonomy templates

I want my two custom taxonomy templates to match the custom post type template. There doesn’t seem to be a way to pick which existing template you’d like to clone when starting a new template. This would be really nice:

1. Select “New Template”
2. Pick Custom Post Type Archive
3. Get to select from existing Archive templates (post type, taxonomy, etc.) as starting points

As I write this, I realize that I can at least put the body of all three of those template into a Template Part so I only have to edit them in one place.

As a developer, I’m constantly thinking about DRY—Don’t Repeat Yourself—principles, but I know from experience that your “average” user doesn’t think about then when confronted with these page builder style tools. In fact they often end up quite WET—Write Everything Twice… or Thrice?

Upon creating my Template Part, I couldn’t find a way to insert it into my template. I eventually added a “Template Part” block and then was able to select it. Upon refreshing the Site Editor, the new Template Part was available in the inserter. So it seems like it’s an issue with the Block Inserter not being aware of new Template Parts until a new page load.

theme.json wins

I wanted my archive post titles to be underlined. The Twenty Twenty Three theme had other ideas. I applied the “Underline” style to my heading links but they lost out to the theme.json styles from styles.blocks.core\post-title.elements.link. I added styles to my child theme’s theme.json to flip the styles and “win”.

I’m a big proponent of making CSS so that blocks “just work”, but I’m still a little surprised that the setting here didn’t take precedence.

I don’t want auto excerpts

In my custom page banner that includes the Title and Excerpt, I’ve run into an issue. I want the excerpt to be optional. Unfortunately, the excerpt block will auto-truncate the body if there’s no excerpt set. This is standard WP behavior, but I’ll often work around it in my templates with a has_excerpt() check. I’m not sure what the right block solution should be, but a “Auto-generate excerpt” checkbox could be an awfully handy option.

I’m going to punt on this for now and let the client decide if they want to set excerpts for all pages, set a custom template when they don’t want the excerpt, or have me set up some funky magic (either a filter or some combination of body class and CSS style).

After discussion, I decided to filter the excerpt. I quickly learned that this has to be done with the get_the_excerpt filter, since the the_excerpt filter isn’t applied to the Excerpt block for some reason. There’s a two-year-old issue for this weird inconsistency.

Burned by menu logic

I love that I can pull in an existing “classic” menu into a navigation block. I do not love that it is “imported”, and so any lasting connection is immediately severed. I spent 5 minutes updating my menu on Appearance > Menus only to realize that it wouldn’t update my “Main Menu” that was now in the block system.

Preventing term block links

On my post type archive template, I don’t want my taxonomy term blocks to include links. There’s no option to do that, so I added some CSS with pointer-events: none to make up for this missing option.

“Edit Site” Confusion

I’ve now been working in this Site Editor interface for 6+ hours and I’m still half confused every time I click “Edit Site”. I’m taking to the global template editor, but it shows the home page content in the template. I always pause and have to figure out why I’m looking at the home page when I don’t expect that.

A better default would probably be to show the global Index template with placeholder content or my preference, the Templates page. Once I completed designing my global template, I have a ton of tweaking of other templates. So what initially half-way made sense is now just an annoying interstitial screen I have to skip past on the way to the Templates list page.

Update February 21, 2023: After I shared this on Mastodon, Brian Coords shared a little plugin that adds additional links to the admin bar for editing Template Parts on that page. I’m excited to try that out and see if it makes this issue go away!

Template Images and Local Development

I have a site logo and a banner image in my theme. Those image sources get hard-coded into the HTML templates. That means they’re either broken on the live staging site or on my local copy of the site. The BE Media From Production plugin might solve this for me, but it doesn’t feel like something that should need a plugin. Normally, I would either be getting the image source from a database where I can find-and-replace URLs or a dynamic function get wp_get_attachment_image which returns the dynamic site URL. I know dynamic information in HTML templates has been discussed quite a bit, but I’m not sure what I’m supposed to be doing for these images to make my development site look like the live one without some fancy magic.

Media & Text Padding

This isn’t specific to FSE, but I’ve always thought the default styles for padding on the Media & Text block were a little odd. They essentially assume your block has padding, rather than only applying padding when there’s a background. These rules mostly get the block to where I’d want it:

@media (max-width: 600px) {
	.wp-block-media-text:not(.has-background) .wp-block-media-text__content {
		padding-inline: 0;
	}
}
@media (min-width: 600px) {
	.wp-block-media-text:not(.has-media-on-the-right):not(.has-background) .wp-block-media-text__content {
		padding-right: 0;
	}
	.wp-block-media-text.has-media-on-the-right:not(.has-background) .wp-block-media-text__content {
		padding-left: 0;
	}
	.wp-block-media-text__content:not(.has-background) > :first-child {
		margin-top: 0;
	}
	.wp-block-media-text__content:not(.has-background) > :last-child {
		margin-bottom: 0;
	}
}

Editor Styles

I am surprised the degree to which the editor styles don’t match the front-end styles in Twenty Twenty Three. There aren’t a ton of mismatches, but there are enough that I notice. In particular, the padding for blocks with backgrounds differs on the front and back end. But maybe most surprising, the quote block has a left border in the editor but not on the front end. Weird! That is the kind of stuff I put a ton of effort into when I make a custom theme and I expected that level of attention to detail in a core default theme.

Core Gallery Columns Weirdness

I’ve never loved that when galleries with columns end with an incomplete last row, the items stretch. In a four column gallery with only one item in the last row, it looks very not good. Here’s your fix:

/* Don't stretch images in galleries with columns */
.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
}

Stacking Context Bug!

I’m not sure what’s going on, but sometimes the submenu in the banner of my template gets hidden behind the next section when I’m editing it:

There are three more items after that “Donate” submenu item hidden behind the banner in the Site Editor.

No way to front-end

Interestingly, you can enter the Site Editor by clicking “Edit Site” in the Admin Bar, but when you want to get back to the front-end of your site, there’s no equivalent button! The sidebar menu can take you back to the Dashboard, but there’s no way “back”. It’s kind of like one-way dead-end in which you can’t turn around.

Reusable blocks can’t have alignment?

I made a reusable block with a navigation menu in a group block. Weirdly, it has full alignment but that doesn’t work when it’s shown in the Block Editor for a page. I’m not sure why, but that really breaks the WYSIWYG nature that is often a strong point of the block editor.

Template Parts for Custom Post Types

When editing a post type or post type archive template, the editor knows to show live example data from the correct post type. However, when you abstract a Template Part for use only with the various custom post type templates, you no longer see the correct post type. For example, my “Projects Body” Template Part that includes taxonomies only associated with the Project post type shows Posts as example data when I’m editing the template part. For the taxonomy terms block, that’s a real problem because it means you don’t see any live data to reflect things like typography styles. Even weirder, different demo posts in the same query loop show different placeholders for the missing terms. Some say “No years” or “No grants” (the taxonomy names), while others just say “Term items not found.”

How is image alignment still the way it is?

This is a long-term complaint I have, but I’ll just voice it again because I find it so surprising. By default in WordPress with any new block theme, right- or left-aligning images will align the image relative to the browser window and not the width of the content.

The “fix” is to put the image and surrounding content into a Group block, but that requires you to know the fix and I certainly wouldn’t expect an editor to guess that. Further, it clutters up the block editor with hidden parent blocks that are often a recipe for confusion.

I just really think there should be a better default image alignment experience.

Where should I be working?

Once I got to the phase of building out the staging site for the client to review (and cleaning up tons of old content built in the classic editor), I found it hard to know what workflow I wanted. The Site Editor is right there on the site, and so changes I would normally make in CSS can be done live on the production server. But that then means I need to start syncing my theme in two directions:

1. Server-to-local: Changes to theme.json, Templates, and Template Parts that I save to the theme with the Create Block Theme plugin.
2. Local-to-server: Changes to CSS, functions.php, or tasks like renaming template files that can be easier on local.

This scares me and feels like a recipe for overwriting a change I like. With a mix of site design in the database and theme files, doing things like backups or using version control gets a little weird. One thing I know that I like is continuing to save my Site Editor changes back to the theme file so I don’t risk losing them. Saving the final version of the theme to the server will be a good way to help me restore the site’s design to its intended form should a future site editor ever get too adventurous.

Conclusion: Interesting. Good for some stuff. Glad I know how to edit theme files.

That about wraps up the first draft of the site. Following all that work, I have a fairly long but unsurprising home page, a nice custom page template with a parallax scrolling banner that contains the page excerpt, and some custom templates for a custom post type and two custom taxonomies.

As I had suspected heading into this project, this site was able to come together because it was fairly simple. Full-width sections on an otherwise-white background with lots of white-space. There aren’t angles, curves, or complex information anywhere on the site.

And despite all that, as I write this, I needed around 80 lines of CSS to make up for things that can’t be done in theme.json or other annoyances with default WordPress styles. This site would have been much farther from what I hoped for if I didn’t understand the template hierarchy, DRY (Don’t Repeat Yourself) principles I could apply to templates in the Site Editor, and a good understanding of how block themes work.

Much as I concluded at the end of my last post, there’s a lot of promising stuff here, but I can only see myself using it again for small projects or quick personal sites. For anything that requires more complex layouts, tighter standardization across blocks (think implementing a design system), or advanced template features that require PHP I would still reach for a hybrid theme and don’t see that changing for years.