FSE Program Testing Call #17: Guiding the Gutenberg Gallery

This post is the seventeenth 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. 

Friendly Reminder

If anyone is interested in being a part of the test creation or facilitation process, check out this recent post on how to get involved.

Overview

With each major WordPress release, there are more people who are likely to be in the position of switching to a blockBlock Block 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. theme world from a classic theme. With 6.1 approaching in November, this call for testing is rooted in exploring that experience. 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. 

To make it more fun, you’re going to step into the shoes as the owner of the GutenbergGutenberg The 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/ Gallery website. A simple site focused on sharing information about exhibits, current calls for submissions, and ways to stay in touch. After hearing about full site editing features for a while now, you’re deciding to take the plunge and switch from the trusty Twenty Twenty theme to Twenty Twenty-Two. Along the way, you’ll interact with the following and more: 

Theme switching

As we’ve explored previously with switching between block themes, there are a lot of both quick wins and overarching decisions to be made. The same is true for switching from classic to block themes. For example, right now there’s not a clear pathway for widgets. Ultimately, the more insights around how to ease this experience and make it feel magical, the more relevant block themes become. 

Improved fallbacks and menu management with the navigation block

To offer a better “out of the box” experience with the navigation block, various fallback options have been implemented so the menu you are most likely to want to use is available. This test seeks to explore that and ensure it does truly provide a better default experience. Separately, the interface for menu selection and management has been moved to a dedicated section in the block settings to make it more prominent and easier to work with. You can also pick from a set of icons to better personalize your mobile menu

Navigation block settings showing different icon options to pick from.

New HeaderHeader The 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 Patterns

Coming to 6.1, these carefully designed block patterns represent a consolidation of recurring headers and footers, simplified in order to work well across themes. When it comes to embracing a block theme, these should help folks quickly find the basics of what they might need to make a site their own in a few clicks. 

Visual of a new header option with a mountain range image and a blue header with a navigation.

Zoomed out mode

This experimental tool allows you to focus more on site building than on editing granular blocks by both allowing you to see the entire layout a bit more and always selecting the top level block (often container blocks like Groups or Template Parts). If you use the Quick Inserter, you’re met with patterns instead of blocks to continue the emphasis on more high level actions one might take to customize. 

Top toolbar in the site editor with an emphasis on the new zoomed out mode.

CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. Templates

This test once more explores creating a category specific template in order to offer a more tailored experience of looking at specific folks. This aligns nicely with the Gutenberg Gallery where you might want to emphasize different things depending on whether someone is looking at the posts about submissions or exhibit recaps. 

Design tools galore

It’s hard to miss how many design tools have been added to even more blocks. Because there are so many new options, this test doesn’t necessarily dive into the details like they have in the past. Instead, please note and explore the various additional options unlocking new possibilities as you go. 

Testing Instructions 

Note on InstaWP

As noted previously, the folks behind InstaWP have granted the outreach program an account that we can use for these calls for testing. This means if you want to skip setting up your own test site and instead use a temporary one, you can do so. When you set up a site with InstaWP, no email addresses will be collected which means you’ll need to save the link to access the site again. Big thank you to the InstaWP team for making it even easier for folks to participate in the future of WordPress.

To use a prebuilt test site: 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-call-for-testing-17 
  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 “Access Now” 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 theme by going to Appearances > Themes.
  3. Install and activate the latest version of Gutenberg by going to Plugins > Add New > Searching Gutenberg. 
  4. Head to Tools > Import and import this file to have access to the same posts as above.

Get familiar with your current site

  1. View the front end of your site and click through various pages linked to from the menu.
  2. Head to Appearance > CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. and change any settings you’d like or just review what’s there (for example, check which menu is set to each location). 

Switch to a block theme

  1. Head to Appearance > Themes.
  2. Activate the Twenty Twenty Two theme. Notice you can’t live preview this theme
  3. After activating, view the front end of your site to get a sense of the changes. 
  4. From there, head to Appearance > Editor. 

