FSE Program Testing Call #26: Final touches

This post is the twenty-sixth call for testing as part of the Full Site Editing Outreach Program and likely the final one with a title to match. For more information about this experimental program, please review this FAQ for helpful details and check out how it’s going to evolve. 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 6.4 on the horizon, this call for testing takes you through many of the major pieces set to land with this release:

Framing

You’re set to launch your new photography portfolio. You plan to add more content in the coming months so you want to ensure it’s well organized and well equipped for future tweaks/additions with new fonts and new patterns. When you originally started the site, you didn’t yet had a vision for how to finish it until now!

Testing Instructions 

For this test, please use the following pre-built site as we’ll be rapidly switching between 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/ versions:

  1. Open this link only once: https://app.instawp.io/launch?t=fse-testing-call-26&d=v2 
  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. 

Manage fonts

  1. Head to Appearance > Editor > Styles > and select the pencil icon to open up the Styles panel.
  2. Select Typography to view a list of active fonts and click the “Aa” icon to open up font management.
  3. Upload a new font file using the drag and drop option. You can download a font from https://fonts.google.com/
  4. From the font manager, select “Inclusive Sans”, a previously uploaded font, and choose “Delete” to uninstall this option. 
  5. From there, close out of the font manager, and change the Headings and Text font option to the new font you uploaded.
  6. Save changes.

Get your site organized 

  1. Use Command + K or evoke the Command Palette by clicking on the Top Toolbar field and use it to open the List View (purposefully leaving out the exact command).
  2. Select the Columns block containing the “Want to work with me?” text and, again using the Command Palette, group this block.
  3. From there, you’ll see two different Group blocks on the page. Select each and, using the three dot menu in List View, find the “rename” option and give each a different name.

Create a pattern 

  1. Select the “Want to work with me?” Group block with its new name and open the block settings.
  2. Under the Styles tab, add a black and white background image from the Media Library. Adjust the colors as needed afterwards. 
  3. Using the three dot menu, create a new synced pattern for “Want to work with me?” content and add a categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of your choosing.

Finish your Portfolio page

  1. Using the Command Palette, open the draft page titled “Portfolio”. On this page, you’re going to create three sections of photos “With People”, “Without people”, and “Black and White” to show off your work alongside a section of all of your photos already listed. 
  2. Add the unsynced pattern titled “Pattern section” using whatever method of your choosing (Inserter with the + button in the top left or the Quick Inserter with the / option). 
  3. Using this pattern and the default content it provides, fill out the respective details including a proper heading, description, image with a set aspect ratio that epitomizes the rest of the images, and remaining gallery items. Here’s an example of what this should look like.
  4. Create all three sections following these steps: “With People”, “Without people”, and “Black and White”.
  5. Change the font for each of these headings to be different than the global option set originally in Styles (and ensure all options appear).
  6. Open List View and rearrange each section in a different order by dragging and dropping with help from the image and gallery previews. 
  7. As a finishing touch, select the first standalone image in each section, 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 toggle on the option to “Expand on click”. 

Swap templates

  1. Once done, open Block Settings and, under the Page tab, select “Pages” next to Template. 
  2. From there, you’ll see options “Edit Template” or “Swap Template”. Select “Swap Template” and choose the “Portfolio” option. 
  3. Before saving, change the Page status to “Published”.
  4. Save changes.
  5. Use the Command Palette to view your site. Notice this new Portfolio page is automatically included in your menu and that when you hover over the first standalone image in each section there’s an option to expand it and view in isolation. 

Announce your new portfolio and remove the Like button

  1. Return to the Site Editor and, using the Command Palette, start the process to add a new post. 
  2. Title the post “Announcing my portfolio” and write a brief paragraph, including a List block that mentions each portfolio section (“With People”, “Without people”, and “Black and White”). Notice that the block toolbar always stays with the overall list rather than each individual item. 
  3. Publish the post and view it. Leave a comment on your own post and notice that there’s a Like button available. 
  4. Go back into the Post Editor and, using the Command Palette, open the Single Post template. 
  5. Using List View, select the Comment Template and open Block Settings. Notice there’s a Plugin section with a Like Button option turned on. Turn this option off and save changes. 

