annezazu 12:39 am on January 13, 2024
Tags: , , Site Editor   

Early Opportunities to Test WordPress 6.5

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 for WordPress 6.5 on February 13th, this is an early opportunity to provide feedback as features are rapidly underway. Of note, this is intentionally just a selection of what’s ready to test and doesn’t include everything mentioned in the roadmap. Expect a broader testing post, like this for 6.4, for the release once beta 1 is out in the world. 

Note: this post currently mentions setting up a test site with Gutenberg 17.5 RC1. This post will be updated once 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/ 17.5 is released on Jan 17th, 2024. 

New data views in the Site Editor

About the feature

This work kicks off aspects of the WP Admin Redesign efforts in an iterative and contained way by bringing a new experience to the template, template part, and pattern lists in the Site Editor. Right now, the following features are slated for inclusion:

  • Ability to display a table with specific fields, pagination and quick actions.
  • 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. for toggling fields and for sorting and filtering data by field.
  • UI for selecting entries and performing bulk actions.
  • Support for different layouts, like classic table, grid view (including gallery), with the option to display a side-by-side preview.
  • Support for saving and toggling between “views”, which are specific configurations of layouts, field visibility, etc.

For this early testing opportunity, not everything is yet in place. 

Prerequisites

There are a few different environments that can be used for testing. Pick one to use:

The experiment for ‘new admin views’ will also need to be switched on from the 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 experiments page (wp-admin/admin.php?page=gutenberg-experiments).

Testing instructions

Here are some suggestions for functionality to test, but you are encouraged to experiment beyond these. 

Templates

  1. Open Appearance > Editor and select Templates.
  2. From the list, select “Manage all templates”.
  3. In this view, you’ll see the new experience. 
  4. In the upper right corner under “Add New Template” select the View Options icon.
  5. Change the layout of the view by selecting “Layout” and try selecting different items.
  6. Change the “Sort By” option. 
  7. Change what fields are shown by selecting different options under “Fields”.
  8. Change how many items are displayed with the “Rows per page” option to 10 and try using the pagination.
  9. Add a filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. and reset it. Here’s a screenshot for guidance.
  10. Use the search box to search for “full width” (this is only available if you use InstaWP, otherwise create your own custom template), use the three dot menu to rename it before deleting it outright. 

Patterns

  1. Open Appearance > Editor and select Patterns.
  2. In this view, you’ll see the new experience. 
  3. In the upper right corner select the View Options icon.
  4. Change the “Sort By” option. 
  5. Change what fields are shown by selecting different options under “Fields” and enabling sync status. 
  6. Change how many items are displayed with the “Rows per page” option to 10 and try using the pagination.
  7. Add a filter to sort by synced or not synced and reset it. Here’s a screenshot for guidance.
  8. Use the search box to search for a pattern and use the three dot menu to duplicate it. 

Pages

  1. Open Appearance > Editor and select Pages.
  2. In this view, you’ll see the new experience. 
  3. Underneath “Add New Page” select the View Options icon. 
  4. Change the layout of the view by selecting “Layout”.
  5. Change the “Sort By” option. Note that there are pages in different stages of publication (draft, private, published) and two users on the site if you are using the InstaWP instance.
  6. Change what fields are shown by selecting different options under “Fields”.
  7. Change how many items are displayed with the “Rows per page” option to 10 and try using the pagination.
  8. Add a filter to sort by author and status. Here’s a screenshot for guidance. Note that there are pages in different stages of publication (draft, private, published) and two users on the site if you are using the InstaWP instance.
  9. Use the search box to search for the “About Me” page and use the three dot menu to view it. 
  10. On the left hand side under “Custom Views”, select the “+ New view” option to add a custom view.
  11. Name the view and select “Create”. From there, customize it to your liking.
  12. Select “Review 1 change” and save to ensure this view saves.
  13. Leave the Site Editor and return to ensure the view remains.

Pattern Overrides

About the feature

Building upon the power of synced patterns, pattern overrides allows 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.

Prerequisites

There are a few different environments that can be used for testing. Pick one to use:

The experiment for ‘pattern overrides’ will also need to be switched on from the Gutenberg plugin experiments page (wp-admin/admin.php?page=gutenberg-experiments).

Testing instructions

Create a synced pattern with overrides

  1. Create a new post
  2. Insert a mixture of blocks that include paragraphs 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 ‘Allow instance overrides’ option
  8. 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 that you checked ‘Allow instance overrides’ for and notice you can edit them, and 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

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

About the feature

Templates and template parts will now show revisions, alongside broader upgrades to style revisions with more detailed descriptions, pagination, and the ability to view revisions with the Style Book enabled. 

Prerequisites

There are a few different environments that can be used for testing. Pick one to use:

Testing instructions

To better test this feature, two different prebuilt options are offered, with one containing a large number of revisions already and one completely fresh. See Prerequisites above for more information and please consider testing both scenarios!

For styles:

  1. Open Appearance > Editor and select Styles.
  2. Make a few changes to Styles and save your changes in between each change. For example, add some custom colors, change block specific styling, and switch to a new style variation. 
  3. After a few changes have been saved, open up the Styles panel and select the revisions icon. 
  4. Select a prior version and notice the description of the revision. 
  5. While selecting the prior version, toggle on the Style Book and explore that view. 
  6. Roll back to a prior version. 
  7. Make more changes to Styles, saving each time, and repeat the process until you see pagination in the style revisions if you’re using the fresh install.
  8. Try going to different pages of revisions and ensure you can roll back. 

For templates and template parts:

  1. Open Appearance > Editor and select a template. 
  2. Make a few changes to the template and save changes in between each change. For example, remove blocks, change block alignments, add blocks, change the order, etc. 
  3. Open block settings and 

Font Library

About the feature

The Font Library makes it easy for anyone to install, remove, and activate fonts across your site. It’s available globally, independent of the theme activated, similar to the Media Library. Any installed font, whether installed by a user or a theme, can then be selected across the editing experience.

Prerequisites

There are a few different environments that can be used for testing. Pick one to use:

Testing actions

Pulling from this prior dedicated post on this same feature, here are some suggestions for functionality to test, but you are encouraged to experiment beyond these:

  • Upload fonts using the upload dialog and drag-and-drop.
  • Install fonts from Google Fonts using the Install Fonts tab.
  • Verify that uploaded/installed font assets are stored in your site’s /wp-content/fonts/ directory.
  • Activate/deactivate individual font variants.
  • Compare active fonts with the list on the Styles > Typography sidebar.
  • Assign custom fonts to elements (like text or headings) on the Styles > Typography sidebar.
  • Assign custom fonts to specific block types (like buttons) in Styles > Blocks.
  • Check how the fonts appear on your site’s frontend.
  • Delete an uploaded font family, and verify that the font assets are removed from /wp-content/fonts/.

Additional technical feedback opportunities

Reporting bugs and enhancements 

Please report all bugs and enhancements in the Gutenberg GitHub repository. Thanks so much for helping test what’s to come in 6.5 early and often. Please note that both bugs and enhancements to improve current functionality are greatly appreciated and welcomed. 

If anything is amiss with this post or you’re having trouble contributing, please comment below 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/..

#6-5, #gutenberg, #site-editor