FSE Program Running Through Refinements Summary

This post is a summary of the Running Through Refinements call for testing for the FSE outreach program, the nineteenth effort. As always, I want to highlight those who helped to bring others along with them in this latest effort: 

  • InstaWP for allowing the outreach program to use their tooling for free, enabling more folks to jump into this call for testing and for more creativity in what we are able to test. 
  • Replay.IO for trialing their software for the WordPress project and the various folks helping use it for this last call for testing. 
  • @piermario for the Italian translation of the call for testing.

Shout out to @pauthake015 @wesleyrakshit @bgoewert  @georginareeder @haeunpark @teresagobble @magicroundabout @ccwalburn @alexandretp @lanesdon @ioanamuresan @plari @jartes for being first time contributors. Expect a badge on your WordPress profiles for your contribution! What a lovely and large crew of new contributors to celebrate. 

High-level summary 

Feedback for all of the tested features was generally positive with folks able to see how what’s being worked on unites and moves forward the Site Editor experience. As always, there were also noted bugs, feature requests, and areas of refinement that mostly matched either current priorities or previously reported items, underscoring where the experience needs to move towards. Overall, three specific areas of iterations stood out outside of the positive feedback: 

  • Improving the pattern selection options particularly 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. setup state. 
  • Making the “Edit” option clearer in Browse mode. This has been improved upon already!
  • Iterate on the ability to rename a menu after creation and ensure drag & drop is reliable. 

Folks were impressed by Browse mode and the potential for it to help orient users to the Site Editor and its capabilities by emphasizing templates from the start with friction before editing. Moving Styles to this same section has already been listed as a next step and was reflected in the feedback as folks continue to look for clear delineation between what impacts a site globally. 

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.’s editable list view managed to strike a nice balance between the current List View experience and the prior menu management experience in Classic menus. This nice middle ground familiarity resulted in mostly excitement and ease, with continued feedback for refinement and desired functionality. 

Finally, the Style Book and Previews were a hit with minor bugs to resolve. It’s clear both will make a large difference in empowering folks to customize their sites and understand the global impact of their changes. 

First of all – I simply love the new concept. I love the list 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. – it feels more natural to see list there and content in the main panel; I really like the Edit button – it makes a huge difference in terms of clarity of the intent to change – and I anticipate we’ll see less mistakes. Overall I detect a ‘feel good’ factor and am excited to see these live.

@ioanamuresan in this comment.

Overall, I really enjoyed navigating through browse mode – the ability to easily view templates in the Site Editor and preview each one before going in to edit is a great experience… I also really love how much easier it is to see your 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. items in the sidebar here. Dragging and dropping menu/sub-menu/sub-sub-menu items is really easy and smooth.

@georginareeder in this comment.

I really like the split of settings in the sidebar – the navigation feels like a place where it makes sense conceptually to break them up that way… The Style Book is pretty much the greatest thing since sliced bread! It really feels like a game-changer to me – and I personally found it a way more usable to browse and edit the styles.

@jordesign in this comment.

I love that choosing Appearance > Edit now opens the editor with the sidebar so that you can see the options for Templates and Template Parts. I also like that you have to click Edit to edit the home page when you first access it. I think that makes it much clearer than immediately being thrown into the editor without a good understanding of where you are or what you are editing…I love the updates to the Navigation block and being able to add and configure menu items in the right sidebar! I didn’t have any trouble updating or creating menus with the new format…I experimented with the Replace option on the Query loop and found the patterns confusing. I couldn’t easily tell where one pattern ended and another began, and after I selected some of them, they looked different than I expected.

@ccwalburn in this comment.

I really liked the way the Navigation editing worked! It was so easy to manage. I also liked having the Stylebook available. I always have to create a page with all the blocks I want to use and style. The Stylebook makes it so much easier.

@antigone7 in this comment.

Confirmed Bugs

The following bugs were found in the current experience, some of which have already been fixed.

New

Previous:

Feature Requests 

