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.
Please drop by any time in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. with questions or to help out.
This post is a summary of the usability testing done as a joint collaboration between design contributors and FSE Outreach program participants. For starters, big thank you to everyone who contributed both as designers and participants. Having watched each of the following videos, I’m really struck by how seriously everyone took this effort and how much kindness existed in each interaction, even when sharing tough feedback or stumbling over the experience. This was an experiment and it was a success because of how each of you engaged.
Before digging into the videos themselves, I want to note that I had to scale down many, if not all, of the videos in order to get them to upload properly to Make Test. For full access to the highest quality recordings, you can view them in this Google Drive folder that was set up for this series of tests. Separately, the intent was to have an equal split between both flows but that wasn’t always followed for each participant.
Finally, everyone who participated, whether as a design contributor or participant, will get a Test Contributor badge added to their profile as soon as possible if you don’t already have one!
Across each experience, the following commonalities stood out:
Lack of awareness around List View and, even for those who do use it, frustration around dragging and dropping items.
Desire for more visual indicators of where content would be added, whether when adding patterns or trying to create a new template part without it being baked inside another one. This caused repeated placing of patterns within patterns or template parts within template parts.
Missing knowledge around patterns, including discovering them to begin with or finding how they are sorted by categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging..
Great difficulty using the navigation 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., whether to do something more advanced like create a different experience on mobile or as simple as understanding how to add items to the menu based on the current placeholder state.
Easier to replace a template part while creating from scratch proved painful, even if folks went into the isolated template part mode. This is due to things like confusion around building simple layouts, details around setting the correct template part area, the impact of duplicating template parts, and restrictions in what can be done to edit a template part in isolated mode.
Clear confusion around the various sidebars, where to find settings, what impacts a site globally (like Styles), etc.
Level listed under each video reflects a self reported level of comfort with FSE with 1 being not all familiar and 10 reflecting expertise. For any listed as N/A, the participant was not asked.
Video 1
Level: 2-3
Didn’t use list view.
Replaced the template part but wasn’t able to create a new one from scratch.
Navigation block was identified as a major pain.
Went back to the overall template list to apply the template part to another template but it felt like the wrong place even though it was the right spot to go to (around 7 minutes in).
Unable to complete the final task of applying a template part to another template.
“It’s definitely different than the WordPress I’m used to. I’m more used to operating through the dashboard than a visual editor which I think is why I was unsure of what I was doing. Otherwise, as far as changing 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., was absolutely quick and painless. Once I learned what some of the other options did it was an easy way to align it how I wanted it to.”
Video 2
Level: 6 or 7.
Didn’t use list view.
Created a template part within the editor to start.
Created a template part within a template part within a template part, causing the final template part to be smushed within the editor.
Left to go to template part focus mode to try to add navigation since the + button for the new template part looked so different than what he was used to (5:10-6:00).
The navigation block placeholder felt unusable and it wasn’t clear how best to add items to it with the + button being so far removed from the experience.
He tried to use “Manage menus” thinking that would allow for a way to add items only to reach a dead end.
Video 3
Level: 7 or 8
Didn’t use list view, except with the navigation block’s list view.
Went to template parts > add new to add a new template part.
Couldn’t edit background or basic colors in isolated template part mode. Instead he used Styles which changed the whole site, not just the template part without realizing it would do that (around 6 minutes). This touches on a closed issue.
Isolated template part mode has an easier 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
to see bounds of a template part, assign an area, etc but then has huge limitations in terms of customization.
“It’s a little bit confusing, what you’re really changing and where it works…It’s a lot of understanding that’s needed. I think for an ordinary user it’s very difficult.”
Video 4
Level: N/A
Used List View.
Went back to template parts immediately to create a new one and noted that he usually creates template parts with code.
At first, duplicated the template part, which runs into this issue. Later, he made a template part by converting a group block using list view.
He found the header within a header for Twenty Twenty-Two confusing to navigate.
He shared that he uses a hack where he adds two navigation blocks: one with mobile always on and one with it always off. From there, will mobile always on, uses custom CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. so it only displays on small screen sizes.
New header template part was only available when adding a generic template part and not in the Replace modal. This is because when he originally set up the template part (6:54), he selected general rather than header. He couldn’t find a way to assign the right area for the template part (change from General to Header) within the isolated template part mode.
“This is something that is really annoying to me in the full site editor… moving blocks into different groups…I find it very hard to get to the correct hierarchical level…it’s very flimsy and hard for me to get to the right place.”
“The navigation block for me is really weird to me. If I click on Manage Menus, it’s empty. There’s nothing to do. I really don’t understand it.”
Video 5
Level: N/A
Used List View.
Went back to the list of template parts to create a new template part and correctly assigned the area.
Ran into this issue where the navigation toolbar overlaps with the experience of adding a link, making it nearly impossible to figure out what you’re doing.
“The more helper things you have open (ie: sidebars) I think sometimes it could be hard, especially with full site editing. So maybe you need to use a big screen or remember to close out some of the sidebars”.
“Being able to go through the block navigation (list view) is where I can usually find out if I put something in a container that didn’t belong in that container”.
Video 6
Level: N/A
Used List View.
Went back to template parts and then edited a current header, rather than creating a new one.
Converting page list items in the navigation was confusing in order to edit each link.
Ran into the experience of menu items merging when deleting, which has been reported before and was noted as intended functionality.
When adding a template part into template part focus mode, a template part was not created, matching this currently open issue. In theory, this should create a template part within a template part.
Video 7
Level: 8
Used List View.
Used replace to switch out template part.
Use of group within a template part feels really odd to him. Feels like it’s only there to help control the layout but feels unnecessary in general.
Struggled to drop something into a cover block that had a row block inside of it. It wasn’t clear how to add something else to the row block.
Finds it limiting which blocks are able to be added to the navigation block. Wants mega menu options and ways to display things based on screen size.
Expressed a desire for a middle ground between solely relying on what’s defined by a theme vs getting into the nitty gritty details with Styles.
“I have trouble a lot of times with the list view and getting blocks precisely where I want them to be.”
From around 3:25 in the video
“I don’t make my own headers. Just because I found it completely frustrating and I rely on templates to make all my headers that come with the themes because I’ve found I just can’t manipulate it enough no matter how much time I spend on it. I can’t make things that look better than the pre-made templates so I only do small changes from the pre-made templates… Headers are incredibly challenging. I just don’t know how to do it.”
Video 8
Level: 1 or 2
Didn’t use List View.
Icons for theme blocks feel very confusing and don’t feel similar to other software he uses.
Used replace to switch template part out but, because there is a header within a header for Twenty Twenty-Two, this was a bit confusing.
Struggled to understand that he needed to select the overall navigation block to customize it in the way he wanted as he expected to find customization options within individual navigation links.
“As a kind of a first time user of the interface, I found this very difficult. It doesn’t remind me of anything I’m used to with other applications I’m using…it’s just not easy for a novice…This was a bit of a learning curve just to get to a header…I was quite uncertain on my choices. I wasn’t sure if I was doing the right thing.”
Pattern Testing
Level listed under each video reflects a self reported level of comfort with FSE with 1 being not all familiar and 10 reflecting expertise. For any listed as N/A, the participant was not asked.
Video 1
Level: 6-7
Didn’t use List View.
When asked to add a pattern with columns, just added the columns block itself.
She didn’t know that you could filterFilterFilters 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. by columns for patterns and remarked that “it’s not obvious they are columns” when glancing at patterns.
Only used patterns from the Inserter.
Found the layout settings to be very confusing and px dropdown to be very small/hard to see.
Wanted to be able to create a new post/page from within site editor rather than needing to go to the post editor.
Video 2
Level: 8
Used List View.
Repeatedly felt that visual cues were missing, especially when wanting to see what was a whole pattern rather than a piece of one.
Didn’t use drag and drop as it’s not clear where a pattern might go.
Added a pattern by accident into the query loopLoopThe 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. causing it to appear throughout the loop rather than outside of it.
“My main problem with the editor is that I don’t always get visual cues on where I can add blocks or patterns.”
Video 3
Level: 6
Didn’t use List View until prompted.
When asked to add a pattern with columns, proceeded to add a Columns block rather than adding a pattern. Later, it was clear that this was due to a lack of awareness around patterns in general.
Tried repeatedly to find patterns in the quick inserter by searching “patterns” leading to this new issue.
Participant noted she has tried to make at least 10 WordPress sites and regularly struggles with getting the layout to look correct across different screen sizes.
In List view, expected to find mover controls rather than relying on drag and drop and didn’t understand why they weren’t there.
Used List View and noted that she “always has it open”.
Once pattern was added into the site editor it was hard to reposition it where she wanted it to go.
Wanted a way to change hover colors for buttons.
Learned about patterns from Nick Diego’s SLS about patterns. Otherwise, did not know they exist and doesn’t feel anything clarifies that they are there.
“Having to go to the + sign and then browse all and that’s the only way I know how to get to patterns is super cumbersome”
Video 5
Level: 5
Used List View.
Drag and drop totally didn’t work as expected for adding a pattern. Tried to place it within a query loop and the pattern ended up below it in an unexpected way. Realized later that it was a query loop and it made sense that the pattern was placed below but it proved confusing at the time.
Added a query loop pattern to the template and was expecting from a user’s point of view to be able to edit the text. The experience felt broken when he wasn’t able to until he realized it was a query loop which he was familiar with.
Lack of feedback in being unable to edit the query loop content was jarring. Kept wanting to edit the content itself.
Felt that the block settings are very hidden for deeper customization and that it’s hard to know how to get to those options when looking at just the editor itself.
Added another pattern as an example that ended up chunkily within another pattern.
“I was thinking I could drop it right above this text…when I grabbed it I saw the hand icon so I knew it was draggable. I didn’t have the clearest ever – I didn’t see like a line showing me it’ll drop here. I didn’t think it would work… it dropped below what I was expecting.”
“I still am not totally sure if I went and looked at the page on the front end what would be there”.
Noted at the very end of the test.
Next Steps
Going forward, I’ll look to facilitate this kind of usability testing experience again, especially since this time I had to turn folks away.
Building off of the high level feedback and in line with the goals around refinement and unification for 6.1, the outreach program is going to try something new and pair up members of the program with community designers. The aim is to directly learn what kind of refinement is needed by watching someone use the current experience. In the process, perhaps this effort can also engage folks in a new way who might not have been able to participate as much before!
Description
Designers will be paired with 1 or more folks, depending on their capacity and interest, from the outreach program based on ideal timezone matches. Once paired, they will then find time between June 20th and July 1st to record a 15 minute call on Zoom going through one of two tasks: Creating & applying a new 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.; using and customizing patterns.
Designer & Participants: Sign up by June 24th, 2022
Before signing up, keep in mind that you will need to be available to help between June 27th to July 8th to record at least one 15 minute session:
For both parties, please ensure you are in #fse-outreach-experiment for updates, reminders, etc and generally checking Make Slack for coordination.
Details for designers
After the sign up forms close, you’ll receive a slackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. DM from @annezazu (that’s me) on or before June 27th with more information, including who you are paired with along with a one pager of all the details you’ll need.
Next Steps
A recap of all of the videos will be shared on Make Test for posterity.
Thank you to @critterverse for collaborating with me on this effort.
For more information about this outreach program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there.
Feature Overview
A lot has changed since the first call for testing focused on Template Editing so, if you’re worried about this being a repeat experience, don’t be. As a reminder, Template Editing Mode is the feature of Full Site Editing that unlocks the ability to switch between editing an individual’s post/page content and the template that an individual post/page uses. When this first was released, you were only able to edit a template but you couldn’t create a new one or assign a post/page to use a specific template. At this point though, you can create a new template, edit current ones, and select which template you want to use for pages/posts. Tied to this, the interface has been updated to make it clearer when you’re actually in template editing mode. For a deeper dive into this new feature, check out this video that goes more in depth.
To make this a tiny bit more realistic, we’re going to pretend we’re creating a WordCampWordCampWordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. site with a custom landing page to attract visitors from another event to join the WordCamp you’re hosting.
Testing Environment
While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment:
Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal InstallA local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site.
Use the latest version of WordPress (downloadable here).
Use the latest version of 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/ (10.6 as of writing this).
Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.
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
Important Note:
While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a betaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature.
Known issues:
While creating this call for testing, a few issues popped up that you too might experience as you go through this. Rest assured they have been reported. Here’s a non exhaustive list of the most serious items:
The “Add Block” prompt has a regression that’s causing the words “Add 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.” to appear in various places, including in a way that makes the text look quite squished.
Known issues are expected to be found at this stage in development for something that’s so actively being iterated upon!
Setup Instructions:
Have a test site using the latest version of WordPress. It’s important this is not a production/live site.
Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme.
Go to the website’s admin.
Install and activate the Gutenberg pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.6.
You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. Do not click on this as we will not be exploring the Site Editor for this test!
Creating pages
Under Pages, select “Add New” and, one by one, create three pages back to back with the titles “About”, “Contact”, and “Code of Conduct”. Publish each. These don’t need content added in as they will simply be links for a future menu.
Create a fourth page, title it something fun to bring people into your event and don’t add in any additional content. For example, I titled mine “Feeling inspired from WordCamp Couch?”.
Publish the page and keep it open.
Creating a new template
In the sidebar, open the Settings and select Page Settings (you should see Page and Block). Select “New” under the Template section to create a new template. Here’s a short video in case you get stuck.
Title the new template “WordCamp Outreach”.
From there, you’ll enter Template Editing Mode.
Customizing the template
Remove the Site Title, Site Tagline, and Separator blocks at the top of the template.
Add in a Cover Block above the Post Title Block and use any image you’d like. I downloaded this one when creating this test. You might need to use the “Insert Before” option in the toolbar of the Post Title Block.
Once you have an image added, select the Cover Block once more rather than the Paragraph Block inside it and use the width options to make it Full Width.
Drag and drop the Post Title Block into the Cover Block.
Center the Post Title Block using the block alignment settings and delete the extra Paragraph Block beneath it.
Select the Cover Block once more and apply a Duotone FilterFilterFilters 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. to it. Here’s a screenshot of what icon you’re looking for. Note that by selecting “Shadows” and “Highlights” you can select your own custom colors!
Add a Spacer Block underneath the Cover Block and set it to 50px.
Add a Columns Block underneath the Spacer Block and choose 50/50.
Once inserted, select the parent Columns Block and set the width to “Full Width”.
Add in brief information about your event in the first column and set any alignment you’d like.
In the second column, add in two buttons asking people to Apply to Speak and Apply to Sponsor. For the purpose of this test, it’s okay if these do not actually link anywhere. Feel free to customize the buttons to your liking too!
Underneath the Columns Block, add in an additional Cover Block and select a background color.
Once you have a color, select the Cover Block once more rather than the Paragraph Block inside it and use the width options to make it Full Width.
Inside the Cover Block, add in a discount code message and a Button Block below it encouraging people to buy tickets. Customize this text to your liking, whether in terms of alignment, custom colors, or more.
Create a custom footer
Underneath the second Cover Block, add a Template Part Block and select “New Template Part” to create a custom footer for this template.
Once created, head to the Block Settings in the sidebar to add in a Title under the Advanced section, set the Area to “Footer” under the Advanced section, and toggle on “Inherit Default Layout” under the Layout section.
From there, add a Columns Block into the Template Part and choose 30/70.
Using the Page Link option, add in your “About”, “Contact”, and “Code of Conduct” pages. Customize the Navigation Block to your liking!
From there, select “Update” and save your changes.
Create a new page & assign the new template
At this point, head back to your wp-admin dashboard and, under Pages, create a new page.
Add a title that references another pretend event that someone might attend. For example, “Feeling inspired from WordCamp Bed?”
In the Post Settings, under the Template section, select the template you just created and publish the page.
View your page and confirm it’s using the same template as your first page!
Advanced Steps
If you’re more technical and keen to test out future ideas, check out this PR. Keep in mind that you can always download the specific Gutenberg plugin version for this PR here to make it easier to explore. For context, this PR seeks to help better differentiate between when you’re editing post content vs the template by obscuring the ability to edit the post content when in template editing mode. Feel free to leave your thoughts on this PR in the comments below or on the PR directly.
Testing Video
Note that there are chapters added to the video that correspond with the steps above.
What to notice:
Remember to share a screenshot of what you created if you’re up for it!
Did the experience crash at any point?
Did the saving experience work properly?
Did you find any features missing?
What did you find particularly confusing or frustrating about the experience?
What did you especially enjoy or appreciate about the experience?
Did you find that what you created in Template Editing Mode matched what you saw on your site?
Did it work using Keyboard only?
Did it work using a screen reader?
Leave Feedback by May 26th
Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHubGitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.
In light of the 5.8 planning and next steps, I wanted to share the upcoming schedule for the FSE Outreach Program in order to ideally help people participate more in what’s to come. As changes occur and I’m able to create plans further out for 5.8, I’ll edit this post and note exactly what I changed at the very end of this post. I do expect changes so please see this all as what I anticipate vs set in stone plans.
As always, if you have any questions, feel free to ask here or to DM me in slackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. (@annezazu).
Calls For Testing (aka CfT):
Based on what’s planned for 5.8, the following is lined up for testing:
Call For Testing #6: focused on using template editing and the navigation 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. within that experience.
Call For Testing #7: TBD but likely focused on something like creating a more complex landing page using template editing and a more expansive set of theme blocks.
When I can, I’ll try to leave three weeks for testing rather than two but, due to the release timeline, this may not always be possible.
Overall Timeline:
Date
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/
10.6 RCRelease CandidateA beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge.
End
May 12
10.6
End
Start
May 19
10.7 RC
May 26
10.7
End
Start
June 2
10.8 RC
June 9
10.8
End
Outside of these calls for testing and questions, there will continue to be live streams, hallway hangouts, important posts flagged, etc. This post will be updated to include the relevant links as time progresses:
Help me triage feedback that come in from the calls for testing and file any necessary issues.
Help me write the calls for testing and the summary posts.
For any of the items that involve working with me directly, please comment on this post or message me directly (@annezazu) so I know you’re interested and we can talk through what helping out might mean. To those of you already doing this work, thank you so much! It all truly helps.
April 29th 2021: updated to include links to the fifth call for testing and the second round of questions.
Not many blocks get an entire milestone dedicated to them but the Query Block did! As the name implies, this is a pretty powerful 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. allowing you to display posts/pages on your site and customize them as you see fit. For example, you could easily use this block to show off all of your favorite recipes by setting it up to show a specific categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of posts. In the long run, you can expect this to be more of a theme author tool used when building a block theme with block variations, like the Post List Block, being more of what users will interact with. For now though, let’s be adventurous and go on a Query Quest to explore what this block can do.
If you find yourself interested in the future of this block, check out this recent GitHub issue asking for new ideas for the bundled Query Block patterns that come with the current iteration of the block and get excited about Gutenberg 10.5 which will offer more patterns to choose from.
Testing Environment
While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment:
Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal InstallA local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site.
Use the latest version of WordPress (downloadable here).
Use the latest version of 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/ (10.4 as of writing this).
Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.
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
Important Note:
While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a betaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature.
Setup Instructions:
Have a test site using the latest version of WordPress. It’s important this is not a production/live site.
Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme.
Create eight posts with two different categories and featured images of your choosing. Alternatively, you can download and import the demo Gutenberg content created especially for this test via the WordPress importer under Tools > Import.
Go to the website’s admin.
Install and activate the Gutenberg pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.4.
You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. From there, make sure you are in the Index template (this should be the default upon opening).
General Testing Instructions:
Using the List View, select the parent Query Block and then remove this entire block. This will allow us to start fresh! Here’s a GIF that shows how to do this.
From there, where the Query Block used to be, add in a Columns Block and set up 2 columns with 50/50 spacing.
In the first column, add a Heading Block with the name of one of the Categories of posts. If you used the demo content, this will be either “Hikes” or “Travel”.
Add a Query Block just below the Heading Block. During the setup, select whichever option you want from the various sizing options.
Once inserted, open the Block Settings and under “Settings” turn off the “Inherit query from URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org”.
From there, you should see options to customize what posts this Query Block includes. Under “Filters”, please select one of the categories to display. If you used the demo content, this will be either “Hikes” or “Travel”.
After the Query Block is showing the posts from just one category, proceed to customize the Query Block as you’d like! For example, you can add in additional blocks like Post Author and customize it using the Block Settings option. If you get stuck here, please jump down to the “Customization Instructions/Ideas” for help.
Follow the same process with the second column and customize the additional Query Block. Make sure to select the second category of posts to display so you see new posts there!
View your site and see if what you created matches the Site Editor view.
If you’re looking for more ways to customize the experience, try changing the width of the columns, adding in additional relevant blocks, changing colors, and more.
Customization Instructions/Ideas:
Because this is a more advanced block, here are some additional instructions to help clarify how customization of this block works in case you’re getting stuck. To start, keep in mind that part of the beauty of the Query Block system is that any change you make to one of the posts/pages being queried will be made to the entire set being displayed. This might be confusing at first but it allows for consistency across each post. With that in mind, here are some additional ways to customize your Query Block:
Here’s a quick video showing how you can change the width of the column that the 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. block is in to make the image larger or smaller.
Of note, each of these videos are done using the Small size option but you can choose whatever size option you’d like!
What to notice:
Remember to share a screenshot of what you created if you’re up for it!
Did the experience crash at any point?
Did the saving experience work properly?
Did you find any features missing?
What did you find particularly confusing or frustrating about the experience?
What did you especially enjoy or appreciate about the experience?
Did you find that what you created in the Site Editor matched what you saw on your site?
Did it work using Keyboard only?
Did it work using a screen reader?
Leave Feedback by May 5th, 2021
While other calls for testing have been open for two weeks, this is open for three weeks in order to see if it causes more feedback to come in. If you can help test, please amplify by sharing this post!
Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHubGitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.
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.
Have you ever experienced a particularly delightful 404 page? Maybe it made you laugh or it was built in a way that made it super easy to find your way back to where you needed to be on the site. Currently, this is a part of one’s site that can only be altered with code and provided by the theme causing many of us to be unable to add some extra joy into the universe with helpful, fun 404 pages.
With Full Site Editing though, this is now within our grasps to make our own. This test explores doing exactly that with the option to build a simple 404 page through template editing or to really dive in to make something unique. If you choose to get super creative, please share a screenshot in your comment so we can all marvel at what you’ve made. For inspiration, here’s an example I made:
Testing Environment
While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment:
Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal InstallA local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site.
Use the TT1 Blocks Theme. If you followed the first call for testing, you’ll need to double-check to make sure you’re using this theme!
Use 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/ 10.1.1 (latest version).
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
Here’s a basic flow to follow when testing this specific feature. If anything doesn’t make sense, just comment below!
Important Note:
While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a betaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature.
Setup Instructions:
Have a test site using WordPress 5.7. It’s important this is not a production/live site.
Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme.
Go to the website’s admin.
Install and activate the Gutenberg pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.1.1.
You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment.
Testing Instructions:
Helpful Hint: As you go through this test, you might find the List View helpful while navigating between content.
Exploring the 404 template
Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage.
Open the Navigation Toggle and head to Templates > 404. This will take you to your site’s 404 page template.
Using the List View, select 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. Template Part and, using the three-dot toolbar menu, select “Remove 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.” to delete this.
From there, select the default Header Block that says “Nothing Here” and, using the three-dot toolbar menu, use the “Insert Before” option to add a block above.
Using your preferred method to insert a block, insert a Template Part Block and select the “New Template Part” option.
Open the Block Settings for the new Template Part block and, under Advanced > “Title”, add in a custom title. For example, “404 Header”.
When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes. This should cause the new Template Part to reflect the title you chose.
Adding navigation and getting creative
From there, make sure your focus is still within the new Template Part and add in a Navigation Block. You can choose whether to create a new menu or re-use a previous one.
Add a few links including a link to a page that doesn’t currently exist. To do this, just start typing a title that doesn’t currently exist on your site. For example, “Help”. You’ll then see an option to create a draft page. Do this for at least one menu item. Remember to have fun with this!
Outside of the Navigation Block, add any additional blocks you’d like to in this new Template Part. For example, you can use the Social Icons Block, Search Block, Site Title, and more. Try to add anything that would help orient someone who got lost on your site.
From there, edit the “Nothing Found” Header Block and Search Block to whatever you’d like. You can then add in anything you’d like including images, GIFs, etc.
When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes.
View your 404 page on your site by going to yoursiteurl.com/404 (replace yoursiteurl.com with your test site URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org). Notice that any items you added to the Navigation Block that are page drafts appear but are broken links. You should be able to still view the drafts since you are logged in as an admin. Note: this has been logged as a bug.
Return to the Site Editor and open the Navigation Toggle > Dashboard to view your wp-admin dashboard. Note: there’s a current bug that makes it so you can’t view Page Drafts meaning in the future this will be easier.
Publish, review, and share
Head to Page > All Pages and publish any that need to be.
Once more, View your 404 page on your site by going to yoursiteurl.com/404 and confirm any prior draft Pages now show up properly with correct permalinks.
Share your experience in the comments below or in GitHub directly. You’re welcome to run through the experience multiple times to capture any additional feedback!
If you want to take this further, here are some extra items to explore:
Try adding in columns to your content! Columns are a powerful tool and it would be helpful to get feedback on the experience of using them in a real life scenario with site building.
Create a custom footer template part to replicate the process of creating a custom header template part.
Deeply customize the appearance of the page with custom colors, font sizes, and more. Here’s a quick video demonstrating some of what you can try.
Testing Video:
This video shows the testing flow after the initial testing setup is in place. Of note, this video purposefully does not go into depth in building out a 404 page in order to keep it concise. Don’t let this stop you from getting creative though when you’re testing!
What to notice:
Remember to share a screenshot of what you created if you’re up for it!
Did the experience crash at any point?
Did the saving experience work properly?
Did the saving experience make sense when making changes to the Template Part vs the general content?
What did you find particularly confusing or frustrating about the experience?
What did you especially enjoy or appreciate about the experience?
Did you find that what you created in the Site Editor matched what you saw when you viewed your 404 page?
Did it work using Keyboard only?
Did it work using a screen reader?
Leave Feedback by March 23rd, 2021
Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHubGitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.