Use Styles and the zoomed out view to design your site 

  1. In the top toolbar, select the zoomed out view option (the option furthest on the right). This will place you in a zoomed out mode where you can focus more on building and creating with patterns rather than individual blocks. 
  2. While in this mode, explore the various sections of your site and feel free to reorganize as you’d like. For example, you can try using the quick inserter to add various patterns. 
  3. Once done, with the zoomed out mode still on, open the Styles sidebarSidebar A 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..
  4. Select the option to browse styles and notice how your site changes as you switch between. Feel free to toggle on and off the zoomed out mode as you see fit for the rest of this test. 
  5. As you’d like, feel free to customize the Style options further on a more granular basis or just stick with one of the built in Style variations. 

Customize your navigation

  1. Ensure you’ve exited out of the zoomed out mode and select the navigation block, either by using List View or by clicking on it directly. 
  2. Once selected, click on “Edit” in the block toolbar and follow the steps to convert to links in the pop up.
  3. Add two submenu items under Blog for both Submissions and Exhibits to match the original site. Note: Intentionally not sharing the various ways to do this.
  4. Open the block settings for the navigation block and, under Display, click on the visual below to open up more options for the mobile menu icon. Select whichever one you want. 
  5. Change further aspects of the navigation block as you see fit. For example, you can change the colors under Color, spacing between navigation items under Dimensions, or various typography options. 
  6. With the block settings open, under “Menu” explore the process to create a new menu by clicking on the name of the current menu > selecting “Create new menu”.
  7. Add some items to this new menu. 
  8. With the block settings open, switch between different menu options, including the option to import a classic menu. Select whichever menu you’d like to use. 

Explore new headers or footers

  1. Using List View, select the header or footer.
  2. Open the three dot menu and click “Replace”.
  3. Try searching for different options, scrolling, and selecting a new one. Repeat this as much as you’d like!
  4. Save your changes and note how the multi-entity saving feels. 

Create a category specific 

  1. Click on the W menu and select “Templates” to reach the template list.
  2. Select “Add New” and choose “Category”. 
  3. Choose the “Category: For a specific item” option and choose “Submissions Opportunities”. 
  4. This will create a new template that you can customize to your liking. For example, perhaps you want to change the emphasis on images in the Query LoopLoop The 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. block, add or remove different blocks, change the design, etc. 
  5. Save changes and view the Submission Opportunities category. Note: Intentionally not sharing the various ways to do this.

Customize your site further – here are some ideas:

  • You’ll notice the Blog page doesn’t have any content now after switching. You can either add a Query Loop block or change the Settings > Reading to set the Posts Page as the Blog page. Note: this has been filed as an enhancement issue
  • Explore adding the Comments block to different templates and what might make the experience better. 
  • Try locking parts of your site in various ways as you are happy with the design. 
  • Use the many new design tools to change padding, margin, typography, color, border, and more. 

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?

Leave Feedback by October 6th, 2022

#fse-outreach-program, #fse-testing-call

FSE Program Testing Call #16: Back to Basics

This post is the sixteenth 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. 

Friendly Reminder

If anyone is interested in being a part of the test creation or facilitation process, check out this recent post on how to get involved.

Overview

This call for testing returns us to some of the basics of using the blockBlock Block 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. While it can be fun and exciting to dig into the cutting edge items, it’s just as important to ensure the baseline experience continues to be excellent. This is especially true when full site editing as a concept brings the block paradigm to more parts of the site experience. To that end, the format of this test is going to take on a more open ended, scavenger hunt style experience. As you go through it, you’ll explore the following various features:

Transform menu

Each block offers various blocks you can transform to and from in order to quickly take the same content you currently have and switch it into a new block.

Example of a transform menu for the list block.

Select text across blocks