Much of the feedback on Browse mode and the Navigation block matched what has already been noted or planned, underscoring the work that remains. In particular, at the beginning of the call for testing, there were repeated notes about the “Edit” button not being visible in Browse mode which was quickly iterated upon as the test continued. Finally, while the Navigation Block’s 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. improves, there are still repeated calls for deeper customization options both around mobile menus/overlays and things like hover styles in the 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.

Seemed to me that naming and renaming the menu should be somewhere more intuitive than under Settings > Advanced. Maybe next to the create button, or simply by clicking on the name of the menu. Or when creating menu?

@robglidden in this comment.

I find myself wanting some more description than just “Single.” If I customized these all for myself, maybe this would be enough to remind me what each one is.

@clubkert in this comment.

I really wanted drag-and-drop handles on the left-and-right-hand panels to be able to resize them.

@magicroundabout in this comment.

General Usability

Pattern selection for the Query Loop block, renaming the Navigation block, and visibility of default design tool options stood out as the most repeated feedback across each response. Outside of the critical feedback below, many folks found a much improved experience with each feature noting a much easier time creating and customizing menus, styling across one’s site with the preview and Style Book options, and quickly maneuvering through templates. 

The ‘list view’ vs ‘grid view’ to show patterns for the query loop is not intuitive. It is not clear that the ‘list view’ is showing a single pattern option, with the ability to scroll sideways to view others. When first seeing the ‘list’ vs ‘grid’ tabs in Choose Pattern, I would have expected that to have ‘single’ vs ‘grid’ pattern options – Similar to how the same buttons in the Query Loop toolbar determine whether they will appear in a list or grid view. None of the pattern options show ‘Grid with Images’; aka what shows up when you click the Grid button in the Block toolbar.

@alexandretp in this comment.

I found the dragging dropping of menu items in the right sidebar a bit eventful. Had a hard time positioning where I wanted them. If I accidentally indented them an extra level, I couldn’t go back just one level – I had to move it to the main menu, then reattempt to add it as a 1st level submenu. That said, it’s waaaaaay more clear and manageable than before so I think this is a significant improvement.

@ioanamuresan in this comment.

Clicking the black + square to add a link brings up a module which has too much focus on open in new tab and Transform. It would be helpful to better integrate selecting a page or post into this modul. It really needs a redesign making it a lot easier to select what one needs.

@paaljoachim in this comment.

I miss a “learning mode” (that can be switched off and on) with extra explanations for each option (and links to docs) in context.

@juanmaguitar in this comment.

I found myself clicking (and double clicking) the menu item itself to try to edit it which did nothing (vs. clicking the pencil).

@clubkert in this comment.

I find it confusing that it says “Browse styles”, when you are actually choosing, not browsing, a style variation.

@robglidden in this comment.

It bothers me that the role of the “W” logo in the top-right seems to change. Historically the WordPress logo takes you to the Dashboard, but when editing it takes you back a step. I found this confusing… I also generally dislike the fact that so many icons are non-standard and don’t have text labels. This makes it very hard for a new person to navigate the user interface. Yet when I turned labels on the experience was WORSE with labels being chopped off and it not being clear what anything did…I like the idea of tabs rather than LOOOOoooonnngg settings screens, but I don’t like the icons. Turning text labels on in the preferences didn’t seem to have any effect on the sidebar. Again, icons-plus-labels would be a much better option here. I really disliked having additional style settings turn-on-and-offable in the sidebar behind the three-dots menu thing. And I could not find how to make the text bold (eventually found as “appearance” but this should be “weight”).

@magicroundabout in this comment.

#fse-outreach-program, #fse-testing-summary

FSE Program Testing Call #20: Find Your Style

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

Building off of the last call for testing, this effort includes both some new and some repeat items that have continued to be iterated upon. In particular, browse mode’s design continues to evolve with a clearer edit button and design of the currently active template. Tied to this, the new 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. for 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. has received numerous improvements as work is underway to move the option out of experimental. Taken together, this test helps underscore just how much a single theme allows you to do and how the Site Editor tools are evolving to make quick customization increasingly intuitive. 

