annezazu 11:30 pm on June 3, 2024  

Help test WordPress 6.6

Roll up your sleeves, it’s time to help test WordPress 6.6 ahead of the July 16th, 2024 release date. Finding a bug now will help the millions of folks who upgrade later and this testing period is a critical part of what helps ensure smooth releases for all. Please know that any help you can provide to test this next release, whether it’s 10 minutes or 10 hours, is very much appreciated.

Changelog

June 6th: Updated the section on “Mix and match typography and color palettes from all styles variations” in light of changes to the feature to make it more 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 author focused.

Testing setup

You can test the latest development version, or a specific BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process./RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. with the WordPress Beta Tester Plugin on any 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. you’d like (don’t use in production). You can also set up a local WordPress environment or create another site on your hosting environment to test. 

If you are planning to test patches, you can follow these instructions to set up a WordPress development version locally; or if you want to test just what is already in the release, use WordPress Playground or install WordPress in your local environment and use the WordPress Beta Tester Plugin. 

For more detailed steps about the Beta Tester 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, follow this link for complete instructions. With Playground, you can also easily test individual Core tickets.

General testing

These are general steps to take after updating. For more specific features, please read on:

  1. Update your theme and plugins to the latest versions.
  2. Switch to the Beta/RC/Night build you want to test.
  3. Check Site Health to see if there are already some issues that will be unrelated to the update.
  4. Check for Errors, Warnings and Notices
    • Turn on the debug log by adding settings to your wp-config.php. (Note that SCRIPT_DEBUG can change the behaviour of scripts, so it is recommended to test this constant both on and off.)
    • Run a spider against your site to process all the available pages.
    • Open the developer console in the browser.
    • Try to create a new post, add some content and save it, especially try to copy and paste content from another source, add comments, add media files of different types and do other usual actions in the admin. While doing it, pay attention to the information in the console to see if there are any issues.
      Note: Sometimes some issues are not visibly affecting any of the site functionality and sometimes it can be tricky to decipher where they are coming from. 
    • Check special functionality, go through the most important logic of your site: if you have an e-commerce store, place an order; perform a search; etc.
    • Open your site in different browsers and try the same things.
  5. Check the debug log to see if something is reported there.
    Note: Things that occur in the theme or a plugin need to be addressed to its developer. Additional information about your environment and site setting is in the Site Health information. Check information for any sensitive data before publishing it in any forum or other public space.
  6. Check Site Health to see if some issues were not present before.
    Note: depending on the message, the steps you should take can be quite different. For example, if you have a low PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. version (this issue should be present before testing the upcoming version) this can and should be changed on the hosting. So, for most of these issues, your hosting provider or a site developer will be the first person to go to.
  7. If errors appear in the log, check the paths to where these issues occurred, and contact the theme/plugin developer, or ask in the Forums (or your local native language Forum). But firstly check if this is already reported by someone else. In our case, multiple reports are not making things more important but only creating additional work for contributors who are triaging tickets. And read the sticky post first to find out how to work and communicate in the Forums.

Data Views

Data Views is the new and improved experience of navigating and viewing information in the Site Editor as part of the groundwork for phase 3. This release focuses on bringing a new side by side layout, consolidating patterns and template part management, surfacing general management views sooner across the experience for easier access, and a wide range of refinements. 

Testing instructions

  1. Open Appearance > Editor and select Pages.
  2. In this view, you’ll see the new layout called “list” that shows a side by side view. 
  3. Underneath “Add New Page” select the View Options icon. 
  4. Change the layout of the view by selecting “Layout” and explore changing other options, like sort by or what fields are displayed. 
  5. Click the back arrow to return to the overall Design section and select “Templates”.
  6. Underneath the “Add New Template” select the View Options icon. 
  7. Change the layout of the view by selecting “Layout” and explore changing other options, like sort by or what fields are displayed. 
  8. Click the chevron back arrow to return to the overall Design section and select “Patterns”.
  9. Explore creating new patterns and template parts before exploring how the two are presented in the same section. For example, view the “All template parts” and “All patterns”, try using different sorting options, and different layouts. 

