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.
This post is the fourteenth call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there.
This call for testing focuses on taking a few blocks for a practical spin to create a fun, interactive recipe focused site that has a customized commenting experience to rally your recipe reviewers.
New Quote 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.
For your favorite recipe reviewers who leave behind their own tweaks to your recipes, you’ll explore adding in quotes from them using the new quote block. Currently, this is still in the experimental stage so get excited to report some bugs. Specifically, this new quote block supports using nested blocks, meaning you can add headings, lists, and more within a quote.
New List Block
Get ready to get detailed – your recipes require lots of ingredients with alternatives in case folks don’t have them. We’ll rely on the new list block to accomplish this since it includes a different 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. to explore.
Comments 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. blocks
Pulling from this specific call for testing, there are a ton of blocks for you to explore and build your desired commenting experience, with more to come as more functionality is supported in each block:
While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment:
Setup Instructions:
Testing Instructions:
Helpful Hint: As you go through this test, you might find the List View helpful while navigating between content.
Add a new recipe post
Create a custom template for recipes
Customize commenting functionality
Write your recipe with quote and list blocks
Make yourself some pasta and pat yourself on the back. Thanks for testing and remember to leave a comment below about your experience!
What to notice:
Remember to share a screenshot of what you created if you’re up for it!
You are always welcome to join a social learning space to go through this call for testing on May 2nd. All are welcome to join and we hope to see you there!
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 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. 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.
@piermario in this comment.
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.
@greenshady in this WP Tavern post.
Outside of these quotes, a few items proved to be repeatedly mentioned by folks who gave feedback on this test:
To provide a visual of what this test accomplished, here’s what @greenshady created in his write up for this call for testing:
Confirmed bugs
Listed below are confirmed bugs that break expected functionality or the experience of different features.
Previously reported
New Issues
Feature Requests
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.
New Issues
Previously Reported:
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.
@paaljoachim in this comment.
The Post ExcerptExcerpt An 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 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. doesn’t have an option to adjust the excerpt length. (The Latest Posts block does have this option.)
@piermario in this comment.
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 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. 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.
@greenshady in this WP Tavern post.
General Usability Feedback
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 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. 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—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? 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.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. 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.
@greenshady in this WP Tavern post
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.
@piermario in this comment.
I find it difficult in viewing the author template on the frontend and had to use your advice: yoursiteurl.com/author/[username].
@paaljoachim in this comment.
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.
@hage in this comment.
It’s coming – WordPress 6.0 is scheduled for release on 24 May 2022. And to make it there we’re calling all testers 📣 to kick the tires and help ensure its 400+ updates and 500 bug fixes handle like a dream.
For a list of when each pre-release build will be available, check out the WordPress 6.0 Release Schedule. And drop on by the #core-test Slack channel for a quick Howdy, where we’ll be running scheduled team meetings, as well as impromptu test scrubs throughout the release cycle.
Please only test on a development siteDevelopment Site You can keep a copy of your live site in a separate environment. Maintaining a development site is a good practice that can let you make any changes and test them without affecting the live/production environment. and not on a production/live site. You can follow these instructions to set up a 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., or use a tool like this to set up a development site.
Once your development site is set up, please install and activate the WordPress Beta Tester Plugin and configure it to:
If you need more detailed steps, here are the full instructions.
At a high level, there are a few tips to keep in mind to get the most out of helping to test:
Important Note: Anything marked as
[Technical]is best for those comfortable with more advanced testing steps.
The following list identifies some important new and modified features in WordPress 6.0, and should be the focus of testing efforts from here through release day. Items identified as [Major] constitute functionality that requires the most review.
[Major]Building on WordPress 5.9’s Styles interface, the editor now supports multiple style variations, enabling site owners to easily switch between a theme’s default or custom designed styles. Styles can be applied to the base site, or to any block. Variations can also be pre-configured by theme authors in theme.json.
With WordPress 6.0 Beta 3 or newer and the Twenty Twenty-Two (TT2) theme active, you’ll have access to preview and test the Styles variations feature.
For detailed steps around how to test Styles, please see this previous call for testing and the official Styles documentation.
For any block theme authors, please see this post to learn more about how to adopt and test this feature.
[Major]We’ve received a lot of constructive community feedback regarding template types that were introduced in 5.9, and this area continues to evolve, introducing author, date, categories, tag, and taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. types. You can find each of these template options in the Site Editor when viewing the overall Templates List:
For detailed testing steps on creating custom templates, please see this previous call for testing.
[Major]Now site editors can add existing or create new template parts and patterns with the block inserter (using the + icon or typing / at the start of the block):
For information on testing this feature, please see this previous call for testing.
Numerous general improvements that can streamline content creation debut in 6.0. Here are some new features to help test directly:
[[ inside a text block.Try using each of these options in a new post or page and report back any rough points you encounter.
It’s now easier to peek into several block styles with a redesigned interface and a snappy hover preview. To test this feature, add your favorite block that comes with several block styles (Quote, Image, Table, etc) open the sidebar, and explore the style options.
List View has a few enhancements to explore and give feedback on. For testing, it helps to try out List View in a template or post/page that has different types of blocks and lots of them. Please test the following new options:
To learn more about this feature, see the official List View documentation.
[Major]WordPress 6.0 introduces another top item on many a user’s wish list: setting featured images to Cover blocks. Try this feature in conjunction with a template for your posts or page since this means you can now have your Post Title block layered on top of your featured images.
More information on testing featured image cover blocks can be found at PR 39658.
[Major]The comments 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., once relegated to the world of PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. footer includes, is now a full-fledged block. Add and style comments visually!
For more information on testing the Comments Query Loop block, see this current call for testing.
[Major]Previously only available to theme developers, the power of the block locking APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. is now available to site editors in 6.0. Lock down important blocks to prevent accidental changes. The API now also supports reusable blocks. You can find the locking options in the ellipsis menu of each block:
Testing details can be found as part of the Authoring an Author Template call for testing.
Progress continues with styling and usability around the Navigation block, which was first introduced in 5.9. Test out the most recent interface improvements and styling options.
More detailed testing information for the latest iteration of the Navigation block can be found as part of the previous Hyping Headers call for testing.
More options and finer-grained layout control can be found with the following list of visual updates. Please explore creating what you can as part of testing and remember that this is just a glimpse as many design tools are already currently available:
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) for quick creation.
[Technical][Major]The new Webfonts API promises to streamline the registration of locally hosted web fonts, providing theme developers more flexibility and consistency across sites.
As of WordPress 6.0 Beta 3, theme authors are now able to implement webfonts via theme.json, and the official Webfonts API will be available to extenders in a coming version of WordPress.
For implementation and testing guidance on the Webfonts API, please see PR 37140.
[Major]Explore the new additions for block theme exports as this feature continues to evolve toward codeless visual block theme building:
Try making changes and exporting in order to ensure those changes are captured correctly.
[Major]As mentioned above, the Styles interface now supports multiple variations, which can be preset in a theme. Information on adopting and testing this feature can be found at this previous #core post. Keep in mind that to test this you need to use a block theme that supports this feature and/or add in your own style variation to the current block theme you are using.
If you find any issues, it’s best to share them on the alpha/beta forums, or on Trac if you are more technically savvy and comfortable. Please share feedback as soon as you can before the release on 24 May 2022.
A big thank you to @annezazu and @juanmaguitar for reviewing and contributing to this post.
#6-0, #fse-outreach-program, #full-site-editing
theme.json.The previously monolithic “Post Comments” 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. has been updated to work in a more flexible and modular way by using child blocks. The new version is now called the “Comments 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, and it comes with new blocks that can be used as child blocks within it. These new Comments blocks allow users to define and change the layout of the post comments directly from the 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/ editor.
This post is a call for users to test the new blocks that can be used to build a comments section in a page or post (following the block paradigm). The results of this testing will allow the contributors behind the development of these blocks to decide whether or not they are ready to be included in the next release of WordPress (v6.0)
Please report your findings either as issues on GithubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ in the Gutenberg repository ,or in the comments below. If you have triage access, labelling any issue with “[Block] Comments Query Loop” would be very helpful. Alternatively, you can start the title of your issue with “Comments Blocks: ” to help those triaging the issues to label them appropriately.
The “Post Comments” block is the block that currently manages a comments section on a post or page,
For example, the Twenty-Twenty-Two theme uses this block in its “Single Post” template
But with this “Post Comments” block no option exists to change the styles and the layout of the comments from within the Editor. This block uses the comments_template() function internally to generate the 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. for that section and the styles are defined via CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. files.
So, in summary, if you want to customize your comments section (change styles and layout) when using this “Post Comments” block you have to do a bit of coding
With the new Comments Query Loop block, you now have available a set of child blocks that enable you to customize the layout and styles of this section directly from within the Editor.
The new Comments Blocks that are available from Gutenberg v13.0 are:
The addition of these blocks to Gutenberg is just the beginning. With these blocks, in the future you will be able to create and share your own patterns for a comments section.
While there’s more information below to ensure you get everything set up properly, here are the key things to consider with regard to your testing environment:
gutenberg.zip available from the release page). Set proper 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 and themes
Customize the “Single Post” template to use the new “Comments Query Loop” block
Customize the Comments blocks styles and layouts and check the result of your changes in the frontend
In order to ensure you have comments to play with you can add demo content to your WordPress
Insert the “Post Comments Form” block to check the behavior of the Comment Reply Link and the ability to insert new comments
The “Post Comments Form” cannot itself be customised via the Block Editor as yet. There’s an issue open to work on this but for the purpose of this testing we can just use it as it is and focus the testing on the display of the comments
So, what type of things can you test with these blocks?
This Call for Testing is mainly to check that these blocks work as expected, that is, the changes in the styles and layout work as expected without bugs.
But just to provide some guidance, here are some aspects we specifically would like to have some feedback about:
Try to replicate a specific design on your comments section and check that you’re able to implement that design using just the Block Editor. For example you could try to apply a Duotone 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. to the Avatar, or perhaps a two column layout with the avatar on the left and rest of the content on the right – let your imagination run wild!
Check that the comments section is fully accessible in both the Editor and the Frontend and report any issues you find in this regard.
Go to Settings > Discussion and check that the different options are fully compatible with the new Comments blocks (i.e. that they work as expected according to the options that have been enabled/disabled).
Test that the pagination links work as expected. To test this you’ll need enough comments for the comments to actually paginate. Comment pagination also needs to be enabled in the WordPress admin under Settings -> Discussion -> Break comments into pages
Thank you for helping to test these new Comments Blocks! With the adoption of Full Site Editing, bringing the power and flexibility of blocks to more parts of the page is really helpful in enabling users to customise their layouts and take full control of their sites.
Thanks to @mburridge @cbravobernal @santosguillamot for reviewing and helping shape this post
You must be logged in to post a comment.