New items to test:

Repeated from previous times: 

As with last time, this post will be updated to 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/ so the latest changes can be tested ahead of the 6.2 release cycle for a faster and more accurate feedback 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.

Framing

To ground this experience a tiny bit more, let’s pretend you’re switching over from a Classic theme to a Block theme. After switching, you will need to import the widgets settings before re-imagining the homepage of the site, including the navigation. You’ll end by exploring various ways to style the site across different templates, both by using the Style Book and by editing blocks individually before pushing those changes globally. Your aim is to make the site look as different as possible a few times over until you find a version you’re happy with. Imagine this is your way of exploring the reaches of what’s possible with the Site Editor, all while using a single theme!

Testing Instructions 

To use a prebuilt test site: 

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

To set up your own test site: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty Three One by going to Appearances > Themes.
  3. Install and activate Gutenberg 15.0. From there, head to Gutenberg > Experiments and turn every experiment except for “Zoomed out view”. 
  4. Head to Tools > Import and import this file to have access to the same content as above. From there, create a simple menu and add a few widgets. 

If you have any issues with manual setup, just comment on the post 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 (@annezazu) in 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/ 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/..

Switch your site

  1. Explore your site and feel free to add in more personalized items, whether by adding or customizing menus under Appearance > Menus or more widgets under Appearance > Widgets. 
  2. When you’re ready, head to Appearance > Themes and select “Activate” next to the Twenty Twenty-Three theme. 
  3. Head 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.) to be brought into the browse mode experiment in the Site Editor.
  4. Click through the different templates and template parts to view the various parts of your site. Eventually, select your Home template and choose the option to “Edit”. Notice that your previously created menu was automatically imported.

Import your widgets and customize your navigation 

  1. Using List View, select your Footer Template Part and delete it. 
  2. Add a new Template Part block, give it a name related to footer, and choose the option to “Start Blank”.
  3. Open the block settings and expand the Advanced section. Under “IMPORT WIDGETWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. AREA”, select the widgets section you’d like to import and click “Import”.
  4. After importing, customize this new footer further as you’d like. Explore using design tools, using group/row/stack variations, and more. 
  5. Once done, select the Navigation block and change a few things as you see fit. For example, you can: move some of the sub menu items to top level items, change the names of a few of the menu items, adjust the spacing between items, and customize the mobile display as you see fit.
  6. Save changes.

Find your style

  1. Open Styles and select “Browse Styles”. 
  2. Open the Style Book by selecting the icon that looks like an eye from the main Styles interface and switch between various style variations while viewing how it impacts your site. Here’s a screenshot in case it’s helpful. This will open up an interface called the “stylebook” where you can see the styles for every block displayed. You can click that icon to toggle this option on/off as you’d like.
  3. After selecting a style variation you like, head back to the main Styles interface and select “Colors”. From there, choose the “Randomize colors” option to change the colors further. 
  4. After exploring the “Randomizer colors” option, head back to the main Styles interface and select “Blocks”. From there, choose a block with a style variation, like Button (not Buttons!) or Social Icons or Site Logo. You can then edit that variation to your liking globally. 

Switch it up (again and again)

  1. Now that you have explored browsing Templates and Template Parts, the Style Book, customizing the Navigation block, and using the color randomizer, use this experience to switch up your site further. To do so, open a template, like the Single or Search template, and edit an individual block, like the Post Title or 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.
  2. After editing the block to your liking, open the Settings tab, expand the “Advanced” section, and choose the option to “Apply globally”. 
  3. Save changes and repeat this process a few times as you have time across templates and different blocks, relying on the Stylebook or Browse mode as needed to get a larger sense of your site. Try to make your site look as different as possible each time.

Bonus: Use patterns as much as you’d like as you customize your site! You can do this by adding patterns directly or by using the “replace” option in blocks like the Query Loop or Template Part.

Leave Feedback by February 1st, 2023

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

