Overview

This post summarizes the top pieces of feedback of the current experience to help inform the next steps and as a follow-up to various previous editions. Compared to the previous related posts (March 2021, July 2021), this one seeks to focus on more specific and common items different types of folks might try to accomplish rather than more general themes that continue to come up. This is to help provide more specifics to designers and developers working on these various related features. The aim is that by examining FSE from the vantage point of common flows, contributors can improve specific features in a way that brings everything together intuitively. For example, this doesn’t go into depth around problems that come up when using FSE at scale, like needing to have more ability to sort templates. 

Keep in mind that this post is simply a snapshot in time and is inherently going to leave out aspects of the experience that haven’t been the subject of calls for testing. It’s also not going to go into great detail about all of the hard work already done to address these items, whether through PRs or sharing designs that offer solutions.

If you want a more in-depth look at feedback across the testing calls and a full summary of all issues rather than a sampling, please review the summary posts. If you want to help give feedback, join the calls for testing or test whenever you’d like!

Provide a better setup state when creating a new template or template part

When creating a new template or template part, the initial options offered to users are quite limited and, after creation, it’s not clear how to fully apply what was just created across the site. Tied to this, the difference between the Template editor in the Site Editor vs the Post Editor continues to be jarring with folks not clear around when and how best to use each at a glance. 

• Provide better initial default options after creating a template or template part. This could be prioritizing patterns or starting with the closest template in the template hierarchy. 
• Show which templates use a given template part.
• When replacing the current template part,  make it clearer which one is currently in use. 
• Unless you add a container blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. when creating a new template, any text runs to the edges. Below is a quick video example:

The most immediate issue when creating a new author template is that it was devoid of default blocks. Where was the—at minimum—headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and footer? The empty template would make sense if I was building something from scratch. However, this is not a from-scratch project. It was built from a theme with existing archive.htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. and index.html files, ancestors in the template hierarchy. Since the author template is merely a more specific version of the archive template, it should be a copy of its “parent” in the hierarchy. Users will most likely want to make modifications rather than start from scratch. Using an ancestor template as a base means that they are less likely to unnecessarily deviate from the existing layout, especially with more complex designs.

@greenshady in this WP Tavern article.

Unify the Template Editor in the Post Editor with the Site Editor

For example, a template for posts/pages can only be added via the Template Editor in the Post Editor rather than in the Site Editor. This difference in functionality isn’t made clear at any point though, leading some to not be aware of the Template Editor in the Post Editor at all. Below is a short video discussing some of the differences:

The slightly different variations of the template editing screen were just too confusing for me. As someone who has been trying to work in the FSE for a few months now, I was completely thrown off by the slightly different screen you got when you launch the template editor directly from a post vs the template editor you get when you go to edit site, and then select a template to edit.

@​​beckej in this comment.

Improve the process of applying and viewing a template in action

After creating a new template that you might want to use for a page/post, it’s not clear that you have to assign it to that post/page. To ease this workflow, after a user creates a new template, they could be prompted to apply it to all child pages of a parent page. The same is true for creating new template parts and needing to actually apply them to each template you might want to use it in. 

On a related note, after someone creates an author template or date template, they would have to know the relative link for their site to see the template in action. It would be great to connect the dots a bit more in the interface so that folks can see their changes after a new template has been created. This came up during a recent call for testing around creating an author template with folks not knowing how to see the template without being linked to an example.

I really do not know which template affects which pages/posts. So I assume that a Page template affects all the pages. 

@paaljoachim in this comment.

Make it clearer that editing a template part will update everywhere it’s used

Currently, it’s very easy to edit a template part without realizing any changes you make can potentially have a site-wide impact. This touches on a few issues: 

• Click through pattern for template parts is broken, making it hard to know when you’re interacting with a template part.
• Can’t edit specific styles when you’re in template part focus mode which feels counterintuitive.
• After duplicating a template part any changes made to one template part impacts the duplicated version. 
• Colorise template parts to make it clearer what you’re editing.

Tied into this is the general experience of when and why to use template part focus mode, since the advantages of doing so aren’t always clear and the general mode matches the appearance of the Template Editor in the Post Editor (dark background, back button, etc). 

I went down a weird rabbit hole where I couldn’t figure out why we had the header block and the header template parts. I mean, what if I wanted to have two different headers with wildly different information in them? Whenever I changed the main header block (anything living inside it), it changed it in all the header template parts, and I found that very confusing and frustrating. I ended up removing the header block inside the header templates and keeping things just in groups. That made way more sense to me.

@aurooba in this comment.

Make multi-entity saving more user-friendly

Building off of a need to have more granular information in multi-entity saving for Styles, the following are repeat items that have continued to come up: 

• Offer a way to save changes as a draft and schedule changes. This is greatly missed from the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. 
• Provide a way to discard changes in editing flow (currently, it continues to prompt you to save). Below is a video that shows the current experience:

Improve theme block placeholders

Placeholders need to be greatly improved as folks are accidentally deleting theme blocks like the Post Content block not realizing that it’s what will display their actual content in the template itself. The more robust the placeholders can be, the more visual clarity there can be between editing a template vs post/page. Keep in mind that when user content is displayed but not editable, there needs to be a clear way for folks to understand why they can’t edit their content directly. 

