The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
Please drop by any time in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. with questions or to help out.
This post is a summary of the seventeenth call for testing for the FSE outreach program. As always, I want to highlight those who helped to bring others along with them in this latest effort:
InstaWP for allowing the outreach program to use their tooling for free, enabling more folks to jump into this call for testing and for more creativity in what we are able to test.
Finally, thanks for the patience as this recap took a bit more time to get done, due to balancing other responsibilities with 6.1.
High-level summary
In many ways, this post could be split equally between the zoomed out view and navigation blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. as that’s where much of the focus of feedback is centered. To make it easier to see the emphasis on zoomed out view and navigation block in the feedback from folks, each item of feedback has been clearly labeled.
In general, the zoomed out view proved to be seen as a high value add with folks immediately appreciating the value when switching between style variations and only a few bugs/enhancements found. It’s clear that, in time, having this view invoked contextually when doing things like changing style variations or adding patterns will be advantageous to the site editing experience when you need a way to see a broader view.
In terms of the navigation block, feedback underscored that it remains clunky to use. With this test focused on theme switching it highlighted that, while 6.1 brings huge strides in terms of fallbacks, work remains to be done even for basic site switching experience. Due to the complexity of the navigation block, various issues surrounding using the block itself were also noted including overlap issues when managing sub-menu items, a desire to have a more dedicated way to quickly alter the structure of the menu items, and confusion around the “double click to edit” experience that prioritizes selecting a container block rather than inner blocks at first.
I feel like novice users likely don’t know the implication of what will change with their theme. They might assume that the colors/styles may change, but not necessarily structural changes (like having to re-do the menu). I wonder if there is some way to give users (maybe just those that haven’t switched themes before) some more information about this.
Adding a way to edit the menu via a drag and drop interface in a modal window or something would be nice, precise clicking and adding submenus was tricky for me, whereas the WordPress standard way of editing menus is quite easy to work with.
I noticed that when I switched from Twenty Twenty One to Twenty Twenty Two the navigation changed and lost the previous menu. That’s unexpected and not great.… When clicking on manage menus, I was actually hoping to find the old menu interface where I could easily drag and drop menu items, add classes, and enable different items still not shown in the menu (Product categories, languages, etc.). My dreamy dream wish would be to select a menu in the sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. and be shown the “classic” editing interface for that menu, right away…Menus were one of the ways I often used to wow friends and customers about how simple WordPress menus were, and even newbies would get it right away. Coming from Joomla! Everybody was pretty impressed in a positive way.The block menu system still often feels like a collection of somewhat unrelated blocks, that won’t even update links when page slugs are changed. The menu experience really feels needlessly clunky and not intuitive to me. I wonder how new users feel about it.
@piermario in this comment (merged a few different lines).
For any folks who want to watch a group go through this experience, check out the following video:
Confirmed Bugs
The following bugs were found in the current experience, some of which have already been fixed:
Style variation: Switching Styles takes a while to update on the frontend making for a poor UXUXUX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. when trying to view changes to your site.
When selecting a pattern from the footer categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., it gets added as Group. When it’s just a Group, the Replace functionality is not available. In order to use the Replace functionality, you have to first add a Footer block and then select one of the footer patterns from there. I guess this can be confusing for some people expecting to see the Replace menu item, when there is none.
It’s important to note that most folks mentioned wanting to see a different icon for the zoomed out view. In the issue introducing this feature itself, the icon was a topic of conversation but, in the long term, this isn’t truly meant to be a “standalone” tool to toggle on/off. Rather, it’s meant to be a view that is embedded intuitively throughout the experience. To get a sense of what that might look like, here are two examples where this mode would be “invoked” while taking specific actions where the view is most helpful: when the patterns tab is open in the Inserter and when switching between style variations. For this reason, an issue was not open.
Continuing to do work that improves the “out of the box” default options of the navigation block remains incredibly valuable, from better fallbacks to preventing accidental duplication of imports.
Zooming worked well to see what was there. I was able to insert new sections or patterns. I could also rearrange sections. I was not able to replace or delete any sections. (Not sure if that’s an option yet.)
When I edit the template in zoomed out mode and have selected a Group block or HeaderHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes./Footer via the List View, the blue lines surrounding the selected group are very thin and almost not visible.
When I switched, the home page title showed up (where it wasn’t there before), the menu changed, and my twitter feed was now gone (that I had added to the footer).
Much of the usability feedback came in around the zoomed out view and navigation block. For the zoomed out view, there was a desire for more functionality, from a way to control how much zoom occurred to being able to take action on each section (delete/swap/etc). Rather than opening individual issues for these items, this recap is going to rely on the current designs that include these items for consideration with comments left on the main issue. For the navigation block, the feedback heavily indicated that the current experience of controlling and rearranging menu items is still too difficult, especially when a “convert to links” step has to happen. There are numerous efforts in progress to ease this from a way to edit the navigation in isolation to an editable “list view” style mode in the block settings.
Style variations: Desire for improvements to the experience with saving and changing style variations, including considering a warning before switching since manual changes are lost when switching between variations.
Navigation block: Some folks found the “double click to edit” friction for the navigation block in a template part to be frustrating or, at times, particularly persistent causing a need to click numerous times (couldn’t replicate).
Click once to zoom a specific amount of percentage and click again to zoom out even further. So that one can choose between two zoom modes of how far out one views the page from.
If I change the styles manually (colors, etc.) then switch to a different style variation, there is no way to get back to my previous version. There is also no warning that I will be losing all of my hard work.
It would be nice if the Navigation Menus in the top right of the toolbar allowed you to edit the items or if you could open a modal window to quickly edit the structure of the menu that would be easier.
Yay! Header and Footer patterns is one of the things I’ve been trying to discover, but I could never really find where this task could be done. So yay for the world of design options this feature opens, but unfortunately not so yay for the discoverability of this feature, which I find very interesting and fun.
Hello and welcome to Week in Test, the place where contributors of any skill level can find opportunities to contribute to WordPress through testing. You can find the Test Team in #core-test.
Calls for Testing can originate from any team, from themes to mobile apps to feature plugins. The following posts highlight features and releases that need special attention:
6.1 RC1 was released on Tuesday, and is available for testing. See the 6.1 Call for Testing post for a rundown of major new features and tips for testing. Prereleases of 6.1 will be available until its official release the first week of November, so please test and provide feedback before 1 November 2022.
Have you ever gotten stuck installing a fancy new pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, and then spent two days in support forums just to find out that you needed to install another required plugin to get it working? Or are you a plugin author who would like to bundle plugins for a smoother setup experience for your users? Plugin Dependencies is here to help! See the Plugin Dependencies call for testing, and provide feedback before 1 December 2022.#feature-project
Weekly Testing Roundup 🤠
Here’s a roundup of active tickets that are ready for testing contributions.
Did you know that contributions with the Test Team are also a fantastic way to level up your WordPress knowledge and skill? Dive in to contribute, and gain coveted props 😎 for a coming release.
Reproduction Testing 🔁
Who? Any contributor. Why? It is helpful to show an issue exists for other users in order to move a ticket forward for patching.
The following new tickets are awaiting review, and need testers to attempt to reproduce the reported issue (aka “repro”), and then provide a reproduction test report with the results:
#56768: Base64-encoded images render in editor, but not frontend.
#56789: Toolbar: .screen-reader-shortcut does not have background color until focused.
Patch Testing 🩹
Who? All contributors (not just developers) who can set up a local testing environment. Why? It is necessary to apply proposed patches and test per the testing instructions in order to validate that a patch fixes the issue.
The following tickets have been reviewed and a patch provided, and need testers to apply the patch and manually test, then provide feedback through a patch test report:
#55990: Twenty Twenty: Pullquote BlockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.: Add Citation Text Color Issue.
#48244: script-loader.php: Use _n() when multiple results found.
#56388: Remove unnecessary comments from compiled block styles.
#56802: Query: Post IDs cached for search and other ‘LIKE’ queries are unreachable.
PHPUnit Tests 🛟
Who? Any QA or PHPPHPPHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. developer contributors who can (or are interested in learning how to) build automated PHPUnit tests. Why?Automated tests improve the software development feedback loopLoopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. for quality and backward compatibility.
#47164: map_deep in formatting.php does not handle null-byte.
#55290: Not all image edits are applied to all subsizes.
#56340: Resolve PHP 8.1 E_DEPRECATED in PasswordHash::gensalt_blowfish.
Profile Badge Awards 🎉
Thank you to the following contributors who have earned the Test Contributor profile badge. These users have participated in WordPress 6.1 betaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process./RCRelease CandidateA beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. release parties, as well as performed general testing over the past few weeks:
Hello and welcome to Week in Test, the place where contributors of any skill level can find opportunities to contribute to WordPress through testing. For even more talk about testing, join the Test Team over in #core-test.
Calls for Testing can originate from any team, from themes to mobile apps to feature plugins. The following posts highlight features and releases that need special attention:
You’ve heard all the “cool kids” 😎 talking about it: 6.1 Beta 1 was released on Wednesday, and is available for testing. See the 6.1 Call for Testing post for a rundown of major new features and tips for testing. Prereleases of 6.1 will be available until its official release the first week of November, so 🗓please provide feedback before 1 November 2022.
FSE Program Testing Call #17: Guiding the GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ Gallery (get involved)
Take on the roll of an intrepid website owner who makes the switch from Twenty Twenty to Twenty Twenty-Two. Discover blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. site editing by working with navigation, headerHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and footer patterns, categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. templates, and more! Includes a testing option for users without a dev environment. 🗓Please leave feedback by 6 October 2022. #fse-outreach-program
Would you like to help organize calls for testing? Help work toward a bug-free WordPress and become a testing facilitator.
Weekly Testing Roundup 🤠
Here’s a roundup of active tickets that are ready for testing contributions.
Did you know that contributions with the Test Team are also a fantastic way to level up your WordPress knowledge and skill? Dive in to contribute, and gain coveted props 😎 for a coming release.
Reproduction Testing 🔁
Who? Any contributor. Why? It is helpful to show an issue exists for other users in order to move a ticket forward for patching.
The following new tickets are awaiting review, and need testers to attempt to reproduce the reported issue (aka “repro”), and then provide a reproduction test report with the results:
#56591: Error decoding JSONJSONJSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. with TT2 theme on ddev installation.
#56600: Twenty Ten: Pullquote block text is not reflected in editor.
Patch Testing 🩹
Who? All contributors (not just developers) who can set up a local testing environment. Why? It is necessary to apply proposed patches and test per the testing instructions in order to validate that a patch fixes the issue.
The following tickets have been reviewed and a patch provided, and need testers to apply the patch and manually test, then provide feedback through a patch test report:
#56599: “All” view not selected for views of custom post typeCustom Post TypeWordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept.. More testing needed for plugins that extend the WP_Posts_List_Table class.
#48244: Expand translation options between singular and plural results (_n).
#55290: Not all image edits are applied to all subsizes.
PHPUnit Tests 🛟
Who? Any QA or PHPPHPPHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. developer contributors who can (or are interested in learning how to) build automated PHPUnit tests. Why?Automated tests improve the software development feedback loopLoopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. for quality and backward compatibility.
#21650: Replace serialize() with print_r() in stats() function in wp-includes/cache.php.
#55448: WP_Widget_Block outputs empty container if widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. has no output.
#56340: PHP 8.1 E_DEPRECATED in PasswordHash::gensalt_blowfish.
Profile Badge Awards 🎉
Congrats and thank you to the following contributors who have earned the Test Contributor profile badge:
WordCampWordCampWordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Netherlands Contributor DayContributor DayContributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/.:
Save the date! WordPress 6.1 is scheduled for release on 1 November 2022. This release is the culmination of over 360 updates and 370 bug fixes. Check out last week’s 6.1 Product Walk-Through for a visual overview of major features shipping with 6.1.
Please only test on a development siteDevelopment SiteYou 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 InstallA 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. After activation:
Navigate to Tools > BetaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. Testing.
Set the update channel to “Bleeding edge” and click Save Changes.
Set the stream option to “Beta/RCRelease CandidateA beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. only” and click Save Changes again.
Navigate to Dashboard > Updates and click the Update to latest… button.
At a high level, here are a few tips to keep in mind to get the most out of helping to test:
Test across different browsers.
Test in different languages.
Compare features on different screen sizes, including tablets and mobile.
Use just your keyboard to navigate, or use a screen reader.
Test with both blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. and classic themes.
Important Note: Anything marked with a tool icon (🛠) is more technical, and may be best suited for those comfortable with more advanced testing steps.
Key Features to Test 🔑
Twenty Twenty-Three
WordPress 6.1 introduces a new default theme, Twenty Twenty-Three (aka TT3). This theme ships with 10 unique Styles variations, the result of a month-long community design collaboration, with submissions from around the globe.
HeaderHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and Footer Patterns
This feature has been moved to a future version of WordPress.
To help make finding patterns for specific use, new categorization has been added to the pattern chooser to identify patterns by type. To test, look for the new categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. dropdown, and explore the different options available for your theme.
Quote and List Block Updates
The Quote and List blocks have been supercharged, and now support inner blocks. For instance, Quote can now contain any inner block, such as Heading, Image, List, or even another Quote. And List items are now treated as individual blocks, which makes sorting much easier than before.
Revamped Quote block with support for inner blocks.
To test these updates, create and reorder lists, and make quotes more expressive with inner block options.
Fluid Typography 🛠
The first version of fluid typography support via theme.json is shipping with WordPress 6.1, which allows theme authors to set text that adapts to the user’s viewport.
New Appearance > Template Parts menu after block-based template parts opt-in.
More Design Tools
The WordPress editor has undergone extensive usability improvements, including better consistency between editor design controls, and extending style options to a broader range of blocks. These updates allow for more fine-tuned design control over content, enhancing the editor experience.
Demo of new Gallery, Image, and Button block style options.
With 6.1 comes a new Style engine, bringing with it numerous opportunities to optimize and improve style management in themes. Explore each of the following features for information on testing this new functionality.
This feature has been moved to a future version of WordPress so that it may undergo additional testing before release.
Themes that don’t use a theme.json file can now opt-in to enable the editor’s global styles Appearance Tools. To test, add the add_theme_support( 'appearance-tools' ); feature support flag to your theme, and see the Appearance Tools documentation for supported CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. styles.
Note that adopting Appearance Tools in a classic theme can introduce some unexpected visual changes when applying new default styles (via the support flag) or user-selected styles (modified through the editor). Therefore adopters are encouraged to test thoroughly to be aware of how their individual theme is affected.
Block Theme Spacing Presets 🛠
As an alternative to providing users with full control over spacing, block themes can now define preset spacing ranges in theme.json to ensure greater consistency throughout the theme.
Example showing padding constrained by preset values.
The template selection and creation process in the editor has been extended and streamlined, offering an easier way to find, apply, and modify templates, template parts, and patterns – all without code. This has been achieved through the following updates:
To test these updates, begin by creating templates for specific categories, pages, and more. You can also add and edit templates for custom posts types and taxonomies. Get very specific and offer a different template for single categories or tags.
Featured Images in Cover Block
The Cover block now supports using the featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. to streamline users’ content editing workflows.
To test this feature, authors can add a patterns folder to their theme, and add these two sample files: new-event-announcement.php and event-recap.php (provided courtesy of #fse-outreach-program). Then try adding a new post to confirm that these custom patterns appear.
Please share feedback as soon as you can before the release on 1 November 2022.
Changelog 🪵
2022-09-20
Initial post.
2022-09-29
Updated “Appearance Tools for Any Theme” to indicate that this feature will be available in a future version of WordPress (refer to this discussion for details).
2022-10-11
Following the 6.1 RC1 release, updated “Header and Footer Patterns” to indicate availability of this enhancement in a future release (discussion for context).
With each major WordPress release, there are more people who are likely to be in the position of switching to a blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme world from a classic theme. With 6.1 approaching in November, this call for testing is rooted in exploring that experience. The form of this test is going to be both prescriptive with steps to take in order to ensure certain features are covered and, at points, open ended so you can explore and think of areas to improve.
To make it more fun, you’re going to step into the shoes as the owner of the GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ Gallery website. A simple site focused on sharing information about exhibits, current calls for submissions, and ways to stay in touch. After hearing about full site editing features for a while now, you’re deciding to take the plunge and switch from the trusty Twenty Twenty theme to Twenty Twenty-Two. Along the way, you’ll interact with the following and more:
Theme switching
As we’ve explored previously with switching between block themes, there are a lot of both quick wins and overarching decisions to be made. The same is true for switching from classic to block themes. For example, right now there’s not a clear pathway for widgets. Ultimately, the more insights around how to ease this experience and make it feel magical, the more relevant block themes become.
Improved fallbacks and menu management with the navigation block
To offer a better “out of the box” experience with the navigation block, various fallback options have been implemented so the menu you are most likely to want to use is available. This test seeks to explore that and ensure it does truly provide a better default experience. Separately, the interface for menu selection and management has been moved to a dedicated section in the block settings to make it more prominent and easier to work with. You can also pick from a set of icons to better personalize your mobile menu.
New HeaderHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and Footer Patterns
Coming to 6.1, these carefully designed block patterns represent a consolidation of recurring headers and footers, simplified in order to work well across themes.When it comes to embracing a block theme, these should help folks quickly find the basics of what they might need to make a site their own in a few clicks.
Zoomed out mode
This experimental tool allows you to focus more on site building than on editing granular blocks by both allowing you to see the entire layout a bit more and always selecting the top level block (often container blocks like Groups or Template Parts). If you use the Quick Inserter, you’re met with patterns instead of blocks to continue the emphasis on more high level actions one might take to customize.
CategoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. Templates
This test once more explores creating a category specific template in order to offer a more tailored experience of looking at specific folks. This aligns nicely with the Gutenberg Gallery where you might want to emphasize different things depending on whether someone is looking at the posts about submissions or exhibit recaps.
Design tools galore
It’s hard to miss how many design tools have been added to even more blocks. Because there are so many new options, this test doesn’t necessarily dive into the details like they have in the past. Instead, please note and explore the various additional options unlocking new possibilities as you go.
Testing Instructions
Note on InstaWP
As noted previously, the folks behind InstaWP have granted the outreach program an account that we can use for these calls for testing. This means if you want to skip setting up your own test site and instead use a temporary one, you can do so. When you set up a site with InstaWP, no email addresses will be collected which means you’ll need to save the link to access the site again. Big thank you to the InstaWP team for making it even easier for folks to participate in the future of WordPress.
Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created.
This will launch a site for you to use for up to 24 hours. Select “Access Now” to log in to the wp-admin dashboard.
Save the link to your site so you can access it again during the test.
To set up your own test site:
Have a test site using the latest version of WordPress. It’s important this is not a production/live site.
Install and activate the Twenty Twenty theme by going to Appearances > Themes.
Install and activate the latest version of Gutenberg by going to Plugins > Add New > Searching Gutenberg.
Head to Tools > Import and import this file to have access to the same posts as above.
Get familiar with your current site
View the front end of your site and click through various pages linked to from the menu.
Head to Appearance > CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. and change any settings you’d like or just review what’s there (for example, check which menu is set to each location).
After activating, view the front end of your site to get a sense of the changes.
From there, head to Appearance > Editor.
Use Styles and the zoomed out view to design your site
In the top toolbar, select the zoomed out view option (the option furthest on the right). This will place you in a zoomed out mode where you can focus more on building and creating with patterns rather than individual blocks.
While in this mode, explore the various sections of your site and feel free to reorganize as you’d like. For example, you can try using the quick inserter to add various patterns.
Once done, with the zoomed out mode still on, open the Styles sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme..
Select the option to browse styles and notice how your site changes as you switch between. Feel free to toggle on and off the zoomed out mode as you see fit for the rest of this test.
As you’d like, feel free to customize the Style options further on a more granular basis or just stick with one of the built in Style variations.
Customize your navigation
Ensure you’ve exited out of the zoomed out mode and select the navigation block, either by using List View or by clicking on it directly.
Once selected, click on “Edit” in the block toolbar and follow the steps to convert to links in the pop up.
Add two submenu items under Blog for both Submissions and Exhibits to match the original site. Note: Intentionally not sharing the various ways to do this.
Open the block settings for the navigation block and, under Display, click on the visual below to open up more options for the mobile menu icon. Select whichever one you want.
Change further aspects of the navigation block as you see fit. For example, you can change the colors under Color, spacing between navigation items under Dimensions, or various typography options.
With the block settings open, under “Menu” explore the process to create a new menu by clicking on the name of the current menu > selecting “Create new menu”.
Add some items to this new menu.
With the block settings open, switch between different menu options, including the option to import a classic menu. Select whichever menu you’d like to use.
Explore new headers or footers
Using List View, select the header or footer.
Open the three dot menu and click “Replace”.
Try searching for different options, scrolling, and selecting a new one. Repeat this as much as you’d like!
Save your changes and note how the multi-entity saving feels.
Create a category specific
Click on the W menu and select “Templates” to reach the template list.
Select “Add New” and choose “Category”.
Choose the “Category: For a specific item” option and choose “Submissions Opportunities”.
This will create a new template that you can customize to your liking. For example, perhaps you want to change the emphasis on images in the Query LoopLoopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block, add or remove different blocks, change the design, etc.
Save changes and view the Submission Opportunities category. Note: Intentionally not sharing the various ways to do this.
Customize your site further – here are some ideas:
You’ll notice the Blog page doesn’t have any content now after switching. You can either add a Query Loop block or change the Settings > Reading to set the Posts Page as the Blog page. Note: this has been filed as an enhancement issue.
Explore adding the Comments block to different templates and what might make the experience better.
Try locking parts of your site in various ways as you are happy with the design.
Use the many new design tools to change padding, margin, typography, color, border, and more.
What to notice:
Did the experience crash at any point?
Did the saving experience work properly?
What did you find particularly confusing or frustrating about the experience?
What did you especially enjoy or appreciate about the experience?
What would have made this experience easier?
Did you find that what you created matched what you saw on your site?
This post is a summary of the sixteenth call for testing for the FSE outreach program. As always, I want to highlight those who helped to bring others along with them in this latest effort:
@piermario for creating an Italian translation so members of the Italian speaking WordPress community can participate.
InstaWP for allowing the outreach program to use their tooling for free, resulting in a much lower barrier to entry to help test and more room for creativity in coming up with the test itself. The features focused on for this test would have been much harder for individuals to set up without the tooling offered.
High-level summary
Because this call for testing allowed for folks to explore different areas as much or as little as they wanted to, feedback was mainly caught up in the minutiae of larger features and experiences. Throughout each of these individual points, it’s very clear that an effort to take a step back and stabilize the following would go a long way in particular:
Better organization for block transforms so the options presented feel logical and relevant without accidental dead ends where you can’t switch back to the original blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience..
Outside of the above, Patterns and Document Settings both received very little if any critical feedback, reflecting the strength of the current experience. For any designers and developers who want to see someone walk through the experience, I want to also mention the following videos from @paaljoachim to check out as you see fit:
The transforms all worked as expected, however some of the transforms were not super intuitive at first but I think made sense after I understood what they were doing. The transform to columns on multiple clicks of it ended up creating many many columns blocks wrapped inside each other. It was not clear why columns was an option to transform to, but now I am assuming it is so that you can quickly wrap an element into a columns block.
Another time, when I was looking to transform a heading, the “preview” would sometimes be cut off. You can see this in the below video, especially the preview for transforming it to a paragraph. What’s odd is that hovering up and down over the different options, it sometimes displayed correctly and sometimes not.
It is a mystery to me when or why this happens. It seems to happen more when I drop to the end of the post, but it also happens when I drop the row between two paragraphs.
At a high level, most feature requests related to better organization for block transforms as folks ran into various dead ends and clunky steps to switch between blocks:
For the final item around having a way to revert to an original image, this stands out as particularly important to consider when one looks ahead at the various options potentially added to image alterations in the future, from duotone to object fit options.
Changing a paragraph into any blocks can easily be reverted back into a Paragraph Block, except when it is changed to a Code Block. While one can easily unwrap a quote back to a paragraph, or revert a pullquote, a preformatted, a verse, a heading, or a list back to paragraph block. The same effortlessness is gone once the paragraph is transformed to a Code Block. Here one is faced with unintuitive options to operate on the Code Block (quote, preformatted, group, columns, custom HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites.). To transform the Code Block into a paragraph, it needs to be changed into a Preformatted Block first.
I cannot remove a crop on an image, only replace it with the original from the media library. I would like to be told a new image was created. It would be nice if the image block would be smart enough to have a “revert to original” button and know which image in the media library to revert to.
As mentioned in the high level overview, both drag & drop and block transforms were key items that recurred throughout this call for testing. This was particularly true when thinking about usability since, at times, transforms felt smooth and obvious whereas at other points it led you through what one described as a “labyrinth”. Drag and drop felt similarly inconsistent with the ability to both easily move a large collection of blocks in one moment and the next being unable to add a block to an empty Columns block.
Text transforms generally worked fine, but feels a bit like a labyrinth. As there are different transforms based on what the current block is. It feels a bit random.
The transform to columns on multiple clicks of it ended up creating many many columns blocks wrapped inside each other. It was not clear why columns was an option to transform to, but now I am assuming it is so that you can quickly wrap an element into a columns block…Changing blocks to another type and eventually not being able to change back to the original type was somewhat frustrating, but not a big deal.
It is sometimes strange when you want to move a section somewhere else in the list view with the mouse. The positioning is not always cleanly possible.
One thing I noticed was the cover block gave me an option to convert it to an image block (which made sense). The other options were column block or group block. When I tried the group block, it didn’t actually transform into a group block. It created a group block on top of (or around? not sure what the right terminology) the existing cover block. This actually seemed useful. But isn’t what I would have thought by “transform.”
Moving images is done successfully both by drag & drop the blocks in the List View, and by using the move up/down chevrons in the image’s Block Toolbar. But the image movement is failed when I use the Move to option in the image’s Block Toolbar. Or perhaps my expectation isn’t inline with its designated usage.
This call for testing returns us to some of the basics of using the blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor. While it can be fun and exciting to dig into the cutting edge items, it’s just as important to ensure the baseline experience continues to be excellent. This is especially true when full site editing as a concept brings the block paradigm to more parts of the site experience. To that end, the format of this test is going to take on a more open ended, scavenger hunt style experience. As you go through it, you’ll explore the following various features:
Transform menu
Each block offers various blocks you can transform to and from in order to quickly take the same content you currently have and switch it into a new block.
Select text across blocks
This feature was launched in WordPress 6.0 and works with any Rich Text block (Paragraph, Heading, List, and Quote). How can it be improved though? What rough edges can you find?
Drag and drop
Drag and drop is a classic part of the block editor experience, whether you’re writing a post or creating a template. As WordPress evolves with new blocks and new features, it’s important these original features continue to perform and remain reliable.
Various add block options
Adding blocks comes in a few forms: the inserter, slash inserter (/), quick inserter, sibling inserter, and the “insert before/after” options built into the additional menu of each block. Ensuring each appears and functions as expected is key to being able to create what you want with blocks.
The fields for post format, slug, template, and authors are aligned and have the same width. The template displays ‘default template’ instead of none, and the Permalink link opens a popover to edit the slug, when clicked. The result is a cleaner, more organized display that should help you more readily access all the important information about your post/page at a glance.
Using patterns
Patterns are increasingly important to the creation process and this test explores the basics of adding, moving, and customizing them.
And more!
This covers the high level items but you can expect to also use duotone, dimension controls, featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. in a cover block, etc if you complete each smaller task.
Testing Instructions
Note on InstaWP
The folks behind InstaWP have granted the outreach program an account that we can use for these calls for testing. This means if you want to skip setting up your own test site and instead use a temporary one, you can do so. When you set up a site with InstaWP, no email addresses will be collected which means you’ll need to save the link to access the site again. Big thank you to the InstaWP team!
Install and activate the latest version of GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ by going to Plugins > Add New > Searching Gutenberg.
Head to Tools > Import and import this file to have access to the same posts as above. Select the “download” icon in the upper right corner to first download the file and proceed with downloading if you see a warning. Here are instructions for how to import content if you need more detailed steps.
Overview of content on the test site
Once your test site is in place, please perform the following tasks in one or more of the three posts available in whatever order you’d like! None of the posts have a featured image set and they are all intentionally set as drafts. You do not need to run through all of these and it’s intentional that the task is left open ended, where there might be multiple ways to accomplish the task at hand. While the list looks long, each task should be quick, needing typically just a few seconds of action so please run through as many as you can.
Align, move, and customize images
Place an image side by side in whatever way you see fit.
Select two images and move them to a different location in the post. Note: you might need to add an additional image first to do this.
Customize borders for an image including Color, Style, and Width.
Crop an image in the post editor.
Add a duotone filterFilterFilters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output..
Add a custom duotone filter of your choosing and then remove the filter altogether.
Transform an Image block to a Cover block and set the focus using the focal point picker.
Replace an image with a different one.
Drag and drop an image to a new part of the post.
Add an image from a URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org.
Add an image by dragging and dropping one into the Image block placeholder from your computer.
Add a link to an image.
Add alt text to an image.
Add, move, transform text blocks
Try using as many of the various inserters (slash aka /, quick inserter, and sibling) as possible.
Transform a text block to another block of your choosing. See how many transforms you can go through before getting stuck or confused.
Merge two paragraphs together.
Rearrange items in a list block.
Transform a list block to another block and transform it back to a list.
Select text across two paragraphs, cut the text, and paste it elsewhere in the post.
Transform a Text block to a Heading block and customize it by adding margins, changing the letter case, etc.
Select text between two paragraphs and see what happens if you try to change it to a Group block (row/group/stack). Here’s a screenshot.
Add a heading or list to a quote block. Try transforming those same blocks from within the quote block.
Make each paragraph a different font size. Note: this might mean adding your own custom size.
Copy and paste text from another website/post/document of your choosing into your post.
Insert and reorder patterns
Add a few patterns from the inserter in quick succession. Reorder them in whatever way you’d like after adding multiple patterns.
Remove the entirety of a pattern after adding it.
Drag and drop a pattern from the inserter in between two blocks or patterns in the post.
Adjust the document settings
Change the template that the post is using.
Copy the URL of the post as if you were going to share it with someone.
Schedule an update to the post for sometime tomorrow before changing your mind and publishing the updates now.
Add a featured image.
Add a cover block and set it to use the featured image.
What to notice:
Did the experience crash at any point?
Did the saving experience work properly?
What did you find particularly confusing or frustrating about the experience?
What did you especially enjoy or appreciate about the experience?
What would have made this experience easier?
Did you find that what you created matched what you saw on your site?
This post is a summary of the fifteenth call for testing for the FSE outreach program. As always, I want to highlight those who helped to bring others along with them in this latest effort:
@courane01 for running a group testing session and reporting feedback.
InstaWP for allowing the outreach program to use their tooling for free, resulting in a much lower barrier to entry to help test and more room for creativity in coming up with the test itself. The features focused on for this test would have been much harder for individuals to set up without the tooling offered.
As with prior calls for testing that centered on using the Query LoopLoopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., the current experience remains equal parts magical and clunky to configure exactly as one wants. When combined with the fact that when creating a new template, you’re met with an empty view, this call for testing mainly weights towards feature requests to ease the experience rather than outright bugs. Of all of what’s shared here, these are the most repeated items of feedback: unclear UX for how to get out of a locked block with headings & paragraph blocks, improve the verbiage around the Query Block settings and revise Query Block controls, edit site link should open the current template, and add fallback template content on creation.
The addition of starter patterns with locked blocks when creating a new post offered a peak at how streamlined and curated the experience can be while also revealing that more visual cues are needed to better understand what exactly is happening, particularly with locked blocks and layout controls. Most of what was discussed matches what has been previously found which underscores the impact resolving these repeated key problems will have.
For any designers and developers who want to see someone walk through the experience, I want to also mention the following videos to check out to see the call for testing in action:
To help ground the following feedback, here are some quotes about the overall experience to keep in mind:
It’s so smooth and easy. The fact that you can create template overrides for specific categories is brilliant. I can’t wait to use that on a custom theme with custom blocks. Post patterns are also great!
So cool to see how far FSE has come and all of the improvements related to templates. We’re getting closer to the power of the template hierarchy of traditional themes!
Selecting “categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.” from the “Add new” template menu was unintuitive for me. That UXUXUX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. implies to me that I could add many “category” templates, which is not true. That confused me as to whether I would be creating a “category” template for every type of category, or choosing which categories to assign the template to. When I realized I couldn’t add another “category” I figured out what was going on…I enjoyed playing around with the featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. / cover interaction and the “inner blocks use full width” feature. At the end of the test it was also cool to see the category template in use.
Maybe I am too used to classic WordPress themes with headerHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and footer pretty much always there. But it was very easy to create the template without a footer or header. Which obviously is cool that you can do that, but for whatever reason my brain was expecting header and footer to be auto included by default.
Typo in the category template creation (coming in GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 13.8).
Locked heading blocks in the provided templates were super, duper frustrating. With normal heading blocks, if I press “return” at the end of a heading I get a paragraph block. With the locked headings I got stuck in the heading blocks. This felt like a major departure from typical interactions in the block editor.
As reflected in the high level summary, most feature requests have been mentioned before with a particular focus on various refinements, like adding a “view site” link in the editor or renaming “default template” in the template panel to match what one would see in the template list. While these are listed as feature requests, the lack of each adds up quickly creating an experience that accomplishes what you want but not without repeated moments of confusion.
It sometimes feels like I am “trapped” in the site editor without an easy way to get back to the dashboard. One suggestion would be having a dropdown to select whether I want to go back to the dashboard vs. see Site/Template/Template part editor. Similarly, I sometimes wish there was a “view site” option from the site editor. Again, I feel trapped.
I would prefer to have the same experience each time. It’s confusing to suddenly see patterns when I was expecting blocks. I would like to always see blocks first with a button or such to switch to the patterns.
I found that a different role will have a slightly different saving experience. Under administrator role, after I clicked publish for a new event or a new event recap, a suggestion menu to assign a category appeared. But this didn’t happen under an author role. So, author will have to go back to post tab, if she just remembered that she hasn’t assigned an event category to the post.
It works very well, as long as you remember to select “Inherit query from template” when you add the Query Loop. (I forget sometimes.) So I had different templates for one category over all the others.
So I would prefer if it said “Template Single” instead of “Template Default Template”. Or maybe “Template Single (Default)”, though I don’t see how being shown Single is the default is really helpful at that moment.
Feedback from this experience centered heavily on the Query Loop block and template creation experiences, rather than using block locking or post patterns or the featured image in the Cover block, despite those being newer features. As with every call for testing where a new template is being created, the experience of being dropped into an empty template to build from scratch is underwhelming. Determining when and how to use various settings for controlling both layout and query options continues to be a major pain pointPain pointPain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life. This will likely be eased when better defaults are available (Query loop block automatically added with “inherit query by default” set to true) rather than needing to create more from scratch, even with patterns.
Please ensure to read the quotes below as they help give context to what’s shared below as simple issues.
Improve Image Blocks Placeholders specifically in the context of using the featured image in a cover block, when the featured image hasn’t yet been added to a post, to make it clearer what action to take.
I really liked the “Inner blocks use full width” option, but I could not figure out what the “Wide” setting did. Changing the value didn’t do anything, and both the icon and description were unclear.
When using the query loop block, it isn’t immediately obvious how to view other design options. One suggestion would be to have the grid view displayed by default and allow someone to choose the single view as an option.
I don’t mind curated blocks or locked blocks at all… I only wish that the visual editor will prepare me (or the common user as the intended user of a bespoke theme) when dealing with curated blocks…Perhaps giving the curated block a different color? Or any sign that it is not your usual kind of block?
When selecting an “Event Recap” pattern, the caption was not visible in the preview because the pattern was too long vertically, and had to scroll to confirm it.
Editing the layout of a group is a little tricky. I think getting more comfortable with the UIUIUI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. would help, but having additional feedback around what is selected and where I can move things would be helpful.
This call for testing focuses on what, on the surface, feels like a common task you might have done in the Site Editor: creating a new template and applying it to some posts. As you go through the tasks though, the way the following features align will hopefully surprise you and show you a greater layer of depth in the site editing experience.
More template options
Expanding what templates can be created from the Site Editor continues to be a high priority with a number of new options to explore. This test in particular will focus on the general CategoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. template but stay tuned for Gutenberg 13.7 (the next version) when you’ll be able to create a template for a specific category. This means you could have a different template for all your posts categorized as “WordPress” for example! Depending on when you participate in this call for testing, that means you might have access to this new option to explore too.
New template picker design
GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 13.6 offers a new, streamlined template picker design that helps both conserve space and more naturally align with other post details:
Using a featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. in a Cover blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.
Helpful Hint: As you go through this test, you might find the List View helpful while navigating between content.
Note on InstaWP
The folks behind InstaWP have granted the outreach program an account that we can use for these calls for testing. This means if you want to skip setting up your own test site and instead use a temporary one, you can do so. When you set up a site with InstaWP, no email addresses will be collected which means you’ll need to save the link to access the site again. Big thank you to the InstaWP team!
This will launch a site for you to use for up to 24 hours. Select “Access Now” to log in to the wp-admin dashboard.
Save the link to your site so you can access it again during the test.
Navigate to Appearance > Editor (betaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.). This will automatically open the site editor to the template powering your homepage.
To set up your own test site:
Have a test site using the latest version of WordPress. It’s important this is not a production/live site.
Install and activate the Gutenberg pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 13.6.
From there, navigate to Appearance > Editor (beta). This will automatically open the site editor to the template powering your homepage.
Create a category template
Once there, open the W menu > Templates. This will open up the template list. If you have a set site icon, you will see that instead of the big W.
Choose “Add New” > Select “Category”. This will open up a new blank template.
As you’d like, add any HeaderHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. or Footer template parts. You can do this by searching directly for “Header” or “Footer” or by adding the template part block and selecting the one you’d like.
Add a Query LoopLoopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block and select whichever design option you’d like.
While selecting the Query Loop block, open the block settings sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. and ensure the option “Inherit query from template” has been selected. This will ensure that the right posts appear.
Customize the template further as you see fit keeping in mind that this template will be used when viewing a specific category of posts. When done, hit save to publish the new template.
Create two new posts to explore patterns
Open the W menu (if you have a set site icon, you will see that instead) and select “Dashboard” to return to your wp-admin dashboard.
Under Posts > Add New to create a new post.
Select the “New Event Announcement” pattern and fill in details as you’d like. For inspiration, in your post lists, there’s an example post titled “WordCampWordCampWordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Museum” using this pattern. Note that a few blocks are locked! Explore what this experience is like (lock more blocks, unlock current ones, etc).
Set a featured image and notice how it also appears in the Cover block of the pattern. Feel free to customize this further.
Before publishing, open the post settings, assign the category “Events”, and under “Template” feel free to select a different template with the new pop over interface.
Return to the dashboard and create another new post.
Select the “Event Recap” pattern and fill in details as you’d like once more. For inspiration, in your post lists, there’s an example post titled “WordCamp Museum Recap” using this pattern. Note that a few blocks are locked! Explore what this experience is like.
Under the “Attendees” heading, select the Group block that contains the various names. Open the sidebar settings and, under “Layout”, explore the “Inner blocks use full width” option and customize to your liking (change colors, font size, dimensions, etc).
Before publishing, open the post settings, assign the category “Events”, and under “Template” feel free to select a different template with the new pop over interface.
View your category template
Once done, view the “Event” category to see your template and posts on full display. You can find the category template by going to yoursiteurl.com/category/events/
What to notice:
Remember to share a screenshot of what you created if you’re up for it!
Did the experience crash at any point?
Did the saving experience work properly?
What did you find particularly confusing or frustrating about the experience?
What did you especially enjoy or appreciate about the experience?
What would have made this experience easier?
Did you find that what you created matched what you saw on your site?
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.
Help Test WordPress 6.1 (
You must be logged in to post a comment.