Hallway Hangout: On 6.1, 6.2, and block themes (Nov 2nd)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance:

Jeff Ong, Ellen Bauer, Nick Diego, and Edwin Cromley 

Video Recording:

Topics:

We covered a wide variety of topics: the outreach program’s future, updates for the 6.1 release, aspects of phase 2 to wrap up, the current experience of developing and maintaining blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes, and more.

What will happen to the outreach program now that 6.1 is out?

The outreach program is continuing as is! When it comes time to wind it down, it will be heavily communicated and, ideally, continued in some form or another. As with “gradual adoption” of FSE features, expect a more gradual phasing out.

Various updates around 6.1

We chatted through some of the key feedback coming in with 6.1 released last week. This was shared publicly in the release leads channel prior to the call.

Managing updates for block themes

The discussion around 6.1 feedback led to a conversation about managing updates for block themes. In particular, there were some layout changes that needed to be managed. Keeping up with these changes for each release can lead to a feeling of “Why did we build these themes already?!” when there’s so much to keep on top of with each release. It still is taking a lot of work with each release.

@bph the idea was brought up to have a compressed set of links to follow based on audience perhaps for the Developer blog, inspired by Rich Tabor’s twitter roundup. We discussed how there were also 2x the number of dev notes for this release compared to 5.9 and 6.0.

In general, there seems to be a cycle of finding a solution to work around current limitations > the gap getting filled in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. > needing to update > cycle repeats. There are questions around when this process will get less intense.

Themeshaper

Questions around themeshaper came up with folks wanting to see more there and reminiscing on the kinds of posts that were shared previously as being quite illuminating. Speaking personally, I’m now trying to share more directly in Core when posting but it is an “outlet” that would be great to see revived.

Pixl theme discussion 

After Matt tweeted about the Pixl theme, this led to questions around: “Is this the direction we’re heading in? Is it meant to be super simple block theme? Am I overcomplicating it somehow?” We talked about how it was likely just a note about a cool, quirky theme and that ultimately block themes are for all cases (or will be in the future as functionality grows). The goal is to do everything, from very simple to very high level. Nick shared that he’s, “Taking a lot of block themes and throwing them away. I took what was available and took it to the next level, like custom classes or custom code, that block themes couldn’t do at that time. Now, I’m stripping it out and refreshing it with a much simpler architecture.” Ellen is doing the same and it’s a lot of work. From there, you have to consider propagating updates. While this is a big part of being an early adopter, it’s still worth noting and it becomes intimidating to step into eCommerce considering.

Stability for maintenance & stability for UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. of block themes

We talked about how there’s a split when talking about stability: stability of block themes in terms of less maintenance and stability of the UX for end users of block themes. We discussed how patterns are a big deal for UX in general and shared some examples of using starter patterns, with Nick sharing a great resource he wrote.

Latest Phase 2 Update

We went through the latest phase 2 overview issue update, talking at a high level about what’s to come and how work is progressing. This included a lot of discussion around the ability to save, import, and export variations. Feedback was given that style variations are often ignored for clients and that it would be more useful to be able to copy style variations/copying block styles. At the same time, being able to import/export your own branding via style variations would also be wildly helpful.

What about removing the beta label?

We ended by talking about the betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. label, how it’s likely slated for 6.2, how another update will need to be done to ensure the issue is up to date, and how the label itself might change away from just “editor”.

#fse-hallway-hangout

Hallway Hangout: Discussion on wrapping Phase 2 (26 Oct)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance: Rich Tabor, Damon Cook, Courtney Roberston, Paal Joachim Romdahl, Jeff Ong, Nick Diego, Vagelis, Sé Reed, Piermario Orecchioni. 

Video Recording:

Topics:

The main topic centered around the work underway to wrap phase 2 gathered in this overview issue. Expect regular updates to this issue and know that other work will continue but there’s a big emphasis to complete the tasks outlined there. 

