FSE Program Hyping Headers Summary

This post is a summary of the twelfth call for testing for the experimental FSE outreach program. As always, I want to highlight those who helped to bring others along with them in this latest effort: 

• @courane01 for running a group testing session with GoDaddy.
• @piermario for creating an Italian translation.

Shout out to @itsjustdj as the sole first-time contributor for this call for testing. Get excited – you now have a testing contributor badge on your WordPress profile!

High-level summary

The feedback this time around focused on the edges of the experience, especially in terms of design tools, and on some key problem areas that have repeatedly come up around navigating the entirety of the experience, like knowing what templates are used where. On the whole though, there were no deal breakers, big crashes, or show stopping problems found. Here’s what a few people had to say about the experience that can help frame the following more specific feedback:

On the whole, this went surprisingly well. In a year, the site editor has become far more powerful…Without responsive controls on layout-type containers like the Columns 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., designing anything complex with the site editor can sometimes feel like one giant hack…There are tons of improvements with block design tools in comparison to last year…I hit no spacing-related problems in this experiment. That feels gratifying to say after over a year of testing FSE features. The experience of designing from within the site and template editors feels pretty smooth these days. The holdups are more about missing capabilities than anything.

@greenshady in this WP Tavern post. 

The Typography settings are particularly satisfying to play around with. It’s nice to have lots of design options before having to use custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site..

@itsjustdj in this comment.

Most of these things are editable in FSE, but it feels like it is up to the creator to explore and it feels a little like a scavenger hunt. I wish there was a way to surface the most important decisions in a linear way. Some kind of “Start Here” guided walkthrough that pros would ignore, but help casual users understand the capabilities of Full Site Editor.

@beckej in this comment.

The ease of laying out the 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. with rows/columns and dropping in site elements (logo/site title/navigation) was awesome.

@cdils in this comment.

Here’s an example of what @greenshady created in his write up on this call for testing:

Of note, since most feedback fell into the usability and feature request categories, the format of this post breaks down by feature more than recent ones that tend to stick with Bugs, Feature Requests, and General Usability headings to make it easier for those working on specific features to follow.

Potential bug

For the first time in this program’s history, zero bugs were found that could be replicated. However, there was one report that I was unable to replicate or find similar reports for that I’ll share below in case someone else can:

I added a spacer block below the navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. and later went to delete it. It moved the content of my site around and my navigation menu was gone, so I reloaded which lost anything that wasn’t saved. It also crashed when I was adding Header Dark Small to the Blank template.

@courane01 in this comment. Check out the comment for more details.

Templates and template parts

With more options available for templates and template parts, there’s an increasing need for better organization and more clarity in the interface to understand the impact of changes, big or small (adding a new template vs editing a template part). This is compounded by the fact that most folks don’t have a strong grasp on the template hierarchy built into WordPress. With newer modes like the focus template part mode, there was also some confusion around why this should be used. This is partially due to lack of awareness around how it can be used in the future as a gradual adoption pathway and due to those pathways not yet existing visually in the editor.

• Templates Screen: add the ability to sort by recently updated, alphabetical, or type (adding additional columns).
• Consider adding the ability to replace template parts in template part focus mode.
• Add more context to template and template part changes when viewing all.
• Click-through pattern not behaving as expected for Template Parts (previously reported).
• Explore ways of showing where template parts and templates are currently in use (previously reported).

The subtle differences between the FSE screen and the “Focus Mode” screen are a little confusing. Specifically, I really LOVE the new “Replace” button to choose between an existing template or a Pattern. But I wish I could “Replace” with a Pattern even in focus mode. If I came to this screen to really work on my header, why would I have less options here than I have when looking at the full site?

@beckej in this comment.

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.

Trying to select the correct group, row, or block in the layout can be hit or miss. When I think I’ve selected the correct one, I accidentally edit something else.

@itsjustdj in this comment.

Isolated mode. I do not see a purpose why I should use it. As I can instead just edit the template directly in the site editor.

@paaljoachim in this comment.

There was a small dot in an accent color under the “Added by” column on the Template Parts screen that (I think) indicated the original template part had been edited. Something a little more obvious there would be nice (for instance, under “Added by” maybe it says [Theme Name], edited by [user]).

@cdils in this comment.

Design tools

Since this test focused specifically on using the Navigation block, various missing customization options came up, particularly for anyone trying to do anything more complex than the average menu. The feedback here echoed previous rounds and underscores the importance of the work that’s underway to expand what’s currently available. 

• Navigation block: Expand design options for Custom Link block.
• Navigation block: Add ability to style and/or use a custom icon for responsive menu (previously reported).
• Desire for better responsive options across the board (previously reported).

The Navigation block may be my least favorite thing about the site editor. I have yet to see how it will offer a universal system that plays well with the 1,000s of design variations that theme authors will want to employ. Classic nav menus are still vastly superior for custom design.

@greenshady in this WP Tavern post. 

Patterns

With patterns being increasingly integrated into the site building experience, new pieces of feedback are arising around pattern management. This includes everything from naming best practices to when options should appear to swap between patterns and more. 

• Feedback on naming patterns and how to encourage best practices, especially in a world where default color palettes can be overridden with Styles. 
• Display block pattern options in a modal rather than placeholder state, including a way to zoom in/out at various levels to see specific patterns more clearly (previously reported). 
• Consider adding the ability to replace template parts in template part focus mode. This is reshared from the above section on Templates and Template Parts since it’s related. 

Since I had changed the default color scheme on my site, I was confused at first looking at the pattern names. For example, I had set my primary color as Blue, so “Text-only header with green background” was confusing to me at first because it was blue.

@beckej in this comment.

General Usability Feedback

Cutting across the entire experience, familiar feedback came in that touches on some key pain points in the current version of site editing. All of these items have been previously reported:

• Various issues related to enabling the ability to browse and/or see different pieces of content as you’re editing: Provide a way to view the template while editing a post, Site editor: Add Browse Mode, Surface navigation structure as a dedicated UI, Preview Site feature. 
• Making inner blocks easier to locate.
• Increase parity with 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. including homepage settings and custom CSS.

Of note, it feels important to call out recent work in progress in the dedicated UI for navigation structure, since this both improves the information architecture by grouping site wide tools and implements a form of browse mode many have asked for to make it easier to see more parts of your site as you create. 

Clicking Header or any template section is somewhat difficult, as it easily selects blocks inside of it.

@paaljoachim in this comment.

I miss some of the common controls that were part of every WordPress Customize screen. I wanted to edit my site to have a static homepage and a blogroll elsewhere. I feel like homepage settings, custom css, menus should be somewhere in the FSE experience.

@beckej in this comment.

#fse-outreach-program, #fse-testing-summary