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.
This post is a summary of the Final Touches call for testing for the FSE outreach program, the twenty-sixth and final 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.
This testing call spanned numerous planned WordPress 6.4 features, including a focus on the Font Library (which is no longer planned for 6.4). Most feedback pertained to feature requests and usability concerns, highlighting the following common themes:
A desire for improved visibility of current and CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. categories in pattern creation.
Requesting additional controls, similar to the Cover 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., for adding background images to a Group block.
A need for more informative error messages in the Font Library, especially when deleting fonts.
Enhancing the discoverability of the Font Library.
Instead of breaking down feedback into bugs, feature requests, and general usability feedback, everything is broken down into groupings of features with extra quotes. This decision was driven by the limited volume of feedback received (only three responses) and the evident recurring themes within the feedback itself.
Command Palette
The Command Palette was featured throughout this call for testing, including to navigate to a page with a similar name to a pattern. This quickly reinforced a need for more context when searching for items and running commands:
Using the Command Palette. I write Portfolio and get up two Portfolios that have two different icons. One that looks like a post/page and the other as if it is a template part. Hovering over both it would be nice if it said something like: Portfolio page and the other Portfolio template part. To strengthen the meaning of the icons I see. @paaljoachim in this comment.
It would be awesome to have more information about the current state of a toggle, “Disable distraction free mode” instead of “Toggle distraction free mode.” Or maybe make the icon of the active toggle reflect its state by adding a black background like the Settings or Styles buttons do. @josvelasco in this comment.
I like that the command palette now includes site editor navigation like list view toggle, distraction free toggle, and code view toggle. However, I agree with you and the folks here that suggest that the command name having a clearer context of what each will do. @franz00 in this comment.
Patterns
While adding categories to patterns works, the ability to see current categories, core provided or otherwise, would make it much easier to stay organized:
When creating synced patterns, it is great that now we can put them into categories. However, I’ve also learned that WordPress has its own default categories for patterns from this URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.orghttps://github.com/WordPress/gutenberg/blob/c20350c1d246163201375f090b0b7b4ab49b1dad/packages/block-editor/src/components/inserter/block-patterns-tab.js#L35 (‘custom’, ‘featured’, ‘posts’, ‘text’, ‘gallery’, ‘call-to-action’, ‘banner’, ‘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.’, ‘footer’). Personally, I want my patterns organization to be as much closer to WP default categories as possible, but I can’t find those predefined categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. names being listed somewhere in the Site Editor interface. Perhaps we could have categories checkbox for those, like the post page have? @franz00 in this comment.
Since there was a pattern called “Portfolio,” it was kind of confusing to find where to edit the page with the same name. The command palette would be more verbose and say “Edit template Portfolio” instead of just “Portfolio.” @josvelasco in this comment.
I see that I can add a category, but I can not see which categories already exist. As I might want to place this into a pre existing category. @paaljoachim in this comment.
Font Library
The following specific items were raised with a particular note around the need for better error messaging both when uploading and deleting fonts:
I clicked the “Aa” icon to open up font management just because I followed your instructions, but I couldn’t have found the font management easily without them. I love icons, but this is only visible with a label. @josvelasco in this comment.
I tried to upload a .zip on purpose but got no errors. It may be nice to have or suggest allowed font formats and a confirmation notification when one gets uploaded. @josvelasco in this comment.
However, I found that the activation/deactivation and deletion of fonts somewhat confusing. Why would fonts deletion be offered on active, check marked, fonts? Would it make more sense to only offer fonts deletion to the inactive (unused) ones? Because deleting an active font directly impact the pages that use them, which will cause the page to automatically fall back to the default font. Besides, this is done without any warnings. @franz00 in this comment.
I see the Fuggles uploaded above the Theme Fonts. There is a heading for Theme fonts but no heading for the fonts above it. It would be nice to have an “External Fonts” etc heading for the ones that are not Theme fonts. @paaljoachim in this comment.
Other
Of the following items, the desire for more controls in adding a background image to the Group block was mentioned by all three responses. In particular, folks wanted to see the ability to change focal point.
I find the rename feature taking too many steps and feels cumbersome. I would like to double click it just as if I was on a Mac to rename. I am happy the feature is in even if it kinda feels half baked. @paaljoachim in this comment.
Color adjustments are fine, but having the same background adjustments available as the cover block would be great. Focus point, at least. @josvelasco in this comment.
I also noticed that when navigating blocks in list view, the up arrow key sometimes cannot traverse back up when it encounters synced patterns, or a footer template part. @franz00 in this comment.
This post is a summary of the Let’s start from the beginning call for testing for the FSE outreach program, the twenty-fifth effort. As always, I want to highlight those who helped to bring others along with them in this latest effort:
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.
Shout out to @mdquer@olein@foosantos as first time contributors for this call for testing. Expect a badge on your WordPress profiles for your contribution!
High level summary
This call for testing focused on a “from scratch” experience using the big pieces from WordPress 6.3 without detailed instructions for maximum exploration, which is reflected in the lack of new bugs found and in a fair amount of usability feedback and feature requests. In particular, folks struggled immensely with figuring out how to change the sync status of an already created pattern and fumbled through using the Command Palette, with some left confused on how best to use this new tool. While no new bugs were found, Synced Patterns losing their alignment attribute and the Table of Contents 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 links not working on an initial save were noted by a few folks. Here’s what some folks had to say overall:
“The only thing to mention is for me is the command palette: The command palette is not satisfying for me. It works , but for me the problem are the keywords. I could not find > top toolbar or list view. As a normal user i would expect a keyword like – list view – should open the list view, or keyword – top toolbar – , should open top toolbar, that does not work for me. I like the new patterns section with synced and unsynced patterns.”@mdquer in this comment.
I’ve been trying to use the new command palette, but I honestly don’t know what to do there. I’ve used it successfully to switch to different pages, but I don’t know what the primary purpose of the command palette is supposed to be so I have no idea if I’m leveraging its capabilities at all…In general I feel like all aspects of 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/ have been improved by recent updates.@beckej in this comment.
Bugs
No new bugs were found and replicated with the following known items raised instead:
Each of these touch on items planned for 6.4 and, in particular, the alignment attribute with synced patterns remains a repeated and well established pain pointPain 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.
Many of these feature requests centered on the Command Palette, a feature new to 6.3 and slated for improvements for 6.4, with one request already completed for adding a Toggle List View command. With the growing number of design and styling options, two folks noted a desire to see the Style Book elevated and more readily discoverable, which aligns nicely with a currently open design issue on that exact topic.
I found the autosuggest/listings to be varied in their accuracy. Some of them didn’t make much sense in their order compared to the actual search query. @jordesign in this comment.
The ‘View Page’ button exists in the old block editor, so it would be nice to have a similar experience. (My apologies if this has already been raised in an Issue). @olein in this comment.
After checking further, I realized that Style Book does something like that. In my opinion, Style Book should be the default option with a site preview alternative. Or at least highlight Style Book a bit more somehow. @foosantos in this comment.
Media & text block didn’t apply the border when I edited the image styles. The Media & text could be composed of sub-blocks to inherit the properties of a single image block like the Gallery block does now. @josvelasco in this comment
General usability
Out of all of the usability feedback, a few themes emerged:
Changing just the H2 styles was hard to find, with folks going to the Styles > Blocks > Heading rather than Typography.
Switching a sync status of a pattern after it’s been created proved to be nearly impossible to figure out.
Writing in the Site Editor > Pages section has a few points of friction with the locked blocks experience.
None of these tasks are necessarily niche to do yet prove to be tricky to navigate, with cumbersome steps or unclear 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. to navigate, like being unable to see the blinking cursor in a new page in the Site Editor.
Using the Style Book – I was hoping to be able to make changes to the H2 specifically while viewing a preview. It wasn’t made clear anywhere what the hierarchy of editing headings was to edit the ‘Heading’ element for styles that go across all headings, but could then make individual changes to different headings under Typography > Headings. @jordesign in this comment.
I typed into the Width box where it said Auto and wrote 100. The image is now smaller. I am wondering where the size drop down is? To select full, large, medium, small, thumbnail. Instead these options are inside the Resolution dropdown and that can be very confusing. @paaljoachim in this comment.
After checking for about 2-3 minutes, I really couldn’t find a way to change from Synced to Unsynced. Both for the original and duplicated. @foosantos in this comment.
I wanted to insert the table of contents block between the title and the first block, so I moved the cursor to the page title with the mouse and pressed enter, but could not move it to the content area. @olein in this comment.
After creating the page from the Site editor, clicking the Type / to choose a block does not make the vertical text cursor | start blinking. You see it only after you start typing or pasting something like the Google Doc’s content. @josvelasco in this comment
This post is a summary of the Momery Makeover call for testing for the FSE outreach program, the twenty-fourth 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.
Thank you to @bph and @ndiego for covering for two weeks of this call for testing when I was out on vacation. Your coverage made my break possible!
High level summary
Since this call for testing took place during the early stages of an iterative process, several aspects of the feedback provided have already been swiftly addressed, thanks to ongoing development for WordPress 6.3. The relatively limited amount of bugs received and feedback aligning with feature development reflects a level of solidness in the direction of recent improvements. These improvements encompassed a range of features, such as the ability to rename menus in Site View, add template parts directly from the Site View, publish pages, and introduce additional interface enhancements to improve the template vs content editing experience. Notably, Style 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. proved to be significantly more intuitive compared to the code view available for Templates and Template Parts.
@paaljoachim shared a video of his experience going through the call for testing if you’re looking to get a sense of a test contributor’s experience in more detail:
Bugs
The following bugs were all reported before this call for testing, reflecting known issues and showing a level of stability in the breadth of new features added to the Site Editor experience:
Right now we can use a Post ExcerptExcerptAn excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. or Post Content. Post Content is the whole entire post in the Editor, but the post up to the “More 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.” on the front end. This is the behavior that I expect on the front end. But I would really like the Editor to not show the entire post! It just makes the Queries too long.
When I created a new page by way of creating a draft page. I found that a draft page creation option was missing if I tried to create it under the Menu 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.https://s.id/1Nh2y. However, it showed up if I tried to add a non-existent page link via the Navigation block https://s.id/1NgZg.
Many of the feature requests tie in nicely with work either completed or currently underway (marked as “In the 6.3 board”). Across most of the following issues, the ability to access exactly what one wants in the Site Editor as a whole acts as a through point, whether when clicking “Edit Site” from the admin bar or trying to search for specific things with the Command Palette. Building into phase 3, the Template Part and Template revisions were seen as subpar in comparison to the new experience offered by Style revisions.
I went out of the site editor and found the blog page in the Pages screen. Viewed it. Then clicked Edit Site. I expected to have the Home template open up but instead clicking Edit Site on the frontend will only open the Front Page template, and not the template related to the specific page I am on.
I feel uncomfortable to roll-back template changes using the provided revision states located at the bottom of a particular template tab. The reason for this discomfort is that the revision states appear to be too raw. Since we rarely used the Code editor in building a site/pages in the Site Editor, seeing loads of HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. block codes as reference points to roll back to feels unfamiliar within our current workflow.
I had to go to the side menu to change the Page template why from the About page I didn’t see the option to Edit the template page. I found the option when I changed to Contact page by chance. The solution? I don’t know which is the better option. Maybe that open right side bar by default when we change a page or template. Or open and close to see that this appears here. Or in the wizard (I don’t saw the wizard).
When typing in ‘page’ into the command centre – I didn’t expect ‘add new page’ to be the first item – rather than the ‘page’ template. Is this weighted in some way? It may just be me.
Part of the call for testing instructions included replacing a template part and creating a new menu, both of which caused some confusion. Each experience has improved with additional functionality added to the Site View for each respective section (Patterns, Menus). Outside of that, it’s worth noting that with Reusable blocks being consolidated into Patterns overall, a bug with Reusable blocks now has a wider spread impact. Currently, if you convert a set of blocks into a Pattern, the align full or align wide options are removed, leading to what feels like a broken experience by design since the alignment/flex position depends on the container. This is likely to come up as a broader piece of feedback. The Navigation block continues to receive feedback around the desire to have an easier and more consistent way to rename, regardless of where you are editing a menu (sidebar, in editor, in Site View).
Desire for simplified dimension controls for Columns block.
Finally, a few folks mentioned issues with the Post Content block that wasn’t replicable in later versions released after the call for testing.
I think creating a reusable block or a template part from the Site editor should be possible. People using the Site editor probably will know the difference. I like the idea of making things clear, but I’m not 100% convinced. I prefer to have a place to be able to edit everything, including content, and the other just for content.
I first tried to “Replace the Footer”, and while it added a new footer in the Home Template, it had a different name in the Library > Manage All Template Parts. It didn’t change the existing Footer into the new one which was what I expected from “Replace Footer”. Later I realized that this did exactly what it was supposed to do – create a new Footer to use.
Create a reusable block. NB! Before creating a Reusable block I had a full width block. After the conversion to a Reusable block the alignment controls went away and it seems that the block went to a no alignment. How do I have the Reusable block in full width alignment?
When I go to add three columns with the Columns block, I have the option to give the gap space between columns and I have the padding default left and right padding in each column. I am confused. I think that if I have gap option, should not have padding or reverse.
When searching for pages in the command centre – there was a slight delay before they showed as results – but there was no visual indicator that anything was happening.
This post is a summary of the Rapid Revamp call for testing for the FSE outreach program, the twenty-third 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.
Once more, bug wise, the call for testing was quite contained, reflecting a solid state in the experience considering how many new features are being built upon. Overall, the feedback mostly centered on iterating upon 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 previewing, improving template vs content editing clarity, confusion around which revision tool to use, and some more minor usability pain points, like poor drag and drop for the Details block or inconsistent triggering of the command center. There was plenty of positive feedback around how much smoother and cohesive the experience feels, with easier access to high level items thanks to the Site Editor additions of top level items 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. for Pages, Styles, and Navigation.
The newly added details block is wonderful. I used it to create an FAQ section, which contained paragraphs, list of items, code, and quote blocks. When I rearranged the blocks, I found it incredibly easy to drag and drop them at any level of block hierarchy. This snap ability turned out to be a significant improvement for GB 15.8. Awesome…I noticed that we now have Pages in the Site Editor, which has made transitioning between editing page templates and editing page/post contents much more easy. However, I still feel the tension between them are still strong. This is mainly because the right sidebar of the template and page/post content still display their respective details and options.
Aubergine Variation background implementation causes height changes, impacting the 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..
After adding content to About page and leaving the cursor in a paragraph block, when I click on the CMD + K, not open the command center. In this case, open a Search to add a link (the popup that appears when a link is inserted). I have to click in the parent block to work fine in the command center. @soivigol in this comment.
Feature Requests
With a strong emphasis on block theme previewing and the feature itself being in an early state, numerous feature requests came up to polish that specific experience, alongside requests for more styling options for the Details block and an easier to find pathway for Style 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.. Block theme previewing is a game changer and the feedback provided here offers some solid iteration opportunities.
Once I clicked on the Live Preview link and entered the Site Editor with the Navigation Sidebar (the dark grey menu area) on the left, I was expecting to be able to navigate between all the installed block themes and 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/ block themes, similar to how the preview of classic themes work.
Outside of more specific issues, feedback was repeated around the confusion between editing a template and a page, which aligns nicely with the already shipped next call for testing that focuses on some improvements there. Beyond the following, two folks mentioned that the “Work with me” link showed up twice as there was a Page list block present in the 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., causing the item to automatically be added after publishing. This caused some confusion and wasn’t intuitive to understand what was happening.
Desire for more information when clicking on links that move you out of the Site Editor, like “Manage all pages”.
Desire for more guidance around when to use which revision tool (Styles vs Templates).
Adding “Work with Me” again, I figured out why it appears twice on the outside navigation. I also see it twice on any template or the Header template part after the “Work with Me” page is published, if I leave the Editor and open the Editor again. The menu in the Twenty Twenty-Three theme is a “Page List”. When I add the additional Item, it always adds below or outside of the Page List. I couldn’t see how to add it to the Page List. But then when the Work with Me” page is published, it’s automatically added to the Page List, but it’s also outside where it was added originally.
When I made some revisions to the site design and clicked “Reset to defaults,” I expected to be taken back to the default settings of the active style (grapes), but instead the Editor presented me with TT3 default theme.
I was confused initially that the style revisions are stored together, not individually by block. I guess I expected this because they were on different “pages” and because I’m used to existing post/page revisions being separate.
Clicking into the Post Content group it acts just like 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. There is no page inserter but the inserter is at the bottom right of the Post Content. To me that feels strange. I expected to see the standard page inserter.
With the Details Block I felt very frustrated. In a first moment, I tried to drag and drop to move the selected content to “Type / to add a hidden block”, but it’s impossible why the Details block is closed when lost the focus. I had to use the keyboard (CMD + X) to cut the content and paste it. Additionally, I tried to click in the arrow to close the block (by intuition), but don’t occur anything. Only close when lost the focus and open when get the focus.
This post is a summary of the Front Page Fun call for testing for the FSE outreach program, the twenty-second 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.
Shout out to @pagelab and @valmedia2023 as first time contributors for this call for testing. Expect a badge on your WordPress profiles for your contribution!
High level summary
In general, the call for testing was relatively tame bug wise, with only a few obvious ones found, mainly in 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.. The usability feedback related to many ongoing projects in the Site Editor underscoring the impact of solving these consistent problems, in particular the clarification of the content <> template relationship and confusion around the overall experience of managing pieces of navigation. Most participants were perplexed by the “hybrid” content editing option in the Navigation section, which suddenly appeared, causing one person to believe they had encountered a bug.
While the new Grid layout type was the primary focus of the testing call, feedback on it was limited to suggestions for consolidating the various options between the grid layout, Columns block, Gallery block, and Table block. Despite being a focal point, there was little mention of patterns in the template creation experience, suggesting that the consistency in pattern mental model was successful.
First: the Instawp link was precious, and made everything work smoothly right away. The editor is becoming quite powerful, and I am increasingly enjoying the flexibility of working with blocks, layouts, patterns, and templates…However, it boils down to a higher cognitive load overall while performing tasks in the editor, compared to the classic editing experience. It is powerful, but it creates multiple contexts for similar operations, with an increasingly greater number of options and pop-ups. It is getting better, though. I know some of this can be attributed to the newness of everything, and it will take time until I — and everyone else — feel completely at home in the editor. We’re in a transitional era where users — and even developers — are becoming visual site builders, so I think this is inevitable.
It is incredible that I can create new pages from the menu and can edit the pages from the same site without having to page by page editing our content. Specially interesting to create a website for clients.
I created three draft pages: biography, discography, and buy. I assumed that the draft page referred to in the dark grey 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. under Navigation was the “page posts” page. Since we had only created draft pages before, seeing them listed under the new 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. oriented me towards a page content editing function. But when I was presented with “a page with many texts inside, which didn’t look like a page but should be a page,” I became completely disoriented. 🙃 I even created another local instance of WordPress, thinking that I had encountered a bug.
The Navigation block featured heavily in this call for testing, leading to most new issues touching on the current experience with three folks mentioning a delay in proper naming of draft pages. The experience of adding a new page in the Site Editor experience is an important one, particularly with the backdrop of adding content editing.
It doesn’t always display the full word “Inspiration” depending on how fast I type or pause while typing. Sometimes “Inspira” or “Inspirati”. Some sort of confused debouncing behavior.
Folks requested a few features in this call for testing mainly around the specifics of creating navigation and how that relates to using the Site Editor at large.
Going to the Editor. For a short moment I see Styles, Templates and Template Parts. Suddenly a half second later I see Navigation at the top. It is distracting seeing 3 areas and then a moment later 4 areas. I have sometimes clicked almost immediately and then I have end up clicking into the wrong area.
I miss the list view while editing on a mobile device as there’s no quick way to visualize the block structure without it. It is the most reliable and stable 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 point within the block editor, in my opinion.
Usability feedback repeated much of what’s already known and is actively being worked on, including the tension between templates <> content and improvements to adding links to the Navigation block by reducing the number of steps needed.
Consider how the Grid block can power other blocks from Columns to Gallery.
Personally, I miss having all my content (posts, pages, categories) and navigation options visible at once, all the time, without having to see a bunch of other options for other tasks. It’s just easier than clicking three or four times in the site editor UI, in multiple places, just to see what content is available to add as a menu item.
The Grid block is a very small beginning of something that can expand into something very useful. That can become a base for the Columns, Table and Gallery blocks. With each their own variation/unique features.
The site already had a Navigation section and I wanted to rearrange the one I just created. But the Navigation section in the sidebar did not let me select which of the menus I wanted to adjust. It just took one of the oldest ones I had. I expected that somewhere perhaps on the bottom that I would be able to switch menus and even select which is primary and as well as other selections in how a specific menu is to be used.
In the new pages, it was confusing. I didn’t see where I had written the new content. When I changed to edit About page, then I can see how I had written the new content in the Post Content Block. Then, I went back to the new pages and I had to search the Post Content Block in List View to edit correctly the pages… when we go to edit new pages, I think that the Post Content Block should have a placeholder to see where to begin to write or add new content.
This post is a summary of the Build a Block Theme exploration for the FSE outreach program, the twenty-first 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.
Shout out to @jameskoussertari@soivigol@gaambo as first time contributors for this exploration. Expect a badge on your WordPress profiles for your contribution!
As a reminder, explorations are more open-ended ways of exploring the Site Editor and gathering feedback, sometimes involving work in progress features and very early prototypes. In this case, we used the Create 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 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 to augment the Site Editor into even more of a block theme building tool in order to test the limits of what’s possible and find gaps.
Using the Site Editor alongside the Create Block Theme plugin supercharges the experience, mainly by filling in gaps around font management and offering more nuanced creating/exporting options. With these added features, the Site Editor is both left to shine as a theme building tool and the current known pain points impacting regular site building come to the surface, like needing more clarity around where layers of styles are coming from. In general, feedback fell into three categories: Create Block Theme plugin pain points, missing options in the Site Editor (font management, synced patterns, desire for more styling options with certain blocks), and 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. considerations for the Site Editor that match the site building experience. This all underscores how addressing key points of current feedback about the base experience of the Site Editor, including on mobile, will cascade to improve broader use cases, like using it as a theme building tool. To make the feedback easier to understand, anything specific to the Create Block Theme plugin has been marked as such.
Since I’m not a designer but would love to have a proper spacing layout, good hierarchy of headings, and a harmonious color palette, I then copied some of those elements from a couple of themes. For spacing values (spacing.spacingSizes and styles.spacing.blockGap), I copied them from the Frost theme and adopted the predefined font size values of headings & paragraphs from the Beaumont theme. As for the color palette, I sought a monochromatic color scheme, which I generated from W3School’s color schemes.I previously wrote custom CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. to set the site-title & post-title’s text-decoration to none, but later found out that it can be done 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.. So my theme doesn’t use custom CSS anymore.
I did previously a Block Theme with code and created some sections with the Site Editor and copy/paste the code. But this advance is grateful! It’s incredible, can create a Block Theme no writing any code 🙌
Most of the bugs found related to the experience of using the Site Editor on mobile web with basic options like undo/redo buttons not being visible, with a few additional bugs across the broader Site Editor experience and Create Block Theme plugin.
When arranging the site title and site tagline next to each other with the Row variation, there’s no setting for the CSS property align-items, which with the value baseline would allow the smaller site tagline to be nicely aligned with the site title. I can add an extra class for this and it works in the backend, but in the frontend my class is overwritten by the default is-layout-flex class, which has align-items: center. In the backend, the order of the classes is correct, while in the frontend the custom classes load too early and are overwritten by the WP default classes, so I have to use !important here.
Outside of major missing features, like the ability to sync patterns globally or modify interactive states for blocks, most folks either expressed a need for more advanced features catering to power users, including the ability to disable templates or set fallback fonts, and additional options for individual blocks to broaden stylistic possibilities.
How the heck do I delete pre existing templates? Such as Two Page templates Page (Large 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.) and Page (No Separators). As well as the extra Single Post (No Seperators) template.
Patterns are a fantastic way to provide clients and users prebuilt layouts for rapid website creation. Unfortunately though, they lack one important feature, which would take them from being great to absolutely amazing. This missing feature is the ability to sync and edit patterns globally, without altering the content within them.
When I saved and returned to the previous screen a “System font” was added as well. How would I go about specifying a fallback font? Eg I normally use “Helvetica, Arial, sans-serif” as fallbacks for font-family – I guess this is only possible via custom CSS?
What I found confusing is that for typography, there’s the preset font sizes (S, M, L, XL) but there’s no interface to change those preset sizes globally from the editor. Same for the defaults of Padding, Margin, Block Spacing and similar items.
Outside of issues related to the Create Block Theme plugin, usability concerns all touched on currently known patterns of feedback, from improved grouping of templates to needing to reimagine the Styles information architecture to improve the baseline intuitiveness. In particular, styling challenges were the most common as folks sought to create something new from scratch and ran into points of confusion around the hierarchy of styles, how to quickly use the Styles interface, and current gaps in the experience.
I add a Header pattern and now I have one official Header template part where I see it has the Header template part label.The other newly added Header pattern does not have the Header template label but is in a Row. How do I make the new pattern become the Header template part?
After examining the troubled templates and patterns, I found that the image path was going to the theme’s root assets/images folder. Copying the required images to the said folder solved the problem. Learning from this, I wondered if the image copying could be done during the CBT overwriting process and whether the overwriting process of templates that used coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.’s patterns could output the result to the HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. template only instead of the HTML + 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. https://www.php.net/manual/en/preface.php. pattern to minimize confusion.
Styling buttons (the block and elements) is split into “typography” and “colors”. This hierarchy may make sense and it’s a way how many plugins in the past implemented in 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.. Still another way may be “I want to style buttons, now show me all controls to style buttons”. At the moment one has to go into typography for text and then into color for colors.
I didn’t have to use the Custom CSS. But for this, I have wrapped the 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. in a group block to give it margin. I think that it is a good idea to can insert Custom CSS, why in this case, it is a better practice to set an Additional Class in the Featured Image Block and give it style with a few CSS lines. It’s interesting to have this option, but the location is difficult to reach. I had a frustration until to I found.
Top level typography styles: The icons for the different entries sometimes communicate current state (eg the background color on the button item), but other settings (eg removing text-decoration underline from link) does not change that. So the list is kind of mixed of current styles and base-styles. The text Aa icon seems to have a different font (the one i defined?) than heading and captions (allthough heading / captions do inherit that font).
I had adjusted the font size under Styles -> Typography -> Text to be higher than the default one, however it would not apply to all blocks in the content. I had to manually update Post Date, Categories and Tags. For the Post Author and Post Content blocks changing the font size to a custom of 21px did not have any effect on the block. For the post content block, the font size is set at the surrounding div, but does not apply to the paragraph child elements, as there’s a default CSS p { font-size: 16px }, which came from a the font size setting in the Paragraph block, as I found out after some testing. I wonder where the 16px from came from, either from the Create Block Theme or some default setting in WP?
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”).
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).
This post is a summary of the seventeenth call for testing for the FSE outreach program. 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.
Finally, thanks for the patience as this recap took a bit more time to get done, due to balancing other responsibilities with 6.1.
High-level summary
In many ways, this post could be split equally between the zoomed out view and 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. as that’s where much of the focus of feedback is centered. To make it easier to see the emphasis on zoomed out view and navigation block in the feedback from folks, each item of feedback has been clearly labeled.
In general, the zoomed out view proved to be seen as a high value add with folks immediately appreciating the value when switching between style variations and only a few bugs/enhancements found. It’s clear that, in time, having this view invoked contextually when doing things like changing style variations or adding patterns will be advantageous to the site editing experience when you need a way to see a broader view.
In terms of the navigation block, feedback underscored that it remains clunky to use. With this test focused on theme switching it highlighted that, while 6.1 brings huge strides in terms of fallbacks, work remains to be done even for basic site switching experience. Due to the complexity of the navigation block, various issues surrounding using the block itself were also noted including overlap issues when managing sub-menu items, a desire to have a more dedicated way to quickly alter the structure of the menu items, and confusion around the “double click to edit” experience that prioritizes selecting a container block rather than inner blocks at first.
I feel like novice users likely don’t know the implication of what will change with their theme. They might assume that the colors/styles may change, but not necessarily structural changes (like having to re-do the menu). I wonder if there is some way to give users (maybe just those that haven’t switched themes before) some more information about this.
Adding a way to edit the menu via a drag and drop interface in a modal window or something would be nice, precise clicking and adding submenus was tricky for me, whereas the WordPress standard way of editing menus is quite easy to work with.
I noticed that when I switched from Twenty Twenty One to Twenty Twenty Two the navigation changed and lost the previous menu. That’s unexpected and not great.… When clicking on manage menus, I was actually hoping to find the old menu interface where I could easily drag and drop menu items, add classes, and enable different items still not shown in the menu (Product categories, languages, etc.). My dreamy dream wish would be to select a menu 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. and be shown the “classic” editing interface for that menu, right away…Menus were one of the ways I often used to wow friends and customers about how simple WordPress menus were, and even newbies would get it right away. Coming from Joomla! Everybody was pretty impressed in a positive way.The block menu system still often feels like a collection of somewhat unrelated blocks, that won’t even update links when page slugs are changed. The menu experience really feels needlessly clunky and not intuitive to me. I wonder how new users feel about it.
@piermario in this comment (merged a few different lines).
For any folks who want to watch a group go through this experience, check out the following video:
Confirmed Bugs
The following bugs were found in the current experience, some of which have already been fixed:
Style variation: Switching Styles takes a while to update on the frontend making for a poor 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. when trying to view changes to your site.
When selecting a pattern from the footer categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., it gets added as Group. When it’s just a Group, the Replace functionality is not available. In order to use the Replace functionality, you have to first add a Footer block and then select one of the footer patterns from there. I guess this can be confusing for some people expecting to see the Replace menu item, when there is none.
It’s important to note that most folks mentioned wanting to see a different icon for the zoomed out view. In the issue introducing this feature itself, the icon was a topic of conversation but, in the long term, this isn’t truly meant to be a “standalone” tool to toggle on/off. Rather, it’s meant to be a view that is embedded intuitively throughout the experience. To get a sense of what that might look like, here are two examples where this mode would be “invoked” while taking specific actions where the view is most helpful: when the patterns tab is open in the Inserter and when switching between style variations. For this reason, an issue was not open.
Continuing to do work that improves the “out of the box” default options of the navigation block remains incredibly valuable, from better fallbacks to preventing accidental duplication of imports.
Zooming worked well to see what was there. I was able to insert new sections or patterns. I could also rearrange sections. I was not able to replace or delete any sections. (Not sure if that’s an option yet.)
When I edit the template in zoomed out mode and have selected a Group block or 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./Footer via the List View, the blue lines surrounding the selected group are very thin and almost not visible.
When I switched, the home page title showed up (where it wasn’t there before), the menu changed, and my twitter feed was now gone (that I had added to the footer).
Much of the usability feedback came in around the zoomed out view and navigation block. For the zoomed out view, there was a desire for more functionality, from a way to control how much zoom occurred to being able to take action on each section (delete/swap/etc). Rather than opening individual issues for these items, this recap is going to rely on the current designs that include these items for consideration with comments left on the main issue. For the navigation block, the feedback heavily indicated that the current experience of controlling and rearranging menu items is still too difficult, especially when a “convert to links” step has to happen. There are numerous efforts in progress to ease this from a way to edit the navigation in isolation to an editable “list view” style mode in the block settings.
Style variations: Desire for improvements to the experience with saving and changing style variations, including considering a warning before switching since manual changes are lost when switching between variations.
Navigation block: Some folks found the “double click to edit” friction for the navigation block in a template part to be frustrating or, at times, particularly persistent causing a need to click numerous times (couldn’t replicate).
Click once to zoom a specific amount of percentage and click again to zoom out even further. So that one can choose between two zoom modes of how far out one views the page from.
If I change the styles manually (colors, etc.) then switch to a different style variation, there is no way to get back to my previous version. There is also no warning that I will be losing all of my hard work.
It would be nice if the Navigation Menus in the top right of the toolbar allowed you to edit the items or if you could open a modal window to quickly edit the structure of the menu that would be easier.
Yay! Header and Footer patterns is one of the things I’ve been trying to discover, but I could never really find where this task could be done. So yay for the world of design options this feature opens, but unfortunately not so yay for the discoverability of this feature, which I find very interesting and fun.
