Core Test Team at WCEU 2024: Contributor Day  

Hello WordPress enthusiasts!

We’re gearing up for an exciting Contributor Day at WordCamp Europe (WCEU) 2024, set to take place next month in the beautiful city of Torino, Italy! This annual gathering of WordPress aficionados brings together a diverse group of contributors to collaborate, learn, and make significant strides in the WordPress project. Here’s a sneak peek at what we have planned for the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Test Team and how you can get involved.

Core Test Team Goals

Our objectives for the day are ambitious but focused:

Collaboration and Community

Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. at WCEU 2024 will not just be about work; it will also be about building connections and fostering community spirit. The collaborative atmosphere will be palpable, with contributors exchanging ideas, offering help, and celebrating each other’s successes. The energy and enthusiasm of the participants will be truly inspiring, reinforcing the sense of belonging and shared purpose within the WordPress community.

Test Team Table Leads

We’re thrilled to introduce our Test Team Table Leads for WCEU 2024. These dedicated individuals will be guiding and supporting contributors throughout the day:

Their expertise and enthusiasm will be invaluable in ensuring a productive and engaging Contributor Day for all participants.

Helpful Resources

The links below have details that will be helpful on contributor day.

Be Prepared

To ensure you get the most out of Contributor Day, please review the following before the event so that you can focus on the fun stuff when you arrive:

Looking Ahead

As we prepare for this Contributor Day, we look forward to the progress and innovation that these contributions will bring to the WordPress project. We encourage everyone who plans to participate to stay engaged and keep the momentum going. Your contributions, whether big or small, make a significant impact.

Thank you in advance to all the contributors who will join us in Torino and those who will participate remotely. Together, we’re making WordPress better. 

Please stay updated for WCEU 2024, and join the #core-test and #contributor-day channels in Make WordPress 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/.

See you next month at WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Europe 2024!

Props to @martinkrcho, @webtechpooja, and @krupajnanda for peer review of this post.

+make.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//test/

#contributor-day, #wceu, #core-test

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.

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.

Highlighted Posts

Categorize a post as Highlight to add it to this section.

Test Team Profile Badge – Your Feedback Needed!

In the Test Team, we are planning to create a handbook page to provide criteria for earning the Test Team Badge. After discussions, we have finalized the criteria listed below to earn the Test Team Badge. There are a few recommendations that we should consider before incorporating them into the handbook.

If you would like a badge on your 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/ profile that acknowledges your contributions to the Test Team, the following criteria must be met:

Test Contributor Badge