As of last week, the following was in place:  

  • Work has been completed (1)
  • Dev work is underway (9)
  • We’re in the design stage still (3).
  • Dev is assigned but hasn’t started (3).
  • Means work is stuck but there’s follow up to try to get unstuck (1).
  • Means work is stuck, either due to a problem or a time lapse of 14+ days, and unclear how to unblock (11).

From there, we dug into the following individual issues to chat through at a high level what we were seeing. At a high level, it stuck out to folks how many different explorations there are, conflicting designs at times, etc. By doing this work concurrently, these differences can be resolved and the solutions refined together. 

Introduce “Browser” and surface main navigation UI

We talked about how this was a change in the entrance to the site editor just as much as it was for navigating between content. There was a desire to be able to click on the site title in the nav component to take you to the front end of the site. We discussed the important of accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) testing for this change and it’s top of mind to test for the FSE Outreach Program. 

Global styles: Offer a way to view a document containing all blocks and styles

  • Overall, this would be a great way to get a sense of how changes impact the entirety of the site and in creating a more unified approach. 
  • When looking at this issue, various folks commented on how it feels like there’s a number of different modes and it isn’t always clear how they relate and don’t relate. Part of this is due to designs being in progress at various stages and including some work but not others. 
  • We chatted about how the IA needs to improve around right/left sidebars. Is there a best practice for when to put things in left vs right sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. in the design library? Are we at a critical point in that convo right now? What about RTL when it comes to moving where things “live”? 

Make it possible to push local block styles to global block styles

  • This was noted as something that’s likely for more advanced folks but still very handy.
  • There are some tricky things to figure out since the styles pushed would have to be supported within GS.
  • It also requires a site to be built in a certain way to work since there’s some complexity around the specificity of global styles. 

Using the template editor for plugins

  • We talked about plugins using the template editor (example from Woo) and how the template editor doesn’t have access to global styles, leading to viewing Consider exposing the Styles UI for classic themes using theme.json.
  • We discussed what consolidation of the various editors might look like and how the current work seeks to make everything more unified, with the option to edit content in the site editor for example. 

Media library getting the “FSE treatment”

Feedback on the Quick Inserter prioritizing patterns in certain circumstances 

  • We discussed some pain points around when the quick inserter prioritizes patterns, especially the struggle to be able to add a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.!
  • Talked about having it be a user preference to start with blocks vs patterns. 
  • There are generally two different mindsets when working with blocks vs patterns. 
  • Could the slash inserter work with patterns? There’s already an open issue here

Other topics and questions

Folks shared that responsiveness is still a big topic along with navigation block. Multiple people echoed both. Damon shared in the chat: “The Navigation block has SO much complexity, but tackling the challenges will likely surface many great ideas that can be rolled out to other blocks that have complete UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing./interaction”. Finally, we chatted at the end about the history of the Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block naming (why not loop?), where folks can report issues when 6.1 is out in the wild, and what’s next for the FSE Outreach Program.

#fse-hallway-hangout

FSE Program Guiding the Gutenberg Gallery Summary

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: 

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 blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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.

Beyond these two buckets of feedback, some high level items remained including a need to properly migrate widgets to block themes as that’s a key part of the experience currently lacking that causes content loss. Tied to this, various pain points in style switching, a big part of Twenty Twenty-Three, were noted including a lack of clarity around how changes to a style variation wipes out previous manual edits to styles and a delay in the changes to a style variations appearing on the front end of a site. More simply, this test also showed how opening up access to edit these parts of your site also requires a more streamlined way to make common changes, like changing basic colors (background) in a new template, without impacting the entire site. 

O that is very very nice! I like being zoomed out and viewing the page while clicking the various styles! It gives a really nice overview!

@paaljoachim in this comment.

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.

@clubkert in this comment.

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.

@chopinbach in this comment.

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 sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. 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: 

When selecting a pattern from the footer categoryCategory The '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.

@luminuu in this comment.

Feature Requests 

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.)

@antigone7 in this comment.

When I edit the template in zoomed out mode and have selected a Group block or HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes./Footer via the List View, the blue lines surrounding the selected group are very thin and almost not visible.