You can continue testing as you see fit by creating different types of content (patterns, template parts, templates, and pages in various states) and changing how that content is then displayed in each management section (Patterns, Templates, Pages). 

Overrides in synced patterns

Building upon the power of synced patterns, overrides allow you to ensure a synced layout and style across patterns while enabling each instance of the pattern to have customized content. This provides consistency in design across different pieces of content. For instance, consider a user creating a ‘Recipe’ pattern. With the enhanced feature, the user can insert this pattern into multiple posts, ensuring that the layout and styling components, such as the overall design of the recipe card, remain consistent across instances. Meanwhile, the content, such as Ingredients and Steps, would be local to each post, allowing for individual customization. Additionally, folks would then be able to revisit and modify the design of the recipe pattern without affecting the content in existing instances.

Testing instructions

Create a synced pattern with overrides

  1. Create a new post.
  2. Insert a mixture of blocks that include paragraphs, headings, buttons, images, and optionally other blocks too.
  3. Select the blocks, and ‘Create a pattern’ from the block options menu.
  4. Give the pattern a name and make it ‘synced’.
  5. Once the pattern has been created, note that the content is locked and uneditable.
  6. Click the ‘Edit original’ button on the toolbar, this will take you into an isolated view for editing the pattern.
  7. Select a paragraph block in the pattern, and in the block settings 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. expand the Advanced section. Check the ‘Enable overrides’ option and give the override a name.
  8. Set overrides for a few blocks within the pattern, ideally including a heading, paragraph, button, and image block.  
  9. Click “Save” and then use the ‘Back’ button in the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. area of the editor to go back to the post.

Editing the instances

  1. Select the pattern and duplicate it from the block options menu. 
  2. Now click the paragraphs for which you checked ‘Enable overrides’ and notice you can edit them. The updates don’t sync across instances of the pattern; the changes are local to the pattern.
  3. Click “Save” and confirm both Posts and Patterns are checked in the saving flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
    Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
    , and confirm Save.
  4. View the post, the frontend should match the editor.

Add the pattern with overrides to another page

  1. Create a new page and add the newly created pattern with overrides to it.
  2. Make local changes to the pattern based on what blocks are able to be overridden. 
  3. Hit save when done.
  4. Click the ‘Edit original’ button on the toolbar, this will take you into an isolated view for editing the pattern.

Remove override option

  1. Select one of the blocks with overrides turned on and in the block settings sidebar expand the Advanced section.
  2. Select “Disable overrides” and confirm your choice in the warning modal (read the modal and give feedback!). 
  3. Select save and use the ‘Back’ button in the header area of the editor to go back to the page.
  4. Confirm you can no longer edit the previous override that was just disabled and that the content matches the original pattern once more.

Inserter shows all blocks

Previously, when selecting a block with the Inserter open, only the blocks that were allowed to be added to the selected block were shown often resulting in a confusing experience with an emptier than expected Inserter. With 6.6 when a block is selected, there’s now a list of blocks that can be inserted at the selected block, and a list with remaining blocks. This helps show both what’s allowed to be inserted within the selected block alongside the remaining blocks someone can still add. When you select a block outside of the allowed blocks, it’s inserted below the current block selection. 

Testing instructions

  1. Open Appearance > Editor to open the Site Editor. 
  2. Select Pages and “Add new page” to create a new page.
  3. Open the Inserter and add a List block. Notice that all blocks should still appear below the List Item block that’s allowed.
  4. Select the List Item block to add a list item.
  5. Select a different block, like a heading, and ensure it is inserted below the list. 
  6. Try this process a few times adding different blocks, like a Buttons block or Quote block. 

Unified and refreshed publish flow

The publish flows for both the post and site editor have been unified, bringing with it a new design and experience. Because publishing is such a critical part of the WordPress experience, it’s a key part to explore and find the edges of. 

Testing instructions