To earn a Test Contributor Badge, you must have completed at least one of the following:

  • Submitted a test report comprising at least 3 tickets for testing instructions, issue reproduction, or patch testing either on WordPress or 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/. Please note that reports can be submitted, whether it’s on 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/.
  • Reported an issue on Core Trac or the Gutenberg GitHub repo which has been fixed and merged into a WordPress release.
  • Submitted unit or end-to-end tests that have been merged.
  • Contributed to a Test handbook PR that has been merged.
  • Participated in ZIP package builds or default theme tests during a #core <release-party>.
  • Participated in a Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. (as a 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, you are eligible for the Test Team badge.

How to Request a Test Team Badge?

If you meet the criteria mentioned above, you can request a badge using this link. You will have to include details that demonstrate you have met the criteria mentioned above.

Upon request, a Test Team Rep will confirm your contribution(s) and assign you a badge. There will be a monthly review of contributions, and badges will be awarded at that time. The Test Team will post updates on newly awarded profile badges on the Test Team blog.

Call for feedback.

What do you think of the suggested criteria? Please leave your thoughts on this post by Friday, 22 March 2024.


Core Test Team at WCAsia 2024

WordCamp Asia 2024 is almost here! It takes place from March 7-9 at the Taipei International Convention Center (TICC), Taiwan. As is customary at WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. events, a Contributor Day will be held, taking place on Thursday, March 7.

🕰️ Important Times to Note:

Join the Test team in person or contribute remotely. We can’t wait to see you!

Contribute

The WordPress project offers numerous opportunities for contribution through testing. Some common ways to participate are to:

If none of the above sounds right, or you simply wish to know what contributing to WordPress with testing is all about, please stop by the table to chat or join #core-test channel.

Be Prepared

To ensure you get the most out of Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/., please review the following before the event so that you can focus on the fun stuff when you arrive:

Stay Updated

In addition to keeping the WCAsia 2024 homepage handy, join the #core-test and #contributor-day channels in Make WordPress 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/., and follow #wcasia for other event updates.

Share Your Thoughts

If you have any questions about Contributor Day or the Test Team, please leave a comment below or reach out on the #core-test Slack channel.

Also, if you’re attending Contributor Day in person, let us know in the comments!

Interested in Contributor Day, but not sure if Test is the right fit for you? Try out Make WordPress’s Find Your Team tool to discover other opportunities that may interest you.

Props to @ankit-k-gupta and @oglekler for peer review of this post.

#wcasia

Weekly Meeting Time Change Announcement

Based on our poll results and what we got from our Proposal to change the Weekly Meeting Time post, we concluded our next meeting time. The new meeting time is as follows:

As of this week, the bi-weekly Test team chat meeting will change from 16:00 UTC to 11:00 UTC. This will be reflected in our next meeting, which will be on December 19, 2023.

Along with the Bi-weekly Test team Triage meeting, it will change from 16:00 UTC to 11:00 UTC. This will be reflected in our next triage meeting, which will be on December 12, 2023.

#meeting, #test

Proposal to change Weekly Meeting Time

@ankit-k-gupta and I recently had a conversation about our weekly team meetings. Our primary focus was finding ways to boost participation and encourage more individuals to contribute. However, we encountered a scheduling issue related to the occasional overlap between our meetings and the release cycle parties (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.). As a result, there have been instances when we’ve had to cancel our Test team meetings to accommodate the WordPress Release parties. In light of this situation, we would like to propose an alternative day and time for our weekly meeting.

We have created a Doodle poll for you to help us determine the new day and time for our weekly meeting. Your input is essential, so please take a moment to cast your vote.

Doodle poll – https://doodle.com/meeting/participate/id/dBn2rRNd 

Please Comment on your suitable time below in comments:

Tuesday: 7:00 – 8:00 UTC
Tuesday: 10:00 – 11:00 UTC
Tuesday: 11:00 – 12:00 UTC
Tuesday: 12:00 – 13:00 UTC
Tuesday: 14:30 – 15:30 UTC

Wednesday: 6:00 – 7:00 UTC
Wednesday: 7:00 – 8:00 UTC
Wednesday: 10:00 – 11:00 UTC
Wednesday: 11:00 – 12:00 UTC
Wednesday: 12:00 – 13:00 UTC
Wednesday: 14:30 – 15:30 UTC

Thursday: 6:00 – 7:00 UTC
Thursday: 7:00 – 8:00 UTC
Thursday: 10:00 – 11:00 UTC
Thursday: 11:00 – 12:00 UTC
Thursday: 12:00 – 13:00 UTC
Thursday: 14:30 – 15:30 UTC

Friday: 6:00 – 7:00 UTC
Friday: 7:00 – 8:00 UTC

Please make sure to submit your vote by no later than November 21, 2023. December 5, 2023 (we are extending this poll for two weeks.)

Props to @ankit-k-gupta for peer review of this post.

#meeting

Introducing: Test Team Reps for 2023-2024

Following this year’s nominations and voting period, we are pleased to announce our new Test Team Reps for the 2023-2024 term! 🎉 Join us in welcoming Pooja Derashri and Ankit K Gupta to represent the Test team!

Election Results | Detailed Results

Pooja Derashri (@webtechpooja)

Pooja got involved with WordPress in 2013 as a developer. In 2015, she co-founded WPVibes, a 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 development company. It was in 2017 when she attended her first WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more., started getting involved in the WordPress community, and started her contribution journey.

Within the project, she has served as Co-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. of the Training Team for the 2022 & 2023 term. She has been a noteworthy contributor to the WordPress 6.1 release. She is part of the release squad for 6.3 as Test Co-lead and 6.4 as Test Lead. She is also GTEGeneral Translation Editor General Translation Editor – One of the polyglots team leads in a geographic region https://make.wordpress.org/polyglots/teams/. Further information at https://make.wordpress.org/polyglots/handbook/glossary/#general-translation-editor. of Hindi locale and co-organizer of Ajmer WordPress MeetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area..

Pooja’s dedication to WordPress was acknowledged with the Kim Parsell Scholarship, granting her the opportunity to attend WCUS 2022. However, she couldn’t attend the event due to visa issues. In 2023, she was one of the organizers of the inaugural WordCamp Asia.

Pooja lives in Ajmer, a beautiful city in Rajasthan, India. Beyond her WordPress endeavors, she enjoys gardening, exploring new places, and listening to music.

You can read more about Pooja on her profile page.

Ankit K Gupta (@ankit-k-gupta)

Ankit holds a Master’s Degree in Computer Applications, a testament to his dedication to the field of technology. His journey in the tech world commenced as a computer lecturer at a prominent college in Delhi. However, driven by his unwavering passion, Ankit made a pivotal career move in 2013, transitioning into Software Quality Engineering. Currently, Ankit serves as a Lead QA with the 10up OSP team.

Ankit’s professional mission revolves around ensuring a bug-free and user-friendly experience for everyone within the WordPress community.

His dedication to this mission has led him to become a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. contributor to WordPress for an impressive ten consecutive versions, spanning from WordPress 4.0 to WordPress 4.9 and continuing into the 5.X and 6.X release series.

Beyond core contributions, Ankit has contributed to various releases of BuddyPress, bbPressbbPress Free, open source software built on top of WordPress for easily creating forums on sites. https://bbpress.org., Translation, WordPress Docs, and WordPress metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. sites. Furthermore, he holds the roles of editor and locale manager within the Hindi WordPress Polyglot team.

Outside of the professional realm, Ankit’s enthusiasm extends to sharing his knowledge and experience with others. He has been a speaker at numerous WordCamps and meet-ups centered around WordPress and Quality Assurance.

When he’s not immersed in the world of technology, Ankit cherishes quality time with his family. His leisure activities include embarking on long drives, exploring new places, and capturing the beauty of the world through his camera.

You can read more about Ankit on his profile page.

Congratulations 🥳 to our new reps! I look forward to supporting their move into the team rep role.

Props @webtechpooja and @costdev for peer review of this post.

+make.wordpress.org/updates/

#team-reps