Week in Test: 16 December 2022

Hello and welcome to another edition of Week in Test, the place where contributors of any skill level can find opportunities to contribute to WordPress through testing. You can find the Test Team in #core-test.

Jump to: Calls for Testing | Weekly Testing Roundup | Profile Badge Awards | Read/Watch/Listen | Upcoming Meetings

Calls for Testing 📣

Calls for Testing can originate from any team, from themes to mobile apps to feature plugins. The following posts highlight features and releases that need special attention:

FSE Program Testing Call #19: Running Through Refinements

Help efforts to wrap up Phase 2 of the WordPress Roadmap by putting the editor’s latest updates to the test (😉) in a simulation of making a few improvements a client’s website. Please leave feedback by 6 January 2023 🗓 #fse-outreach-program

Weekly Testing Roundup 🤠

Here’s a roundup of active tickets that are ready for testing contributions.

Did you know that contributions with the Test Team are also a fantastic way to level up your WordPress knowledge and skill? Dive in to contribute, and gain coveted props 😎 for a coming release.

Reproduction Testing 🔁

Who? Any contributor.
Why? It is helpful to show an issue exists for other users in order to move a ticket forward for patching.

The following new tickets are awaiting review, and need testers to attempt to reproduce the reported issue (aka “repro”), and then provide a reproduction test report with the results:

  • #57322: Twenty Twenty-Three: Gradients clear on save with KSES filters active.
  • #57329: Cannot save new custom template when name has non-Latin characters.
  • #57339: Twenty Twenty theme pull quote border color issue.

Patch Testing 🩹

Who? All contributors (not just developers) who can set up a local testing environment.
Why? It is necessary to apply proposed patches and test per the testing instructions in order to validate that a patch fixes the issue.

The following tickets have been reviewed and a patch provided, and need testers to apply the patch and manually test, then provide feedback through a patch test report:

  • #57320: RevisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.: add 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. before deleting revisions.
  • #56412: Twenty Sixteen: gallery 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. produces shifted or scrambled output.

PHPUnit Tests 🛟

Who? Any QA or PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. developer contributors who can (or are interested in learning how to) build automated PHPUnit tests.
Why? Automated tests improve the software development feedback 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. for quality and backward compatibility.

The following 6.2 tickets need PHPUnit tests built to accompany their respective patches:

  • #55290: Not all image edits are applied to all subsizes.
  • #56340: PHP8.1 E_DEPRECATED in PasswordHash::gensalt_blowfish.

Profile Badge Awards 🎉

And a huge belated Thank You to the following contributors who earned the Test Contributor profile badge by participating in the WordPress 6.1 and 6.1.1 releases:

Read/Watch/Listen 🔗

Upcoming Meetings 🗓

🚨 There will be no more regular #core-test meetings held for the remainder of 2022. Weekly meetings will resume on 3 January 2023. See you then!

2023 Schedule:

Interested in hosting a <test-scrub>? Test Team needs you! Check out Leading Bug Scrubs for details, or inquire in #core-test for more info.

#build-test, #core-test

FSE Program Testing Call #19: Running Through Refinements

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

Important notes: There’s a current call for volunteers to use Replay.io, a tool with a comprehensive way of capturing bugs. Respond by December 28th, 2022 to get involved. Separately, the FSE Outreach Program is always looking for volunteers to help run these calls for testing for the community.

Overview

With work deeply underway to refine and wrap up numerous aspects of phase 2, this call for testing centers numerous changes in progress to put them to the test (get it) and find the edges of what’s being worked on. At a high level, this test covers the following:


Taken together, these changes make it easier to navigate between the content you want to edit, see changes at scale when working with Styles in a few ways, create an easier navigation editing/creation experience, and have a more intuitive experience when editing individual blocks. 

Framing: Refining a client’s site

