X-post: Call for Testing: WordPress for Android 17.2

X-post from +make.wordpress.org/mobile: Call for Testing: WordPress for Android 17.2

Upcoming FSE Outreach Program Schedule

In light of the 5.8 planning and next steps, I wanted to share the upcoming schedule for the FSE Outreach Program in order to ideally help people participate more in what’s to come. As changes occur and I’m able to create plans further out for 5.8, I’ll edit this post and note exactly what I changed at the very end of this post. I do expect changes so please see this all as what I anticipate vs set in stone plans.

As always, if you have any questions, feel free to ask here or to DM me 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/. (@annezazu).

Calls For Testing (aka CfT):

Based on what’s planned for 5.8, the following is lined up for testing:

  • Call for Testing #5: currently underway!
  • Call For Testing #6: focused on using template editing and 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. within that experience.
  • Call For Testing #7: TBD but likely focused on something like creating a more complex landing page using template editing and a more expansive set of theme blocks.

When I can, I’ll try to leave three weeks for testing rather than two but, due to the release timeline, this may not always be possible.

Overall Timeline:

DateGutenbergGutenberg 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/ Questions Round 2 CfT #5CfT #6CfT #7
April 2810.5Start
May 510.6 RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge.End
May 1210.6EndStart
May 1910.7 RC
May 2610.7EndStart
June 210.8 RC 
June 910.8End

Outside of these calls for testing and questions, there will continue to be live streams, hallway hangouts, important posts flagged, etc. This post will be updated to include the relevant links as time progresses:

How to help:

This program has many pieces to it and there are tons of ways to get involved. At a high level, here are ways to help:

  • Respond to the calls for testing with feedback.
  • Submit FSE related questions to the upcoming call for questions.
  • Help me find answers to any submitted questions and write the recap posts.
  • Amplify calls for testing and the call for questions by sharing in your network.
  • Translate the calls for testing for your local community.
  • Explore testing FSE outside of the calls for testing and share any feedback in GitHub.
  • Help me triage feedback that come in from the calls for testing and file any necessary issues.
  • Help me write the calls for testing and the summary posts.

For any of the items that involve working with me directly, please comment on this post or message me directly (@annezazu) so I know you’re interested and we can talk through what helping out might mean. To those of you already doing this work, thank you so much! It all truly helps.

April 29th 2021: updated to include links to the fifth call for testing and the second round of questions.

#fse-outreach-program, #full-site-editing

FSE Program Building a Restaurant Header Summary

The fifth call for testing is already underway, so join #fse-outreach-experiment in slack and/or subscribe to this Make blog and stay tuned for more. 

This post is a summary of the fourth 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:

How far can one go?

It’s always fun to see how far people can take these tests in creating something cool without code. Here are a few screenshots of people’s creations that make me hungry just looking at them:  

An image of a restaurant header with palm trees and a beach in the background alongside a menu and a prompt to order online.
 @greenshady’s exploration 
An image of a restaurant header with various types of food pictured and a prompt to order online.
A Yoast Employee’s exploration
An image of a restaurant header with a coupon code, prompt to order online, and an image of the imagined dining room featured.
A Yoast Employee’s exploration

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:

All of this could be because of my inexperience with 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/ the 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. I’m used to working with Astra and other 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. libraries rather than the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks.

@suhayse in this comment

The most problematic issue is that what I saw in the editor was not what I got on the front end. I have played around with it enough to know in my mind what it might look like on the front end to make adjustments without previewing the changes. However, that is not the user experience that WordPress is shooting for.

@greenshady in this WP Tavern post

Most of us were confused by the current 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. and UIUI UI 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. of the full site editing experience. For some of our colleagues, this was the first time using the block editor for a whole day.

@francesca in this Yoast blog post

Repeated Feedback: Improving saving, desire for a preview option, and differences in spacing

As with last time, to better consolidate repeated pieces of feedback, this section only contains new bugs or enhancement requests while still sharing quotes that highlight how these areas continue to be a 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. In this case, keep in mind that spacing refers to everything from differences between the front end and back end to enhancement requests around setting the width of various blocks. In general, though, it further underscores how the differences in experience between the editor and front end break the promise of WYSIWYGWhat You See Is What You Get What 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. currently. Thankfully, lots of work is underway to continue iterating on this aspect of the experience!

