annezazu 5:02 pm on May 9, 2024
Tags: 6.6,   

Early opportunities to Test WordPress 6.6

Ahead of 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. 1, let’s get testing for 6.6! What follows below are items pulled from the 6.6 roadmap that are ready for feedback and to be explored. The steps below are meant to kick off exploring and testing rather than to be overly prescriptive so please test further. Expect a more comprehensive post to come when we reach the beta period and more features are ready. To learn more about each feature, please refer to the 6.6 roadmap as this post is dedicated to testing items rather than explaining them in full. 

Testing setup

For testing each of these items, you can either use this Playground link to get started quickly or  set up your own test site with 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/ and the noted experiments below enabled.

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

Zoom out view

A few different initiatives are coming together to allow one to focus on building with patterns rather than granular block editing, including advancing contentOnly editing and zoomed out view. Taken together, this work aims to offer a first step towards a new way to interact with and build with patterns. What follows below are ways to test and invoke this new zoomed out view. 

Testing instructions

Explore zoomed out with Style variations

  1. Open Appearance > Editor to open the Site Editor.
  2. Select the canvas to begin editing the blog home template.
  3. Open Styles and select “Browse styles” to open up the various style variation options. This will cause the zoom out view to automatically appear. 
  4. Scroll through different style options and explore what it’s like to enter and leave the zoomed out view (turn on/off the Style book, style blocks and return to the variations, etc). 

Build with patterns

  1. Click the chevron back arrow to return to the overall Design section. 
  2. Select Pages and “Add new page” to create a new page.
  3. Give the page a title and select “Create draft”.
  4. Close out of the pattern selection modal.
  5. Open the Inserter and navigate to the Patterns tab. 
  6. Go through different categories of Patterns and notice that upon viewing a specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., the canvas is zoomed out for a broader view.
  7. Add a few patterns to the page. Remember that you can drag and drop a pattern or click to add. 
  8. Click the chevron back arrow to return to the Manage pages section and edit a current page with content (you may need to create this). 
  9. Open the Inserter and navigate to the Patterns tab to explore adding a pattern to current content (are you able to place it where you want?). 

Unified and refreshed publish 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

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

Mix and match typography and color palettes from all styles variations 

Style variations allow you to change the look and feel of your site, all while using the same theme. To build on the design possibilities of a block theme with style variations, 6.6 aims to add the ability to mix and match the color and typography styles of each individual style variation. 

Testing instructions

  1. Open Appearance > Editor to open the Site Editor. 
  2. Select Styles and, upon scrolling down, notice there are now Color and Typography sections split out separately from the overall style variations.
  3. Mix and match different style options. For example, pick a style variation and then below change the typography used or select your own color and typography combination.
  4. Select “Save” below to save changes.
  5. From there, click on the canvas to edit the template directly.
  6. Open the Style icon in the top right corner (if it’s not open). 
  7. Select “Blocks” and make a few changes to individual blocks globally, like Buttons or Image blocks.
  8. From there, use the chevron back arrow to return to the main styling view and select Typography. 
  9. Notice how there’s now a section called “Presets” where you can select between different typography options. Make a new selection.
  10. From there, use the chevron back arrow to return to the main styling view and select Colors. 
  11. Notice how there’s now a section called “Presets” where you can select between different color options. Make a new selection.

You can continue testing as you see fit by making additional style changes, like changing the color palette of a color preset, or trying to roll back between different 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.. 

Grid layout

If you are using your own testing setup, you will need to enable the Grid Interactivity experiment by going to Gutenberg > Experiments. 

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.

This unlocks new layout possibilities that are prime for testing. 

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! If you are using your own test site and don’t see this option, please make sure you have enabled the Grid Interactivity experiment by going to Gutenberg > Experiments. 
  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 autoupdates

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

There are no known issues directly related to Rollback Auto-Update that don’t currently exist in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. I (@afragen) have been testing using the test plugin. The 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 is on a test site, active, and set to auto-update. I have been running like this since the beginning of the year using the PR and on other sites for several years using the feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins..

  1. Install the PR into WP 6.5.x or trunk.
  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 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. 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.

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

As much as possible, please report issues directly in the Gutenberg GitHub repository for every feature except the rollback autoupdates which needs issues opened in Trac. In both cases, please check first to see if an issue is already open. If you are unsure of whether to report or are blocked for any reason, just leave a comment on this post and I’ll follow up to help ensure feedback gets to the right place. 

Leave feedback by June 4th, 2024

This lines up with the launch of beta 1, when a new testing post will be available with more features to explore.

#6-6, #gutenberg