Go further

From there, view your site, click around, and make any additional changes you’d like! Create new posts, create new patterns, or adjust your site’s styles. While this walks through an initial set of items, feel free to explore further based around the new features coming in 6.4.

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 for site building and for writing new content?
  • 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 October 9th, 2023

#fse-testing-call

X-post: Test Team Update: 18 September 2023

X-post from +make.wordpress.org/updates: Test Team Update: 18 September 2023

Hallway Hangout: Let’s chat about improving accessibility in the Site Editor

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment and #accessibility channels as part of the FSE Outreach Program. Huge props to @alexstine and @joedolson for demoing.

Attendees:

@alexstine @joedolson @richtabor @annezazu @poena @joen @jerryj @sergey @afercia @queerdevperson

Video Recording:

Notes/Links:

Overall demos

To start, we did a brief round of intros for @alexstine and @joedolson before deciding to dive into the actually content to give more time to the topic. Overall, the following demos were done with a screen reader, each marked in the YouTube video with chapters:

  • Manage the navigation menuNavigation Menu A 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..
  • Edit 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. to add Site Logo. 
  • Using the Command Palette. 

Overall discussions

Outside of that, two discussions broke out in between demos around the following:

  • Use of inert for disabled blocks with a broader discussion ongoing in GitHub.
  • The number of different modes, along with the usefulness of List View combined with focus mode, and the ways in which edit and navigation mode weren’t created at a time when nested blocks existed. A broader discussion is underway around providing a focused mode for any container block.

Balancing verbosity

Throughout the discussion, there were different mentions of too much verbosity, like upon entering Site View of the Site Editor, compared to moments where there’s a lack of information, like upon selecting the navigation 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.. On the flip side, with the Command Palette, what’s announced is incorrect information!

On the discussions of different modes

@alexstine doesn’t like the different modes and finds List View is easier to work with partially because you don’t know where to navigate around in the canvas otherwise with the keyboard. It’s very unpredictable what direction you will be traveling based on what you select. Right now, we’re in a situation where we have too many ways to move around: arrow keys in the canvas, have an edit mode, have a navigation mode, have list view. Can we consolidate? @afercia added context that edit and navigation mode were done when there were no inner blocks. It was a way to simplify navigation between blocks but the structure of the blocks was way simpler. This led to a broader discussion around showing List View for individual blocks, similar to what’s been done with the Navigation block, where you can only see the “tree” of that specific block with the inner blocks. @joen jumped in to talk about design explorations on exactly that where you can use a “focus mode” to zoom in on just that part of the page and have List View for just that part of the system.

Manage navigation menu demo

From the demo, here are a running list of notes in order:

  • Wasn’t able to manipulate the individual items in the Site view. Had to enter into Edit view to make changes.
  • It was hard to know what would trigger editing.
  • Upon getting into Edit View, there was tons of verbosity and ultimately focus loss after trying to edit.
  • @alexstine had to then navigate back to where he was which showed the huge cost that comes with focus loss moments.
  • @alexstine demoed how one can select the navigation block but it’s not clear how to act upon it without knowing how to get to the toolbar view. Keyboard users don’t know that pressing right arrow key would lead to what you need. 
  • Detaching page list is a confusing to understand and is required before you can edit the links– can we update the language? The language is hard to understand in general and also impacts synced patterns currently.
  • After detaching and editing, the navigation block still doesn’t give a lot of information.
    • There’s not a way to get more information about the current link you’re working on (what the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org is, where it’s pointing to, etc). 
    • Information is more limited here and it’s assuming pre-existing knowledge about the menu. 
  • Open up the panel to save but it doesn’t say what’s in there when you first enter. It would be nice to have more info upon entering the Save section rather than going through each section to learn more.
  • Discard changes is confusing and relates to this larger known issue.
  • If you are in navigation mode and you save the Site editor changes, instead of focusing the save button again, it focuses the first button in navigation mode. 
  • Back button in Site View doesn’t have context around what you’re going back to. 