One frustration point was the ability to preview as others have mentioned (the live site definitely looked different from the dashboard preview). When I did view the live site, there wasn’t any margin or padding on the main 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. section but there was on the added column set on the top, even though both were set to full width. I tried changing that main header column width back to wide, saving, then going back to full width but it didn’t help.

@suhayse in this comment

Another thing I noticed was that some small changes, like adjusting the percentage width of the individual columns didn’t activate the “update design” button. 

@suhayse in this comment

I click to Update Design. As there is not yet any simple way to preview on the frontend like we do in the Post/Page screen. I copy the site address url and open a new browser tab and paste it into the new tab to see the frontend. The frontend does not show any margin along the left edge.

@paaljoachim in this comment.

I noticed along the way that the Update Design button was greyed out on occasion when I made some adjustments inside the Cover block and other inner blocks. I had to click into various blocks to get the Design button active again so that I could save. (This seemed a bit hard to track.)

@paaljoachim in this comment.

The site editor makes it looks like there is a small margin all around the full-width header. On the site itself, this isn’t seen. I had set a background color for the full-width header which is edge to edge on the site, but has a margin all around it in the editor.

@kristengunther in this comment.

Columns Block Improvements

Because this call for testing required people to make great use of the Columns Block, it was also the focus of a lot of feedback from various participants. Overall, this feedback mainly came down to two interrelated areas: difficulty navigating between nested blocks and confusion around properly setting width. What follows are the new issues created as a result of this call for testing: 

Testing was smooth overall except when it came to setting the Columns Block to full-width (both in the header and body of the page in the Site Editor). I was unable to set the block to full-width within the Block Toolbar settings. I was able to do this outside of the Site Editor on a fresh page though.  

@synorae in this comment.

I see no visual difference from selecting Wide width or Full width in the backend.

@paaljoachim in this comment.

It’s not clear that the symbol/icon is Full width. It would make sense to have arrows to indicate that it should be full width.

Anonymous Yoast employee in this GitHub issue

I don’t see an option for full width? Ah it’s under alignment. “Alignment” sounds like left/center/right, not the size. What’s the difference between wide and full wide? I don’t see much difference in the preview.

Anonymous Yoast employee in this GitHub issue

Setting Styles

As part of this test, people explored setting various styles to customize their heading to their liking and bring to life the feeling of a restaurant. Similar to the complexity in navigating between nested Column Blocks, though, setting styles proved to be pretty confusing considering how unintuitive it was to figure out how to properly select and then style the section one wanted to. Tied to this, it wasn’t always clear where one could find the setting that would do what they wanted since various settings are spread across the block toolbar and block settings. In some cases, the setting to accomplish something doesn’t exist yet too! As more work is underway to add in more styling options and normalize block level controls in a more intuitive way, this is an area ripe for continued iteration.  

This is global settings vs individual page template settings. It’s pretty confusing right now. I don’t know exactly where I would set universal global header colors. I would expect to be able to do that in the Template Parts/Header but I don’t immediately see how to do that. 

@suhayse in this comment.

I found I had to set the background color for my header 3 times, once for the index template (like in your video), once on the page home template, and once on the page template.

@kristengunther in this comment.

Discoverability of settings, not ideal. Some things are in the popup toolbars, others in 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. (both in Site Editor and Appearance), other in the top toolbar. You had to find the cog and the Global Style icons to open more settings.

@francina in this comment.

When you are new to this, you are really wondering if you need to find the settings in the list overview left sidebar, or the cogwheel right sidebar or on the block itself, all the options are all over the place.

Anonymous Yoast employee in this GitHub issue

Why does the column change size when changing the color in the settings? At least it definitely seemed like it happened that way. That’s unnecessary and unexpected.

Anonymous Yoast employee in this GitHub issue

General enhancements & feature requests 

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 categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. This only includes new feedback and doesn’t include previous findings from prior tests:

Like the first design I was shooting for, I wanted my Navigation items to look like individual buttons, each with a bit of whitespace in between. However, the Navigation block does not currently support adding backgrounds to each nav item. Even if it did, it also does not have a horizontal margin setting to add the spacing.

@greenshady in this WP Tavern post

