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.
On 25 April 2023 at 16:00 UTC , <test-chat> started in #core-test.
There was no agenda preceding the chat.
@ironprogrammer asked @oglekler if there was an update from the last chat’s E2E discussion, and they would follow-up later.
@ironprogrammer invited/reminded the team to consider submitting topics and/or applying to the 2023 WordPress Community Summit, emphasizing that ideas and input from underrepresented community members is especially important to summit discussions.
The next scheduled meeting is on 2 May 2023 at 16:00 UTC for <test-triage> in #core-test.
Are you interested in helping write Test chat summaries like this one? Volunteer at the start of the next <test-chat> and earn some props!
Props to @costdev for peer review of this post.
This post is the twenty-second effort 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.
While the release of 6.2 brought loads of new features to the site editing experience, feature development has continued in 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/ 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, leaving us with the next lineup of cutting edge features to test and refine. This includes looping back on the new navigation section that was removed for WordPress 6.2. The aim of this call for testing is to both get feedback on what’s landed in 6.2 in the pursuit of continuous iteration and to dig into what’s being worked on for the remainder of phase 2 items including:
As always, these calls for testing will also explore current features that have been staples since the beginning of the introduction of the site editor, like the Navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. or Template Part blocks.
Framing
You run a site that captures “Daily Delights” about the power of everyday moments to create joy. You want to create a new front page of your site that’s more colorful to reflect the nature of your content. When you chose your theme, you knew it came with a few front page options thanks to patterns so you decided to check out what’s possible. Once you have a new front page option in place, you decide to make some additional changes to your template and navigation to better personalize this new experience of your site.
To use a prebuilt test site:
To set up your own test site:
If you have any issues with manual setup, just comment on the post or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” me (@annezazu) in WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
Create a new Front Page
Use the Grid layout
Create a new page (or pages) for navigation
Manage your navigation and explore your pages
What to notice:
With WordPress 6.2 released, this exploration seeks to explore the Site Editor as a design tool, asking folks to create a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme without any code directly in the editor using the current tools. The aim is to both find gaps in functionality and to get feedback on the experience of using the Site Editor in this design centric way, as we look to expand the number of block themes.
The focus of this exploration is to think with a more open minded, “what can I build today?” approach. If you’ve never built a block theme, consider this an invitation to give it a try. Tooling has come a long way and the power of what’s being built is that it allows more folks to dive into the future (and present) of WordPress. For this experience, you’ll use the Create Block Theme 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 to facilitate the creation and export process so you can keep what you create! Feel free to read these brief instructions for how to get started or follow the steps below.
In the near future, expect a more formal call for testing once more, dedicated to some of the newer functionality being worked on as part of the remaining major phase 2 items.
To use a prebuilt test site:
To set up your own test site:
Create the base of your theme
Configure your fonts
Make your changes and export
Here are some high level ideas:
Export your theme
What to notice
While you’re welcome to share feedback on any aspect of the experience, here are a few specific questions to focus your feedback.
As always, thank you for participating in this exercise. If anything is blocking you from doing so, just say so either in #fse-outreach-experiment, in the comments of this post, or over DM in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. to @annezazu (that’s me!).
This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!
Attendance:
@annezazu @isabel_brison @saxonafletcher @beckej @nomadskateboarding @bph @sjx65 @jordesign
Video Recording:
Notes:
Demo and discussion of various 6.2 items
@isabel_brison, a developer who has spent much of the last year diving deep into layout controls, took us through a look at 6.2 related layout changes including:
As part of this, she showed how you can now create layouts where the Site Icon can be next to the Site Title or a three cards can always have the same height with a Button 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. at the bottom. This led to a discussion both around how even a few additional controls has a big impact for increasing the design possibilities along with some pain points with the current system. For the latter, as it related to one of the demos, could we do something to make it easier for setting things like width automatically rather than individually for each column?
Thinking about layout from a designer perspective
@saxonafletcher, a designer who has thought deeply about these problems, shared some high level thoughts on how he aims to approach this work:
Exploring the new Grid layout type
We then dug into some of what’s coming up next with the Grid layout type:
@beckej, who works in higher ed and teaches students, commented on how simple this is!
Overview of sticky positioning
At the very end, we talked about sticky positioning for 6.2 and how it’s distinct from yet related to layout. Essentially, layout is about inner blocks whereas positioning is about how that content relates to the rest of the page. This was very nicely demo-ed with a community theme (more about the community theme initiative here) that Saxon worked on that greatly leans on sticky positioning. We ended by talking about some follow up items, including how it can only be applied to root blocks. This is a great time to give feedback as this work evolves.
Ideas for future calls for testing
After digging into sticky positioning, the work around the negative margins PR came up and we briefly chatted about perhaps getting both the negative margins PR and grid layout type PR behind experimental flags for some early testing, alongside the navigation section that was removed for 6.2.
#fse-hallway-hangout, #fse-outreach-programThis is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!
Attendance:
@annezazu @paaljoachim @bassgang @dealbuquerque Jason from Replay.io and Dig (no further info).
Video Recording:
Notes:
For broader context, this is a hallway hangout building off of the initial effort to gather volunteers to help test Replay.io in the FSE Outreach Program as a way to consider possible ways of including the tool more broadly in the project. Replay has a big OSS commitment, including free support, which allows the FSE Outreach Program to explore using it ahead of potential broader use.
Quick introductions
We started with some quick introductions to get a sense of who was on the call, how we’re connected to the WordPress project, and what drew folks to help with testing replay.io:
What is replay.io?
Replay,io is a “time travel debugger”. It’s just like a video where you can pause, fast forward, rewind but the entire browser session is recorded. Replay is free for open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. communities so we’re trying to see if it’ll make a difference in how the community reports bugs and maintainers solve them. Oliver and Jason shared some additional details including a case study from Pantheon.
Examples
We briefly went through some examples with TechCrunch as an initial overview followed by an example from @paaljoachim.
Feedback on Replay.io
At a high level, there have been various notes around the Site Editor loading slowly in the Replay browser from folks using the tool. Since the Replay browser isn’t something to aim to get widespread compatibility with, the Replay team is going to dig in to see what might be causing the problem and how we can resolve that in order for a better experience in testing. This will be a huge help since the Site Editor is an obvious thing we want to be testing regularly. @franz00 kindly provided some examples of this (replay recording 1, replay recording 2) while trying to replicate a current issue.
From there, @paaljoachim gave some 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. feedback around using replay and setting up bookmarks. After the call, he recorded the following video and passed along the following notes:
Oliver and Jason shared a link to Replay’s discord and GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repo for folks to continue to share feedback.
Test automation
We briefly covered test automation where you can write your playwright tests and debug with Replay. There’s an effort in the WordPress project to switch to Playwright so it would be neat to explore more once the Replay Playwright integration is in a better spot.
Next steps
This post is a summary of the Find Your Style call for testing for the FSE outreach program, the twentieth effort. As always, I want to highlight those who helped to bring others along with them in this latest effort:
Shout out to @arasae for being the sole first time contributor for this call for testing. Expect a badge on your WordPress profiles for your contribution! Here’s a poem from ChatGPT to commemorate:
Oh, here's a badge for you, my friend, For contributing to testing's end. In the WordPress project you did your part, Finding bugs and fixing them with all your heart. You clicked and typed with skill and glee, Making sure that WordPress works perfectly. Your efforts are what makes this site so grand, So here's a badge, take it with a smile, hold it in your hand. It may be silly, it may be fun, But the hard work you've done can't be undone. So wear this badge with pride and might, For you are a champion of the testing site!
Feedback around the various style features was positive across the board, from the smaller features like applying styles globally or exploring the Stylebook. The value add and experience is clear with limited confusion around what each feature was doing. What remained for style items centered on feature requests, like the ability to have revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. or for the randomizer to impact more color items, and usability feedback around things like the Settings icon changing.
Outside of styling related feedback, this test also focused on importing items from a classic theme to a 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. theme. The current experience of importing widgets, while functional, leaves a lot to be desired both in terms of additional optionality, like being able to import menus, and intuitiveness, particularly around how importing overwrites the current template part that was added. Much of the more critical feedback centered around this new pathway.
While not the main focus of the experience, it’s clear that the reimagined Site Editor experience with the introduction of Browse Mode is allowing folks to better navigate between pieces of one’s site and add good friction to the editing process.
For deeper context of someone going through the experience, here’s a video from @paaljoachim who has completed every single call for testing:
Separately, you can also watch a recap of group testing with Learn WordPress on WordPress TV.
First, I am in love with the new Site Editor 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.. It’s exactly how I hoped it would be — so easy to get around with fewer clicks. Creating the new footer template part and importing the widgets was easy peasy.
@itsjustdj in this comment.
Making a change to a 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. or footer or some other template part being used in all templates and then applying it globally was really helpful!
@paaljoachim in this comment.
Once I found the Style Book, I liked the range of items I could edit. If I can edit the style of the menu, I would like to edit the mobile menu. Or make edits that only apply to the mobile version of the site. The lack of edit options for the mobile view reflects a question I am often asked by users, at least twice a week, “how do I edit my menu on mobile?
@jordesign in this comment.
“Push changes to Global Styles” worked really well…I was used to just starting to edit the Template, but the Edit button keeps me from messing something up before I’m actually ready to edit. I really appreciate that Edit button!
@antigone7 in this comment.
Honestly, I found creating a menu like classic themes more user-friendly. Maybe as an alternative a (new) block named “Classic Navigation Block” or something like that could be developed, which offers the options of a classic menu creation, but additionally the properties of the navigation block (color, fonts, typography, spacing, etc.) if possible.
@hage in this comment.
The following bugs were found in the current experience, one of which has not yet been replicated but was reported a few times.
New:
Previous:
When I first opened the Site Editor, at first the Header Navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. was not the menu that I had created before changing themes. The menu that showed was the All Pages menu, even though I didn’t have an All Pages menu before changing themes. When I left the Editor and came back, then my previously created “Main” menu appeared correctly.
@antigone7 in this comment.
It appears that some styles are universal instead of individual categories, which I thought would be the case from how “Style Book” is named. For example, I would think that users would change the borders setting to individual Images only, but the editor applied the same changes to Gallery as well.
@jordesign in this comment.
Items related to Browse Mode nicely matched what’s already being designed and built as the 6.2 cycle continues. What remains below matches what’s been raised previously and touches on some of what needs to be considered for phase 3, particularly around wanting better access to revisions.
The randomizer is fun. However it produces some non-accessible colors for Primary, Secondary and Tertiary, at least over a black background.
@robglidden in this comment.
Adding a yellow as background color I noticed that the Header template part is not all the way in the top of the page. I am curious why the Header is not nudged up against the top admin/canvas tool bar. I see the same on the frontend. Header is not all the way in the top of the page. It would be helpful to have the header in the top with no space above it. To where I need to explore how to remove the margin from somewhere in the header to get the header in the top of the page.
@paaljoachim in this comment.
With all the various changes I’ve done, I couldn’t help but notice the need of “what if” and wanted to use a previous style, but because I refreshed the editor, I couldn’t use a previous setup so I really felt the need of a revision system.
@jordesign in this comment.
Simplifying the importing widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. process, confusion around the new Settings icon, and desire for clarity in returning to one’s dashboard with Browse Mode dominated the critical usability feedback. This last piece of feedback has already been addressed in time for the WordPress 6.2 release. Positive feedback balanced out the discussion when it came to using the Styling features, having one’s custom menu automatically imported, and using Browse Mode. The base experience of improved out of the box defaults, customization tools, and moving between pieces of one’s site continues to ease and is reflected in the responses.
I created a new footer template part named “My New Footer” but when I imported the widgets into it, it created an entirely new template part named “Widget area: footer” and deleted “My New Footer” (though it still existed in Template Parts).
@robglidden in this comment.
After importing the footer widget contents, it looked really messy and it wasn’t immediately clear in the list view as to how everything was ‘stacked’ or laid out. It took adding a new column block to the footer and dragging/dropping the footer groups into each column, to have it appear in a neater and more coherent way.
@jordesign in this comment.
A Noticing: There was no padding or margin added around the new Widgets Footer at all when they were first moved over from classic theme to block theme; I wonder if there is a way to match the padding or margins of this new Widget area to match the existing look and feel of the site?
@arasae in this comment.
It took me a moment to find and get used to the Block Settings icon — I kept looking for the gear. But it makes sense to use a different icon, since the gear icon is now used to differentiate from styles in those settings. I’m sure I’ll get used to it.
@itsjustdj in this comment.
It is not clear that one needs to click the W to return to the Dashboard. Cursor changes to a finger but it is not obvious where it would go. Here it would be helpful with some kind of some sort. Perhaps a tooltip over the W which says something like “Return to Dashboard” ?
@paaljoachim in this comment.
Inside “Style Books,” it’s hard to scroll through the different “Style Books” without a mouse, and it does not appear to work with the arrow keys on your keyboard.
@jordesign in this comment.
Get ready for the next big release in the WordPress world! WordPress 6.2 is set to launch on March 28, 2023, and we need your help to make sure it’s the best it can be. With exciting new features and improvements, this release promises to be a game-changer for WordPress users everywhere.
Stay up to date with the latest pre-release builds by checking the WordPress 6.2 Release Schedule for availability. For real-time updates and discussions, join the #core-test Slack channel. Engage with the testing community by participating in weekly scheduled team meetings and test scrubs.
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. After activation:
For more detailed steps, click this link for complete instructions.
At a high level, here are a few tips to keep in mind to get the most out of this Call for Testing:
Anything marked with a tool icon (🛠) is more technical, and may be best suited for those comfortable with more advanced testing steps.
With the release of WordPress 6.2, the Site Editor has been completely reimagined with the introduction of Browse Mode. This new way of interacting with the Site Editor provides a more intuitive navigation experience, making it simple to access and manage all templates and template parts. The addition of a sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., allowing for the creation of new templates, further enhances this functionality.
With this new feature, WordPress sets the foundation for future developments like content editing, extended 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 options, and menu management. (36667, 46903, 46700, 46458)
The beta label in the Site Editor has finally been removed with the release of WordPress 6.2. This means that when you access the Site Editor through Appearance > Editor, you will no longer see the “(beta)” label. This decision was reached after extensive discussions and evaluations over several release cycles, starting with WordPress 5.9. Despite the removal of this label, the Site Editor will continue to receive enhancements and bug fixes like other parts of WordPress.
Identifying template parts and reusable blocks within the Site Editor has become more intuitive. These synced blocks, which differ from other CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks, now stand out with a distinct color throughout the interface, including the List View, Block Toolbar, and Canvas. This improvement makes it easier to recognize when you’re working with these blocks, making the site creation process smoother and more efficient. (32163, 45473)
Split Block Settings into two categories: “Settings” and “Styles”. This makes it easier to find the desired settings and styles, as they are clearly separated. Additionally, it reduces the amount of scrolling needed to locate the desired item. This change makes blocks with many controls, such as the Group block and Navigation block, easier to manage and customize.
If you’re a plugin author, it’s a game-changer. It ensures that the options for your block appear where you want them to, making it easier for your users. As a consequence, the __experimentalGroup property was stabilized on the InspectorControls slots.
You can now define which InspectorControls group to render controls into via the group prop.
In addition to stabilizing the __experimentalGroup property, a new styles group was added, so styles-related controls that do not fit conceptually under the block support panels — border, color, dimensions, typography, etc. — can be included under the “Styles” tab in the block inspector:
<InspectorControls group="styles">
// Add your custom styles-related controls here.
</InspectorControls>
To accommodate the change in block settings, a new icon has been added to the block setting sidebar. This small change has a big impact, as it affects many documents, training videos, and more. To ensure everything is up-to-date, please proactively update relevant material. Further discussion about the change in the icon can be found in GitHub Issue 46851.
The new Focus Mode offers a more concentrated writing experience by hiding unnecessary elements of the editor interface. When enabled, all sidebars are closed and toolbars become less visible, allowing your content to take the spotlight. You can switch this mode on/off as desired, depending on your needs. (41740)
To see a fuller demonstration of this feature, see this distraction-free mode video on YouTube.
The Navigation block in WordPress 5.9 brought a new editing experience. Now, with the introduction of an editable view in the block settings sidebar, managing menus is even easier. This view works similarly to the List View but is specific to the current navigation being edited. Clicking the “Edit” button selects the menu item in the editor, allowing for inline editing. This option offers a balance between the prior experience and the new block editing paradigm.
Digging deeper into technical details, the Navigation block provides an additional option when locking to restrict editing of its inner blocks (links and submenus). This helps to curate the experience even more, especially if you’re taking advantage of the ability to use block template parts in classic themes. For a demonstration of the new locking features, see this locking the navigation video.
Moreover, the Navigation block has more room to grow. A location fallback for classic menus and an “open list view” button could be added to improve it further, and a new conversion panel with the Page List block to make it easier to switch to editable links. (46938, 45394, 44739, 45976, 46286, 46335, 46352)
The Position block support now includes a “Sticky” option, allowing a block to stay within the viewport and remain at the top of the page when the content is scrolled. This is beneficial when an element, like a status message or promotion, needs to be visible regardless of the page’s scroll position. The feature works in both the block editor and the front end, providing a true WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. experience.
In WordPress 6.2, the team focused solely on the root level, as this reduces the complexity of dealing with sticky positioning and avoids the UX problem of applying sticky to a non-root-level block.
Testing Instructions
Note: The logic will still display the Position controls if a value has been set, even if the block is not at the root level. This is to support backward compatibility, since the Position feature has already been released in 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/, and also allows users to turn off the Position if the block is moved to a non-root level of the document. You can learn about some follow-up tasks to this initial implementation in this issue. (46142, 47334)
Who doesn’t love Openverse? Millions of media items are now available right from your editor! WordPress 6.2 introduces this fantastic feature to simplify adding images directly from Openverse’s index of over 300 million public domain and openly licensed images.
Testing Instructions
A new design provides a split view between categories and patterns, enhancing navigation and providing larger previews for patterns. This improves the drag-and-drop experience when building top-level sections; enables quick browsing between categories; and provides the ability to save, import, and manage patterns. (44028, 41379, 44501, 46419)
Testing Instructions
A new approach to associating patterns with templates has been developed, where extenders can register patterns for specific template types to limit where they appear. For example, an Error 404 pattern should only be used with the 404 templates. (45814, 42325)
Testing Instructions
The new patterns registration 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. property templateTypes accepts an array whose values define template slugs where the pattern makes sense. For example: 404, single-post, home, page, archive, or single-product.
inc/block-patterns.php file, after the existing calls to register_block_pattern(), add the sample test pattern with the snippet below. Save the file.wp.apiFetch( { path: '/wp/v2/block-patterns/patterns' } ).then( console.log );query/template-type-test, and template_types has 404 listed.
register_block_pattern(
'query/template-type-test',
array(
'title' => __( 'Template type test', 'twentytwentyone' ),
'templateTypes' => array( '404' ),
'content' => '<!-- wp:paragraph {"align":"center","fontSize":"x-large"} -->
<p class="has-text-align-center has-x-large-font-size">404</p>
<!-- /wp:paragraph -->',
)
);
The goal of the Style Book is to make creating consistent designs simpler, help users quickly understand the effects of changes, and enable more customization to suit their preferences. For block theme authors, this is a major shift. These changes create a clearer design process that is intuitive and efficient for modification and reuse. (44420)
To enhance the editing experience, Core Team added a block preview component to the global styles panel. This component displays a preview of the selected block at the top of the sidebar panel, allowing you to see the block example and how it’s affected by the settings in real time. (42919)
This is particularly useful because global styles allow you to edit blocks that might not be present on the current page being previewed. With the block preview component, you can now easily see the changes you make to the block’s global settings and how they will appear on your website.
This feature allows you to update all blocks across the site with just one click. By clicking the “publish” button in the “Advanced” section, you’ll be able to see an option to “publish” the styles that were pushed. This new feature will simplify the process of updating styles across the site, making your workflow even more efficient. Be sure to check out the video to see how it works! (44361)
Now you can copy styles from one block and paste them onto another. Previously, the only way to do this was to duplicate the entire block, which was often inconvenient, or to manually copy each tool/setting, which was incredibly tedious for blocks with many styles. (44418)
Now you have the ability to add custom CSS to your entire site through Global Styles. This new feature provides designers with even more control over the look and feel of their website, allowing them to make precise adjustments to their design.
Gutenberg 14.9, launched on January 4, 2023, brought a highly anticipated design tool to theme authors: shadows. WordPress 6.2 Beta 1 has finally arrived, bringing support for both default and theme-specific shadow presets. The update includes 4 default shadow presets: Natural, Crisp, Sharp, and Soft. (46502)
Testing Instructions
You can add custom shadows via the settings.shadow.palette array in theme.json.
theme.json. For example, the snippet below is inspired by Tailwind CSS’s box-shadow.
"settings": {
"shadow": {
"palette": [
{
"name": "Natural",
"slug": "theme-natural",
"shadow": "5px 5px 0px -2px #FFFFFF, 5px 5px #000000"
},
{
"name": "Crisp",
"slug": "theme-crisp",
"shadow": "5px 5px #000000"
},
{
"name": "Sharp",
"slug": "theme-sharp",
"shadow": "5px 5px 0 0 #999999"
},
{
"name": "Soft",
"slug": "theme-soft",
"shadow": "5px 5px 10px 0 #999999"
}
]
}
}
If you find any issues, it’s best to share them on the WordPress.org alpha/beta forums, or if you are more technically savvy and comfortable, on Core Trac. For helpful reporting guidelines, refer to the Test Reports section of the Test Handbook.
Please share feedback as soon as you can before the release on March 28, 2023.
A big thank you to @robinwpdeveloper and @ironprogrammer for reviewing and contributing to this post, and @annezazu for feature references and visual assets.
This post is a summary of the Running Through Refinements call for testing for the FSE outreach program, the nineteenth effort. As always, I want to highlight those who helped to bring others along with them in this latest effort:
Shout out to @pauthake015 @wesleyrakshit @bgoewert @georginareeder @haeunpark @teresagobble @magicroundabout @ccwalburn @alexandretp @lanesdon @ioanamuresan @plari @jartes for being first time contributors. Expect a badge on your WordPress profiles for your contribution! What a lovely and large crew of new contributors to celebrate.
Feedback for all of the tested features was generally positive with folks able to see how what’s being worked on unites and moves forward the Site Editor experience. As always, there were also noted bugs, feature requests, and areas of refinement that mostly matched either current priorities or previously reported items, underscoring where the experience needs to move towards. Overall, three specific areas of iterations stood out outside of the positive feedback:
Folks were impressed by Browse mode and the potential for it to help orient users to the Site Editor and its capabilities by emphasizing templates from the start with friction before editing. Moving Styles to this same section has already been listed as a next step and was reflected in the feedback as folks continue to look for clear delineation between what impacts a site globally.
The Navigation 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.’s editable list view managed to strike a nice balance between the current List View experience and the prior menu management experience in Classic menus. This nice middle ground familiarity resulted in mostly excitement and ease, with continued feedback for refinement and desired functionality.
Finally, the Style Book and Previews were a hit with minor bugs to resolve. It’s clear both will make a large difference in empowering folks to customize their sites and understand the global impact of their changes.
First of all – I simply love the new concept. I love the list in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. – it feels more natural to see list there and content in the main panel; I really like the Edit button – it makes a huge difference in terms of clarity of the intent to change – and I anticipate we’ll see less mistakes. Overall I detect a ‘feel good’ factor and am excited to see these live.
@ioanamuresan in this comment.
Overall, I really enjoyed navigating through browse mode – the ability to easily view templates in the Site Editor and preview each one before going in to edit is a great experience… I also really love how much easier it is to see your navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. items in the sidebar here. Dragging and dropping menu/sub-menu/sub-sub-menu items is really easy and smooth.
@georginareeder in this comment.
I really like the split of settings in the sidebar – the navigation feels like a place where it makes sense conceptually to break them up that way… The Style Book is pretty much the greatest thing since sliced bread! It really feels like a game-changer to me – and I personally found it a way more usable to browse and edit the styles.
@jordesign in this comment.
I love that choosing Appearance > Edit now opens the editor with the sidebar so that you can see the options for Templates and Template Parts. I also like that you have to click Edit to edit the home page when you first access it. I think that makes it much clearer than immediately being thrown into the editor without a good understanding of where you are or what you are editing…I love the updates to the Navigation block and being able to add and configure menu items in the right sidebar! I didn’t have any trouble updating or creating menus with the new format…I experimented with the Replace option on the Query loop and found the patterns confusing. I couldn’t easily tell where one pattern ended and another began, and after I selected some of them, they looked different than I expected.
@ccwalburn in this comment.
I really liked the way the Navigation editing worked! It was so easy to manage. I also liked having the Stylebook available. I always have to create a page with all the blocks I want to use and style. The Stylebook makes it so much easier.
@antigone7 in this comment.
The following bugs were found in the current experience, some of which have already been fixed.
New
Previous:
Much of the feedback on Browse mode and the Navigation block matched what has already been noted or planned, underscoring the work that remains. In particular, at the beginning of the call for testing, there were repeated notes about the “Edit” button not being visible in Browse mode which was quickly iterated upon as the test continued. Finally, while the Navigation Block’s 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. improves, there are still repeated calls for deeper customization options both around mobile menus/overlays and things like hover styles in 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..
Seemed to me that naming and renaming the menu should be somewhere more intuitive than under Settings > Advanced. Maybe next to the create button, or simply by clicking on the name of the menu. Or when creating menu?
@robglidden in this comment.
I find myself wanting some more description than just “Single.” If I customized these all for myself, maybe this would be enough to remind me what each one is.
@clubkert in this comment.
I really wanted drag-and-drop handles on the left-and-right-hand panels to be able to resize them.
@magicroundabout in this comment.
Pattern selection for the Query Loop block, renaming the Navigation block, and visibility of default design tool options stood out as the most repeated feedback across each response. Outside of the critical feedback below, many folks found a much improved experience with each feature noting a much easier time creating and customizing menus, styling across one’s site with the preview and Style Book options, and quickly maneuvering through templates.
The ‘list view’ vs ‘grid view’ to show patterns for the query loop is not intuitive. It is not clear that the ‘list view’ is showing a single pattern option, with the ability to scroll sideways to view others. When first seeing the ‘list’ vs ‘grid’ tabs in Choose Pattern, I would have expected that to have ‘single’ vs ‘grid’ pattern options – Similar to how the same buttons in the Query Loop toolbar determine whether they will appear in a list or grid view. None of the pattern options show ‘Grid with Images’; aka what shows up when you click the Grid button in the Block toolbar.
@alexandretp in this comment.
I found the dragging dropping of menu items in the right sidebar a bit eventful. Had a hard time positioning where I wanted them. If I accidentally indented them an extra level, I couldn’t go back just one level – I had to move it to the main menu, then reattempt to add it as a 1st level submenu. That said, it’s waaaaaay more clear and manageable than before so I think this is a significant improvement.
@ioanamuresan in this comment.
Clicking the black + square to add a link brings up a module which has too much focus on open in new tab and Transform. It would be helpful to better integrate selecting a page or post into this modul. It really needs a redesign making it a lot easier to select what one needs.
@paaljoachim in this comment.
I miss a “learning mode” (that can be switched off and on) with extra explanations for each option (and links to docs) in context.
@juanmaguitar in this comment.
I found myself clicking (and double clicking) the menu item itself to try to edit it which did nothing (vs. clicking the pencil).
@clubkert in this comment.
I find it confusing that it says “Browse styles”, when you are actually choosing, not browsing, a style variation.
@robglidden in this comment.
It bothers me that the role of the “W” logo in the top-right seems to change. Historically the WordPress logo takes you to the Dashboard, but when editing it takes you back a step. I found this confusing… I also generally dislike the fact that so many icons are non-standard and don’t have text labels. This makes it very hard for a new person to navigate the user interface. Yet when I turned labels on the experience was WORSE with labels being chopped off and it not being clear what anything did…I like the idea of tabs rather than LOOOOoooonnngg settings screens, but I don’t like the icons. Turning text labels on in the preferences didn’t seem to have any effect on the sidebar. Again, icons-plus-labels would be a much better option here. I really disliked having additional style settings turn-on-and-offable in the sidebar behind the three-dots menu thing. And I could not find how to make the text bold (eventually found as “appearance” but this should be “weight”).
@magicroundabout in this comment.
This post is the twentieth 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.
Building off of the last call for testing, this effort includes both some new and some repeat items that have continued to be iterated upon. In particular, browse mode’s design continues to evolve with a clearer edit button and design of the currently active template. Tied to this, the new 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. for the navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. has received numerous improvements as work is underway to move the option out of experimental. Taken together, this test helps underscore just how much a single theme allows you to do and how the Site Editor tools are evolving to make quick customization increasingly intuitive.
New items to test:
Repeated from previous times:
As with last time, this post will be updated to the latest version of 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/ so the latest changes can be tested ahead of the 6.2 release cycle for a faster and more accurate feedback 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..
Framing
To ground this experience a tiny bit more, let’s pretend you’re switching over from a Classic theme to a Block theme. After switching, you will need to import the widgets settings before re-imagining the homepage of the site, including the navigation. You’ll end by exploring various ways to style the site across different templates, both by using the Style Book and by editing blocks individually before pushing those changes globally. Your aim is to make the site look as different as possible a few times over until you find a version you’re happy with. Imagine this is your way of exploring the reaches of what’s possible with the Site Editor, all while using a single theme!
To use a prebuilt test site:
To set up your own test site:
If you have any issues with manual setup, just comment on the post or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” me (@annezazu) in WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
Switch your site
Import your widgets and customize your navigation
Find your style
Switch it up (again and again)
Bonus: Use patterns as much as you’d like as you customize your site! You can do this by adding patterns directly or by using the “replace” option in blocks like the Query Loop or Template Part.