Changing Site Icon demo

  • This worked fairly smoothly once he found where the template parts are.
  • He went into Templates first before going to Patterns based on his experience working with templates.
  • While going through the Template section, @alexstine noted that it might be worth considering not having each template as individual tab stops. 
  • Having a summary of “My patterns: zero, theme patterns: 19” upfront when entering this section would be helpful. 
  • Empty state could be improved which relates to a current open issue on that topic.
  • Confusing to have template parts under patterns rather than templates. This is due to being in an in-between state with template parts. 
  • @alexstine struggled to open up the Header pattern and, upon opening it, lost focus same as before with the navigation block. 
  • Being able to rename group blocks would be a huge help but it’s unclear how that’s announced. This is currently a feature slated for 6.4 so let’s get some testing in place!
  • Ran into a problem where the 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. is open once you select a block in the Post Editor but in the Site Editor, it doesn’t open, causing you to need to do a lot of navigating to get it open. 
  • Alex demoed the editable list view for the navigation block in the sidebar, where all inner blocks of navigation block are there. 
  • A larger discussion around showing heading level occurred, along with the lack of document overview in the Site Editor. Instead, we discussed showing the heading level icon along with the text in List View.
  • It would be good to get a solid pattern in place for this experience considering work is underway for adding text to paragraph and list blocks in List view.

Using the command palette:

  • Need to fix naming of the prompt which matches this previously opened issue.
  • Searching within the Command Palette doesn’t share how many results are shown.
  • When going through the results for the command palette, numbers are read off but only shows 5/5 and it’s hard to know to keep going since more than 5 were listed.
  • Doesn’t announce enough results found and there’s an incorrect number of announcements. 
  • Need more accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) testing at the start before these features are implemented. 
  • A third party library was used so it’s tricky to keep BC when addressing problems. 

Inert usage 

  • Broader discussion and demo of inert was done with the Comments block
  • When selected, it only announced “selected” because this form is specified as inert. 
  • Using inert makes something non interactive which is something we do desire (aka folks won’t try to submit a form) but if we’re using a technique that causes it to not exist for one group of people, it’s inactive and absent. There’s no parity between the experiences. For screen reader users, there’s no preview. 
  • This entire discussion is very similar to how to hide content, like using display:none. Anytime you say something is inert and if it were invisible, it’s fine and has no impact. 
  • In this case though, we’re using inert to reflect a preview state while that preview state is nonexistent for screen readers.

Follow up issues:

I (@annezazu) will follow up to open each of these but welcome folks to help me out here as anyone has time 🙂

  • Focus loss after entering edit mode for the navigation block and for header template part. 
  • Update detach language for navigation block and synced patterns.
  • Add more information when you open up the save panel without needing to go through each section. 
  • Open bug for when you are in navigation mode and you save the Site editor changes, instead of focusing the save button again, it focuses the first button in navigation mode. 
  • Back button in Site View needs to provide more context around what it’s going back to.
  • Heading in List View doesn’t indicate the heading level – show heading level in list view and have aria label show heading level. 
  • Consider not having each template be a tab stop when in the Site Editor > Template view.
  • Provide a summary upon entering the pattern section (ex: “My patterns: zero, theme patterns: 19”).
  • Open sidebar upon block selection in the Site Editor to prevent labor of navigating to get it open (match experience in Post Editor).
  • Bug with Command Palette announcements for results. 
#fse-hallway-hangout

Hallway Hangout: Let’s chat about the WordPress 6.4 & Evolving the FSE Outreach Program

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program.

Video Recording:

Notes/Links:

When I was the only one in attendance, I decided to still record an update on both WordPress 6.4 and the FSE Outreach Program. To do so, I went through the Evolving the FSE Outreach Program post and went through various top 6.4 related items. Anything starred is not yet merged:

From there, I went through the Roadmap to 6.4 post in more detail, explaining what isn’t going to make it and has been punted.

#fse-hallway-hangout, #fse-outreach-program

X-post: Test Team Update: 11 September 2023

X-post from +make.wordpress.org/updates: Test Team Update: 11 September 2023

X-post: Call for Testing: Performant Translations

X-post from +make.wordpress.org/core: Call for Testing: Performant Translations

X-post: Test Team Update: 4 September 2023

X-post from +make.wordpress.org/updates: Test Team Update: 4 September 2023

