The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
If you’d like to help test Full Site Editing, please join the FSE Outreach Program. You can find current calls for testing for this program here and you can join the fun in #fse-outreach-experiment.
The team gathers in #core-test. Please drop by any time with questions or to help out.
On January 18th, 2023, a few community members from the FSE Outreach Program gathered to chat about various upcoming features specific to BlockBlockBlock 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. Themers:
Applying local styles globally: push block design changes from post/template editor to global styles.
Inputs for Custom CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.: Ability to add custom CSS from site editor Styles panel.
Exploring the Style Book: feature that shows all blocks (including third-party) in site editor, making it easier to test everything when designing.
Edit block style variations: Ability to edit (not yet create) existing block styles of a theme from Styles panel.
Anne started things off with a mention of the latest FSE Outreach Program call for testing “Find Your Style.” Feedback can be left until February 1st, 2023.
A number of PRs and discussion issues were discussed with a particular focus on the benefits to theme developers and designers.
Provides a path for styling blocks in the content or site editor and applying those styles globally to propagate across the site to other blocks.
Features like this will help to lower the barrier for non-developers getting into theme design. Quality of Life improvements.
There is no clear indication in the list view or for blocks where the global styles have been overridden. – A specific comment mentions more exploration being considered.
It was mentioned that it would be good to have a way to turn off the option to apply block styles globally. – Issue opened (#47256)
A workflow that seems likely would be to apply styles globally and then export to the theme (via Create Block Theme pluginPluginA 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.)
Translations for New concepts
Translations for some new concepts and features do not always represent the purpose or main idea of the concept. There could be room for improvement in the way translation comments are added in block editor development.
As an example, the “Apply globally” string doesn’t have any translator comment. This is a good example of what a translator comment should look like.
A new control in the block settings panel allows site editor users to add globally applied custom CSS. For theme authors, this could potentially help with supporting users. This has long been a feature of the customizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. Having this available brings things closer to feature parity.
The idea of per-block custom CSS came up. The benefits and downsides of per-block custom CSS were also discussed. There are some concerns about having customizations spread out but also interest in potentially making it easier to add CSS without leaving the block settings. This concept has some developer discussion and a bigger discussion as well.
Set blocks to be static and sticky. This will be very helpful for theme authors as sticky headers, footers, and sidebars are frequently requested by clients/users. Follow-up issues are being tracked here.
A mechanism to migrate blocks in widgetWidgetA 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. areas to template parts. This is a bit of a misnomer since it imports only blocks into parts, not widgets. The widget group block doesn’t work at the moment. There are steps; it’s not a streamlined flowFlowFlow 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
at this point.
Full-Page Patterns
There is a pain pointPain pointPain 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 for theme authors that would like to organize and present full-page patterns in a user-friendly way. Users find building a page with multiple patterns too hard or outside their comfort zone. There are active, related explorations related to shuffling issues here and here.
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.
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 LoopLoopThe 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 BlockBlockBlock 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 sidebarSidebarA 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.
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 MenuA 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.
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.
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.
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.
Text Only mode: ensure split settings work correctly. Fixed in GutenbergGutenbergThe 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/ 15.0.
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 UXUXUX 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 UIUIUI 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..
Navigation block: Allow users to adjust hover style for menu items (only available in theme.jsonJSONJSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.).
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?
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.
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.
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.
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.
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”).
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 UXUXUX 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 blockBlockBlock 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.
Introduce a new UX for the navigation block where changes (adding new menu items, creating a new menu, etc) can be made from within the block settings sidebarSidebarA 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..
Color randomizer that allows you to quickly switch between generated palettes.
As with last time, this post will be updated to the latest version of GutenbergGutenbergThe 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 loopLoopThe 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!
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.
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.
Save the link to your site so you can access it again during the test.
To set up your own test site:
Have a test site using the latest version of WordPress. It’s important this is not a production/live site.
Install and activate the Twenty Twenty Three One by going to Appearances > Themes.
Install and activate Gutenberg 15.0. From there, head to Gutenberg > Experiments and turn every experiment except for “Zoomed out view”.
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 pingPingThe 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.orgThe 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/slackSlackSlack 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
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.
When you’re ready, head to Appearance > Themes and select “Activate” next to the Twenty Twenty-Three theme.
Head to Appearance > Editor (betaBetaA 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.
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
Using List View, select your Footer Template Part and delete it.
Add a new Template Part block, give it a name related to footer, and choose the option to “Start Blank”.
Open the block settings and expand the Advanced section. Under “IMPORT WIDGETWidgetA 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”.
After importing, customize this new footer further as you’d like. Explore using design tools, using group/row/stack variations, and more.
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.
Save changes.
Find your style
Open Styles and select “Browse Styles”.
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.
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.
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)
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 imageA 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..
After editing the block to your liking, open the Settings tab, expand the “Advanced” section, and choose the option to “Apply globally”.
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.