To ground this experience a tiny bit more, let’s pretend you’re doing some refinements to a client’s site to finetune their branding and, as a result, homepage and navigation. The aim is to go from a more complex navigation structure to a simplified one, with two different options to choose from for the client (edit current menu and create a new option). Tied to this, the homepage will shift the focus of content 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 with more of an emphasis on images (and whatever else you’d like). Finally, you will update the overall styling as you see fit, with bonus ideas for those who have extra capacity and interest!

Testing Instructions 

To use a prebuilt test site: 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-call-for-testing-19 
  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 “WP Admin Login” and use the information provided to log in.
  4. Save the link to your site so you can access it again during the test. 

To set up your own test site (skip if using the above): 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty Three theme by going to Appearances > Themes.
  3. Install and activate 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/ 14.8.4 RC1 by downloading the release > going to Plugins > Add New > Installing. From there, head to Gutenberg > Experiments and turn on “Off canvas navigation editor” and “Block inspector tabs” experiments. 
  4. Head to Tools > Import and import this file (click “Download” in the upper right hand corner first) to have access to the same content as above.

If you have any issues with manual setup, just comment on the post 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 (@annezazu) in 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/ 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/..

Explore browse mode

  1. Head 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 bring you to a reorganized view of the site editor.
  2. Click Templates and notice the list of templates now shown in the sidebar. Click through various templates to quickly view them.
  3. Select “Home” from the templates and then select “Edit” in the open sidebar to directly alter the template.

Editing navigation

  1. Select the 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. of your site before selecting the navigation block. Within the navigation block, select the page list block and choose “edit” from the block toolbar. This will open a prompt explaining that a step must be taken before you can customize your menu. Select “Customize”. You can also select the option to “Customize” from the block settings sidebar.
  2. Open your block settings and notice that each menu item is now listed in the sidebar. 
  3. Spend some time condensing the menu down as you see fit to just three top level menu items. You can do this by dragging and dropping the menu items in the sidebar, deleting items, and renaming them. For example, you can list “Press” under “About” and “Resources” under “Getting Started”. 
  4. Explore the additional tabs in the block settings (Styles, Settings) to customize further to your liking. For example, you can change the typography, block spacing, or how it appears on mobile. When done, click “Save”. 
  5. Afterwards, select the navigation block once more and, in the list view tab of the block settings, select the menu name and choose the option to “Create new menu” in the dropdown.
  6. Select the + button in the same tab to add in simply the “Contact”, “About”, and “Getting Started” page. 
  7. Head to the Settings tab and open the “Advanced” section to rename the menu to something like “Simplified main menu”. When done, click “Save”. 
  8. Heading back to the List View tab in the block settings section, click on the menu name to open a drop down and select which menu you’d like to display from there.

Redesigning the homepage

  1. Select the Query Loop block and, from the block toolbar, select the “Replace” option. 
  2. This will open up a modal where you can pick a different pattern to display the posts. Choose a different pattern.
  3. Customize the pattern you chose further. For example, change the 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. size, 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., remove or add blocks, change the size of the titles of posts, etc. When done, click “Save”.

Changing Styles

  1. Open Styles and either choose “Browse Styles” to pick a different style variation or make adjustments as you see fit using the Styles system. For example, you can customize the appearance of individual blocks with the “Blocks” section using the new preview option or change overall options with Typography, Color, and Layout. 
  2. When done, select the icon that looks like an eye from the main Styles interface. Here’s a screenshot in case it’s helpful. This will open up an interface called the “stylebook” where you can see the styles for every block displayed. You can click that icon to toggle this option on/off. 
  3. Tweak anything you’d like further while using the stylebook before, when done, clicking “Save”. 

Bonus: Customize further as you see fit

What follows are various ways you can take this test further. Feel free to try all or none, depending on how much time you have:

  • Add custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. using the Styles > Custom fieldCustom Field Custom Field, also referred to as post meta, is a feature in WordPress. It allows users to add additional information when writing a post, eg contributors’ names, auth. WordPress stores this information as metadata. Users can display this meta data by using template tags in their WordPress themes. as part of the input for custom CSS work in Global Styles.
  • Explore browse mode more by switching between and editing different templates or template parts.
  • Add or edit more blocks and explore the split settings options within.
  • Make more changes to the Styling of individual blocks, taking advantage of the new preview options for individual block styles and the overall stylebook.

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 January 6th, 2023

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

