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

Announcement: Earn Your Test Team Badges!

We are delighted to announce the publication of a new handbook page detailing the process for acquiring Test Team Profile Badges. The Test Team Badge serves as a recognition of your invaluable contributions to the WordPress testing team. Whether you’re an experienced tester or just beginning your journey with WordPress, these badges signify your commitment and expertise within the Test Team community.

You can find the new page added to the handbook section of Make WordPress Test site.

Test Contributor Badge

To earn the Test Contributor Badge, you must have completed one or more of the following tasks:

  • Submitted test reports for at least 1 ticket, comprising of testing instructionsissue reproduction, and/or patch testing. Acceptable reports should be submitted to TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. or 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/, and can apply to any WordPress project area included in the Test Team duty of care.
  • Submitted unit or end-to-end tests that have been merged.
  • Contributed to a Test handbook PR that has been merged.
  • Participated in a Contributor Day as a Test table lead, providing technical support, or assisting with onboarding.
  • Suggested a thoughtful idea aimed at improving testing processes in any way, which gets implemented.

Test Team Badge

If you have served as a Test Team RepTeam Rep A Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts. or Test Lead in any major releaseMajor Release A set of releases or versions having the same major version number may be collectively referred to as “X.Y” -- for example version 5.2.x to refer to versions 5.2, 5.2.1, and all other versions in the 5.2. (five dot two dot) branch of that software. Major Releases often are the introduction of new major features and functionality. of WordPress, or have consistently made substantial contributions to the Test Team, you are eligible for the Test Team badge.

To request your badge, please follow the details available here.

Thank you for your dedication and commitment to making WordPress better for everyone. Your contributions are invaluable, and we look forward to celebrating your achievements with the Test Team Profile Badges!

Understanding and Testing Font Library Feature with block editor theme

Font Library in WordPress 6.5 allows users to opt-in to a collection listing for Google Fonts. To comply with GDPR, installing a Google Font uploads the file to the site. When a Font Collection is registered, it will appear in the Font Library 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. in the editor. From here, users can install and activate fonts from the collection.

Before we start testing, we need to first prepare the test environment.

Test Setup

Local Environment

If you have a local development environment running WordPress 6.5 to get started.

Another option is to test with wp-now (requires Node.js), which you can launch from a command line. After following the wp-now setup guide, you will be able to:

  • In your terminal run: npx @wp-now/wp-now start
  • Navigate to Plugins > Add New 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 and install and activate 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/.

WordPress Playground

To test only using your browser (no installation required), try out Playground. These links open WordPress directly in your browser and automatically install Gutenberg so that you can start testing right away.

(Playground limitation: Due to browser network security policies, you will be unable to test installation of Google fonts. However, you can test uploaded fonts.)

Things to Test

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 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..
  • Assign custom fonts to elements (like text or headings) on the Styles > Typography sidebar.
  • Assign custom fonts to specific 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. 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/

So these are the possible areas which we should consider testing. Later part of this post explains some of them with details along with step by step instructions.

Let’s check on how we can achieve this.

When you go to the Dashboard -> themes -> editor -> Choose the component (Navigation, Templates, Patterns, Style etc)-> site icon


Here, click on the style icon, and it will open up an option for typography. This shows us the fonts.


Now, once you click on this icon, you will get a font manager option here. And with the help of it one can install, upload, activate/deactivate, delete the fonts.


In the font manager you can see what fonts you have and look at the variants from the Library tab.


Here, on the Upload tab you can upload fonts if you have already uploaded some, and it tells you the formats that are acceptable. 


And on the Install Fonts tab you can install Google Fonts.


These are the main areas of the Font Library. Now, let’s go into the details on how we can test this from various aspects. 

1. Font Collections: Editor View/Admin 

Test Scenario: Verify that Font Collections are correctly displayed in the Font Library UI and can be installed and activated by the user.

Steps to Test:

  1. Log in to the site dashboard as an administrator.
  2. Navigate to a post or page editor. 
  3. Locate the Font Library UI section.
  4. Click on the Font Manager Icon.
  5. Try installing and activating fonts from the available Font Collection.
  6. Ensure that the font appears in Typography after the installation, and the user should be able to use it; the changes should be reflected based on selected fonts in the Editor and on the frontend.
  7. Ensure that search and categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. filters are working properly.

2. Adding and Removing Font Collections Programmatically

Test Scenario: Ensure that Font Collections can be added and removed programmatically using the provided functions.