This feature was launched in WordPress 6.0 and works with any Rich Text block (Paragraph, Heading, List, and Quote). How can it be improved though? What rough edges can you find? 

Example of multi text selection.

Drag and drop

Drag and drop is a classic part of the block editor experience, whether you’re writing a post or creating a template. As WordPress evolves with new blocks and new features, it’s important these original features continue to perform and remain reliable. 

Various add block options 

Adding blocks comes in a few forms: the inserter, slash inserter (/), quick inserter, sibling inserter, and the “insert before/after” options built into the additional menu of each block. Ensuring each appears and functions as expected is key to being able to create what you want with blocks. 

New document settings and experience 

The document settings were recently revamped in Gutenberg 13.7:

The fields for post format, slug, template, and authors are aligned and have the same width. The template displays ‘default template’ instead of none, and the Permalink link opens a popover to edit the slug, when clicked. The result is a cleaner, more organized display that should help you more readily access all the important information about your post/page at a glance.

Before and after images of the document settings sidebar against a green background.

Using patterns

Patterns are increasingly important to the creation process and this test explores the basics of adding, moving, and customizing them. 

And more!

This covers the high level items but you can expect to also use duotone, dimension controls, featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. in a cover block, etc if you complete each smaller task.

Testing Instructions 

Note on InstaWP

The folks behind InstaWP have granted the outreach program an account that we can use for these calls for testing. This means if you want to skip setting up your own test site and instead use a temporary one, you can do so. When you set up a site with InstaWP, no email addresses will be collected which means you’ll need to save the link to access the site again. Big thank you to the InstaWP team! 

Launch test site or setup test environment

  1. Open this link only once: https://app.instawp.io/launch?t=fse-call-for-testing-16 
  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 “Access Now” 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-Two theme by going to Appearances > Themes.
  3. Install and activate the latest version of GutenbergGutenberg The 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/ by going to Plugins > Add New > Searching Gutenberg. 
  4. Head to Tools > Import and import this file to have access to the same posts as above. Select the “download” icon in the upper right corner to first download the file and proceed with downloading if you see a warning.  Here are instructions for how to import content if you need more detailed steps.

Overview of content on the test site

Once your test site is in place, please perform the following tasks in one or more of the three posts available in whatever order you’d like! None of the posts have a featured image set and they are all intentionally set as drafts. You do not need to run through all of these and it’s intentional that the task is left open ended, where there might be multiple ways to accomplish the task at hand. While the list looks long, each task should be quick, needing typically just a few seconds of action so please run through as many as you can.

Align, move, and customize images

  • Place an image side by side in whatever way you see fit.
  • Select two images and move them to a different location in the post. Note: you might need to add an additional image first to do this.
  • Customize borders for an image including Color, Style, and Width.
  • Crop an image in the post editor. 
  • Add a duotone filterFilter Filters 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.
  • Add a custom duotone filter of your choosing and then remove the filter altogether. 
  • Transform an Image block to a Cover block and set the focus using the focal point picker.
  • Replace an image with a different one. 
  • Drag and drop an image to a new part of the post. 
  • Add an image from a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org
  • Add an image by dragging and dropping one into the Image block placeholder from your computer. 
  • Add a link to an image.
  • Add alt text to an image.

Add, move, transform text blocks

  • Try using as many of the various inserters (slash aka /, quick inserter, and sibling) as possible.
  • Transform a text block to another block of your choosing. See how many transforms you can go through before getting stuck or confused.
  • Merge two paragraphs together. 
  • Rearrange items in a list block. 
  • Transform a list block to another block and transform it back to a list. 
  • Select text across two paragraphs, cut the text, and paste it elsewhere in the post. 
  • Transform a Text block to a Heading block and customize it by adding margins, changing the letter case, etc.  
  • Select text between two paragraphs and see what happens if you try to change it to a Group block (row/group/stack). Here’s a screenshot
  • Add a heading or list to a quote block. Try transforming those same blocks from within the quote block. 
  • Make each paragraph a different font size. Note: this might mean adding your own custom size.
  • Copy and paste text from another website/post/document of your choosing into your post.