@luminuu in this comment.

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).

@clubkert in this comment.

General Usability

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.

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.

@paaljoachim in this comment.

Repeatedly one click on the Navigation did not do anything. I had to double click it.

@paaljoachim in this comment.

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.

@clubkert in this comment.

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.

@chopinbach in this comment.

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.

@piermario in this comment.

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

FSE Program Back to Basics Summary

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 blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.
  • Addressing efforts to improve the overall drag and drop feature to make it more predictable, smooth, and well integrated with tools like List View. This includes allowing an easy way to drag and drop images side by side with each other

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:

Confirmed Bugs

The following bugs were found in the current experience, all of which were new: 

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.

@chopinbach  in this comment.

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.

@clubkert in this comment.

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.

@robglidden in this comment.

Feature Requests 

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 HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites.). To transform the Code Block into a paragraph, it needs to be changed into a Preformatted Block first.

@franz00 in this comment

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.

@robglidden in this comment.

General Usability

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.  

@paaljoachim in this comment.

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.

@chopinbach  in this comment.

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.

@hage in this comment.

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.”

@clubkert in this comment.

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.

@franz00 in this comment

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

FSE Program Category Customization Summary

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.
  • @mimitips and @atachibana for creating a Japanese translation.
  • @piermario for creating an Italian translation.
  • 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. 

Shout out to @clubkert @chopinbach @franz00 @osamunize @eboxnet for being first time contributors. Expect a badge on your WordPress profiles for your contribution!

High-level summary

As with prior calls for testing that centered on using the Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., 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!

@eboxnet in this comment.

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!

@bgturner in this comment.

Selecting “categoryCategory The '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 UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. 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 image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. / 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. 

@arturgrabo in this comment.

Maybe I am too used to classic WordPress themes with headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. 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.

@chopinbach in this comment.

Confirmed Bugs

Previously reported:

New issues:

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.

@arturgrabo in this comment.

Feature Requests 

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. 

New issues:

Previously reported:

Another thing that feels a bit bumpy is when saving the template, there’s no way to quickly access your site again.

@luminuu in this comment.

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.

@clubkert in this comment

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.

@antigone7 in this comment.

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.

@franz00 in this comment.

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.

@antigone7 in this comment.

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.

@robglidden  in this comment.

General Usability

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 point Pain 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. 

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.  

@arturgrabo in this comment.

In the template editor, I was expecting the center-top dropdown (which said home initially) to allow me to easily switch to different templates.

@clubkert in this comment.

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.

@clubkert in this comment.

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?

@franz00 in this comment.

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.

@osamunize in this comment.

Editing the layout of a group is a little tricky. I think getting more comfortable with the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. would help, but having additional feedback around what is selected and where I can move things would be helpful.

@bgturner in this comment.

This blur is too strong/too much contrast. It would be helpful with a much more subtle blur. As the current background blur is exhausting on the eyes.

@paaljoachim in this comment.

The Inherit query from template toggle is not obvious for the average non-dev to enable.

@courane01 in this comment.

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

FSE Program Pattern and Template Part Usability Testing Summary

This post is a summary of the usability testing done as a joint collaboration between design contributors and FSE Outreach program participants. For starters, big thank you to everyone who contributed both as designers and participants. Having watched each of the following videos, I’m really struck by how seriously everyone took this effort and how much kindness existed in each interaction, even when sharing tough feedback or stumbling over the experience. This was an experiment and it was a success because of how each of you engaged.

Before digging into the videos themselves, I want to note that I had to scale down many, if not all, of the videos in order to get them to upload properly to Make Test. For full access to the highest quality recordings, you can view them in this Google Drive folder that was set up for this series of tests. Separately, the intent was to have an equal split between both flows but that wasn’t always followed for each participant.

Finally, everyone who participated, whether as a design contributor or participant, will get a Test Contributor badge added to their profile as soon as possible if you don’t already have one!

Overall takeaways

High level summary

