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.
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.
Creating an intuitive 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. is a key piece to get right when building a site. It helps orient visitors to what your site is about and, ideally, should help them take the actions you want them to. With the Site Editor, there are now brand new opportunities to customize this to your liking! This test will explore doing exactly that by creating a slightly more complex and layered header using various FSE blocks. To better focus this test, we’re going to pretend we’re restaurant owners and try to create an experience that nudges someone to order online while still showing them the information they need.
Like the last test, if you choose to get super creative, please share a screenshot in your comment so we can celebrate what you’ve made. For inspiration, here’s my example:
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 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.2.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
: Creating a restaurant header
Here’s a basic flow to follow when testing this specific feature. If anything doesn’t make sense, comment below! If you want to take the test further, know that you’re welcome to do so as the instructions are meant to help guide you, not constrain you.
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:
If you try to drag & drop the Navigation Block from one column to another, it will crash the Site Editing experience. There is a fix in place and it’s slated for the next Gutenberg release.
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.2.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.
Setting up your columns:
Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage.
Upon opening your homepage, remove 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. found inside the Header Template Part. This is to help reset the header to add more to it later on.
Select the parent Columns Block and, using the Block Settings in the sidebar, change the columns from 2 to 3 columns.
Return to the Columns Block and using the Block Toolbar settings make sure it’s set to Full Width.
In the first column, customize your Site Title and tagline as you wish! This could mean changing the text, font size, font family, and more.
In the second column, use a Paragraph Block to add in the hours of operation for your pretend restaurant and edit to your liking once more.
In the third column, add a Navigation Block and select the “Start Empty” option.
From there, use the Link Block to add a few links, even if they are to pages that don’t exist yet. To do this, just start typing a title that doesn’t currently exist on your site. For example, “Menu”. 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 and make it restaurant-themed!
At this point, select “Update Design” to save the changes you made.
Creating a nudge to order online:
Once your three columns have the content in place, add another Columns Block above it and select two columns to show using the 70/30 option. You can do this by selecting the Columns Block using List View and using the three-dot menu to select “Insert Before.”
Using the Block Toolbar, make the columns full width, so it stretches across the entire site.
In the larger column, add a Paragraph Block with text encouraging users to order online.
In the smaller column, add a Button Block that says “Order Online”. If you want to, feel free to quickly create a page to link to, but it’s okay for this test not to have a link for the purposes of this test.
At this point, select “Update Design” to save the changes you made.
Customize your colors & publish any page drafts:
From here, customize your colors and anything else with your design! You can do this by selecting the entire Header Template and adjusting the color settings in the sidebar. As you do this, keep note of anything you wish you could do but can’t.
When things are satisfactory, select “Update Design” to save the changes you made.
Finally, open the Navigation Toggle > Dashboard to view your wp-admin dashboard. Head to Page > All Pages and publish any that need to be.
View your site and check to make sure that what you created matches what you see there.
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!
Testing Video:
This video doesn’t go into great detail in terms of customizing the colors but does walk through each step to get a sense of the major actions to take. Feel free to take the test further as you see fit!
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 while creating the header?
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 April 12th, 2021 (previously April 8th)
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.
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.
Before diving into the testing details, let’s pause to talk about the focus of this call for testing. With Full Site Editing unlocking the ability to edit all parts of your site, there comes a need for new blocks to help facilitate the experience. You might have seen some of these blocks already! For example, there’s a Site Title 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. that you can embed anywhere and update automatically any time you change your Site Title.
For this specific test, we’re going to explore using a few of these blocks to build a basic homepage with a 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.:
Site Title Block
Site Logo Block
Post Lists Block
Post Tags Block
Navigation Block
Template Part Block
Think of this as a chance to both explore what’s possible currently to build something simple and as a chance to get more familiar with these new blocks. Eventually, these blocks will specifically be categorized in the Inserter as defined for Site Editing.
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 WordPress 5.6.1 and above (downloadable here).
Use the TT1 Blocks Theme. If you followed the last 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.0 (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.6.1. 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 either three fake posts with a few tags OR use the demo Gutenberg content found here. Here’s a short video explaining how to set up this content.
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.0.
You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your sidebar, 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.
Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage.
Using the List View, see if the Query Block is present. If so, select and delete it. This is just a housekeeping step to keep things contained :).
Make changes to your 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.:
You’ll likely see a Header created for you that you can edit directly. Update the text in the Site Title block. Have fun with it! Some ideas to get you started: Pick a new heading size, change the content, or alter the block settings directly.
When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes.
Open the Navigation Toggle and head to Template Parts > Select “Header.” This will show you an isolated view of just the Header portion of your site. While in this view, add a Site Logo Block and configure it to your liking.
When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes.
Open the Navigation Toggle again and head to Template > Index to return to your homepage.
Once there, head to the Navigation Block that’s powering the menu in the Header (this is where you might find the List View helpful!). Explore the Navigation Block by making changes directly to the menu items or in the Block Settings to change the font, color, etc.
Using the List View, select the Header Template Part and, using the three-dot toolbar menu, use the “Insert After” option to add a block outside of the Header.
Add your content:
Add either a 70/30 or 30/70 column block. In the larger column, use the Heading Block to write “My Content.” In the smaller column, use the Heading Block to write “My Sidebar.”
In the larger column, add a Posts Lists Block and select the configuration you would like (Title & Date, Title & ExcerptExcerptAn excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox., etc.).
From there, add a Post Tags Block to one of the posts displayed in the Posts Lists Block. Notice how if you add it to one post, it adds it to all of them!
Repeat the previous step with the Post Author Block before deciding whether you’d like to keep or remove either additional block.
Create a sidebar:
In the smaller column, build out your sidebar how you’d like! For inspiration, try out the Social Icons Block, Latest Posts Block, or a simple Image block.
When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes.
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!
Testing Walkthrough Video:
This video shows the testing flow after the initial testing setup is in place and is using Gutenberg demo content found here. Make the flow you’re on though with your own unique changes and adjustments!
What to notice:
Did the experience crash at any point?
Did the saving experience work properly?
Did you ever want to do something with a specific block that wasn’t possible?
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 see when you view your homepage?
Did it work using Keyboard only?
Did it work using a screen reader?
Leave Feedback by March 5th, 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.
To help frame what we’re going to be testing (and ideally build some excitement!), I wanted to give a brief context on the feature at the center of this call for testing. With Full Site Editing, people are able to edit both an individual post’s content and, with the release of Gutenberg 9.6, the template that an individual post uses. This call for testing is designed to explore the interaction between the two editing experiences (post vs. template editing) to make sure it’s clear when you’re editing each, granular saving works properly, etc. Ultimately, being able to edit templates like index, single, or archive directly is a huge leap forward compared to what’s been possible in the past! Unlocking this level of customization gives you far more control to build the site you want and this call for testing is to help ensure it’s as intuitive as possible.
While there’s more information below to ensure you get everything setup 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 you can use a tool like this to set up a development site.
Use the TT1 Blocks Theme (formerly called Twenty Twenty-One 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. Based Theme) by following these instructions.
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/ 9.6 (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, it’s extremely likely you’ll 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.6. It’s important this is not a production/live site.
Install the TT1 Blocks Theme (formerly called Twenty Twenty-One Block Based Theme) by following these instructions and activate it under Appearances > Themes.
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 9.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 properly using the Site Editing experiment.
Testing Instructions:
Create a new post by going to Posts > Add New.
Add in a post title and brief content before hitting “Save Draft” or “Publish”. Either way, saving of some sort needs to happen.
While in the editor for the post, navigate to the Post Tab of the Settings Sidebar (previously called Document). Under “Status & visibility,” you should see “Template” with the template name and the option to edit.
Click on “edit” to move into template editing mode. You should see a notice indicating you’ve switched to editing the template.
Make a few changes to the template wherever you like. For example, you can try out the “Site Title,” “Site Logo,” Site Tagline,” and “Navigation” blocks or changing font sizes and color settings for different blocks. Here’s a screenshot of a simple 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. for inspiration.
When you’re done making the changes you want, select “Apply” and go through the saving flow by selecting “Save”. This will return you to editing the post itself.
Once saved, try editing the post once more before following steps 7 & 8 to edit the template specifically.
Make changes to the template. This might mean making minor editorial changes to the content or adding in new blocks.
When you’re done making the changes you want, select “Apply” and go through the saving flow this time opting to not save the template changes. This is a way to test the saving functionality.
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!
What to notice:
Did it crash at any point?
Was it clear that when you were editing blocks in the Template that it would impact every page/post using that same Template?
Was it intuitive for you to switch between editing a Template for all posts vs. an individual post?
Was the saving process intuitive? Meaning, did you easily know what each option was saving?
Did the right content save when you selected saving the template part vs. when you left it unselected?
Did you get stuck at any point in the testing process?
What did you especially enjoy or appreciate about the experience?
Did it work using Keyboard only?
Did it work using a screen reader?
Leave Feedback by January 13th, 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 Theme (formerly called Twenty Twenty-One Block Based Theme). 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 session of usability tests covered 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. patterns and how to move blocks around in the Editor.
Testing script
Imagine you are building a new website for your personal blog. You want to begin by creating your homepage. WordPress offers a new block editor that provides some great choices of block patterns that you can add for creative layouts. Let’s explore the block patterns to create your page.
Log in.
Create a new page.
Add a title to your page.
Keep in mind that the way to add various content to your page is by adding blocks or block patterns. Explore where you might go to add a block or pattern, and add the side-by-side image pattern to your page.
Make that pattern full width.
Below that, add a two-column layout pattern that also includes a Heading or larger text.
Edit the larger text to say something meaningful about your blog.
Now add either a Buttons block, or the side-by-side buttons pattern, whichever you prefer. Rename one button to “Learn more” and the other to “Contact us.”
Move the buttons above the previous block pattern.
Now add a Separator block above and below the Buttons block/pattern.
Publish your page.
How was this experience?
Videos
Video 1 – May 18
Can I grab this and move it? How do I grab this block?
Basically everything I make is in Elementor, so I haven’t really played around with the new WordPress blocks and the new editing capabilities. This was the first time and I actually really enjoyed it.
Video 2 – May 26
Oh, the arrows are the movers. That’s not very clear. I think that needs to be worked on a bit more.
Video 3 – June 2
Warning: some harsh language
Video 4 – June 19
It was intuitive to locate blocks and patterns.
Feedback
As with all the prior videos being shared, please leave some feedback! What are some patterns that pop out to you? What successes do these users have in navigating and creating a post? What challenges become evident in their 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
?
As a reminder, if you’re interested in helping with usability testing, there’s a number of things you can try:
You can write a test script that can be usability tested for 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/.
Or simply watch the videos and leave some feedback below.
Thanks for watching and contributing anywhere you can.
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/ usability testing revolved around 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. for the month of March. The Gutenberg team is looking to push this forward by creating a better UXUXUX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. and including it as a proper block in the block library.
Testing script
Imagine you’re building a new website using WordPress. WordPress now offers a Navigation block within the new block editor. This is what you’ll focus on for this usability test. Let’s create a Navigation menuNavigation MenuA theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. using this new block!
Log in.
Create a new post.
Add a title to your post.
Keep in mind that the way to add various content to your post is by adding blocks. Explore where you might go to add a block, and add the Navigation block to your post.
Click the “Create from all top-level pages” option in the block. We’re going to pre-fill this Navigation menu with the site’s top level pages.
First, delete the “Moby Dick” menu item.
Next, move the “About” menu item so that it comes just after “Home.”
Move “Blog” to the right of “Services.”
Next, we’re going to add sub-menu items under the “About” menu item.
The first sub-menu item should be “Mission.” Add a sub-menu item that links to the Mission page.
Now add a second sub-menu item and link it to the “Team” page.
Let’s add some color. Set a background color on this Navigation block and then change the color of the text in the menu items to something you like.
Preview your post.
How was this experience?
Videos
Video 1 – February 12 (I know this is Feb, but I missed a few that month)
I’m getting confused here. Here’s the link to the Team page. I think that’s a link.
[adding background color to Nav block] I’m just not seeing this.
NOTES:
The user tried to delete a nav item by clicking into the text and hitting the Delete key on the keyboard. This only deletes the text, but not the item.
Selecting the Navigation block parent proved too difficult. The user got frustrated which caused them not to see other 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. parts creating a compounded affect.
Video 2 – March 10
I’m not quite sure how to change the color.
NOTES:
This user also tried deleting a nav item by highlighting the text and hitting the Delete key on the keyboard.
Video 3 – March 17
NOTES:
Finding the block’s background color proved difficult again, but he eventually found it.
Video 4 – March 24
I’m still trying to find the Navigation block.
Feedback
As with all the prior videos being shared, please leave some feedback! What are some patterns that pop out to you? What successes do these users have in navigating and creating a post? What challenges become evident in their 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
?
As a reminder, if you’re interested in helping with usability testing, there’s a number of things you can try:
August usability testing has come to an end. I ended with 5 videos this month! The script was new and encouraged the users to build a mobile phone landing page. It focused on the Column 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. and Cover blocks.
Testing script
Imagine you work for an industrial design company. The company has just created a new mobile phone. You’ve been assigned to create a beautiful landing page for this new phone. To do this, you will be using WordPress’ new Block Editor. Please make sure to talk through everything out loud as you complete the tasks. Let’s get started.
Log in.
Create a new post.
Give your post a title.
Add an image of a mobile phone. Once the image has been added, set the block to be full width.
Below that add a Heading block with the text, “Features.”
After that, add a Column block with three columns.
Add a feature to each of the columns. You’ll first add an image, then a heading below that and some text below the heading. See the next task for details.
In the first column add an image, under that add a heading that says, “Pixel Perfection Photos”, under which you’ll add the text, “Our camera is packed with pixels. Take beautiful high quality pictures.”
In the middle column add another image, and a heading that reads, “Chrystal Clear Communication” with some text below that reads, “The sound coming from our speakers will leave you feeling like the other person is right there.”
In the last columns, add another image, then add a heading, “Ubiquitous” with text below that reads, “Our phone is offered by all the major carriers.”
Below this Column block, add a Cover block with a background image. On top of the image write, “Order a phone today!” and then add a Button block that says, “Order today”.
Under the Cover block, add a Media + Text block with an image on the right and some text on the left that reads, “This phone is loved by everyone.”
Add one more Cover block with an image, but this time set it to be a fixed background.
Now, let’s add a Paragraph that reads, “Many smartphone makers save their best features for their priciest (and largest) devices. Not us. Our new phone includes great features like solid battery life and excellent performance, which means you don’t have to spend $1,000 to get the best smartphone.”
Finally “Preview” your post and make any necessary changes you think are important.
Once you’re ready, Publish your post.
Videos
Video 1 – Aug 1st
Add a heading block? How can I do that? I don’t even know what that means.
[After using the search feature in the Block Library] Oh, here it is, actually. I found it.
Video 2 – Aug 8th
Ooops, I did something wrong. How do I remove this?
This looks really really good. I didn’t expect it to look that good. It was that easy.
Video 3 – Aug 14th
That was quite intuitive. Click on the Heading option obviously from this menu.
This appears to be 3 columns, let’s click on that.
[while clicking through the Block Library accordions] I’m not seeing button so far…
Video 4 – Aug 21st
Things seem to be easy to find.
Video 5 – Aug 28th
To set to full-width, I’m just gonna drag it out.
It’s getting a lot faster now that I’ve done this once. It’s way easier!
Feedback
As with all the prior videos being shared, please leave some feedback! What are some patterns that pop out to you? What successes do these users have in navigating and creating a post? What challenges become evident in their 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
?
As a reminder, if you’re interested in helping with usability testing, there’s a number of things you can try:
You can write a test script that can be usability tested for 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/.
Or simply watch the videos and leave some feedback below.
Thanks for watching and contributing anywhere you can.
You must be logged in to post a comment.