Insert and reorder patterns

  • Add a few patterns from the inserter in quick succession. Reorder them in whatever way you’d like after adding multiple patterns.
  • Remove the entirety of a pattern after adding it. 
  • Drag and drop a pattern from the inserter in between two blocks or patterns in the post. 

Adjust the document settings

  • Change the template that the post is using. 
  • Copy the URL of the post as if you were going to share it with someone. 
  • Schedule an update to the post for sometime tomorrow before changing your mind and publishing the updates now. 
  • Add a featured image. 
  • Add a cover block and set it to use the featured image. 

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?

Leave Feedback by September 2nd, 2022

#fse-outreach-program, #fse-testing-call

FSE Program Testing Call #15: Category Customization

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

This call for testing focuses on what, on the surface, feels like a common task you might have done in the Site Editor: creating a new template and applying it to some posts. As you go through the tasks though, the way the following features align will hopefully surprise you and show you a greater layer of depth in the site editing experience. 

More template options

Expanding what templates can be created from the Site Editor continues to be a high priority with a number of new options to explore. This test in particular will focus on the general CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. template but stay tuned for Gutenberg 13.7 (the next version) when you’ll be able to create a template for a specific category. This means you could have a different template for all your posts categorized as “WordPress” for example! Depending on when you participate in this call for testing, that means you might have access to this new option to explore too. 

New template picker design

GutenbergGutenberg The 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/ 13.6 offers a new, streamlined template picker design that helps both conserve space and more naturally align with other post details:

Visual of the new template part selection experience.

More descriptive layout controls

If you’ve been left confused by every mention of “Inherit Default Layout”, the recent update to the description of this feature will be welcomed

(Semi locked) Starter patterns when creating a new post

Both the patterns and the fact that various blocks are locked are all part of some of the features one can use to curate the editor experience. Even though these might not be incorporated out of the box with a new WordPress site, they are still important to test so that those who do rely on them have a great experience. In this case, the test goes through the new starter patterns that were first introduced in WordPress 6.0 with pages and are now available for any post type with Gutenberg 13.6. As a bonus, a few blocks are locked in each pattern to help explore more granular ways to control the experience. 

Using a featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. in a Cover blockBlock Block 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.

Another feature from WordPress 6.0 is making an appearance in this test, alongside some subsequent improvements to the placeholder when the featured image is in use and the easier discoverability of the option itself in the media replace option.

Visual of the cover block feature where you can use the featured image.

Testing Instructions

Helpful Hint: As you go through this test, you might find the List View helpful while navigating between content.

Note on InstaWP

The folks behind InstaWP have granted the outreach program an account that we can use for these calls for testing. This means if you want to skip setting up your own test site and instead use a temporary one, you can do so. When you set up a site with InstaWP, no email addresses will be collected which means you’ll need to save the link to access the site again. Big thank you to the InstaWP team! 

Launch test site or setup test environment

To use a prebuilt test site: 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-fifteenth-call-for-testing 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. 
  2. This will launch a site for you to use for up to 24 hours. Select “Access Now” to log in to the wp-admin dashboard. 
  3. Save the link to your site so you can access it again during the test. 
  4. Navigate to Appearance > Editor (betaBeta A 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.). This will automatically open the site editor to the template powering your homepage. 

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-Two theme by going to Appearances > Themes. Add a patterns folder to your Twenty Twenty-Two theme and add these two files: new-event-announcement.php and event-recap.php. Here’s more information about this functionality. 
Visual of what the files for your test site should look like with a new patterns folder and two patterns placed within it.
  1. Install and activate the Gutenberg pluginPlugin A 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 13.6.
  2. From there, navigate to Appearance > Editor (beta). This will automatically open the site editor to the template powering your homepage. 

