FSE Program Testing Call #24: Momery Makeover


This post is the twenty-fourth 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

Similar to the twenty-third call for testing, various items slated for WordPress 6.3 are ready for exploration and testing. It’ll start out using an RC version of the 16.0 Gutenberg release to provide an early look at what’s to come and ensure feedback is timely with the upcoming release deadlines. While there are a lot of changes, big and small, expect this test to cover the following:

Taken together, these new tools and interface enhancements aim to create a more cohesive experience. Similar to a few prior calls for testing, the form of this test is going to be both prescriptive with steps to take in order to ensure certain features are covered and, at points, open-ended so you can explore and think of areas to improve. 

I will be out for two weeks so @bph will be covering responding to this call for testing. Big thank you!

Framing

You run a website with a few others for a fictional town called Momery where you all share upcoming community events for folks to join. After a recent meeting about the website, your task is to implement a few changes: a new footer for parts of the site, a new post layout on the homepage to remove images, a call to action to encourage folks to host across your site, and a new page. As you work, you rely on revisions to try out different options and patterns to speed up creation. 

Testing Instructions 

To use a prebuilt test site: 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-call-for-testing-24&d=v1 
  2. Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created. 
  3. This will launch a site for you to use for up to 24 hours. Select “Magic Login” to log in to the wp-admin dashboard. 
  4. Save the link to your site so you can access it again during the test. 

To set up your own test site: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty Three One by going to Appearances > Themes.
  3. Install and activate Gutenberg 16.0 RC1 or the latest version of Gutenberg after 16.0 RC1. 
  4. Head to Tools > Import and import this file to have access to the same content as above. From there, create a simple menu. 

If you have any issues with manual setup, just comment on the post or ping me (@annezazu) in WordPress.org slack.

Create a few new items to exist across your site

  1. Head to Appearance > Site Editor > Templates > Home.
  2. Change the Query Loop block pattern to use a different one that doesn’t show the featured images of each post.
  3. Make the menu in the Header always show up as an icon with three lines instead of two.
  4. Save changes.
  5. At the bottom of the template, create a new Footer template part with a full width layout and three columns using the supplied patterns. Ensure this template part matches the background of the site.
  6. Create a new menu within the new template part with links to Host, Partners, Pricing and a search block. 
  7. Create a reusable block with a call to action around hosting an event with Momery with buttons linking to both the “Host” and “Pricing” pages (select the blocks of your choosing > open the three dot menu in the block toolbar > select “Create Reusable block”) . As a reminder, consider how patterns might be used for inspiration.
  8. Save changes.
  9. Use the command-k tool to invoke the command center to ensure both the new footer template part and the reusable block with the call to action exist across your Page template and Single template. 

Edit pages and templates

  1. Edit your About page to add a featured image from your media library. Navigate there however you’d like.
  2. Edit your Page template so that the featured image appears full width at 400px height with a duotone filter of your choosing. 
  3. Change the location of the featured image for the Page template. Make any other changes you’d like to it!
  4. Click the title bar to open the command center and switch to the Contact page. 
  5. Edit the Contact page to add in your preference for communication (email, text, phone call, video chat). 
  6. Click the W icon to open the Site View, find the Pages section, and click the + button to draft a new page titled “Portfolio”. Make any changes you’d like for the page, including adding any patterns.
  7. Save changes.
  8. Go back to your dashboard when done, head to Pages, and publish the page you just created to ensure it shows up on your site. 

Roll back some changes

  1. Return to the Site Editor by going to Appearance > Editor and select Templates > Home.
  2. Open block settings and head to the Template tab. 
  3. Notice there is a revision section at the bottom and select it. 
  4. Roll back to the prior Footer template part so that just your home template is no longer using one with the three columns, instead opting for a simpler version.
  5. Re-add the call to action reusable block you created.
  6. Save changes.

Explore the Library

  1. Click the W icon to open the Site View and select Library. 
  2. Find and open the reusable block you created earlier and make a few changes to the text.
  3. Save changes and check to ensure those changes are visible across your site.

Explore further – here are some ideas:

  • Make changes to your various pieces of your site and explore using the revision history more.
  • Change Style variations to switch up the theme style. In the Site View, use the addition of the Stylebook to see all of your changes.
  • Use the command center to continue jumping around to different parts of your site, make change, and save.
  • Explore creating and editing more pages, templates, template parts, and reusable blocks.

What to notice:

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • 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?
  • Did you find that what you created matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?
  • Did it work while using just a mobile device? Shout out to @nomadskateboarding for this addition!

Leave Feedback by June 28th, 2023

#fse-testing-call