• Improve Image Blocks Placeholders.
• Display block placeholder treatments consistently when editing templates in the site editor.
• Ensure all site building blocks have quality previews and placeholders.

I found it a bit strange adding a featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. block and a duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. without seeing what the result would look like.  

@paaljoachim in this comment.

Ease the process of editing a template for currently viewed page/post

When you are viewing a page, it’s not always clear what template is currently in use, and it  takes numerous steps just to get to a specific template in use outside of your homepage (wp-adminadmin (and super admin) > Appearance > Editor > W Menu > Templates > Select correct template). There are a few issues related to this to explore, including:

• Changing the “Edit site” link to go to the specific template in use.
• Add an “Edit template” link when viewing a page/post. 
• Provide a way to view the template quickly for the content that is being edited.
• Fix the naming of “Default Template” in the sidebar of the Post Editor so it matches what’s shown in the Site Editor. 

Add ability to bulk add items to Navigation Block, including pages, categories, etc.

This was previously possible with the prior Appearance > Menus screen but a known pain point with the current Navigation Block experience. In time, this should also include expanding beyond just posts/pages and being able to add additional items like categories in bulk. 

Open up more ways to set the site icon

Without using the Site Icon block, there’s not a current way to set this for your site. It’s also not clear that one has to add that block and that, after adding it, you’ll see an option to set your site icon. 

Provide consistent dimension controls across blocks 

In nearly every call for testing, folks are left wondering why certain controls exist in some blocks and not in others. This current experience of dimension controls needs to be standardized and expanded appropriately. 

The different controls for different blocks makes it really hard to make something that is consistent and nice. I decided it would be cool to make the user pictures a little bit bigger, like that might make the comments more inviting. Since I made the commenters pictures so big, I said, let’s add in a Post Author block so that the post author’s picture will be shown too! Wait, the AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. block in the Comments Query loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. and the Post Author have completely different control? I can make the avatar any size, but the post author I have a dropdown with 3 choices? I can but a border radius on the avatar block, but not the post author block? If it’s a picture, I should have all the same tools available to me as any other block that uses a picture.

@beckej in this comment.

Offer more ways to see how changing Styles will impact the entire site 

The Styles system is powerful and vast to the point that the current experience makes it difficult to know just how much is being adjusted with a few clicks: 

• Add a way to browse your site so changes can be seen across the entire site. 
• Provide more granular information for Styles when saving changes so it’s clearer what’s changing and where. Below is a video that demonstrates this problem:

Improve the experience of changing font sizes using the default options

Whether you’re selecting from the default options or trying to set a custom size, the UXUX User experience is fairly quirky. Finding the custom size option is somewhat cumbersome and, if you select one of the default sizes but want to switch back, you have to “reset” the font selection from the ellipsis menu. The presentation of the font sizes isn’t easily known either, with “t-shirt” sizes currently being considered. Regardless, this is an extremely basic action to take that now takes numerous steps to complete as the video below demonstrates:

Ease switching to a block theme/between block themes

Switching to or between a block theme should feel seamless and there are a few issues to help get the experience where it needs to be:

• Keep custom templates across themes, so work isn’t lost when switching between block themes. 
• Provide a way to preview a block theme before switching to allow folks to explore before switching.
• Consider an FSE-compatible approach to starter content to help folks get started faster with block themes. 
• Preserve the navigation on a theme switch to prevent redundant work.
• Provide a pathway to migrate widgets to block themes to prevent any content loss. 

Simplify various ways of creating common layouts

This covers a large number of use cases, from using the same width for the rest of your content in a new template to wanting to have a site logo next to a site title. Beyond relying on patterns to set a header or footer layout, it’s incredibly difficult to create your own as you often need to use a group/row/stack block first and foremost. From there, getting the spacing right is incredibly difficult. This is true of individual experiences like with the Navigation Block and of trying to combine multiple blocks into one layout:

• Make it easier to add a Spacer block to the Navigation Block to control spacing. 
• Explore “Site Branding” patterns for Site Title, Site Logo, Site Tagline.
• Simplifying the layout concept as the current tooling remains complex in discoverability and description.
• Streamline adding a background image to a header.

Users who want to even slightly change the spacing and positioning of content have to have deep knowledge of container blocks, design tools (often locked away in ellipsis menus), and the spacer block. While the spacer block is the most user-friendly option for controlling spacing, the problems below remain: 

• It’s not clear when to use spacer blocks. 
• Spacer blocks often aren’t robust enough. 
• Design tools are hidden in the ellipsis menu. 
• It’s not clear if one needs to use container blocks to have more control over layout/spacing. 

Still trying to get “edge space” – ie margin from edge to orange borders I tried toggling on the “inherit default layout” This didnt make any different to the margin. It just changed the padding. I also added a zero to the block spacing field. Nothing changed. I tried changing the layout toggle to 80 % wide. This changed the internal padding of the block and didnt move the block away from the edges…Why are some settings in the block toolbar and some in the inspector? Why aren’t the same settings (where appropriate) in all similar blocks – ie padding, margins, width available in both groups, and columns?

@alixnotes in this comment.

Thank you to @priethor for helping to review this post at various stages.

#core-editor, #fse-outreach-program, #full-site-editing, #gutenberg