Create a category template 

  1. Once there, open the W menu > Templates. This will open up the template list. If you have a set site icon, you will see that instead of the big W. 
  2. Choose “Add New” > Select “Category”. This will open up a new blank template. 
  3. As you’d like, add any HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. or Footer template parts. You can do this by searching directly for “Header” or “Footer” or by adding the template part block and selecting the one you’d like. 
  4. Add a Query LoopLoop The 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. block and select whichever design option you’d like.
  5. While selecting the Query Loop block, open the block settings sidebarSidebar A 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. and ensure the option “Inherit query from template” has been selected. This will ensure that the right posts appear. 
  6. Customize the template further as you see fit keeping in mind that this template will be used when viewing a specific category of posts. When done, hit save to publish the new template.

Create two new posts to explore patterns

  1. Open the W menu (if you have a set site icon, you will see that instead) and select “Dashboard” to return to your wp-admin dashboard.
  2. Under Posts > Add New to create a new post. 
  3. Select the “New Event Announcement” pattern and fill in details as you’d like. For inspiration, in your post lists, there’s an example post titled “WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Museum” using this pattern. Note that a few blocks are locked! Explore what this experience is like (lock more blocks, unlock current ones, etc).
  4. Set a featured image and notice how it also appears in the Cover block of the pattern. Feel free to customize this further.
  5. Before publishing, open the post settings, assign the category “Events”, and under “Template” feel free to select a different template with the new pop over interface.
  6. Return to the dashboard and create another new post.
  7. Select the “Event Recap” pattern and fill in details as you’d like once more. For inspiration, in your post lists, there’s an example post titled “WordCamp Museum Recap” using this pattern. Note that a few blocks are locked! Explore what this experience is like. 
  8. Under the “Attendees” heading, select the Group block that contains the various names. Open the sidebar settings and, under “Layout”, explore the “Inner blocks use full width” option and customize to your liking (change colors, font size, dimensions, etc).
  9. Before publishing, open the post settings, assign the category “Events”, and under “Template” feel free to select a different template with the new pop over interface.

View your category template

  1. Once done, view the “Event” category to see your template and posts on full display. You can find the category template by going to yoursiteurl.com/category/events/

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? 
  • 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?

Leave Feedback by August 1st, 2022

#fse-outreach-program, #fse-testing-call

FSE Program: Sign up for usability testing by June 24th

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 headerHeader The 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 slackSlack Slack 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.

#fse-testing-call, #fse-usability-testing, #usability-testing

FSE Program Testing Call #14: Rallying Recipe Reviewers

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

This call for testing focuses on taking a few blocks for a practical spin to create a fun, interactive recipe focused site that has a customized commenting experience to rally your recipe reviewers. 

New Quote BlockBlock Block 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 your favorite recipe reviewers who leave behind their own tweaks to your recipes, you’ll explore adding in quotes from them using the new quote block. Currently, this is still in the experimental stage so get excited to report some bugs. Specifically, this new quote block supports using nested blocks, meaning you can add headings, lists, and more within a quote. 

New List Block 

Get ready to get detailed – your recipes require lots of ingredients with alternatives in case folks don’t have them. We’ll rely on the new list block to accomplish this since it includes a different UXUX UX 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. to explore. 

Comments Query LoopLoop The 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. blocks

Pulling from this specific call for testing, there are a ton of blocks for you to explore and build your desired commenting experience, with more to come as more functionality is supported in each block: 

  • Comments Query Loop: An advanced block that displays post comments and allows for various layouts and  configurations.
    • Comment Template: Contains the block elements used to display a comment, such as  the title, date, author, avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. and more.
    • Comments Pagination: Displays next/previous links to paginated comments where this has been enabled in the comment settings in the WordPress admin
      • Previous Page: Displays the link to the previous page of comments.
      • Page Numbers: Displays a list of page numbers for comments pagination.
      • Next Page: Displays the link to the next page of comments.

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 Install A 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.9.3 (downloadable here).
  • Use the Twenty Twenty-Two theme.
  • Use GutenbergGutenberg The 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/ 13.1 or the latest version (latest version). 