Create a page in the Site Editor

  1. Open Appearance > Editor to open the Site Editor. 
  2. Select Pages and “Add new page” to create a new page.
  3. Add some content and publish the page by changing the options in Block Settings under Page. 
  4. Please test further by adding a featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., changing the author, changing the date, etc. 

Create a post with the Post Editor

  1. Open the command palette with either Cmd+k on Mac or Ctrl+k on Windows and type “Add new post” before selecting the option that matches. 
  2. This will take you to a new post in the Post Editor.
  3. Repeat the process of adding some content and publishing.  
  4. Please test further by adding a featured image, changing the author, changing the date, adding categories, adding tags, setting an excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox., etc. 

You can continue testing as you see fit by going through the publish flow in each experience again, testing against different plugins, editing the template used, and exploring different post/page states (draft, pending, private, etc). 

Create color OR typography only style variations [technical] 

To build on the design possibilities of a block theme with style variations, 6.6 adds the ability to target color or typography only variations and offers them as presets, alongside style variations. These new color only and typography only presets offer narrower changes, making it easier to offer broader color and typography options out of the box without larger changes to the design. To use this new option, theme authors will need to create color or typography only variations, meaning variations that only contain changes to one or the other option. For any style variations that only contain color and typography only changes, these will now automatically appear in this separate preset flow.

Testing instructions

These testing instructions can only be followed if you are testing after the release of beta 2 as there are changes in place after the initial release in beta 1 in light of this discussion.

  1. Create a new style variation that only contains changes to color OR typography settings and add this to your block theme under the same styles folder.
  2. Head to Appearance > Editor and open Styles.
  3. If you create a typography only variation, open Typography and you should see the variation under the heading “Presets” towards the bottom. If you create a color only variation, open Colors > Palette and you should see the preset available under “Palettes”.
  4. Select your variation and ensure it updates as expected.
  5. Save changes.

Section styles and changes to CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. specificity [technical] 

6.6 introduces the ability for theme authors to define style options for sections of multiple blocks, including inner blocks, that then appear in the Inspector in the same format as a block style variation. With just a few clicks, folks using block themes that add this functionality can quickly change just a section of a page or template to predefined styles that a theme author provides, like a light or dark version of a section. 

Important note:

As part of this work, changes were made to limit the specificity of global styles CSS output to make overriding coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. styles easier and enable the extension of block style variations. This was accomplished by wrapping all the specificity leveled rules in :root. These changes keep specificity mostly the same across the board except for some of the more complex selectors for layout styles and block style variations. You can read the full breadth of the discussion here. 

Testing instructions

Please try registering a few different section styles using one of the following methods. For examples of each, please review the PR that implemented this feature. 

  • Programmatically via `wp_register_block_style()`
  • By standalone theme.jsonJSON JSON, 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. partials within a theme’s /styles directory alongside a theme’s style variations.
  • Via theme style variations defining block style variations under styles.blocks.variations.

Grid layout

Grid is a new layout variation for the Group block that allows you to display the blocks within the group as a grid, offering new flexibility. There are two options for the Grid layout:

  • “Auto” generates the grid rows and columns automatically using a minimum width for each item. 
  • “Manual” allows specifying the exact number of columns.

Within the experience, there’s also a visual resizer that matches the text color set for the blocks to ensure it’s easy to see and use.

Testing instructions

  1. Open Appearance > Editor to open the Site Editor. 
  2. Select Pages and “Add new page” to create a new page.
  3. Add a grid block. 
  4. Explore adding 3-5 blocks within the grid. For example, a set of headers or images or some combination.
  5. Use the drag handles on an individual block to change the row and column span. Try this a few times! 
  6. Select the overall grid block and open block settings.
  7. Under “Layout”, explore changing the various options between manual and auto, along with minimum column width.
  8. Return the settings to auto and change the column span of a few of the items either by using the drag handles or through the block settings under Dimensions for each individual item. 
  9. Once done, use the preview option to preview the grid layout in different screen sizes to check whether the layout remains responsive. 
  10. Continue making changes: add new blocks, change the column and row span, transform into/out of grid, etc. 