Steps to Test:

  1.  Try avoiding the theme’s function.php file. Instead, create a custom plugin with a given code snippet.
  2.   Use wp_register_font_collection() to add a new Font Collection.
  3.   Verify that the newly added collection appears in the Font Library UI.
  4.   Use wp_unregister_font_collection() to remove a Font Collection.
  5.   Confirm that the removed collection is no longer available in the Font Library UI and is gone from the fonts folder (by default, it is /wp-content/fonts/).

We can add a list of font families with their font faces in either 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. or 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. format as part of the Font Collection array.

The JSON format for the font_families field can be a local path or a remote URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org that points to the JSON file. Please walk through the code shared below when using PHP to add Font Collection.

$font_families = [
array(
'font_family_settings' => (
array (
'fontFamily' => 'Open Sans, sans-serif',
'slug' => 'open-sans',
'name' => 'Open Sans',
'fontFace' => array (
array (
'fontFamily' => 'Open Sans',
'fontStyle' => 'normal',
'fontWeight' => '300',
'src' => 'https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4iY1M2xLER.woff2',
),
array (
'fontFamily' => 'Open Sans',
'fontStyle' => 'italic',
'fontWeight' => '400',
'src' => 'https://fonts.gstatic.com/s/opensans/v40/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVIUwaERZjA.woff2'
),
),
)
),
'categories' => [ 'sans-serif' ],
),
array(
'font_family_settings' => (
array (
'fontFamily' => 'Monoton, system-ui',
'slug' => 'monoton',
'name' => 'Monoton',
'fontFace' => array (
array (
'fontFamily' => 'Monoton',
'fontStyle' => 'normal',
'fontWeight' => '400',
'src' => 'https://fonts.gstatic.com/s/monoton/v19/5h1aiZUrOngCibe4fkPBQ2S7FU8.woff2',
'preview' => 'https://s.w.org/images/fonts/17.7/previews/monoton/monoton-400-normal.svg'
),
),
)
),
'categories' => [ 'display' ],
),
array(
'font_family_settings' => (
array (
'fontFamily' => 'Arial, Helvetica, Tahoma, Geneva, sans-serif',
'slug' => 'arial',
'name' => 'Arial',
)
),
'categories' => [ 'sans-serif' ],
),
];

$categories = [
array(
'name' => _x( 'Display', 'Font category name' ),
'slug' => 'display',
),
array(
'name' => _x( 'Sans Serif', 'Font category name' ),
'slug' => 'sans-serif',
),
];

$config = array (
'name' => _x( 'My font collection', 'Font collection name' ),
'description' => _x( 'A collection of my favorite fonts.', 'Font collection description' ),
'font_families' => $font_families,
'categories' => $categories,
);

wp_register_font_collection ( 'my-font-collection', $config );

To remove the font collection, use the code shared below.

add_action( 'init', function() {
wp_unregister_font_collection( 'default-font-collection' );
} );

3. Installing and Activating Fonts

Test Scenario: Validate the process of installing, activating, and deactivating fonts within the Font Library.

Steps to Test:

  1. Install a font from a Font Collection.
  2. Verify that the font settings are saved.
  3. Activate the installed font and check if it reflects in Global Styles.
  4. Switch to a new theme and ensure installed fonts can be reactivated.
  5.  Deactivate a font and confirm its removal from Global Styles.

4. Customizing Fonts Upload Directory location

Test Scenario: Test the customization of the fonts upload directory and ensure proper functionality.

Steps to Test:

  1. Modify the fonts upload directory using the font_dir 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..
  2. Check if fonts are uploaded to the specified directory.
  3. Verify that wp_get_font_dir() returns the customized directory path.
  4. Ensure that the chosen directory has correct permissions for file operations.

For example, wp-content/uploads directory, the fonts upload directory will not adhere to wp_is_file_mod_allowed / DISALLOW_FILE_MODS to prevent font uploads. Alternatively, if we have no clarity on permissions, we can also create a new folder with the current set of permissions.

The example below changes the fonts directory to the WordPress “Uploads” directory (by default, this is /wp-content/uploads/)

Here is the code sample that helps in customizing the fonts. 

function alter_wp_fonts_dir( $defaults ) {
$wp_upload_dir = wp_get_upload_dir();
$uploads_basedir = $wp_upload_dir['basedir'];
$uploads_baseurl = $wp_upload_dir['baseurl'];

$fonts_dir = $uploads_basedir . '/fonts';
// Generate the URL for the fonts directory from the font dir.
$fonts_url = str_replace( $uploads_basedir, $uploads_baseurl, $fonts_dir );

$defaults['path'] = $fonts_dir;
$defaults['url'] = $fonts_url;

return $defaults;
}
add_filter( 'font_dir', 'alter_wp_fonts_dir' );

5. Disabling the Font Library

Test Scenario: Verify that the Font Library can be disabled in terms of both UI and REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/..