Testing Instructions

Setup Instructions: 

  1. Have a test site using the latest version of WordPress (5.9+). It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty-Two theme by going to Appearances > Themes.
  3. Install and activate the Gutenberg pluginPlugin A 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 13.1.
  4. By the end of these steps, you should see a navigation item titled “Editor (betaBeta A 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.) 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. 

Add a new recipe post

  1. From your dashboard, head to Gutenberg > Experiments and turn on both the Quote and List experiments by checking the checkbox by each and saving (screenshot of what you want to see). 
  2. From your dashboard, head to Posts > Add New. 
  3. Title the post “May Macaroni” and add in a brief sentence for now (“Welcome to my latest monthly recipe where I’ll share the recipe I’m most excited to make in the month ahead”). Publish the post. 
  4. View the post on the front end and quickly add a few comments to the post. They can be brief like: “Great recipe!” & “Can’t wait to make this”. 

Create a custom template for recipes

  1. Return to the Post Editor where you just published your post, open the Post Settings, and, under Templates, select the “New” option.
  2. A name field will appear. Title the template something recipe related, like “Recipe Template”, and hit the create button. This will open up the template editor. 
  3. Customize the template as you’d like to start. For example, you can add in a HeaderHeader The 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 that matches the wider site, change the font size of the post title, and more. You are likely going to want to add in a Header and Footer Template part at this stage using whatever method you like to add blocks. Remember that you can search for “header” and “footer” too! 

Customize commenting functionality 

  1. Where you see fit, add in the Comments Query Loop block. When you do so, various child blocks will be included. This is where using List View can help you get a sense of what’s there. 
  2. Explore the settings available for each block and begin customizing. This includes removing or adding additional blocks mentioned above under “Comments Query Loop blocks”, adding custom colors, changing font size, etc. You could also wrap the Comments Query loop in a Group block in order to add custom bordersHere’s a screenshot for inspiration that shows what you can do if you have time.
  3. As you go, save changes and view your post to see what you’re creating live on your site. As much as you can, try to make the comments area an engaging and welcoming spot for your recipe reviewers.  

Write your recipe with quote and list blocks

  1. When done, save changes to your template and hit “back” to return to your post itself. 
  2. Add a list block and begin listing ingredients (pasta, cheese, pepper, milk, pepper, etc). Here’s a recipe you can pull ingredients from in case you’re like me and need some inspiration. Notice how you can still hit return to add new list items and that you can use the + sibling inserter to add sub items. 
  3. Under a few ingredients, use the + sibling inserter to add in some alternatives. For example, you can list types of cheeses (provolone, cheddar, goat cheese). Aim to create something like this screenshot
  4. Add another list block and switch to numbers in the toolbar to list out cooking steps. These can be simple: Boil water, add pasta, cook for 10 min, add cheese, and taste. Try adding some sub items once more. For example, you can list different cook times depending on how folks like their pasta. 
  5. After the ingredients and steps are listed, add a heading block titled “Recipe Insights”. 
  6. Add in a quote block and create a quick quote from the point of view of a reader of the site who might have some tweaks to offer. Be sure to include some different blocks like another List block, Headings, etc. Here’s a screenshot of an example
  7. Create a few quotes as you so desire and have time. 
  8. Update the post and make any additional changes you’d like to the post or Recipe Template itself. 

Make yourself some pasta and pat yourself on the back. Thanks for testing and remember to leave a comment below about your experience!

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? 
  • 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?

Leave Feedback by May 18th, 2022

You are always welcome to join a social learning space to go through this call for testing on May 2nd. All are welcome to join and we hope to see you there!

#fse-outreach-program, #fse-testing-call