Collection of Miscellaneous Bugs

Because this was a more open call for testing, not all bugs fit nicely into a category or theme with many of them being standalone problems. To make it easier for those working on full site editing to get a sense of bugs at a glance, they have all been shared here:

#fse-outreach-program, #fse-testing-summary, #full-site-editing, #gutenberg

X-post: Call for Testing: WordPress for iOS 17.2

X-post from +make.wordpress.org/mobile: Call for Testing: WordPress for iOS 17.2

FSE Program Check In Survey Results

On April 5th, I shared a 3 question survey to help improve the FSE Outreach Program by pausing to ask for feedback so that I can better understand current levels of participation, what you all want to see more of, and what can help folks contribute more. Thank you to the 16 people who took the time to share their feedback! If you are reading this and didn’t answer the survey, feel free to respond here with additional thoughts as I’m always looking to improve how this program works.

Full Results

If you want to read the full reports, I have included two options below. Keep in mind that I intentionally removed the final question that listed people who optionally included their WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ usernames for follow up.

What top 3 items would be most helpful to have covered in streams or zoom calls?

The top 3 items were as follows:

  1. Deep dive into Issues/PRs/Designs of interest that relate to FSE (12 votes)
  2. FSE open question & answer sessions (10 votes)
  3. Debriefing the feedback summary posts from the calls for testing (8 votes)

There were very clear winners here!

What would help you be more active in the FSE Outreach Program?

  1. “Office Hours” to troubleshoot testing issues (7 votes)
  2. More time to test (6 votes)
  3. Help setting up a test site (3 votes)
  4. More detail in test instructions (3 votes)
  5. More reminders (3 votes)

The “other option” (3 responses) mainly touched on predictability of testing calls and wanting more time/reminders/expertise. For now, I’m hesitant to set a strict timeline for the calls for testing because the testing needs are variable and partially depend on what’s ready in the 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 at various release points. In time, I do expect calls for testing to become more predictable as the experience stabilizes and there are less brand new things to test.

What best describes your current participation?

  1. I want to participate in the calls for testing but have been blocked due to lack of time/capacity/etc (8 votes).
  2. I find it easy to participate in the calls for testing and plan to do so in the future (2 votes).
  3. I joined in order to pay attention to what’s happening with FSE but don’t have interest in responding to calls for testing (2 votes).
  4. I tried to help with the calls for testing but got blocked (0 votes).

The “other option” (4 responses) are as follows:

I tested many things, discovered the same issues discovered. Didn’t have enough time to go deeper with my tests

New to FSE and coming up to speed so my time can be spent testing and not setting up to test.

I don’t quite follow the script when participating. I don’t just test with TT1 blocks.

I’d like to participate as much as possible as I see FSE as a huge part of WordPress future, and yet another opportunity to give back to the community.

While I was aiming to see more people in the categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of finding it easy to participate, I’m hoping that some upcoming changes can shift this, particularly in extending the current call for testing to a three week window rather than a two week one. On a whole though, it seems like people are keen to help out here but, as seen across the WordPress project, we’re all dealing with limited time/capacity.

Next Steps/Changes

In light of this feedback, I plan to do the following:

  • Continue to run hallway hangouts like this first one but, instead of just focusing on diving into issues/prs/designs, I’ll kick it off with a summary of the latest round of feedback and end with 5-10 min for people to ask questions.
  • Continue sharing reminders (2 week, 1 week, final days).
  • Reach out to those who left their usernames and wanted help with setting up a test site/troubleshooting testing issues. This may turn into doing true dedicated office hours but, for now, will likely turn into nudging people to share directly in the #fse-outreach-experiment or 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.” me if they run into problems when I share reminders for the calls for testing.
  • Explore extending calls for testing periods to three weeks rather than two weeks. I already did this with the latest call for testing thanks to the feedback I had already received from this survey! Continuing this will depend on what the testing needs are and if the three week testing period does increase feedback.
  • Explore documenting some very simple ways to test FSE in the How to Test FSE page for those who might not have time to do a full call for testing but who still want to help.

If there are any changes/next steps you’d like me to explore, comment below and I’ll see how it fits into what I can manage. On the flip side, if you’d be interested in helping with various aspects of improving the program, let me know! I’d love to create a little team of people working to expand the capacity and reach of this outreach effort.