Across each experience, the following commonalities stood out:

  • Lack of awareness around List View and, even for those who do use it, frustration around dragging and dropping items.
  • Desire for more visual indicators of where content would be added, whether when adding patterns or trying to create a new template part without it being baked inside another one. This caused repeated placing of patterns within patterns or template parts within template parts.
  • Missing knowledge around patterns, including discovering them to begin with or finding how they are sorted by categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging..
  • Great difficulty using the navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., whether to do something more advanced like create a different experience on mobile or as simple as understanding how to add items to the menu based on the current placeholder state.
  • Easier to replace a template part while creating from scratch proved painful, even if folks went into the isolated template part mode. This is due to things like confusion around building simple layouts, details around setting the correct template part area, the impact of duplicating template parts, and restrictions in what can be done to edit a template part in isolated mode.
  • Clear confusion around the various sidebars, where to find settings, what impacts a site globally (like Styles), etc.

Bugs

Feature requests

Template Part Testing

Level listed under each video reflects a self reported level of comfort with FSE with 1 being not all familiar and 10 reflecting expertise. For any listed as N/A, the participant was not asked.

Video 1

  • Level: 2-3
  • Didn’t use list view.
  • Replaced the template part but wasn’t able to create a new one from scratch.
  • Navigation block was identified as a major pain.
  • Went back to the overall template list to apply the template part to another template but it felt like the wrong place even though it was the right spot to go to (around 7 minutes in).
  • Unable to complete the final task of applying a template part to another template.

“It’s definitely different than the WordPress I’m used to. I’m more used to operating through the dashboard than a visual editor which I think is why I was unsure of what I was doing. Otherwise, as far as changing the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes., was absolutely quick and painless. Once I learned what some of the other options did it was an easy way to align it how I wanted it to.”

Video 2

  • Level: 6 or 7.
  • Didn’t use list view.
  • Created a template part within the editor to start.
  • Created a template part within a template part within a template part, causing the final template part to be smushed within the editor.
  • Left to go to template part focus mode to try to add navigation since the + button for the new template part looked so different than what he was used to (5:10-6:00).
  • The navigation block placeholder felt unusable and it wasn’t clear how best to add items to it with the + button being so far removed from the experience.
  • He tried to use “Manage menus” thinking that would allow for a way to add items only to reach a dead end.

Video 3

  • Level: 7 or 8
  • Didn’t use list view, except with the navigation block’s list view.
  • Went to template parts > add new to add a new template part.
  • Couldn’t edit background or basic colors in isolated template part mode. Instead he used Styles which changed the whole site, not just the template part without realizing it would do that (around 6 minutes). This touches on a closed issue.
  • Isolated template part mode has an easier flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
    Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
    to see bounds of a template part, assign an area, etc but then has huge limitations in terms of customization.
  • Wants the ability to create a sticky header and a way to add all new pages to the navigation block.

“It’s a little bit confusing, what you’re really changing and where it works…It’s a lot of understanding that’s needed. I think for an ordinary user it’s very difficult.”

Video 4

  • Level: N/A
  • Used List View.
  • Went back to template parts immediately to create a new one and noted that he usually creates template parts with code.
  • At first, duplicated the template part, which runs into this issue. Later, he made a template part by converting a group block using list view. 
  • He found the header within a header for Twenty Twenty-Two confusing to navigate.
  • He shared that he uses a hack where he adds two navigation blocks: one with mobile always on and one with it always off. From there, will mobile always on, uses custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. so it only displays on small screen sizes. 
  • New header template part was only available when adding a generic template part and not in the Replace modal. This is because when he originally set up the template part (6:54), he selected general rather than header. He couldn’t find a way to assign the right area for the template part (change from General to Header) within the isolated template part mode.

“This is something that is really annoying to me in the full site editor… moving blocks into different groups…I find it very hard to get to the correct hierarchical level…it’s very flimsy and hard for me to get to the right place.”  

“The navigation block for me is really weird to me. If I click on Manage Menus, it’s empty. There’s nothing to do. I really don’t understand it.” 