Test Chat Summary: 29 August 2023

On 29 August 2023 at 16:00 UTC<test-chat> started in #core-test.

Announcements 📣

  • WordPress 6.3.1 Maintenance Release: This update fixes a handful of CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and 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 items, details of which can be found in the previous RC1 announcement.
  • 6.4 Release Parties Schedule and Hosts: The release squad is looking for volunteers to fill various roles required for each milestone’s <release-party>. Raise your hand, or be kind and share this post with folks you think can help out. Thanks!
  • The Future of WordPress & What’s Next for Gutenberg: Watch these presentations from WCUS 2023 to see what’s in store for 6.4 and beyond.

Focal Group Updates 🗣️

Handbook

There is an open PR to add a Test Team Rep page to the handbook. Reviews are welcome, which can be comments/reviews on the PR, or a pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” in #core-test if something needs more discussion.

Open Floor 💬

FSE Outreach Program Update

[This discussion started here.]

It has been proposed that the #fse-outreach-experiment begin the process of spinning down its user testing aspect (i.e. the program’s calls for testing) by the time WordPress 6.4 ships. In place of testing efforts, focus would shift to emphasize wider adoption of the Site Editor through hallway hangouts, dev documentation efforts, and other adoption-focused initiatives on the path toward wrapping up Phase 2 of the WordPress Project Roadmap.

Because the FSE Outreach Program has considerable overlap with Test Team efforts, program leadership has requested input from Test Team contributors with questions or concerns around the proposed shift. This follows other shared feedback from current program participants.

It was stressed that changes in the outreach program be handled carefully and slowly, and to capture opportunities for feedback. The next step is to compile initial feedback and thoughts around this change to share in a Make/Test post for wider input.

Calls for Testing

Current contributors in the #fse-outreach-experiment have expressed a desire to continue testing in a format adapted from or similar to the outreach program. Structured ad hoc calls for testing from within the Test Team are similar, and would provide an opportunity for continued contribution through testing. [Ed. note: the Test Team should also consider adopting things that worked for FSE CfTs to improve the experience for all testers.]

A possible source for CfT topics could be pulled from roadmap posts (for example), or otherwise collected in an ideas backlog (for example). Some pertinent links for CfTs can be found at:

Work is ongoing for documenting processes in the Test Team. The Handbook project can be found at https://github.com/wordpress/test-handbook.

Test Team RepTeam Rep A Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts. Nominations

[This discussion started here.]

The Call for Nominations for the next Test Team Reps is underway. Test Team members’ help is needed to nominate or volunteer for this role, to help represent the team to the wider project.

If you have a nominee in mind, or questions about the role, please comment on the post, ask in #core-test, or reach out directly to @ironprogrammer in 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/..

@ironprogrammer stepped forward with an offer to help mentor volunteers for this role. It was also noted that serving as a rep offers an excellent opportunity to gain a broader perspective of how Test Team interacts with other teams, and that while it isn’t a “lead” role, there are some leadership-focused skills that reps develop in the process.

Please submit nominations by Thursday, August 31 Friday, September 22, end of day (UTC).

Next Meeting 🗓

The next scheduled meeting is on 5 September 2023 at 16:00 UTC for <test-triage> in #core-test.

Are you interested in helping write Test chat summaries like this one? Volunteer at the start of the next <test-chat> and earn some props!

Props @annezazu for peer review of this post.

#fse-outreach-experiment, #meeting-notes

FSE Program Let’s Start From The Beginning Summary

This post is a summary of the Let’s start from the beginning call for testing for the FSE outreach program, the twenty-fifth effort. As always, I want to highlight those who helped to bring others along with them in this latest effort: 

Shout out to @mdquer @olein @foosantos as first time contributors for this call for testing. Expect a badge on your WordPress profiles for your contribution! 

High level summary 

This call for testing focused on a “from scratch” experience using the big pieces from WordPress 6.3 without detailed instructions for maximum exploration, which is reflected in the lack of new bugs found and in a fair amount of usability feedback and feature requests. In particular, folks struggled immensely with figuring out how to change the sync status of an already created pattern and fumbled through using the Command Palette, with some left confused on how best to use this new tool. While no new bugs were found, Synced Patterns losing their alignment attribute and the Table of Contents 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.’s links not working on an initial save were noted by a few folks. Here’s what some folks had to say overall:

“The only thing to mention is for me is the command palette: The command palette is not satisfying for me. It works , but for me the problem are the keywords. I could not find > top toolbar or list view. As a normal user i would expect a keyword like – list view – should open the list view, or keyword – top toolbar – , should open top toolbar, that does not work for me. I like the new patterns section with synced and unsynced patterns.” @mdquer in this comment.

I’ve been trying to use the new command palette, but I honestly don’t know what to do there. I’ve used it successfully to switch to different pages, but I don’t know what the primary purpose of the command palette is supposed to be so I have no idea if I’m leveraging its capabilities at all…In general I feel like all aspects 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/ have been improved by recent updates. @beckej in this comment.

Bugs 

No new bugs were found and replicated with the following known items raised instead:

Each of these touch on items planned for 6.4 and, in particular, the alignment attribute with synced patterns remains a repeated and well established pain pointPain point Pain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life

But it looks like the block does not work on previews only after the page has been published. As the preview does not have the correct structure. https://bluewinddesign.com/?page_id=385 (previewed page). Clicking one of the headings in the Table of Contents block the link anchor looks like this: https://bluewinddesign.com/resume/#head-3 . It went to a 404 page. @paaljoachim in this comment.

Feature Requests 

Many of these feature requests centered on the Command Palette, a feature new to 6.3 and slated for improvements for 6.4, with one request already completed for adding a Toggle List View command. With the growing number of design and styling options, two folks noted a desire to see the Style Book elevated and more readily discoverable, which aligns nicely with a currently open design issue on that exact topic. 

New

Previous

I found the autosuggest/listings to be varied in their accuracy. Some of them didn’t make much sense in their order compared to the actual search query. @jordesign in this comment.

The ‘View Page’ button exists in the old block editor, so it would be nice to have a similar experience. (My apologies if this has already been raised in an Issue). @olein in this comment.

After checking further, I realized that Style Book does something like that. In my opinion, Style Book should be the default option with a site preview alternative. Or at least highlight Style Book a bit more somehow. @foosantos in this comment.

Media & text block didn’t apply the border when I edited the image styles. The Media & text could be composed of sub-blocks to inherit the properties of a single image block like the Gallery block does now. @josvelasco in this comment

General usability 

Out of all of the usability feedback, a few themes emerged:

  • Changing just the H2 styles was hard to find, with folks going to the Styles > Blocks > Heading rather than Typography. 
  • Switching a sync status of a pattern after it’s been created proved to be nearly impossible to figure out. 
  • Writing in the Site Editor > Pages section has a few points of friction with the locked blocks experience. 

None of these tasks are necessarily niche to do yet prove to be tricky to navigate, with cumbersome steps or unclear 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 navigate, like being unable to see the blinking cursor in a new page in the Site Editor.

New

Previous

Using the Style Book – I was hoping to be able to make changes to the H2 specifically while viewing a preview. It wasn’t made clear anywhere what the hierarchy of editing headings was to edit the ‘Heading’ element for styles that go across all headings, but could then make individual changes to different headings under Typography > Headings. @jordesign in this comment.

I typed into the Width box where it said Auto and wrote 100. The image is now smaller. I am wondering where the size drop down is? To select full, large, medium, small, thumbnail. Instead these options are inside the Resolution dropdown and that can be very confusing. @paaljoachim in this comment.

After checking for about 2-3 minutes, I really couldn’t find a way to change from Synced to Unsynced. Both for the original and duplicated. @foosantos in this comment.

I wanted to insert the table of contents block between the title and the first block, so I moved the cursor to the page title with the mouse and pressed enter, but could not move it to the content area. @olein in this comment.

After creating the page from the Site editor, clicking the Type / to choose a block does not make the vertical text cursor | start blinking. You see it only after you start typing or pasting something like the Google Doc’s content. @josvelasco in this comment

#fse-testing-summary

X-post: Test Team Update: 28 August 2023

X-post from +make.wordpress.org/updates: Test Team Update: 28 August 2023