#fse-outreach-program, #fse-outreach-survey

FSE Program Testing Call #5: Query Quest

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

Feature Overview

Not many blocks get an entire milestone dedicated to them but the Query Block did! As the name implies, this is a pretty powerful 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. allowing you to display posts/pages on your site and customize them as you see fit. For example, you could easily use this block to show off all of your favorite recipes by setting it up to show a specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of posts. In the long run, you can expect this to be more of a theme author tool used when building a block theme with block variations, like the Post List Block, being more of what users will interact with. For now though, let’s be adventurous and go on a Query Quest to explore what this block can do. 

If you find yourself interested in the future of this block, check out this recent GitHub issue asking for new ideas for the bundled Query Block patterns that come with the current iteration of the block and get excited about Gutenberg 10.5 which will offer more patterns to choose from.

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 the latest version of WordPress (downloadable here).
  • Use the latest version of the TT1 Blocks Theme
  • Use 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/ (10.4 as of writing this).

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Testing FlowFlow Flow 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
 

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 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. 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: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Create eight posts with two different categories and featured images of your choosing. Alternatively, you can download and import the demo Gutenberg content created especially for this test via the WordPress importer under Tools >  Import.
  4. Go to the website’s admin.
  5. 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 10.4.
  6. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. From there, make sure you are in the Index template (this should be the default upon opening).

General Testing Instructions:

  1. Using the List View, select the parent Query Block and then remove this entire block. This will allow us to start fresh! Here’s a GIF that shows how to do this. 
  2. From there, where the Query Block used to be, add in a Columns Block and set up 2 columns with 50/50 spacing.
  3. In the first column, add a Heading Block with the name of one of the Categories of posts. If you used the demo content, this will be either “Hikes” or “Travel”. 
  4. Add a Query Block just below the Heading Block. During the setup, select whichever option you want from the various sizing options.
  5. Once inserted, open the Block Settings and under “Settings” turn off the “Inherit query from URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org”. 
  6. From there, you should see options to customize what posts this Query Block includes. Under “Filters”, please select one of the categories to display. If you used the demo content, this will be either “Hikes” or “Travel”.
  7. After the Query Block is showing the posts from just one category, proceed to customize the Query Block as you’d like! For example, you can add in additional blocks like Post Author and customize it using the Block Settings option. If you get stuck here, please jump down to the “Customization Instructions/Ideas” for help. 
  8. Follow the same process with the second column and customize the additional Query Block. Make sure to select the second category of posts to display so you see new posts there!
  9. View your site and see if what you created matches the Site Editor view. 

If you’re looking for more ways to customize the experience, try changing the width of the columns, adding in additional relevant blocks, changing colors, and more. 

Customization Instructions/Ideas:

Because this is a more advanced block, here are some additional instructions to help clarify how customization of this block works in case you’re getting stuck. To start, keep in mind that part of the beauty of the Query Block system is that any change you make to one of the posts/pages being queried will be made to the entire set being displayed. This might be confusing at first but it allows for consistency across each post. With that in mind, here are some additional ways to customize your Query Block:

Of note, each of these videos are done using the Small size option but you can choose whatever size option you’d like!

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?
  • 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 May 5th, 2021

While other calls for testing have been open for two weeks, this is open for three weeks in order to see if it causes more feedback to come in. If you can help test, please amplify by sharing this post!

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 GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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. 

#fse-outreach-program, #fse-testing-call, #full-site-editing

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (8 April)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in! If you’re keen to join an effort like this in the future, please join the 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/. channel.

Attendance: @poena @paaljoachim @mkaz @annezazu @oglekler and Karl joined.

Video Recording:

