This post is the twelfth call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental 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.
Overview
With WordPress 5.9 out in the wild, it’s time to start revisiting some common workflows that we’ve tested earlier versions of that have new tools, options, and more to explore. In the case of this test, we’re going to customize a header using everything from the navigation block to template part focus mode to then reuse this personalized header in a different template. Along the way, we explore how patterns are integrated into the experience, new dimension control options, and improved UX for the navigation block. While going through the experience, think about what would make it even easier and more intuitive to use as that’s ultimately the aim!
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 install or use a tool like this to set up a development site.
- Use WordPress 5.9 (downloadable here).
- Use the Twenty Twenty-Two theme. If you’d like to repeat the test or switch things up, you can always use a different block theme.
- Use Gutenberg 12.6 (latest version).
Testing Instructions
Setup Instructions:
- Have a test site using the latest version of WordPress (5.9). It’s important this is not a production/live site.
- Install and activate the Twenty Twenty-Two theme by going to Appearances > Themes. If you choose to use a different block theme, install and activate by going to Appearances > Themes > Add New and searching for the one that has the
Full Site Editinglisted as a feature. - Create four different pages with different titles to add to your menu under Pages > Add New. No content in the pages are needed.
- Install and activate the Gutenberg plugin from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 12.6.
- By the end of these steps, you should see a navigation item titled “Editor (beta) under Appearance. If you don’t, you aren’t using a block theme and need to switch themes.
Testing Instructions:
Helpful Hint: As you go through this test, you might find the List View helpful while navigating between content.
These instructions are intentionally more general to help you make the Header you create your own, to find more points of friction, and in case you are using a different block theme. At a high level, you should explore a few things with this test so, if the steps don’t align with what you see, either switch to the Twenty Twenty-Two theme for ease of use if you aren’t using it already or ensure you cover each of the features mentioned in the Overview section.
- Navigate to Appearance > Editor (beta). This will automatically open the site editor to the template powering your homepage.
- Using the List View, select your overall Header provided by your theme. If you’re using the Twenty Twenty-Two theme, you will see that it has provided multiple header options by selecting the “Replace” option in the block toolbar. Select whatever header you’d like to edit. Here’s a screenshot of what to expect here if you have this option.
- From there, enter the isolated template part mode to focus just on editing the Header in isolation. You can find this mode by selecting the overall Header template part > Opening the three-dot menu > Selecting “Edit Header”. You can learn more about this mode and the various ways to find it in this post.
- Once there, build out and customize your navigation block by adding the four pages you created earlier. Keep in mind that you can create draft pages that you will need to publish later in order to have them show up on the front end of your site.
- Continue to customize your Header to your liking, whether by using dimension controls in blocks like the Group or Row blocks (depending on what your theme offers), by adding any additional blocks (Site Tagline, Site Icon, etc), or by exploring more options in the navigation block.
- When done, select “Back” to return to your homepage template and make any additional changes you might want when seeing the template part in the wider template once more.
- From there, select Save and go through the saving flow to save all the changes you’ve made.
- After saving, open the W menu > Templates and select another template where you’d like to ensure it uses the Header you just customized (for example, the Blank template). Open that template and, if the Header isn’t in place, add it in however you see fit before saving.
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 or reusing the Header?
- What did you find particularly confusing or frustrating about the experience?
- What did you especially enjoy or appreciate about the experience?
- What would have made this experience easier and more intuitive?
- 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?