Video 5

  • Level: N/A
  • Used List View.
  • Went back to the list of template parts to create a new template part and correctly assigned the area.
  • Ran into this issue where the navigation toolbar overlaps with the experience of adding a link, making it nearly impossible to figure out what you’re doing.

“The more helper things you have open (ie: sidebars) I think sometimes it could be hard, especially with full site editing. So maybe you need to use a big screen or remember to close out some of the sidebars”.

“Being able to go through the block navigation (list view) is where I can usually find out if I put something in a container that didn’t belong in that container”.

Video 6

  • Level: N/A
  • Used List View.
  • Went back to template parts and then edited a current header, rather than creating a new one.
  • Converting page list items in the navigation was confusing in order to edit each link.
  • Ran into the experience of menu items merging when deleting, which has been reported before and was noted as intended functionality.
  • When adding a template part into template part focus mode, a template part was not created, matching this currently open issue. In theory, this should create a template part within a template part.

Video 7

  • Level: 8
  • Used List View.
  • Used replace to switch out template part.
  • Use of group within a template part feels really odd to him. Feels like it’s only there to help control the layout but feels unnecessary in general. 
  • Struggled to drop something into a cover block that had a row block inside of it. It wasn’t clear how to add something else to the row block.
  • Finds it limiting which blocks are able to be added to the navigation block. Wants mega menu options and ways to display things based on screen size. 
  • Expressed a desire for a middle ground between solely relying on what’s defined by a theme vs getting into the nitty gritty details with Styles.

“I have trouble a lot of times with the list view and getting blocks precisely where I want them to be.”

From around 3:25 in the video

“I don’t make my own headers. Just because I found it completely frustrating and I rely on templates to make all my headers that come with the themes because I’ve found I just can’t manipulate it enough no matter how much time I spend on it. I can’t make things that look better than the pre-made templates so I only do small changes from the pre-made templates… Headers are incredibly challenging. I just don’t know how to do it.”

Video 8

  • Level: 1 or 2
  • Didn’t use List View. 
  • Icons for theme blocks feel very confusing and don’t feel similar to other software he uses. 
  • Used replace to switch template part out but, because there is a header within a header for Twenty Twenty-Two, this was a bit confusing.
  • He wanted to access different header options using the transform menu. Noted the feedback in a related issue.
  • Wanted to duplicate the header at first to have a base to start with which would have run into this problem with duplicated headers.
  • Eventually, went into the isolated template part mode where he found the slash inserter to be “very tech-y”.
  • Ran into an issue in isolated mode where the toolbar blocks the current blocks.
  • Struggled to understand that he needed to select the overall navigation block to customize it in the way he wanted as he expected to find customization options within individual navigation links.
  • When asked about saving, he expressed that he expected autosave to work/be happening.

“As a kind of a first time user of the interface, I found this very difficult. It doesn’t remind me of anything I’m used to with other applications I’m using…it’s just not easy for a novice…This was a bit of a learning curve just to get to a header…I was quite uncertain on my choices. I wasn’t sure if I was doing the right thing.”

Pattern Testing

Level listed under each video reflects a self reported level of comfort with FSE with 1 being not all familiar and 10 reflecting expertise. For any listed as N/A, the participant was not asked.

Video 1

  • Level: 6-7
  • Didn’t use List View. 
  • When asked to add a pattern with columns, just added the columns block itself.
  • She didn’t know that you could filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. by columns for patterns and remarked that “it’s not obvious they are columns” when glancing at patterns.
  • Only used patterns from the Inserter.
  • Found the layout settings to be very confusing and px dropdown to be very small/hard to see.
  • Wanted to be able to create a new post/page from within site editor rather than needing to go to the post editor.

Video 2

  • Level: 8
  • Used List View.
  • Repeatedly felt that visual cues were missing, especially when wanting to see what was a whole pattern rather than a piece of one.
  • Didn’t use drag and drop as it’s not clear where a pattern might go.
  • Added a pattern by accident into the query loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. causing it to appear throughout the loop rather than outside of it.
  • Noted that the font size labeling felt very confusing with the different numbers. There’s an effort underway to improve this experience with “t-shirt” sizing.
  • Wants consistent dimension controls.

