The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
If you’d like to help test Full Site Editing, please join the FSE Outreach Program. You can find current calls for testing for this program here and you can join the fun in #fse-outreach-experiment.
The team gathers in #core-test. Please drop by any time with questions or to help out.
This post is a summary of the third call for testing for the experimental FSE outreach program. Thank you to everyone who participated, whether through testing directly or sharing the call for testing with others. It all helps! Special thanks to the following people:
The following is a screenshot of the very fun, custom 404 page that @critterverse made solely using the FSE experience and her amazing design skills. While not all of us have the knack for design that she does, it’s exciting to see what’s possible without touching code:
High-Level Feedback
Here’s what a few folks had to say about the overall experience that’s important to keep in mind as you read the rest of this post:
I didn’t encounter anything that was broken, though several aspects of it could be significantly improved. Everything outlined in the testing flowFlowFlow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
seems to work as it should, if users can ever find it. It is going to be a real challenge to make the interface spectacularly simple enough for ordinary users to feel comfortable knowing when and how to create their own template parts.
In my head, I know that we are inserting blocks to things other than the contents that goes into the blockBlockBlock 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. editor, but in reality, my instinct still tells me to look for something specific to do things, rather than inserting a block. Mainly I think because you need a time to get used to. But starting to feel that there are no visual feedbacks (e.g. different border colour, diffrent panel colour, different look on the sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. panel) within the editor to distinguish which are the content blocks, and which are FSE specific blocks (like template part block).
To sum it up, most of the difficulties I had during the test are the same ones I still experience when using GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pretty much daily. First and foremost, getting often lost without any visual reference over layout structure, hierarchy, or block boundaries. These range from “it’s all white, where am I?” to “what block am I really editing now?”. Also, I still find it rather annoying that when I want to add a new block below an existing one I have to do a bit of treasure hunting to find the exact point where the magic [+] will appear, opening a new world of possibilities, or just the next block.
The things that were most confusing in early tests are becoming more comfortable. The thing that remains still a little confusing is the plus icons for adding elements. There seems to be a pattern to which types are used and where they are placed, but I have trouble seeing what that pattern is.
These last two comments underscore a high-level usability item that, if improved in either the block editor or site editor, would make a big difference across the collective experience. For now, I encourage those interested in confusion around the + button to follow or chime in on this relevant and comprehensive GitHub issue.
Repeated Feedback: Improving saving & enable the option to preview
These are two big themes that have been carried over from every single test that’s been done with the Outreach Program resulting in a feature on the High Level Feedback post. To better highlight how they’ve been repeated, they have been merged into this section with only new issues or enhancement requests shared below:
Once the design is saved, there is no confirmation but the button is no longer operable. The interface could communicate this better…Unfortunately, the preview looked nothing like the display on the frontend, but I assume that is still in progress. After trying multiple sources, I found that embeds didn’t work and some of the block styles were off.
It was a little confusing when it asked if I wanted to save individual parts of my work. I think at that point, I did a little thinking through the experience and landed on “oh this is like changing the slide vs slide template in Keynote”. It’s hard to know how many people will get to that conclusion.
Because this call for testing required one to remove and then create a new Template Part, this became a focal point for a variety of feedback items. For example, the current experience doesn’t make it clear how to set a name for a new Template Part after one is created causing some testers to create multiple template parts without realizing what was happening. Tied to this, the new Template Part name doesn’t propagate across the rest of the interface after being named making it a particularly confusing experience to know if a part has actually been created. The following issues capture this collective feedback into distinct areas:
Improve template part creation flow to nudge a user to set the name of a new Template Part and to make it easier to preview existing Template Parts.
Finally, there was general feedback around how it’s necessarily clear that one entering a true context shift as the current experience editing and creating Template Parts is almost too seamless. Making this context switch clear has been flagged during other calls for testing and is being explored in this previously opened issue.
The experience of editing a Template Part really does feel a bit like popping the hood, which is something a dramatic context shift could help emphasize even further. The concept of a context shift could eventually be applied to the experience of switching between editing regular content and a Template as well.
When adding and naming the Template part, I can’t tell if the part has been saved and has the new name as there is no visual sign that a part of the template is there at all. That can be very confusing. I ended up with four Parts of template blocks, all stacked up and pretty much overlapping.
One aspect of it that could be improved is that new Template Parts don’t save until you click “Update Design.” If you move away from the block and continue other parts of the design, it appears that it hasn’t saved and you may be tempted to create it again, as I was.
Thus far, the List View is proving to be a helpful navigation tool for making one’s way around the editor. It’s also proving to be a point of confusion mainly due to missing expected functionality, including the ability to drag & drop and remove items directly from the view. Thankfully, expanding the capabilities of the List view is being explored in this issue already including the ability to drag & drop.
The List View was confusing to me, there were Template Parts I thought hadn’t saved properly that suddenly appeared there, they look like duplicates and it didn’t seem possible to delete them.
Quick sidenote about the list view: it would be great if this view had the 3 dots menu for quick actions on items, and if it would allow you to reorder or drag blocks.
Thanks to this test calling for deeper usage of the Navigation Block, there was lots of great feedback gathered around both current pain points and feature requests to make it an even more robust block:
[Bug] Creating a draft page with “&” results in HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. Entities.
Some of what was brought up also relates to overall work around improving the Link UIUIUI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing., which is currently in the process of going through a lovely design iteration.
Navigation Block – the two placeholder options don’t look like call to action buttons elsewhere in the UI. I understand they need to be in keeping with the Nav items style but it wasn’t clear they were options without actually reading the text. Could we improve this?
Now that there are starting to be many possible configurations of toggled sidebar states with the addition of Full Site Editing, I can imagine wanting to revisit some keyboard shortcuts to make the open/closing behavior of all the sidebars possible through similar, easy-to-remember shortcuts.
I lost track of the Settings sidebar a couple of times when I had been editing Global Styles because the advanced block controls that usually appear in the sidebar weren’t automatically shown when a block was selected.
The “Navigation Toggle” refers to the WordPress icon in the top left corner of the page, but as a new user I would expect that to take me back to the dashboard. The naming doesn’t seem clear and I had to look up what was meant by Navigation Toggle.
As with every call for testing, it’s not just for finding bugs! It’s also important to hear about features that people reach for and find are missing. This section is a “catch-all” to cover all additional features that were reported that didn’t nicely correspond with a particular block or categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging..
Allow the ability to resize embeds to create a more consistent WYSIWYGWhat You See Is What You GetWhat You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. experience.
Include block type on hover to make it easier to see at a glance while creating what blocks you are working with.
Add an option for fixed positionHeaderHeaderThe 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 Template Parts
While trying to build something for the test (but also when I currently use Gutenberg ) I often find myself hovering on the block icon several times, in order to double-check what kind of block I’m interacting with. In this case, the tooltip says “change block type or style”, which makes sense, but doesn’t help in immediately identifying a block type. Has there ever been an option for a visible label near blocks?
I would have expected to be able to save a Template Part independently of the Update Design button (top right). I’ve been conditioned by Gutenberg to see this as the main “update” / “save” button and I’d expect that to save my whole page (including changes to Template Parts). But I’d expect the Template Part to have it’s own “Save” UI.
This post is a summary of the second call for testing for the experimental FSE outreach program. Thank you to everyone who participated, whether through testing directly or sharing the call for testing with others. It all helps! Special thanks to the following people:
@courane01 for running the call for testing with a group of students.
Related feedback is grouped under high-level headings. As you read through it, please remember that feedback is welcome on the format of this post too.
High-level feedback
Here’s what a few folks had to say about the overall experience that’s important to keep in mind as you read the rest of this post:
Everything seemed intuitive for me (long time WordPress dev for whatever it’s worth). I recently did a site for a client in Squarespace, and I appreciated that everything was drag-and-drop and had blocks for all website sections. This full site editor gives that same experience. I think this will be great for empowering non-dev users.
I did a demo of using FSE in December 2019 at meetupMeetupAll local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. Tokyo. It did “work” then, but felt more of a prototype — kind of alpha or even pre-alpha stage of development. But this latest version is much more smooth, less buggy, and get overall feeling that it has come a long way and shaping up to be a feature.
My main problem with this as a designer is that if we are building structure, don’t try to look like wysiwygWhat You See Is What You GetWhat You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page.. If we are building design, then show it exactly. Current GB UIUIUI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. isn’t an overlay, so it is pushing the layout completely out of shape. So you get a kind of Picasso view of your website. You have to take a big imagination leap to trust that you are designing this website well. –
As you can tell, there’s a diverse set of reactions to this call for testing, which shows how far Full Site Editing has come and how much further it needs to go.
Adjusting column widths
Adjusting column widths was one of the most mentioned issues that came up as people tried to customize their homepage to their liking! This coincided nicely with an important PR that started as a draft at the beginning of this call for testing and has moved into an open PR with numerous iterations since. As @youknowriad mentions in the PR, alignment in Full Site Editing currently works in a way that’s optimized for traditional themes that provide their own alignment styles. Still, this approach needs to be reconsidered moving forward as it doesn’t allow for a true WYSWYG experience. This leads to the problems described below in comments from some of those who tested:
I inserted a 70/30 pattern for the Columns blockBlockBlock 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., then changed the alignment to “Wide”. The Columns block didn’t expand proportionally to fill the available space. When viewed on the front-end, the columns did display as expected.
We noticed with columns that we had to assign the width of the block in order for the height of the site logo to align with the site title. We want to expand the width of the body content without using a child themeChild themeA Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. to get closer to edge to edge layouts.
I created an image in the SidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. that was wider than the column to see if there was any restriction on image width. When I went to view the page, the image had been resized to fit the column width.
Like adjusting width, previewing changes came up as a workflow people rely upon and deeply missed in this call for testing. This nicely echoes findings from the first call for testing, where people wanted to preview template changes and expands to previewing the entire site editing experience. Currently, a “Preview Site” option is under discussion here and this post is linked in a comment to ensure feedback makes it to those who explore this further.
I do not see how to preview the layout on the frontend.
Yes, but when I am done I don’t find a way to easily go and view my website. I turn off full screen mode and use the more classic view site link in the Dashboard.
There were so many inconsistencies between the site editor and the front end that there is little point in listing them all. Spacing was grossly off. I generally see that as a theme issue. I spent much of my time in trial-and-error mode, making an adjustment in the editor and refreshing to see the front-end result. Rinse. Repeat.
Saving Process: auto drafts, keyboard shortcuts, and more
In line with the last call for testing, the saving process came up as an area people were keen to see iterated. Whether it was mentioning desired features, finding bugs, or confusion around how to accomplish a task, this proved to be a robust area of feedback:
When editing, I expect CMD/CTRL + S to save my work. This works in a post/page editing experience. On OS X + Chrome, this prompts me to save the webpage.
I can understand why there is a 2-step process here, but every time I clicked “Update Design” it intuitively felt like I shouldn’t have to then click a “Save” button as well.
What if I want to save the template as a new template, Template Part as a new template part and not overwrite the existing templates? What if I decide not to save a template part? Can I revert changes by clicking an revert/undo changes checkbox?
Because this call for testing was more open-ended, this resulted in a wide range of general usability feedback that relate to the overall experience of building a homepage rather than a specific part of the experience. While these items can’t be easily organized and some were reported previously, they are extremely important to keep in mind:
I see that blocks for FSE are under “design” categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. in the inserter, but I think it’s better to put them in their own category to avoid confusion with non FSE blocks.
I tried to insert a Post Tags block using the ‘/’ command but it didn’t appear as an option. I had to search and find the block via the block inserter panel. –
The problem with switching to this mode is that my toolbar-choice was not saved. Each time I returned to the site editor, I had to enable it once again.
I wish I could put a background image (also in the body of the page), but I haven’t found a way to do it, nor have I been able to set the headerHeaderThe 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. color different from the rest of the body.
Since this test relied on exploring Site Editing blocks, great feedback was given about the experience of specific individual blocks. To make it easier to go through, these issues are gathered in this section:
[Featured ImageFeatured imageA 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.] Allow Post Featured Image blocks to have a consistent height to easily get a uniform size.
I was trying to size the logo I added using the what appeared to be resize handles. but it did nothing I expected. Eventually I found that the block had settings in the right panel, but I had to look quite hard for this.
“It wasn’t obvious to me that the Social Icons block then needed to have individual social media blocks added. I couldn’t figure out why they weren’t showing up and looked in the settings and in my user profile to figure out where to add my social media links. I saw social icons in the footer and then clicked on the blocks and saw that the individual icon blocks needed to be added.”
To me, I feel strange to be told to upload a featured image for each post here. I assume if each featured image are set, then this uploader won’t be shown. Still, I think it feels confusing.
There is no way to set the size of the image output by the Post Featured Image block. The only way to get a uniform size at the moment is to pre-crop the images before uploading them to WordPress.
Related feedback is grouped under high-level headings. As you read through it, please remember that feedback is welcome on the format of this post too as the program is still in the early stages of determining what works best.
Distinction between editing modes (template vs page/post)
The need for the distinction between modes appeared in a number of responses. Thankfully, this was already identified as an area to improve before this call for testing in open issues like this one that reveal just how similar the two modes currently, and the resulting confusion.
Have a clear defined area for post editing and well defined area for Full Site Editing. Do not mix Publish and saving. As they are very different things. One is for post editing and one for FSE editing.
I believe it was not clear enough how those changes could impact the site. If you don’t already know how templates, template parts, and global blocks like Site Title work, you might not understand how your editing will affect the rest of the site.
The fact that I had to spend a considerable amount of time to understand the differences for a few arbitrary terms and what they mean in a UIUIUI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. is going to be a significant barrier to migrating existing clients to FSE and training them to understand. It simply won’t be worth it.
Switching between editing modes (template vs page/post)
The actual act of switching back and forth between modes brought up a few different issues. What does the cancel button do? Why does applying changes for a template take me from template editing back into post editing? Some of this overlaps with the previous section as well. Thanks to the feedback shared, multiple issues were opened related to this particular part of the experience:
Most feedback indicated that by increasing clarity in the interface (ie: a clearer, stickier notice) and making the switching process more predictable, the experience can be greatly improved from the current iteration.
Switching to Template Editing – Editing the template from the post, while logically I knew what that meant, felt surprising – the switch was kind of a jolt because a bunch of things changed on the screen yet the overall layout stayed the same – so it felt like “Whoa, what just happened?”. Felt disorienting.
Generally speaking, the saving experience was reliable technically and, at the highest level, intuitive enough. The main sticking points came when trying to dismiss changes, save changes as a draft, and understanding what each “sub” item to save meant. The following issues were created to address each piece of feedback:
I found this part to be kind of difficult. I think the labels on the different things being saved confused me. I didn’t really understand right away what was being saved for each checkmark…If I wanted to not save the template and left it unselected, but wanted to save the post, it would want to keep publishing the post.
The saving process is intuitive, and it’s very helpful to clearly list what elements are going to be updated when saving. However, as said before, it might not be clear enough how each edited element will impact the rest of the site. It could be helpful to add a tooltip to the different elements that are going to be saved (post/site/template/template part) to provide users a quick, last-minute reference.
While this call for testing didn’t focus on creating a new template, it feels like a natural extension to wonder how a new template could be created after making changes to a current one. While there isn’t currently a mapped-out plan for this experience, it is under discussion in this issue as there are quite a few scenarios to consider.
What if I want to Save As? To create a new single template. As I might want the original single template and just want to create a new template that modifies the original template. Kind of like a default template and a modified template.
Previewing changes is a workflow people rely upon, and this showed up in testing. While explicitly including ways to preview content hasn’t yet been discussed, there is an open issue to explore how best to view the template while editing a post that touches on this experience. In response, a new issue was opened around offering the option to preview the template in the same way one can with the Site Editor.
My trust is always in the published page, and I’m looking everywhere in FSE for a preview page link while I’m editing to basically see if it worked. I feel like just being able to open the page in a new tab would give me confidence in what i’m doing in FSE. The other issue is that since you don’t see the headerHeaderThe 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. or footer in the post editing context, as soon as you do apply changes to a template and you land back on the post, you immediately think “Did it work?”.
I found it confusing that clicking Save brought me out of the FSE template mode. I saved I did not ask to go out of the FSE mode. I want to see what it looks like on the frontend. Meaning clicking Save and then previewing the template on the frontend.
As part of this testing, a few people (myself included) ran into a strange bug related to themes located in a sub-directory not properly loading template parts. This was reported and should help ensure future blockBlockBlock 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. themes work with this experience.
Where is template editing work headed?
While this post goes deep into the pain points of the current experience of switching between template and post editing, it’s important to show where this work is headed. Currently, the best place to follow along is in this organizational issuefocused on the remaining interface and infrastructure issues. This includes everything from issues on how to better distinguish the editing experiences to a welcome guide to introduce people to template mode! Follow along there as the work continues.