The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
If you’d like to help test Full Site Editing, please join the FSE Outreach Program. You can find current calls for testing for this program here and you can join the fun in #fse-outreach-experiment.
The team gathers in #core-test. Please drop by any time with questions or to help out.
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 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.
@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.
This post is a summary of the sixteenth 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:
@piermario for creating an Italian translation so members of the Italian speaking WordPress community can participate.
InstaWP for allowing the outreach program to use their tooling for free, resulting in a much lower barrier to entry to help test and more room for creativity in coming up with the test itself. The features focused on for this test would have been much harder for individuals to set up without the tooling offered.
High-level summary
Because this call for testing allowed for folks to explore different areas as much or as little as they wanted to, feedback was mainly caught up in the minutiae of larger features and experiences. Throughout each of these individual points, it’s very clear that an effort to take a step back and stabilize the following would go a long way in particular:
Better organization for block transforms so the options presented feel logical and relevant without accidental dead ends where you can’t switch back to the original 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..
Outside of the above, Patterns and Document Settings both received very little if any critical feedback, reflecting the strength of the current experience. For any designers and developers who want to see someone walk through the experience, I want to also mention the following videos from @paaljoachim to check out as you see fit:
The transforms all worked as expected, however some of the transforms were not super intuitive at first but I think made sense after I understood what they were doing. The transform to columns on multiple clicks of it ended up creating many many columns blocks wrapped inside each other. It was not clear why columns was an option to transform to, but now I am assuming it is so that you can quickly wrap an element into a columns block.
Another time, when I was looking to transform a heading, the “preview” would sometimes be cut off. You can see this in the below video, especially the preview for transforming it to a paragraph. What’s odd is that hovering up and down over the different options, it sometimes displayed correctly and sometimes not.
It is a mystery to me when or why this happens. It seems to happen more when I drop to the end of the post, but it also happens when I drop the row between two paragraphs.
At a high level, most feature requests related to better organization for block transforms as folks ran into various dead ends and clunky steps to switch between blocks:
For the final item around having a way to revert to an original image, this stands out as particularly important to consider when one looks ahead at the various options potentially added to image alterations in the future, from duotone to object fit options.
Changing a paragraph into any blocks can easily be reverted back into a Paragraph Block, except when it is changed to a Code Block. While one can easily unwrap a quote back to a paragraph, or revert a pullquote, a preformatted, a verse, a heading, or a list back to paragraph block. The same effortlessness is gone once the paragraph is transformed to a Code Block. Here one is faced with unintuitive options to operate on the Code Block (quote, preformatted, group, columns, custom 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.). To transform the Code Block into a paragraph, it needs to be changed into a Preformatted Block first.
I cannot remove a crop on an image, only replace it with the original from the media library. I would like to be told a new image was created. It would be nice if the image block would be smart enough to have a “revert to original” button and know which image in the media library to revert to.
As mentioned in the high level overview, both drag & drop and block transforms were key items that recurred throughout this call for testing. This was particularly true when thinking about usability since, at times, transforms felt smooth and obvious whereas at other points it led you through what one described as a “labyrinth”. Drag and drop felt similarly inconsistent with the ability to both easily move a large collection of blocks in one moment and the next being unable to add a block to an empty Columns block.
Text transforms generally worked fine, but feels a bit like a labyrinth. As there are different transforms based on what the current block is. It feels a bit random.
The transform to columns on multiple clicks of it ended up creating many many columns blocks wrapped inside each other. It was not clear why columns was an option to transform to, but now I am assuming it is so that you can quickly wrap an element into a columns block…Changing blocks to another type and eventually not being able to change back to the original type was somewhat frustrating, but not a big deal.
It is sometimes strange when you want to move a section somewhere else in the list view with the mouse. The positioning is not always cleanly possible.
One thing I noticed was the cover block gave me an option to convert it to an image block (which made sense). The other options were column block or group block. When I tried the group block, it didn’t actually transform into a group block. It created a group block on top of (or around? not sure what the right terminology) the existing cover block. This actually seemed useful. But isn’t what I would have thought by “transform.”
Moving images is done successfully both by drag & drop the blocks in the List View, and by using the move up/down chevrons in the image’s Block Toolbar. But the image movement is failed when I use the Move to option in the image’s Block Toolbar. Or perhaps my expectation isn’t inline with its designated usage.
This post is a summary of the fifteenth 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:
@courane01 for running a group testing session and reporting feedback.
InstaWP for allowing the outreach program to use their tooling for free, resulting in a much lower barrier to entry to help test and more room for creativity in coming up with the test itself. The features focused on for this test would have been much harder for individuals to set up without the tooling offered.
As with prior calls for testing that centered on using 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.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 current experience remains equal parts magical and clunky to configure exactly as one wants. When combined with the fact that when creating a new template, you’re met with an empty view, this call for testing mainly weights towards feature requests to ease the experience rather than outright bugs. Of all of what’s shared here, these are the most repeated items of feedback: unclear UX for how to get out of a locked block with headings & paragraph blocks, improve the verbiage around the Query Block settings and revise Query Block controls, edit site link should open the current template, and add fallback template content on creation.
The addition of starter patterns with locked blocks when creating a new post offered a peak at how streamlined and curated the experience can be while also revealing that more visual cues are needed to better understand what exactly is happening, particularly with locked blocks and layout controls. Most of what was discussed matches what has been previously found which underscores the impact resolving these repeated key problems will have.
For any designers and developers who want to see someone walk through the experience, I want to also mention the following videos to check out to see the call for testing in action:
To help ground the following feedback, here are some quotes about the overall experience to keep in mind:
It’s so smooth and easy. The fact that you can create template overrides for specific categories is brilliant. I can’t wait to use that on a custom theme with custom blocks. Post patterns are also great!
So cool to see how far FSE has come and all of the improvements related to templates. We’re getting closer to the power of the template hierarchy of traditional themes!
Selecting “categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.” from the “Add new” template menu was unintuitive for me. That 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. implies to me that I could add many “category” templates, which is not true. That confused me as to whether I would be creating a “category” template for every type of category, or choosing which categories to assign the template to. When I realized I couldn’t add another “category” I figured out what was going on…I enjoyed playing around with 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. / cover interaction and the “inner blocks use full width” feature. At the end of the test it was also cool to see the category template in use.
Maybe I am too used to classic WordPress themes with 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 footer pretty much always there. But it was very easy to create the template without a footer or header. Which obviously is cool that you can do that, but for whatever reason my brain was expecting header and footer to be auto included by default.
Typo in the category template creation (coming 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/ 13.8).
Locked heading blocks in the provided templates were super, duper frustrating. With normal heading blocks, if I press “return” at the end of a heading I get a paragraph block. With the locked headings I got stuck in the heading blocks. This felt like a major departure from typical interactions in the block editor.
As reflected in the high level summary, most feature requests have been mentioned before with a particular focus on various refinements, like adding a “view site” link in the editor or renaming “default template” in the template panel to match what one would see in the template list. While these are listed as feature requests, the lack of each adds up quickly creating an experience that accomplishes what you want but not without repeated moments of confusion.
It sometimes feels like I am “trapped” in the site editor without an easy way to get back to the dashboard. One suggestion would be having a dropdown to select whether I want to go back to the dashboard vs. see Site/Template/Template part editor. Similarly, I sometimes wish there was a “view site” option from the site editor. Again, I feel trapped.
I would prefer to have the same experience each time. It’s confusing to suddenly see patterns when I was expecting blocks. I would like to always see blocks first with a button or such to switch to the patterns.
I found that a different role will have a slightly different saving experience. Under administrator role, after I clicked publish for a new event or a new event recap, a suggestion menu to assign a category appeared. But this didn’t happen under an author role. So, author will have to go back to post tab, if she just remembered that she hasn’t assigned an event category to the post.
It works very well, as long as you remember to select “Inherit query from template” when you add the Query Loop. (I forget sometimes.) So I had different templates for one category over all the others.
So I would prefer if it said “Template Single” instead of “Template Default Template”. Or maybe “Template Single (Default)”, though I don’t see how being shown Single is the default is really helpful at that moment.
Feedback from this experience centered heavily on the Query Loop block and template creation experiences, rather than using block locking or post patterns or the featured image in the Cover block, despite those being newer features. As with every call for testing where a new template is being created, the experience of being dropped into an empty template to build from scratch is underwhelming. Determining when and how to use various settings for controlling both layout and query options continues to be a major 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. This will likely be eased when better defaults are available (Query loop block automatically added with “inherit query by default” set to true) rather than needing to create more from scratch, even with patterns.
Please ensure to read the quotes below as they help give context to what’s shared below as simple issues.
Improve Image Blocks Placeholders specifically in the context of using the featured image in a cover block, when the featured image hasn’t yet been added to a post, to make it clearer what action to take.
I really liked the “Inner blocks use full width” option, but I could not figure out what the “Wide” setting did. Changing the value didn’t do anything, and both the icon and description were unclear.
When using the query loop block, it isn’t immediately obvious how to view other design options. One suggestion would be to have the grid view displayed by default and allow someone to choose the single view as an option.
I don’t mind curated blocks or locked blocks at all… I only wish that the visual editor will prepare me (or the common user as the intended user of a bespoke theme) when dealing with curated blocks…Perhaps giving the curated block a different color? Or any sign that it is not your usual kind of block?
When selecting an “Event Recap” pattern, the caption was not visible in the preview because the pattern was too long vertically, and had to scroll to confirm it.
Editing the layout of a group is a little tricky. I think getting more comfortable with 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. would help, but having additional feedback around what is selected and where I can move things would be helpful.
This post is a summary of the fourteenth call for testing for the experimental FSE outreach program. As always, I want to highlight those who helped to bring others along with them in this latest effort:
Shout out to @alixnotes for being the sole first-time contributor for this call for testing. Get excited – you will soon have a testing contributor badge on your WordPress profile!
High-level summary
Across many of the responses to this call for testing, it was quickly clear that folks found the Template Editor via the Post Editor uniquely confusing, especially after growing used to the Site Editor. Because of how the Template Editor interacts or doesn’t with the Post Editor, a few folks struggled to understand when they were editing the template vs the post itself. In terms of the next editions of the List and Quote 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., there was general excitement around the new capabilities, especially once some refinements and bugs are addressed around keyboard controls for the List block.
To help ground the following feedback, here are some quotes about the overall experience to keep in mind:
The new Quote block worked well. It is now possible to add nested blocks inside it, one of the features I have long needed as a writer here at the Tavern when quoting from third-party resources…Overall, I am eager to see the finalized versions of these blocks. They will bring back some of the missing functionality from the classic editor and give users the flexibility to do even more.
I only got halfway through the FSE #14 because I got too frustrated with the comments part of the challenge. I spent 40 minutes on it, and here’s my biggest takeaway. The slightly different variations of the template editing screen were just too confusing for me. As someone who has been trying to work in the FSE for a few months now, I was completely thrown off by the slightly different screen you got when you launch the template editor directly from a post vs the template editor you get when you go to edit site, and then select a template to edit.
I really prefer not to use the Post Editor template system and instead keep all templates in the Site Editor. As it creates a consistency in how templates are created. The Post Editor template system is very different compared to the Site Editor template system. It creates a confusion in how templates are created. I look forward to being able to create multiple Post and Page templates in the Site Editor and have a simple system to where I can choose which posts and pages to attach any template to.
For any designers and developers who want to see someone walk through the experience, I want to also mention the following videos to check out and skip around to see the call for testing in action:
Here’s an example of what was created from @greenshady for this call for testing (he went above and beyond per usual):
Here’s another example of what was created with a lovely color palette by @alixnotes:
Confirmed Bugs
One of the testers for @courane01’s session experienced the editor crash when testing list view and attempting to modify a color but I was unable to replicate this across a few different attempts. Outside of that, the following bugs were found:
I assumed that the Add citation would be an inner block. I also assumed that I would be able to add padding/margin to the block. Both things are missing.
A new template can only be created by going to a post and clicking on “New” in the settings under Template on the right. It would be much more intuitive if you could create a new template directly in the editor.
Markdown-based lists are also not transformed into a List block when pasted into the editor. The formatting is lost, and each item gets absorbed into a Paragraph block.
As lightly mentioned in the high level overview, much of the feedback fell into this categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. with folks confused by the Template editor via the Post Editor, unsure of when they were editing the post vs template, and struggling to get layouts to cooperate (especially when it came to width controls). Sometimes these issues all combined with folks editing post content rather than the template and unable to adjust the width as they wanted as a result. Additional quotes are added below to better provide context:
Desire for consistent dimension controls across blocks since it’s currently commonplace for some blocks to have controls and options that others do not (ex: Post Author block vs AvatarAvatarAn avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. block).
Simplify the layout concept in order to make the controls easier to use to better ensure that when creating a new template the widths aren’t drastically different from the rest of the Post Content block. Tied to this, there needs to be a way to make it clear that a Group block needs to be added at all to have the widths be consistent.
For this final item, here’s a quick video demonstrating the problem so folks can better understand this specific 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 in the template creation process:
I also had difficulty making the Comments section the same width as the Content Group. If I used a Group Block to contain the Comment 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., then the comments themselves could be reduced in width (using the Inherit Layout option) , but the borders were still the full width.
Still trying to get “edge space” – ie margin from edge to orange borders I tried toggling on the “inherit default layout” This didnt make any different to the margin. It just changed the padding. I also added a zero to the block spacing field. Nothing changed. I tried changing the layout toggle to 80 % wide. This changed the internal padding of the block and didnt move the block away from the edges…Why are some settings in the block toolbar and some in the inspector? Why arn’t the same settings (where appropriate) in all similar blocks – ie padding, margins, width available in both groups, and columns?
Still in the template editor I went to view the post. Then trying to get back to the template editor I got the page editor which informed me that there was a saved version that contained changes. (I have been caught by this before – on my own site when making changes in the templates and then going to the page editor, if I had clicked on the revert to saved I potentially might have lost all the changes that I had just tried to make. This is confusing!).
The slightly different variations of the template editing screen were just too confusing for me. As someone who has been trying to work in the FSE for a few months now, I was completely thrown off by the slightly different screen you got when you launch the template editor directly from a post vs the template editor you get when you go to edit site, and then select a template to edit.
The different controls for different blocks makes it really hard to make something that is consistent and nice. I decided it would be cool to make the user pictures a little bit bigger, like that might make the comments more inviting. Since I made the commenters pictures so big, I said, let’s add in a Post Author block so that the post author’s picture will be shown too! Wait, the Avatar block in the Comments Query loop and the Post Author have completely different control? I can make the avatar any size, but the post author I have a dropdown with 3 choices? I can but a border radius on the avatar block, but not the post author block? If it’s a picture, I should have all the same tools available to me as any other block that uses a picture.
This post is a summary of the thirteenth call for testing for the experimental FSE outreach program. As always, I want to highlight those who helped to bring others along with them in this latest effort:
Shout out to @hage, @antigone7, @robglidden, @azhiyadev as first-time contributors. Get excited – you now have a testing contributor badge on your WordPress profile!
High-level summary
To help ground the following feedback, here are some quotes about the overall experience to keep in mind:
The most frustrating thing to me is still, hands down, the lack of a clear, consistent visual cue or affordance to insert a new 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 a new parent level after an existing block. Most of the time, when adding a block using the [+] square, the new one is inserted right there, still as a “child” block. List view often comes to the rescue and helps a lot. Without it, everything would be much, much harder to build..This, and the current lack of consistency in styling and spacing options between blocks (some have margins, some don’t, some have colors, some don’t, etc.) is still, in my opinion, one of the main factors keeping users from jumping ship from site builders.
Outside of the user-experience issues noted below, everything went well. No editor crashes. No problems saving. And the front-end matched what I was seeing in the editor.
Offer the option to link to an author’s archive with the current Post Author block. This will be available in future releases when the Post Name Author block is released, which includes this feature.
Most requests in this section touch on items that would improve the experience of an option (quick inserter prioritizing patterns) or block (No results block) rather than a list of desired new functionality. This reflects the fact that much of what folks wanted to do in this call for testing they could reasonably accomplish compared to prior calls.
I did not know about the “No Results block”. That was interesting to learn about. Perhaps it should automatically be added with the default text if there are no author posts to show.
The 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. block under 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. doesn’t have an option to adjust the excerpt length. (The Latest Posts block does have this option.)
Working with the block felt odd at first. Where does it go? After the Post Template? Before?…It was also odd to visually edit a feature that is conditionally displayed. There should be an indicator that its contents may or may not be shown on the front end…Overall, the No Results block is a welcome addition to the theme-blocks toolset. I would like to see 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. fleshed out a bit. Theme authors will likely start using this more when 6.0 lands, and I could see users inadvertently trying to delete it, thinking it is part of the default output.
Once more, this call for testing showed the desire to avoid starting from scratch, more consistency across the experience (especially with what options are available to customize blocks), and more connection points between new options. In particular, the inability to link to the Author Template one customized in this call for testing using the Post Author block was repeated numerous times as a pain pointPain pointPain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life. The missing connection there lowers the impact the new author template could have. While this won’t be available for WordPress 6.0, expect to see the option to do so included when the new Post Author Name block is included in a future WordPress release:
The most immediate issue when creating a new author template is that it was devoid of default blocks. Where was the—at minimum—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 footer? The empty template would make sense if I was building something from scratch. However, this is not a from-scratch project. It was built from a theme with existing archive.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. and index.html files, ancestors in the template hierarchy…Users will most likely want to make modifications rather than start from scratch. Using an ancestor template as a base means that they are less likely to unnecessarily deviate from the existing layout, especially with more complex designs.
I feel that menus were a lot more intuitive and easier to manage with the previous system. I wish there were a way to basically tie back the new blocks to a similar interface, which had become familiar and was easy to use even for non-experts.
I had expected that after locking the group block at the header, the cover block contained in it (for example) could also not be moved. But that was possible without any problems. In my opinion, another option would make sense here: Lock all blocks contained in the block. If a group block contains several other blocks, it would be very time-consuming to lock all of them.
This post is a summary of the twelfth call for testing for the experimental FSE outreach program. As always, I want to highlight those who helped to bring others along with them in this latest effort:
Shout out to @itsjustdj as the sole first-time contributor for this call for testing. Get excited – you now have a testing contributor badge on your WordPress profile!
High-level summary
The feedback this time around focused on the edges of the experience, especially in terms of design tools, and on some key problem areas that have repeatedly come up around navigating the entirety of the experience, like knowing what templates are used where. On the whole though, there were no deal breakers, big crashes, or show stopping problems found. Here’s what a few people had to say about the experience that can help frame the following more specific feedback:
On the whole, this went surprisingly well. In a year, the site editor has become far more powerful…Without responsive controls on layout-type containers like the Columns 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., designing anything complex with the site editor can sometimes feel like one giant hack…There are tons of improvements with block design tools in comparison to last year…I hit no spacing-related problems in this experiment. That feels gratifying to say after over a year of testing FSE features. The experience of designing from within the site and template editors feels pretty smooth these days. The holdups are more about missing capabilities than anything.
The Typography settings are particularly satisfying to play around with. It’s nice to have lots of design options before having to use custom CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site..
Most of these things are editable in FSE, but it feels like it is up to the creator to explore and it feels a little like a scavenger hunt. I wish there was a way to surface the most important decisions in a linear way. Some kind of “Start Here” guided walkthrough that pros would ignore, but help casual users understand the capabilities of Full Site Editor.
The ease of laying out 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. with rows/columns and dropping in site elements (logo/site title/navigation) was awesome.
Of note, since most feedback fell into the usability and feature request categories, the format of this post breaks down by feature more than recent ones that tend to stick with Bugs, Feature Requests, and General Usability headings to make it easier for those working on specific features to follow.
Potential bug
For the first time in this program’s history, zero bugs were found that could be replicated. However, there was one report that I was unable to replicate or find similar reports for that I’ll share below in case someone else can:
I added a spacer block below 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. and later went to delete it. It moved the content of my site around and my navigation menu was gone, so I reloaded which lost anything that wasn’t saved. It also crashed when I was adding Header Dark Small to the Blank template.
@courane01 in this comment. Check out the comment for more details.
Templates and template parts
With more options available for templates and template parts, there’s an increasing need for better organization and more clarity in the interface to understand the impact of changes, big or small (adding a new template vs editing a template part). This is compounded by the fact that most folks don’t have a strong grasp on the template hierarchy built into WordPress. With newer modes like the focus template part mode, there was also some confusion around why this should be used. This is partially due to lack of awareness around how it can be used in the future as a gradual adoption pathway and due to those pathways not yet existing visually in the editor.
The subtle differences between the FSE screen and the “Focus Mode” screen are a little confusing. Specifically, I really LOVE the new “Replace” button to choose between an existing template or a Pattern. But I wish I could “Replace” with a Pattern even in focus mode. If I came to this screen to really work on my header, why would I have less options here than I have when looking at the full site?
Trying to select the correct group, row, or block in the layout can be hit or miss. When I think I’ve selected the correct one, I accidentally edit something else.
There was a small dot in an accent color under the “Added by” column on the Template Parts screen that (I think) indicated the original template part had been edited. Something a little more obvious there would be nice (for instance, under “Added by” maybe it says [Theme Name], edited by [user]).
The Navigation block may be my least favorite thing about the site editor. I have yet to see how it will offer a universal system that plays well with the 1,000s of design variations that theme authors will want to employ. Classic nav menus are still vastly superior for custom design.
With patterns being increasingly integrated into the site building experience, new pieces of feedback are arising around pattern management. This includes everything from naming best practices to when options should appear to swap between patterns and more.
Since I had changed the default color scheme on my site, I was confused at first looking at the pattern names. For example, I had set my primary color as Blue, so “Text-only header with green background” was confusing to me at first because it was blue.
Cutting across the entire experience, familiar feedback came in that touches on some key pain points in the current version of site editing. All of these items have been previously reported:
Increase parity with 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. including homepage settings and custom CSS.
Of note, it feels important to call out recent work in progress in the dedicated UI for navigation structure, since this both improves the information architecture by grouping site wide tools and implements a form of browse mode many have asked for to make it easier to see more parts of your site as you create.
Clicking Header or any template section is somewhat difficult, as it easily selects blocks inside of it.
I miss some of the common controls that were part of every WordPress Customize screen. I wanted to edit my site to have a static homepage and a blogroll elsewhere. I feel like homepage settings, custom css, menus should be somewhere in the FSE experience.
This post is a summary of the All Things Media exploration for the FSE Outreach Program. Coming out of a pause from 5.9, it was so encouraging and wonderful to see the wider community help out with this exploration in the following ways:
@aurooba for running a live stream of the exploration and sharing feedback.
Shout out to the following folks as first-time contributors to a call for testing: @patrick-b, @ndiego, @beckej, @lidialab. Get excited – you now have a testing contributor badge on your WordPress profile!
High-level summary
While normally, there are some overall sentiments to share, this exploration was so wide ranging it’s hard to pull out a few quotes to ground the following feedback in. Instead, here are some patterns seen across the varying areas below that help bring together the feedback more cohesively:
Emphases on making attribution easy while also allowing for the ability to filterFilterFilters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. out images that require it, as few seem keen to use images that would.
Inconsistency with tooling, whether using duotone to select a custom color or trying to crop an image in a gallery 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..
Desire for more expansive options, including featured images and adding YouTube videos as a background.
Simplifying layout controls and increase in patterns to make it easier to place your content exactly as you’d like in 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 as a full width visual.
In each section, the items are divided when appropriate into previously reported vs new categories in order to better understand what was underscored as part of this exploration compared to what was found.
Confirmed bugs
Listed below are confirmed bugs that break expected functionality or the experience of different features.
The default dimension is highlighted as 100% but in-fact if clicking on 100% again usually modifies the image size on the editor. It is a bit confusing.
Throughout each of these feature requests, there’s a clear desire for better and more consistent tooling, from background support in Group blocks to having a focal point picker for a 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.. It’s obvious there’s a dance to get right in adding more features while also creating a more consistent and intuitive experience in handling media in the Site Editor.
Where one can define specifics on upload. Is it a bmp or other none web format have it be converted to a jpg. Have larger images downscaled to a kind of max image size. Etc.
Having a way to include Featured images in a variety of blocks, such as Cover, would be amazing. This is in scope for 6.0, but it’s the biggest thing I would like to see regarding media and would enable a lot of interesting patterns.
However, I would like to see a range of filters available to users. If this is too much for coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress., perhaps a standard filter-registration system for developers might be in order.
As seen in other calls for testing, the experience of easily manipulating a Header proved difficult, whether trying to add a background image, trying to get alignments exactly right with your Site Logo, or in using various aspects of duotone. Tied to this, confusion continues around Layout controls with simple tasks like making a Cover block full width proving to be frustrating and further underscoring the need to simplify these concepts.
Simplify layout controls with multiple examples around how the complexity of Layout controls causing confusing experiences with alignment options feeling like they are missing or not working.
Implement “Site Brand” patterns as a way to help resolve issues with layout and row block configuration since it can be tricky to get things to line up as you want.
I went down a weird rabbit hole where I couldn’t figure out why we had the header block and the header template parts. I mean, what if I wanted to have two different headers with wildly different information in them? Whenever I changed the main header block (anything living inside it), it changed it in all the header template parts, and I found that very confusing and frustrating. I ended up removing the header block inside the header templates and keeping things just in groups. That made way more sense to me.
I had trouble making my cover image full width. It’s still a bit odd to me that some controls only show up in certain situations, and in this case, because my cover was part of a group, I couldn’t make the cover full width. I’ve been teaching people to use that list view to try to get around that.
This is tricky and I bet is the hardest step. “Header” is not clearly defined. I bet most folks would go into the Site Editor and try to add a background image to the Header template part block. Also most block-themes have a Group block wrapping the inner content of the Header part, and Group blocks also do not support image backgrounds (yet). So you have to modify the content in your Header by placing it inside of a Cover block and then add a background image to the Cover block. This takes a LOT of in depth knowledge of the Site Editor to accomplish.
Say I’m editing the padding dimension, then goes to modify the duotone, the entire 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. goes to the top(back to media settings) and opens all the closed settings, which affects the user workflow. This also happens when changing the ‘alignment’ to ‘none’ or ‘full width’.
We chatted about this on the hallway hangout for this exploration (starting at 16:00 and again around 26:58) with thoughts on how to learn from tools like Pressbooks, how to make attributions more magical by reusing theme styles when adding them, and how to encourage best practices for folks. In general, folks were not keen to use images that required attribution as one can see in the quotes below.
This question evoked a strong negative reaction for me. I don’t know it means that attribution info wouldn’t be removable? Would it be watermarked on the image? Are we talking about metadata. Either way, if you can’t remove attribution from an image visually, I would never use such an image or images from such a resource.
As long as we gave end users a few options, I really like the idea of making it easy for others to utilize the open-licensed images, and help guide them to do best practices.
It’d be great to have a way from the media library or block settings to append any attribution required AND define where that displayed in templates. I’d like to display the attribution before post comments and after post content.
General insights/questionson other photo libraries
We chatted about this on the hallway hangout for this exploration (starting around 24:41) mainly discussing how important it is that an 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. solution rivals a paid one. Generally speaking, folks mentioned the following external image libraries outside of Openverse: Unsplash, Rawpixel, Pexels. Some questions remain as you can see in the quote below:
How might this work for other media types, such as audio and video? Would we want to hotlink it/embed from the source? What’s the risk if the media later is no longer hosted there? But also: hosting many audio and video files within most hosting environments is not ideal. If we make it easier to move mixed media from Openverse to the Media Library, what are the trade-offs?
A longstanding conversation in the WordPress project is around having better media management from folders to better filtering and more. This desire held up with a discussion around whether Openverse might be able to solve some of these issues as a media hub. Here’s a video from @paaljoachim expanding on the idea:
This has been a longstanding request in the WordPress community, but better media management in the Media Library (i.e. folders) would be extremely helpful, especially for site with 100s of images.
Folks were kind enough to record videos of themselves walking through the experience that I wanted to reshare below as it’s neat to see folks in a great bandwidth medium share their thoughts:
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. from @aurooba stream.
You must be logged in to post a comment.