“My main problem with the editor is that I don’t always get visual cues on where I can add blocks or patterns.”

Video 3

  • Level: 6
  • Didn’t use List View until prompted.
  • When asked to add a pattern with columns, proceeded to add a Columns block rather than adding a pattern. Later, it was clear that this was due to a lack of awareness around patterns in general.
  • Tried repeatedly to find patterns in the quick inserter by searching “patterns” leading to this new issue.
  • Participant noted she has tried to make at least 10 WordPress sites and regularly struggles with getting the layout to look correct across different screen sizes. 
  • In List view, expected to find mover controls rather than relying on drag and drop and didn’t understand why they weren’t there.
  • The browser/site randomly crashed (unclear why).
  • Noted that she wanted autosave.

Video 4

  • Level: N/A
  • Used List View and noted that she “always has it open”.
  • Once pattern was added into the site editor it was hard to reposition it where she wanted it to go.
  • Wanted a way to change hover colors for buttons.
  • Learned about patterns from Nick Diego’s SLS about patterns. Otherwise, did not know they exist and doesn’t feel anything clarifies that they are there.

“Having to go to the + sign and then browse all and that’s the only way I know how to get to patterns is super cumbersome” 

Video 5

  • Level: 5
  • Used List View. 
  • Drag and drop totally didn’t work as expected for adding a pattern. Tried to place it within a query loop and the pattern ended up below it in an unexpected way. Realized later that it was a query loop and it made sense that the pattern was placed below but it proved confusing at the time.
  • Added a query loop pattern to the template and was expecting from a user’s point of view to be able to edit the text. The experience felt broken when he wasn’t able to until he realized it was a query loop which he was familiar with. 
  • Lack of feedback in being unable to edit the query loop content was jarring. Kept wanting to edit the content itself. 
  • Felt that the block settings are very hidden for deeper customization and that it’s hard to know how to get to those options when looking at just the editor itself. 
  • Added another pattern as an example that ended up chunkily within another pattern.

“I was thinking I could drop it right above this text…when I grabbed it I saw the hand icon so I knew it was draggable. I didn’t have the clearest ever – I didn’t see like a line showing me it’ll drop here. I didn’t think it would work… it dropped below what I was expecting.” 

“I still am not totally sure if I went and looked at the page on the front end what would be there”.

Noted at the very end of the test.

Next Steps

Going forward, I’ll look to facilitate this kind of usability testing experience again, especially since this time I had to turn folks away.

#fse-usability-testing, #fse-usabilty-summary, #usability-testing

Hallway Hangout: Discussion on Full Site Editing visions and plans (30 June)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance:

@elmastudio @fabiankaegy @annezazu Lisa Synder @beckej @oglekler

Video Recording:

Topics

We mainly talked through the following different posts that help show both the complex problems at hand and potential thoughts around how to approach solutions:

Throughout the conversation, we had mini dives into various topics, including talking about comparing patterns, template parts, and reusable blocks. We also discussed how there are various layers in which to approach this work from the end user level to the deeper technical considerations. The hope throughout it all is to make these more complex and detailed explorations more understandable and engaging.

#fse-hallway-hangout, #fse-outreach-program

Field Notes from WCEU 2022 Contributor Day

Olá! We’d like to express our gratitude to everyone who stopped by the Test Team (or CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.:Test) table at this year’s WCEU Contributor Day 🙇. Your ideas, perspectives, and open discussions help foster initiatives critical to testing WordPress. Thank you to everyone who participated!