Topics Covered

  • We started off with a neat issue from Paal around adding the post/page title to the post editor‘s top bar to create a more consistent experience between the site editor and post editor for users.
  • We talked about the saving flowFlow Flow 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
    and how it’s a key part to build trust with users exploring a new feature for the first time. Currently, it’s a bit confusing and not yet robust enough to be fully intuitive to use.
  • We discussed how consistency across saving experiences will go a long way including having similar flows for saving individual 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. changes, a reusable block, a template, and more.
  • We talked through the designs shared around saving drafts of changes along with scheduling changes. This could be a neat but complex feature to manage due to the multi-entity aspect of FSE.
  • We talked about how it would be neat for there to be a “builder mode” where certain tool could be more visible when you’re in the process of active building vs maintaining. This is likely a role for a 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 to play in the future.
  • While chatting about dismissing changes, Marcus brought up an interesting point around dismissing changes wondering aloud how often do people unselect changes? It would be neat to find comparison points.
  • Paal shared a neat design he worked on where if someone unchecks/unselects changes, the save button changes to discard changes. This could be a neat way to act as a confirmation message for the user and a neat contextual nudge.
  • We went through template editing and the recently merged PR allowing classic themes access to a blank template. Carolina shared that this is currently setup as being opt out for themers and that one can’t choose from an existing template yet (can only edit the current template or create a new one).
  • As we were going through template editing, we paused to talk about how valuable a welcome guide will be at this stage. There is one in progress for the site editor that should cover this as it mentions if a user accesses site editing via editing a post.
  • We chatted about the dynamic between editing one piece of your site vs the entire thing and how to add necessary friction to the experience. This included talking about the designs shared around clicking in to edit template parts.

Next Steps:

@annezazu reported a few bugs found and left a comment on an issue to pass along feedback from the group:

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

X-post: Call for Testing: WordPress for Android 17.1

X-post from +make.wordpress.org/mobile: Call for Testing: WordPress for Android 17.1

X-post: Call for Testing: WordPress for iOS 17.1

X-post from +make.wordpress.org/mobile: Call for Testing: WordPress for iOS 17.1

FSE Program Custom 404 Page Testing Summary

The fourth call for testing is already underway so join #fse-outreach-experiment in slack and/or subscribe to this Make blog and stay tuned for more. 

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:

How far can one go in creating a custom 404 page? 

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:

Image showing a customized 404 page with an arctic theme with penguins, a shipwreck, and an iceberg.

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 flowFlow Flow 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.

Sarah Gooding from this WP Tavern article.

In my head, I know that we are inserting blocks to things other than the contents that goes into 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, 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 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. panel) within the editor to distinguish which are the content blocks, and which are FSE specific blocks (like template part block).

@toru in this comment.

To sum it up, most of the difficulties I had during the test are the same ones I still experience when using 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/ 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.

@piermario in this comment.

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.

@chanthaboune in this comment.

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.

Sarah Gooding from this WP Tavern article.

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.

@chanthaboune in this comment.

Template Part Creation Improvements

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:

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.

@critterverse in this post.

It seemed like you should be able to add a new Template Part in the same way that you can add a new Template, directly from the FSE sidebar.

@critterverse in this post.

When adding a new title I would expect to see some kind of dynamic change so that I see the new name in the toolbar even without updating the design.

@paaljoachim in this comment.

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.

@piermario in this comment.

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.

Sarah Gooding from this WP Tavern article.

List View enhancements

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.

@lmurillom in this comment.

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.

@piermario in this comment.

The List view is awesome – so useful for Navigating and visualising. Needs power features including a re-order and delete feature for each block.

@get_dave in this comment.

Navigation Block

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: 

Some of what was brought up also relates to overall work around improving the Link UIUI UI 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?

@get_dave in this comment.

Usability

This round of feedback uncovered further areas of usability improvements while touching on current known issues including this issue on distinguishing template parts, this issue on how best to create a pattern of interaction for editing template parts in different editing contexts, and this issue discussing how hard it is to tell the difference between what one is editing. With these being known areas to improve, what follows are generally new areas or issues to be aware of:

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.

@critterverse in this post.

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.

@critterverse in this post.

The overlap between template parts and reusable blocks might cause users to have trouble differentiating them.

@priethor in this comment.

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.  

Sarah Gooding from this WP Tavern article.

General enhancements & feature requests 

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 categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.

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?

@piermario in this comment.

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.

@get_dave in this comment.

Site Editor Crashing

It’s worth noting that two people ran into a still open bug report that causes the Site Editor to crash when selecting a template part after selecting the navigation block

When I was clicking around the newly saved Template Part, the editor suddenly went white but afterwards I wasn’t able to reproduce.  

@lmurillom in this comment.

#fse-outreach-program, #fse-testing-summary, #full-site-editing, #usability-testing