Steps to Test (UI Disable):

  1. Use a filter to customize editor settings and disable the Font Library UI.
  2. Access the post or page editor and confirm the absence of Font Library features.

Use this code snippet shared below.

function disable_font_library_ui( $editor_settings ) {
$editor_settings['fontLibraryEnabled'] = false;
return $editor_settings;
}

add_filter( 'block_editor_settings_all', 'disable_font_library_ui' );

Steps to Test (REST API Disable):

  1. Use unregister_post_type() to remove Font Library-associated post types and REST API endpoints.
  2. Check if the Font Library functionality is completely disabled without affecting other editor features. This can verified by visiting the 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. Endpoint URL: /wp-json/wp/v2/font-families

Use this code snippet shared below.

add_action( 'init', function() {
unregister_post_type( 'wp_font_family' );
unregister_post_type( 'wp_font_face' );
} );

6. Testing New REST API Endpoints

Test Scenario: Validate the functionality of the new Font Library REST API endpoints.

Steps to Test:

  1. Use tools like Postman or cURL to make requests to wp/v2/font-collections, wp/v2/font-families, and wp/v2/font-families/<id>/font-faces endpoints.
  2.  Verify the responses for predefined font collections, font families, and font faces.
  3.  Ensure that the API endpoints follow RESTful conventions and return expected data structures. For more details, please check this ticket.

Additional Considerations:

  • Test cross-browser compatibility for Font Library UI including mobile browsers.
  • Test performance impact of installing multiple fonts and switching themes.
  • Verify that font-related functionalities align with WordPress coding standards and best practices.
  • Check for any potential security vulnerabilities related to Font Library operations.
  • Please refer to the related issue tickets for more updates.

By following these comprehensive testing steps, you can ensure a thorough evaluation of the Font Library feature in WordPress 6.5.

Resources for more Guide

Resources for more Guidehttps://www.youtube.com/watch?v=Pnx_nkB-O2E 
REST APIhttps://developer.wordpress.org/rest-api/reference/ 
Font Library Revised API Designhttps://github.com/WordPress/gutenberg/issues/57616 
Articlehttps://make.wordpress.org/core/2024/03/14/new-feature-font-library/ https://make.wordpress.org/test/2023/10/03/help-test-the-font-library/ 

How to report an issue

  1. Record or write down by steps how an issue can be reproduced.
  2. Use Test report plugin to collect all essential information about the site you are testing.
  3. Check if there is a related ticket in TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. and add your report to it or create a new one. In the case of the Font Library,  start the ticket’s summary with Font Library, the component will be Editor and before the 6.5 release version will be trunk.

A big thank you to @ankit-k-gupta @webtechpooja @oglekler and @vipuljnext for reviewing this post.

Test with Playground

Are you excited about the next big release in the WordPress world? The current target for the WordPress 6.5 release is March 26, 2024, which is less than a month away! Your help in testing 6.5 ensures everything in this release is the best it can be.

In addition to 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. and RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. testing with a handy tool like the WordPress 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, which requires a hosted or local development environment, did you know that you can test WordPress’s newest features using only your browser? Let’s see how WordPress Playground makes this possible.

“Instant” Test Environment

It’s true! Launching a site with WordPress Playground makes getting set up for testing much easier. Here’s a shortcut to launch Playground running the latest WordPress pre-release, with Test Reports pre-installed to help with bug reports.

  • Use the menus in the top-right corner of a Playground instance to change the 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, load additional PHP extensions, and more.
  • After applying changes, the Playground will reload with your new configuration.

Let’s Test!

Now open up the Help Test WordPress 6.5 post and put 6.5 through its paces! You can easily test and experiment with the latest development version of WordPress.

In addition to testing the latest pre-release build, here are the things what to Test with Playground:

  • Check Site Health to see if there are already some issues that will be unrelated to the update.
  • Check for Errors, Warnings, and Notices.
  • 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.
  • Test in different languages.
  • Use just your keyboard to navigate, or use a screen reader.
  • Test with both 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. and classic themes.
  • If you want to create your own setup in Playground and save it for later use, export your configuration with the download/export button in the top-right corner of Playground. Use the upload/import link to restore a saved configuration in the future.

If you’d like to learn more about WordPress Playground, check out the official Playground start page, and to go even further, the Playground developer portal.

Share Your Experience

Have you tried Playground for testing yourself? Were there any WordPress features that you couldn’t test? Got any tips or tricks you learned on the way? Please share your feedback in the comments below.

A big thank you to @oglekler, @ankit-k-gupta, and @ironprogrammer for contributing to this post.

#6-5#fse-outreach-program#full-site-editing