Note: The only responsive styles in place for Grid are when there are multi-column spans in auto mode which is why there are intentional steps to test this in steps 8 & 9. 

New patterns experience for Classic themes

After adding easy access to patterns with a new Patterns tab under Appearance, Classic themes are slated to have access to the pattern experience baked into the Site Editor in this release. This will provide an upgraded, modern experience of managing and creating patterns, including all of the work that’s gone into data views.

Testing instructions

Create some patterns

  1. Open Appearance > Editor to open the Site Editor. 
  2. Select Patterns and create a few patterns. As a tip to move quickly, you can always create a pattern and add in a current pattern from Inserter with a few customizations to make it your own. 
  3. Return to the admin dashboard by clicking the back chevron twice. 

Switch to a Classic theme

  1. Open Appearance > Themes.
  2. Install and activate a Classic theme. For example, Twenty Twenty-One or Twenty Twenty. 
  3. After activating, open Appearance > Patterns. You should see a more confined Patterns experience matching what you’d find in the Site Editor.
  4. Create a new pattern in this new experience and publish it. Ensure it shows up correctly. 

Access new patterns page

  1. Return to the admin dashboard by clicking the back chevron twice and create a new post under Posts > Add New. 
  2. Within this post, open the command palette with either Cmd+k on Mac or Ctrl+k on Windows and search for “Patterns”. Ensure it takes you to this new patterns experience. 
  3. Return to the post, open options and select “Manage patterns”. Ensure it takes you to this new patterns experience.
  4. Return to the post, create or insert a synced pattern and, select the three dot menu in the block toolbar and choose “Manage patterns”. Ensure it takes you to this new patterns experience.

Negative margins

A long-requested feature has finally arrived: you can now set negative margin values. As a guardrail, this option can only be added manually to prevent people from accidentally adding negative values they didn’t intend using the slider control. 

Testing instructions

Margin support is included on the following commonly used blocks: Group, Paragraph, Columns, Code, Cover, Separator, Spacer, Gallery. For a full list, please refer to this chart. 

  1. Open Page > Add New. 
  2. Open the Inserter > Patterns and add a few patterns. 
  3. Select or add blocks with margin support within those patterns. 
  4. Open block settings > open the styling section > head to Dimension settings.
  5. In the margin controls, manually enter a negative number and try making a few changes. 
  6. Publish and view on the front end to ensure it matches the editor. 
  7. Repeat this process with more blocks!

Rollback Auto-Updates

To further protect websites and increase confidence in automatic plugin updates, 6.6 includes the ability to perform rollbacks when fatal errors occur during attempted plugin auto-updates by default. This allows you to enjoy the ease of auto-updates with the safety of rollbacks if anything goes wrong. 

Testing instructions

Please follow the testing instructions outlined in this merge proposal post:

  1. Ensure you’re using trunk or WordPress nightly.
  2. Install version 0.1 of the test plugin.
  3. Activate the test plugin and enable auto-updates.

The 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/ update 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. will serve the version 0.2 version of the plugin, which will cause a PHP fatal error. To confirm a rollback is successful, data is written to the error.log at every point in the auto-update process, creating an audit trail the user can use to discern the flow and results of rolling back an auto-update. This logging is only intended for testing purposes.

Of note, any plugins or themes, other than the test plugin, should also update properly and only the active plugins will undergo the loopback testing. 

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 for site building and for writing new content?
  • Did you find that what you created matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?
  • Did it work while using just a mobile device?

Where to report feedback

If you find any issues but aren’t sure if it’s a bug or where best to report the problem, share them on the WordPress.org alpha/beta forums. If you are confident that you found a bug in WordPress Alpha/Beta/RC, report it on Core Trac for rollback auto-updates and the Gutenberg GitHub repo for every other feature. 

For helpful reporting guidelines, refer to the Test Reports section of the Test Handbook and review the Core Team guidelines for Reporting Bugs.

Please share feedback as soon as you can before the final release on July 16th, 2024.