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.
Please drop by any time in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. with questions or to help out.
Are you interested in hosting a <test-scrub>? The Test Team needs you! Check out Leading Bug Scrubs for details, or inquire in #core-test for more info.
And while general release has been pushed to tomorrow, this post is a good refresher on the process leading up to and including release day: WordPress 6.2 Release Day Process.
@ironprogrammer pointed out that the release process helps ensure that issues like the regression noted above can be identified and resolved prior to general release.
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 Dependencies
@afragen requested 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. testing for the Plugin Dependencies feature plugin, noting that @azaozz was looking for “newish” user feedback for the plugin dependency activation workflow. The instructions provided by Andy included two steps: installing the feature pluginFeature PluginA plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins., and then installing a separate plugin with a dependency.
@costdev and @afragen explained that providing only basic instructions might better measure how easy or difficult the workflow is to users in discovering the process organically — i.e. how to successfully install the dependent plugin without outside guidance.
@costdev outlined the feedback desired from testers, and @ironprogrammer asked where the feedback should be provided. Additional discussion along with @afragen lead to the decision to create a new call for testing post. [Editor’s Note: The CFT for the above has been posted to Make/CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress..]
@isabel_brison, a developer who has spent much of the last year diving deep into layout controls, took us through a look at 6.2 related layout changes including:
As part of this, she showed how you can now create layouts where the Site Icon can be next to the Site Title or a three cards can always have the same height with a Button 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. at the bottom. This led to a discussion both around how even a few additional controls has a big impact for increasing the design possibilities along with some pain points with the current system. For the latter, as it related to one of the demos, could we do something to make it easier for setting things like width automatically rather than individually for each column?
Thinking about layout from a designer perspective
@saxonafletcher, a designer who has thought deeply about these problems, shared some high level thoughts on how he aims to approach this work:
How can we make layout more accessible to more people regardless of technical knowledge?
We then dug into some of what’s coming up next with the Grid layout type:
Responsive out of the box.
Set min column width and the columns will adapt to the space available.
Can turn responsive off and then set columns (can cause super narrow columns).
@beckej, who works in higher ed and teaches students, commented on how simple this is!
Overview of sticky positioning
At the very end, we talked about sticky positioning for 6.2 and how it’s distinct from yet related to layout. Essentially, layout is about inner blocks whereas positioning is about how that content relates to the rest of the page. This was very nicely demo-ed with a community theme (more about the community theme initiative here) that Saxon worked on that greatly leans on sticky positioning. We ended by talking about some follow up items, including how it can only be applied to root blocks. This is a great time to give feedback as this work evolves.
Ideas for future calls for testing
After digging into sticky positioning, the work around the negative margins PR came up and we briefly chatted about perhaps getting both the negative margins PR and grid layout type PR behind experimental flags for some early testing, alongside the navigation section that was removed for 6.2.
Are you interested in hosting a <test-scrub>? The Test Team needs you! Check out Leading Bug Scrubs for details, or inquire in #core-test for more info.
Announcements 📣
FYI: Navigation section of new Site Editor experienced removed for 6.2 RC 2 — after careful discussion, this feature has been removed from 6.2 in order to give it time to mature in the 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/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.
WP Briefing: Episode 51: Is Routine a Rut? — Josepha discusses the utility of consistency, how it can highlight notable changes, and allow us to spend more time on the important stuff.
WordPress 6.2 Release Candidate Phase — as a reminder, WordPress 6.2 is in the “release candidateRelease CandidateA beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge.” (RCRelease CandidateA beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge.) phase, and Tonya helps clarify the “dos and don’ts” in this post.
WordPress 6.2 Field Guide — check out the 6.2 Field Guide for important development and extender updates in this release.
@costdev mentioned that improved release testing has been discussed in #core, and asked if anyone had thoughts on how the number of testers might be increased during the Alpha/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./RC phases. @ironprogrammer noted that this has been suggested as a 2023 WordPress Community Summit topic, but that short term options are needed.
@costdev asserted that collaboration with MarComms (#marketing) would be key to finding ways to pull in more contributors for testing. He asked where we might extend reach/awareness, and what motivates users to become testers.
@afragen suggested that managed hosting providers, such as WordPress.comWordPress.comAn online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/, might facilitate RC testing by working with opt-in site owners. @costdev agreed that this would help environment testing, but that there is a lack of feature-specific testing and reporting. He asked what tools might be offered to make this easier.
@afragen offered the WordPress Beta Tester plugin as a place to experiment with the “Report an issue” concept. [Editor’s note: This plugin currently reflects 3000+ active installs.]
Admin bar link: “Report an issue”.
On plugin activation/update, add a tooltip to the admin bar link: “Found an issue? Report it here”, to promote awareness.
The link leads to a new tab in Beta Tester, which displays basic — but important — environment information consistent with what is suggested for test reports, some of which has been written/tested by @costdev in a separate plugin. The information would be formatted for inclusion in a TracTracTrac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. or GitHubGitHubGitHub 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/ ticket.
Provided this initial scope, users would be able to copy this information for use in a new issue or reproduction report.
@afragen also noted updates may be needed for Apple Silicon support.
We started with some quick introductions to get a sense of who was on the call, how we’re connected to the WordPress project, and what drew folks to help with testing replay.io:
Oliver: Sponsored by replay, been in WordPress community since 2017, used to work for Google where he worked on their first WordPress 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 (site kit).
Paul: from Germany, self employed web developer, passion for automation and previously led a QA team.
Jason: used to be the tech lead for firefox devtools, worked on etsy with a big focus on their PHPPHPPHP (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. work, big fan of WordPress and PHP.
Paal: from Norway, helps a ton with testing and design, used to be a teacher and enjoys being a regular user, looking for sponsorship.
Anne: sponsored by Automattic for CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. & Test teams, runs the FSE Outreach Program.
Replay,io is a “time travel debugger”. It’s just like a video where you can pause, fast forward, rewind but the entire browser session is recorded. Replay is free for open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. communities so we’re trying to see if it’ll make a difference in how the community reports bugs and maintainers solve them. Oliver and Jason shared some additional details including a case study from Pantheon.
Examples
We briefly went through some examples with TechCrunch as an initial overview followed by an example from @paaljoachim.
Feedback on Replay.io
At a high level, there have been various notes around the Site Editor loading slowly in the Replay browser from folks using the tool. Since the Replay browser isn’t something to aim to get widespread compatibility with, the Replay team is going to dig in to see what might be causing the problem and how we can resolve that in order for a better experience in testing. This will be a huge help since the Site Editor is an obvious thing we want to be testing regularly. @franz00 kindly provided some examples of this (replay recording 1, replay recording 2) while trying to replicate a current issue.
From there, @paaljoachim gave some 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. feedback around using replay and setting up bookmarks. After the call, he recorded the following video and passed along the following notes:
Adding a preview button/icon. To view the video before deciding to save or discard.
Adding all the icons for Viewer and DevTools at the same time in the left 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.. Using a separator between these. Reasoning is that the left sidebar icons are easier to notice compared to clicking the Viewer and DevTools buttons top right.
Editing/cutting in the video timeline.
Oliver and Jason shared a link to Replay’s discord and GitHubGitHubGitHub 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/ repo for folks to continue to share feedback.
Test automation
We briefly covered test automation where you can write your playwright tests and debug with Replay. There’s an effort in the WordPress project to switch to Playwright so it would be neat to explore more once the Replay Playwright integration is in a better spot.
Next steps
Replay to look into slow performing replays.
Replay to reproduce the GitHub issue we discussed on the call.
This post is a summary of the Find Your Style call for testing for the FSE outreach program, the twentieth 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 participate in the Find Your Style call for testing and for more creativity in what we were 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.
@jordesign for gathering and summarizing feedback from a crew of folks from Automattic.
Shout out to @arasae for being the sole first time contributor for this call for testing. Expect a badge on your WordPress profiles for your contribution! Here’s a poem from ChatGPT to commemorate:
Oh, here's a badge for you, my friend,
For contributing to testing's end.
In the WordPress project you did your part,
Finding bugs and fixing them with all your heart.
You clicked and typed with skill and glee,
Making sure that WordPress works perfectly.
Your efforts are what makes this site so grand,
So here's a badge, take it with a smile, hold it in your hand.
It may be silly, it may be fun,
But the hard work you've done can't be undone.
So wear this badge with pride and might,
For you are a champion of the testing site!
High-level summary
Feedback around the various style features was positive across the board, from the smaller features like applying styles globally or exploring the Stylebook. The value add and experience is clear with limited confusion around what each feature was doing. What remained for style items centered on feature requests, like the ability to have revisionsRevisionsThe 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. or for the randomizer to impact more color items, and usability feedback around things like the Settings icon changing.
Outside of styling related feedback, this test also focused on importing items from a classic theme to a 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. theme. The current experience of importing widgets, while functional, leaves a lot to be desired both in terms of additional optionality, like being able to import menus, and intuitiveness, particularly around how importing overwrites the current template part that was added. Much of the more critical feedback centered around this new pathway.
While not the main focus of the experience, it’s clear that the reimagined Site Editor experience with the introduction of Browse Mode is allowing folks to better navigate between pieces of one’s site and add good friction to the editing process.
For deeper context of someone going through the experience, here’s a video from @paaljoachim who has completed every single call for testing:
First, I am in love with the new Site Editor 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.. It’s exactly how I hoped it would be — so easy to get around with fewer clicks. Creating the new footer template part and importing the widgets was easy peasy.
Making a change to a headerHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. or footer or some other template part being used in all templates and then applying it globally was really helpful!
Once I found the Style Book, I liked the range of items I could edit. If I can edit the style of the menu, I would like to edit the mobile menu. Or make edits that only apply to the mobile version of the site. The lack of edit options for the mobile view reflects a question I am often asked by users, at least twice a week, “how do I edit my menu on mobile?
“Push changes to Global Styles” worked really well…I was used to just starting to edit the Template, but the Edit button keeps me from messing something up before I’m actually ready to edit. I really appreciate that Edit button!
Honestly, I found creating a menu like classic themes more user-friendly. Maybe as an alternative a (new) block named “Classic Navigation Block” or something like that could be developed, which offers the options of a classic menu creation, but additionally the properties of the navigation block (color, fonts, typography, spacing, etc.) if possible.
When I first opened the Site Editor, at first the Header 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. was not the menu that I had created before changing themes. The menu that showed was the All Pages menu, even though I didn’t have an All Pages menu before changing themes.When I left the Editor and came back, then my previously created “Main” menu appeared correctly.
It appears that some styles are universal instead of individual categories, which I thought would be the case from how “Style Book” is named. For example, I would think that users would change the borders setting to individual Images only, but the editor applied the same changes to Gallery as well.
Items related to Browse Mode nicely matched what’s already being designed and built as the 6.2 cycle continues. What remains below matches what’s been raised previously and touches on some of what needs to be considered for phase 3, particularly around wanting better access to revisions.
Adding a yellow as background color I noticed that the Header template part is not all the way in the top of the page. I am curious why the Header is not nudged up against the top admin/canvas tool bar. I see the same on the frontend. Header is not all the way in the top of the page. It would be helpful to have the header in the top with no space above it. To where I need to explore how to remove the margin from somewhere in the header to get the header in the top of the page.
With all the various changes I’ve done, I couldn’t help but notice the need of “what if” and wanted to use a previous style, but because I refreshed the editor, I couldn’t use a previous setup so I really felt the need of a revision system.
Simplifying the importing 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. process, confusion around the new Settings icon, and desire for clarity in returning to one’s dashboard with Browse Mode dominated the critical usability feedback. This last piece of feedback has already been addressed in time for the WordPress 6.2 release. Positive feedback balanced out the discussion when it came to using the Styling features, having one’s custom menu automatically imported, and using Browse Mode. The base experience of improved out of the box defaults, customization tools, and moving between pieces of one’s site continues to ease and is reflected in the responses.
I created a new footer template part named “My New Footer” but when I imported the widgets into it, it created an entirely new template part named “Widget area: footer” and deleted “My New Footer” (though it still existed in Template Parts).
After importing the footer widget contents, it looked really messy and it wasn’t immediately clear in the list view as to how everything was ‘stacked’ or laid out. It took adding a new column block to the footer and dragging/dropping the footer groups into each column, to have it appear in a neater and more coherent way.
A Noticing: There was no padding or margin added around the new Widgets Footer at all when they were first moved over from classic theme to block theme; I wonder if there is a way to match the padding or margins of this new Widget area to match the existing look and feel of the site?
It took me a moment to find and get used to the Block Settings icon — I kept looking for the gear. But it makes sense to use a different icon, since the gear icon is now used to differentiate from styles in those settings. I’m sure I’ll get used to it.
It is not clear that one needs to click the W to return to the Dashboard. Cursor changes to a finger but it is not obvious where it would go. Here it would be helpful with some kind of some sort. Perhaps a tooltip over the W which says something like “Return to Dashboard” ?
Inside “Style Books,” it’s hard to scroll through the different “Style Books” without a mouse, and it does not appear to work with the arrow keys on your keyboard.
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”).
We lightly went over the next call for testing coming up for the FSE Outreach Program focused on 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.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. changes, browse mode, split tabs for blocks, etc.
Future of Custom CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. discussion
Once more the topic of revisionsRevisionsThe 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. came up with the custom CSS options as well. Overall, folks felt this will greatly help with the adoption of block themes and helps bring parity to the experience, while also expressing concerns around 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. overload.
We then switched to talking about the keeping up with block theme changes in general where Rich Tabor brought up an interesting bug/use case around block themes where switching to a style variation keeps you “frozen in time” in terms of additional updates to the theme. You have to switch to the default style and switch back for updates to occur. A regular check to ensure updates are propagated/able to be opted into would be great.
We lightly touched on layout controls and recent work there to stay up to date with Justin Tadlock mentioning that he always sticks to coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. in order to manage layout to make maintenance easier.
Finally, we ended talking about the new split in the block settings sidebar with questions around how folks might adopt this and needing to show best practices when that does happen.
This post is a summary of the Site Editor Sneak Peek for the FSE outreach program, the eighteenth 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.
Props to Saxon Fletcher for creating the prototype used to test the new navigation 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. before it was more evolved in the 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/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.
Important note:compared to other summaries, this summary is going to be simply divided between each task with indications of bugs vs enhancements to better reflect how the exploration was conducted and to make the information easier to consume.
Watch the experience
For anyone wanting to see folks run through the experience, here are videos from a few contributors who very kindly recorded and passed along their experience for others to benefit from:
Browse mode, new pattern inserter experience, and contextualized zoomed out view
Overall, browse mode felt modern and smooth with a few key items around general usability to level up what’s possible: more visible edit button, clearer way to get back to the dashboard, and breadcrumbs/more understanding of where you are in the site editor. Each of these items are listed as follow up to-dos as part of this broader effort so expect to see quick iteration here. Some feedback came in around how jarring the zoom out view was and that was partially due to this exploration testing an earlier version of what’s now being worked on, where those issues have been smoothed out as the work has evolved.
Finally, two folks mentioned expecting to have a headerHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. or footer pattern that was selected from the Inserter to automatically replace the current header/footer in the site editor and expressed confusion when that didn’t happen. While this is intentional in the current experience and there’s currently a replace option built into template parts, it’s worth noting in case it becomes a trend.
Everything except the final item below are enhancements pulled from the shared feedback:
[Enhancement] Easier to find the edit button due to confusion around inability to edit the templates directly (planned for iteration)
[Enhancement] Show more information/breadcrumbs about where you are in the site editor (planned for iteration).
[Enhancement] Desire to see Styles 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. with templates and template parts (planned for iteration).
[Enhancement] Add zoomed out view to live previews of 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. themes.
I still think that getting back out to the Dashboard could be more obvious. I’ve been working in it for a while now so I know that clicking the W gets you there, but if I was just encountering this for the first time, I would be looking for a “Dashboard” button or link.
When I tried to add a new header pattern, it ended up being placed within the existing header. When adding a pattern to the header or footer, maybe ask if it should replace the existing header? In my case, it was within the existing one, so it was hard to remove the old blocks.
It would be cool if while dragging the pattern on the page, its shape and proportions were kept so that 1) you have a better idea of where it’s going to be placed and 2) you have a better idea of the space and position on the page.
Generally speaking, a few folks struggled with the Maze option that was used to create the prototype, finding it to be a bit too constrained to get a full sense of the experience. This is something to consider when it comes to future experiments and thoughtfully considering when it makes sense to use a tool like this again. Outside of that, the feedback was overall extremely positive with folks being able to see how this takes a big step in a better direction for the navigation experience. With the more scaled back experience, feedback was limited to two items: desire for a cue for folks to open the sidebar for those who might have it collapsed and curiosity around how sub-menus will be handled. Stay tuned for a more comprehensive call for testing when the feature is further along.
It was exponentially better. Much more in line with my other block and site editor 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. expectations.
Having some settings or the possibility to edit a menu in the sidebar is a step in the right direction, but it feels crammed and is still way less intuitive than the previous experience. If I want to add a link to a page or a categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., I’d expect an option to choose that, not a custom link block.
I’m a big fan of anything that makes managing menus easier. This seems MUCH clearer on the steps of dealing with your existing menu and making changes.
I wish we’d been able to see what setting up submenus will look like, since I suspect that’ll be one of the biggest remaining sticking points (that and mobile layout, which I’d love to see as well). beyond that, I’m wondering if there’ll be a cue for those who have that sidebar collapsed, so that they know it needs to be popped out to edit the menu items.
Beyond a few specific pieces of feedback below, most folks found this feature to be neat and easy to use but in some ways lacking in practical application with a few wondering if they would end up using it. On the flip side, others could see how it would speed up site creation for both block themers and end users alike.
[Enhancement] Desire for more contrasting color options and more comprehensive changes.
[Enhancement] Desire to ensure that color options are accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) friendly by default.
I think it would be more useful if the user could pick between random colors themes (say, pastel, neon, duotone and such). That and allowing only accessible color combination could turn this into an actually useful tool.
It’s also an opportunity for users who have trouble coming up with color schemes to find something that works faster than using the color sliders or hex values for each element.
I tried this out on a newly installed theme to customize the style variations, and use it in tandem with Create Block Theme plugin to create custom style and a child themeChild themeA Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/.. This is good. It really speeds things up & definitely useful. Just one note, perhaps the randomizer engine would generate a more contrasting color palette.
Clicking it a bunch of times will cycle through various colors. What if I want to go back to the colors I had before clicking the Randomize colors button? It would be nice with a method to go back to the default color palette before I started randomizing the colors.
Some items of feedback didn’t fit in nicely to the specific features being tested but are worth mentioning, namely as they are all repeat enhancement items that have come up before:
I kept unchecking the box to save the template part, but this preference wasn’t remembered the next time I went to save. I felt like it should remember that (at least until I made another edit to that template part).
When I viewed a preview of the page in a new tab, it just took me to the home page. Upon looking again, it says that the link is to “view site”, but this was not what I was used to from using this functionality in the page/post editor.
Under Styles > Typography > Elements > (choose one) > Line Height, clicking on the “+” will set the value to 0.1 even if a default value exists (eg. 1.5).
Jeff Ong, Ellen Bauer, Nick Diego, and Edwin Cromley
Video Recording:
Topics:
We covered a wide variety of topics: the outreach program’s future, updates for the 6.1 release, aspects of phase 2 to wrap up, the current experience of developing and maintaining 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. themes, and more.
What will happen to the outreach program now that 6.1 is out?
The outreach program is continuing as is! When it comes time to wind it down, it will be heavily communicated and, ideally, continued in some form or another. As with “gradual adoption” of FSE features, expect a more gradual phasing out.
The discussion around 6.1 feedback led to a conversation about managing updates for block themes. In particular, there were some layout changes that needed to be managed. Keeping up with these changes for each release can lead to a feeling of “Why did we build these themes already?!” when there’s so much to keep on top of with each release. It still is taking a lot of work with each release.
@bph the idea was brought up to have a compressed set of links to follow based on audience perhaps for the Developer blog, inspired by Rich Tabor’s twitter roundup. We discussed how there were also 2x the number of dev notes for this release compared to 5.9 and 6.0.
In general, there seems to be a cycle of finding a solution to work around current limitations > the gap getting filled in coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. > needing to update > cycle repeats. There are questions around when this process will get less intense.
Themeshaper
Questions around themeshaper came up with folks wanting to see more there and reminiscing on the kinds of posts that were shared previously as being quite illuminating. Speaking personally, I’m now trying to share more directly in Core when posting but it is an “outlet” that would be great to see revived.
Pixl theme discussion
After Matt tweeted about the Pixl theme, this led to questions around: “Is this the direction we’re heading in? Is it meant to be super simple block theme? Am I overcomplicating it somehow?” We talked about how it was likely just a note about a cool, quirky theme and that ultimately block themes are for all cases (or will be in the future as functionality grows). The goal is to do everything, from very simple to very high level. Nick shared that he’s, “Taking a lot of block themes and throwing them away. I took what was available and took it to the next level, like custom classes or custom code, that block themes couldn’t do at that time. Now, I’m stripping it out and refreshing it with a much simpler architecture.” Ellen is doing the same and it’s a lot of work. From there, you have to consider propagating updates. While this is a big part of being an early adopter, it’s still worth noting and it becomes intimidating to step into eCommerce considering.
Stability for maintenance & stability for 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. of block themes
We talked about how there’s a split when talking about stability: stability of block themes in terms of less maintenance and stability of the UX for end users of block themes. We discussed how patterns are a big deal for UX in general and shared some examples of using starter patterns, with Nick sharing a great resource he wrote.
Latest Phase 2 Update
We went through the latest phase 2 overview issue update, talking at a high level about what’s to come and how work is progressing. This included a lot of discussion around the ability to save, import, and export variations. Feedback was given that style variations are often ignored for clients and that it would be more useful to be able to copy style variations/copying block styles. At the same time, being able to import/export your own branding via style variations would also be wildly helpful.
We ended by talking about the 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. label, how it’s likely slated for 6.2, how another update will need to be done to ensure the issue is up to date, and how the label itself might change away from just “editor”.
Attendance: Rich Tabor, Damon Cook, Courtney Roberston, Paal Joachim Romdahl, Jeff Ong, Nick Diego, Vagelis, Sé Reed, Piermario Orecchioni.
Video Recording:
Topics:
The main topic centered around the work underway to wrap phase 2 gathered in this overview issue. Expect regular updates to this issue and know that other work will continue but there’s a big emphasis to complete the tasks outlined there.
As of last week, the following was in place:
Work has been completed (1)
Dev work is underway (9)
We’re in the design stage still (3).
Dev is assigned but hasn’t started (3).
Means work is stuck but there’s follow up to try to get unstuck (1).
Means work is stuck, either due to a problem or a time lapse of 14+ days, and unclear how to unblock (11).
From there, we dug into the following individual issues to chat through at a high level what we were seeing. At a high level, it stuck out to folks how many different explorations there are, conflicting designs at times, etc. By doing this work concurrently, these differences can be resolved and the solutions refined together.
We talked about how this was a change in the entrance to the site editor just as much as it was for navigating between content. There was a desire to be able to click on the site title in the nav component to take you to the front end of the site. We discussed the important of accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) testing for this change and it’s top of mind to test for the FSE Outreach Program.
Overall, this would be a great way to get a sense of how changes impact the entirety of the site and in creating a more unified approach.
When looking at this issue, various folks commented on how it feels like there’s a number of different modes and it isn’t always clear how they relate and don’t relate. Part of this is due to designs being in progress at various stages and including some work but not others.
We chatted about how the IA needs to improve around right/left sidebars. Is there a best practice for when to put things in left vs right 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. in the design library? Are we at a critical point in that convo right now? What about RTL when it comes to moving where things “live”?
We discussed what consolidation of the various editors might look like and how the current work seeks to make everything more unified, with the option to edit content in the site editor for example.
Media library getting the “FSE treatment”
Previously, the outreach program had an exploration around media and site building leading Courtney to bring it up!
Feedback on the Quick Inserter prioritizing patterns in certain circumstances
We discussed some pain points around when the quick inserter prioritizes patterns, especially the struggle to be able to add a 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.!
Talked about having it be a user preference to start with blocks vs patterns.
There are generally two different mindsets when working with blocks vs patterns.
Could the slash inserter work with patterns? There’s already an open issue here.
Other topics and questions
Folks shared that responsiveness is still a big topic along with navigation block. Multiple people echoed both. Damon shared in the chat: “The Navigation block has SO much complexity, but tackling the challenges will likely surface many great ideas that can be rolled out to other blocks that have complete 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./interaction”. Finally, we chatted at the end about the history of 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. block naming (why not loop?), where folks can report issues when 6.1 is out in the wild, and what’s next for the FSE Outreach Program.