Participants at the event covered the following topics (some of which were also referred to #core-test in Slack):

Test Report Templates

  • In the proposed Test Reports guidelines, clarify how the green checkmark (✅) and red “X” (❌) emoji should be used in reports: expected vs unexpected.
  • Break out the report templates into subpages under a main “Test Report” description in the Test Handbook to improve readability.
  • Proposal to provide ticket creation templates for TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. issue reporting, similar to Gutenberg Issues (e.g for Bugs vs Enhancements).
    • @todo Investigate whether Trac supports pre-populated template options, for initial post and/or comments.

Easier Test Contributions

  • Improve/update the Test Handbook guidance for creating a local WordPress environment.
  • The desire for ephemeral test environments (no local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. needed) to test PRs and patches. Some ideas:
    • Create a Core-targeted version of gutenberg.run.
      • Would need to support both PRs and individual Trac patch attachments.
    • Utilize a service similar to that used for calypso.live.
  • Add Test Handbook guidance for applying patches from GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ or Trac, covering the various “best practice” methods.
  • Reiterate the importance of different environment flavors across the test contributor group (Docker/wp-env, VVV, Laravel Valet, Local, etc). There shouldn’t be a preference for “the best” or “one way” to run/test WordPress, since it should reflect the real-world variation across the WordPress community.
  • Assign a new week-in-test categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. to Week in Test posts, for easier filtering of “where to start” in testing (currently grouped under the more generic summary category).

End-to-End (E2E) Testing

  • Questions as to where to begin E2E testing in WordPress:
  • It was noted that it’s common for E2E tests to fail intermittently, which can confuse and hamper development. This is often attributed to unexpected delays in DOM updates.
  • Consider that E2E testing can passively validate accessibilityAccessibility Accessibility (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) (“a11yAccessibility Accessibility (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)”) as a beneficial byproduct.
  • Add E2E section to Week in Test to increase awareness of this aspect of WordPress testing.

Tuesday Meetings Time Change

  • It was suggested that Tuesday meetings for <test-chat> and <test-triage> be shifted from 17:00 to 16:00 UTC to allow broader participation from European contributors. Please share your vote or thoughts here.

Props to @boniu91 for peer review of this post.

#meeting-notes

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (1 June)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance:

@ndiego @annezazu @elmastudio and a Marcy joined us for a time.

Video Recording:

Topics

Briefly touched on two recent blog posts to be aware of:

What’s missing and what’s stopping people from switching to blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes

  • Responsiveness continues to come up with Ellen sharing how she built their own system to handle this for now, knowing that they can always switch over. She believes this is one of the main reasons people are holding back from switching to block themes.
  • We chatted briefly through intrinsic responsiveness ideas related to this and how that’ll ease much of these tensions in time.
  • Onboarding to the FSE experience was brought up, particularly around how confusing it is that the BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. label still exists since that seems to imply it’s not usable. There’s an open discussion around removing the beta label (in time) on this exact topic.
  • The question came up around “How do we get folks to use block themes if there’s a beta label?” and how difficult that can be.
  • @poena has a post on switching over to a block theme, Ellen is working on a post for a 10 step process, and there are clear areas that can be improved to ease this process from a technical point of view in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. (see “Ease switching to a block theme/between block themes” in this post).
  • People are very confused about when to switch in general though, even if folks like Ellen are building things that are ready to go for production sites.

Communicating the value of FSE

  • Nick has done some hardcore testing with folks who are new to the site editor and when watching them go into the experience and they change the typography of paragraphs but then can’t with headings! Why? We need to take a look at consistency across the tools we’re providing people. People get very frustrated and confused when one block has controls and another doesn’t. 
  • Block themes truly is a better experience for getting a design into WordPress but the confusion added is a bit sad for the project that it gets a rough reputation.
  • Right now, it feels like more of a communication issue to the end user around what they should actually do and what they can do with consistent communication. Figma does this well.
  • This has come up in DevRel for WP Engine. When you’re talking about the basics of how to do XYZ, this should be on Learn and in docs. When you’re talking about the cool, cutting edge stuff, we need more of that. “Here’s how to learn the basics of creating a block theme but here’s how to take it to the next level.” 
  • We discussed how if we can standardize block settings across all core blocks but allow agencies to turn on/off easily that’ll be huge for the user experience.

Patterns and opening up tooling

  • We spent some time chatting about issues for unifying the pattern modals and patterns as sections work since having consistency in the interfaces for patterns and in the larger editor can really help folks take advantage of what’s possible.
  • In many ways, it feels like users can rely on patterns and/or learn by doing over time as they explore more tools. As a result, exposing those tools doesn’t feel as risky as a pattern can guide the experience and, if they do want to dive in more, they can have access to the tools outright.
  • We discussed how valuable locking is when it comes to patterns as a way to curate and guide the experience more.
  • We went back and forth on the question of “How do we get people excited about what’s possible rather than worrying about folks breaking things?”

Difficulty with terminology

Naming of bock themes and the theme directory

  • We talked about how there have been different names for block themes, like “full site editing theme” or “block-based theme”. This is causing confusion and also differs from what shows up in the Theme Directory.
  • We discussed how difficult it is to find block themes in the directory since the tag you have to use is “full site editing” , which both isn’t intuitive and hard to find.
  • This led to questions around having a separate menu item for themes or improving the filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output..
  • Ellen shared how it’s unattractive to put free themes in the directory – “who clicks on FSE to filter?” Discoverability is so low – it’s not featured enough. She shared that they don’t put any effort into free themes. 
  • We all felt that the entire theme directory was due for an overhaul but were curious about what some quick solutions could be for now to make it more attractive and interesting to add block themes there.
  • Perhaps there could be a block label in the section below:
Image of the theme directory filtering showing the number of themes, a popular, latest, and feature filter label.

Limitations of the pattern directory

  • In talking about the theme directory, we discussed how neat it would be to find patterns associated with different themes, partially as a way to entice people to download that specific block theme and improve the user experience.
  • Ellen brought up how it’s not possible to add patterns to the pattern directory that use third party blocks. This sometimes prevents submissions for block themes who have specific blocks for their theme. 
  • We discussed how the pattern directory is overwhelming for users yet also limited: you can’t use named variables for color palette + can’t use third party blocks + no curation. 
  • The crux of the problem is t hat block themers are creating blocks to fill gaps with core right now which then limits what can be added to the pattern directory.
  • We discussed how there perhaps could be a filter to allow for third party blocks vs Core blocks. For those who want to venture into needing third party blocks, they could then opt in by filtering to show those.
  • @shaunandrews recently shared a post about pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party dependencies so some of that thought/design could likely be re-used there.
  • Nick shared how for the new feature in 6.0 where block themes can feature specific patterns from the directory, it’s still not granular enough. It would be nice to be ale to disable all patterns but then bring in a few from the directory to feature. There’s an issue open for this topic already!
  • We ended the call talking about how these dynamics often fragment the community  – people building premium themes or patterns rather than using the Core pathways. This then moves everything away from Core distribution channels and harms the community/branding/experience of WP.
  • Ellen described it as feeling like you’re building against something.
  • We ended the call talking about how important it is to share feedback, engage in discussions, and help influence the direction of where things go so we can get to where we need to.

#fse-hallway-hangout, #fse-outreach-experiment, #fse-outreach-program

Core Test Stats for WordPress 6.0

This post attempts to summarize testing activities for WordPress 6.0. As currently there’s no established process for tracking testing activities within GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/, the following stats are only from TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets.

Please note, this summary is not a complete account of testing activities, but rather a gathering of what can be tracked within Trac.

Stats

There were 234 Trac tickets closed in 6.0, excluding copy or docs only tickets.

Of these tickets:

Data Gathering Process

This section shares how the data was gathered for the stats.

  • Tickets with testing instructions were identified using the Trac keyword has-testing-info. This keyword is manually added during triage when step-by-step instructions (written or video / gif) are present within the ticket.
    • Disclaimer: Other tickets may have instructions, but were not flagged with the keyword.
  • Tickets with automated tests (PHPUnit, integration, and e2e tests) were identified using Trac’s has-unit-tests keyword.
  • Test Reports were gathered by manually scanning each closed 6.0 Trac ticket for the phrase Test Report and then verifying the presence of an actual test report.
    • Disclaimer: Some tickets may have a non-formal test report such as sharing a gif or screenshot to show before and after state / behavior.