FSE Program: Seeking volunteers to use Replay.io for capturing bugs

The FSE Outreach Program is always seeking ways to improve the access, ability, and reliability of capturing feedback for the latest and greatest with WordPress. Previously, this has looked like experimenting with “explorations” of early features using prototypes/specific PRs to test or the recent addition of InstaWP to make creating test sites and unique testing situations far easier. In the coming months, another tool, replay.io, will be piloted, and volunteers are needed to help determine how it can be used to better WordPress’ bug finding and fixing feedback 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..

Volunteer Requirements

  • Ability to help for the next 3 months whenever a call for testing is started (at least 1 hour per call for testing with calls for testing about every 3-4 weeks). 
  • Time to learn how to use replay.io and use it when going through the calls for testing. 
  • Comfort in 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/’s GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/ repository and opening issues. 

If you are interested in volunteering, please comment on this post between now and December 28th 2022! If you have questions/comments/concerns, just ask below. Right now, I’m looking for at least 3 folks to participate. 

What is Replay?

Replay is a “time travel debugger” for JS. Replay lets you record a browser session to produce a shareable replay for collaborative debugging. The replay isn’t a video — everything from the browser is recorded so you can inspect anything from HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. elements, JS execution, network requests, user events, and even the state of your ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. components at any moment in time.

Replay refers to both the Replay Browser (recording) and the Replay App (debugging). One major use case for using this kind of tool in the WordPress project is to reduce time to resolution on bug fixes i.e. writing steps to reproduce & reproducing issues locally.

 Here’s more information:

  • An app for Linux, MacOS, and Windows that is a custom browser that can record all actions and background processes of any website.
  • Using the Replay browser, you can record problems on any website and upload them to the Replay WordPress Team. Once recorded and uploaded, you may add comments to the timeline or simply pass it off to a developer with a link or inside a GitHub issue.
  • Developers can then view the recordings and see exactly what’s happening and when rather than needing to look at screenshots of the console or replicate on their end.

You can learn more in the Replay Documentation

Why Replay? 

@chanthaboune brought Replay to the FSE Outreach Program’s attention as a tool that could help supercharge our bug finding and fixing. Replay’s OSS commitment, including free support, makes it stand out as a possible option to consider. Rather than trying to roll it out on a broader scale, this is an attempt to do so on a small scale first to understand what does and doesn’t work to help determine if it might be a tool the broader WordPress community can use in the future. This will be trialed for the next three months, dependent on volunteer capacity. Feedback will be collected and shared along the way before bigger decisions are made. 

What kind of issues will this help with?

While just about any issue will benefit from the additional information captured by replay.io, there is a sweet spot in issues that are difficult to reproduce and that seem environment dependent. Here’s a recent example with a performance concern ahead of WordPress 6.1 where this would have helped cut down on resolution time.

Who will be able to access the recordings? 

Only those with developer seats can access certain “time travel” features of DevTools e.g. Print Statements of the replay app. Various developer seats will be given as needed based on the issues filed. I (Anne) will handle that since I can monitor the funnel of issues created through the FSE Outreach Program while we explore this.

How long will these recordings last?

As of now, Replay guarantees the recordings will be fully operational for 3 months. However, new features might make recordings lose information such as in the developer tools.

Do I have to download this app to make recordings?

Yes, there is a firehose of information that it’s tracking that include all click interactions and everything happening at all levels of the code, network, etc. There’s no way to do this in regular browsers that isn’t terribly difficult or tedious to the point of being useless.

Do I have to use this browser as my primary?

No, we recommend only using the native application when doing actual recordings.

How long can my recordings be?

As of now, anything more than 2-3 minutes gets difficult to use however they are working on improving this.

Privacy & Security Questions

See here.

#fse-outreach-program, #replay-experiment