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

Help test WordPress 6.5 Beta 3

This post is not covering all important features for testing in WordPress 6.5 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. 3, more will come. The previous call with general instructions for testing can be found here.

If you want to help in testing but are not sure how to start, join the #core-test channel in 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 ask for guidance. Seasoned testers will gladly point you in the right direction and share interesting stuff to play with. 


WordPress 6.5 RC1 is coming on 5 March 2024 which means String freeze – no new strings should be added or changed in the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to give Polyglots the ability to translate strings into different languages before the release. This is the time to pay careful attention to new strings. If you know English by heart, please test new features and check out the language.

Table of contents

Key features to test

I18n – Translations performance

WordPress Core contributorsCore Contributors Core contributors are those who have worked on a release of WordPress, by creating the functions or finding and patching bugs. These contributions are done through Trac. https://core.trac.wordpress.org. put great efforts into localization performance, and we can see significant improvement in translation loading.

TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. ticket: #59656

Detailed information about the project:

Not all 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’s features went into the Core and the plugin is still useful with translations from 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.-files that can benefit with OPcache.

Testing instructions

Special request to developers who maintain multilingual sites to test WordPress 6.5 with real data on staging versions of the real sites. Do it now and be confident when the time will come to update sites on production and benefit from this improvement.

General checks

  • Front end theme translations
  • Back end translations
  • Memory usage
  • Site speed
  • Compatibility with different plugins, including plugins for multilingual sites and plugins with huge amounts of strings
  • MultisiteMultisite Multisite is a WordPress feature which allows users to create a network of sites on a single WordPress installation. Available since WordPress version 3.0, Multisite is a continuation of WPMU or WordPress Multiuser project. WordPress MultiUser project was discontinued and its features were included into WordPress core.https://codex.wordpress.org/Create_A_Network. translations
  • Absence of errors with different PHP versions (more: supported versions, recommendations)

Notes:

  • WordPress 6.5 has new or changed strings that are not available for translation until RC1. WordPress, themes and plugins can also have untranslated strings in languages you choose to test with. If you want to translate WordPress, follow the guidance in the Translator Handbook.
  • If you find an issue file a new ticket on Trac under the I18N component.
  • If you find an issue with a plugin or theme, please, report it to its developer.
  • The Query Monitor plugin is an active observer and can make an impact on the result as well.
  • Some strings can lack translation, and, in this case, they will be absent in 6.4 as well as 6.5 (with some exceptions as ‘Activate’ after plugin installation that looks the same but actually is a different string).
  • At this stage, the solution is working fine at first glance, and you have to be creative, notice details and take bold actions to get into every possible corner and dig deep to be sure that there are no hidden holes.

Fresh installations

  • Install 6.4 and 6.5 latest Beta/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 English default language keeping everything else the same.
  • Install Query Monitor plugin on both sites to check memory usage and execution time.
  • Debug settings
  • Change the default site language to another language
    • Check that translations are working in the Admin
    • Check that translation work on the front end (you will have by default Twenty Twenty-Four theme and it has strings for the front end)
    • Check that in general each 6.5 admin page uses less memory than 6.4 pages
    • Check that JS translations work, for example by clicking on the Apply button on the plugin page without selecting any plugins, install plugin, install theme, use Quick/Bulk Edit and change post/page attributes
  • Change the user language to another one adding a third language. If you know the RTL language, please check it and mix with LTR.
  • Install a lot of languages to check that the system will still be quick with this number of languages.
  • Install plugins that have translations in chosen languages (one of the most popular will most likely be one of them) and check that translations are identical.
  • Install a classic theme and check its translations.

If we missed some aspects that should be checked, please leave a comment below this post.

Plugin dependencies

Logic of installing, activation, deactivation and removal of plugins was reworked. This is a significant enhancement in addition to already existing safeguards during plugins installation for compatibility and errors checks. 

To get detailed information and find previous test calls, please, read Merge announcement

Testing instructions

Environment

  • Install WordPress 6.5 latest Beta/RC version
  • Debug settings
    • Enable Debug and Debug log
    • Keep Console open to notice JS and ajax/REST request errors
  • Remove all plugins
  • Install Query Monitor plugin and keep it active (it will show PHP errors if they will accrue)
  • Pay attention to details during the process

General checks

Plugins without dependencies should be installed, activated, deactivated, uninstalled, enabled/disabled to auto-updates as before (single or bulk). 

  • Install several plugins
  • Activate plugin
  • Activate several plugins using Bulk action
  • Install old versions of plugins via file upload
  • Update one plugin
  • Update several plugins using Bulk action
  • Try to install plugin that will cause fatal error (invent nonexistent function, for example)
  • Deactivate one plugin
  • Deactivate several plugins using Bulk action
  • Delete a plugin
  • Delete several plugins using Bulk action
  • Did the same with Enable/Disable auto-updates

Test dependencies

  • Installation: Dependents can only be installed via Plugins > Add New if their dependencies are installed.
  • Activation: Dependents anywhere (Plugins > Installed plugins / Plugins > Add New / modals / WP-CLIWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/ / after installing via ZIP) can only be activated if their dependencies are activated first.
  • Deactivation: Dependencies can only be deactivated on Plugins > Installed plugins (single or bulk), if their dependents are deactivated first.
  • Deletion: Dependencies can only be deleted on Plugins > Installed plugins (single or bulk), if their dependents are deleted first.

Steps to follow

Prepare several plugins and zip them into own archives to install via admin

  1. my-hello-dolly/my-hello-dolly.php
<?php

/**
* Plugin Name: My Hello Dolly
* Requires Plugins: hello-dolly
*/
  1. my-car/my-car.php
<?php

/**
* Plugin Name: My Car
*/
  1. my-car-trailer/my-car-trailer.php
<?php

/**
* Plugin Name: My Car Trailer
* Requires Plugins: my-car
*/
  1. game-stone/game-stone.php
<?php

/**
* Plugin Name: Game Stone
* Requires Plugins: game-scissors
*/
  1. game-paper/game-paper.php
<?php

/**
* Plugin Name: Game Paper
* Requires Plugins: game-stone
*/
  1. game-scissors/game-scissors.php
<?php

/**
* Plugin Name: Game Scissors
* Requires Plugins: game-paper
*/
ActionExpected behaviour
1. Install ‘My Hello Dolly’ plugin via Plugins > Add New
– Activate plugin
Plugin is installed
Error message
Dependency is not installed automatically
2. Install ‘My Car Trailer’ plugin via Plugins > Add NewPlugin is installed
3. Activate ‘My Car Trailer’ pluginPlugin is not activated
Error message
4. Install and activate ‘My Car’ plugin
– Activate ‘My Car Trailer’ plugin
Plugins are activated
‘My Car’ plugin has no link to deactivate
5. Deactivate ‘My Car Trailer’ plugin
– Deactivate ‘My Car’ plugin
Plugins are deactivated
‘My Car’ plugin has no link to delete
6. Delete ‘My Car Trailer’ plugin
– Delete ‘My Car’ plugin
Plugins are deleted
7. Install and activate ‘My Car’ plugin
– Install and activate ‘My Car Trailer’ plugin
– Manually delete ‘My Car’ plugin in the wp-content folder
– Open Plugins page in admin
‘My Car’ plugin will be deactivated due to its absence
‘My Car Trailer’ will still be active
Notice message
8. Add plugins ‘Game Paper’, ‘Game Scissors’, ‘Game Stone’ into wp-content folderWarning on the plugin page about invalid requirements 

These are only expected behaviour.

Now it is time to be creative and think about other possible scenarios. Write them down before actually testing and check if your expectations are matching what is happening.

Remember to check the Test Dependencies section above so that your expectations meet the current status of the feature.

Other improvements

Focus styles updated for full WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. compliance

Trac ticket #51870

The focus style for form inputs, buttons, and links styled as buttons, which was first introduced in WordPress 5.3 (#34904), has been fully updated in WordPress 6.5. In WordPress versions prior to 6.5, the focus styles were inconsistent across different elements like inputs, buttons, and links.

This update modifies the focus styles for all interactive elements to be consistent with the styles introduced in WordPress 5.3, in order to meet WCAG accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) standards for minimum colour contrast ratios.

Please help test consistency of focus styles for form inputs, buttons and links styled as buttons with this video to guide you.

Fixing inappropriate pointer cursor on disabled form controls in WordPress

Trac ticket #59733

WordPress 6.5 introduces a fix for an issue where disabled form controls in WordPress were still showing a pointer cursor instead of the default cursor.

Previously, WordPress set all form controls and their label elements to use cursor:pointer to highlight that they are interactive. However, when a control is disabled or has `aria-disabled=”true”`, using a pointer cursor is inappropriate and doesn’t follow web standards.

The issue affected disabled checkboxes, radio buttons, and other form controls throughout WordPress, including in the 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/ editor. While WordPress traditionally hides disabled controls rather than disabling them, there were still instances of improper cursor styling.

To address this, the change makes sure labels and disabled form controls, including those with aria-disabled, use the default platform-dependent cursor. This follows web accessibility standards and fixes the confusing pointer cursor on disabled controls. Interactive controls will still use a pointer for consistency with WordPress’ prior styling.

Testing instructions

  • Go to Settings > Reading
  • Make sure ‘Your homepage displays’ is set to ‘Your latest posts’.
  • Hover the mouse on the ‘Homepage:’ and ‘Posts page:’ disabled select elements.
  • Observe the mouse cursor is the default one.
  • Hover the mouse on the disabled select elements labels.
  • Observe the mouse cursor is the default one.
  • Install and activate the Link Manager plugin.
  • Add a new link.
  • In the form to create a new link, check the checkbox at another web address of mine.
  • Observe all the following checkboxes and radio buttons get disabled.
  • Hover the mouse on all radio boxes, checkboxes, and their labels.
  • Observe the mouse cursor is always the default one.

Media: AVIF support enabled

Trac ticket #51228

WordPress 6.5 introduces native support for uploading, editing, and saving images in the AVIF (AV1 Image File) format, provided the server has the required AVIF libraries installed.

The AVIF image format utilises the intra-frame encoding techniques of the AV1 video codec to offer drastically improved compression ratios compared to older image formats like JPEG, PNG, and even newer ones like WebP.

By incorporating AVIF encoding and decoding into the media functions, WordPress 6.5 allows users to upload AVIF files and take advantage of the file size savings, typically around 30-50% over JPEG/PNG for equivalent visual quality. Edited AVIF images can also be resaved while preserving alpha transparency and colour profiles.

Testing instructions

  • Verify your WordPress install supports AVIF — check Tools-> Site Health -> Info tab -> (expand) Media Handling section. Either GD or Imagick must have “AVIF” listed.
  • Upload an AVIF image to a post or the media library. Some test images are available in the libavif repository.
  • Test features like cropping and rotating in the media library and the editor
  • Test viewing post in all supported browsers (Browserstack would be great for that)
  • Test using the image_editor_output_format 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. to output AVIF’s for uploaded JPEGs, noting JPEG/AVIF file sizes with/without the filter.

The order of loading the import map and script modules has been changed. Now, the import map is loaded first, followed by the script modules. This fixes an issue where incremental import maps would fail if loaded after the script modules.

In classic themes, the import map and script modules are now loaded in the footer rather than the head. This is because the proper order (import map first) can’t be guaranteed when printing in the head in classic themes.

Testing instructions

Create a plugin with a dependency between two script modules and an import map. You can either follow the instructions below to create a test plugin, or simply download this test plugin.

Create a new plugin with three files:

test-plugin/test.php

<?php
/*
* Plugin Name: Test Script Modules
* Version: 1.0.0
*/

wp_register_script_module( 'bar', plugins_url( '/bar.js', __FILE__ ) );
wp_enqueue_script_module( 'foo', plugins_url( '/foo.js', __FILE__ ), array( 'bar' ) );

test-plugin/foo.js

import bar from 'bar';
bar();

test-plugin/bar.js

export default function bar() {
 console.log( 'bar' );
}
  • Upload the plugin on your test website.
  • Activate the plugin.
  • Open your site (frontend).
  • Check that “bar” was printed in the console.

To check that this fixes the positioning of the scripts/link in the classic themes:

  • Load a 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 (Twenty Twenty-Four or another)
  • Check that the scripts with type=”importmap” and type=”module”, and the link with rel=”modulepreload” are printed in the head.
  • Load a classic theme (Twenty Fourteen)
  • Check that the scripts with type=”importmap” and type=”module”, and the link with rel=”modulepreload” are printed in the footer.

Please share feedback as soon as you can before the final release on March 26, 2024.

What else you can do

  • Share this post to advise other WordPress developers, DevOps, QA specialists, and site owners to join efforts in testing.
  • Ask your local 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. organizers to make a meetup about testing, QA, and release cycles. 
  • Subscribe to the Test Team blog to get further information and updates. You may also subscribe to the Core Team blog to stay in the loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. with Core updates, including the latest “Week in Core” posts.
  • Join our regular Test Team meetings in the #core-test Slack channel, where you can get real-time updates, get help with testing, or discuss tricky cases. Participate in team meetings and test scrubs every week to engage in the testing community.
  • Do you have suggestions for how this post can be improved? Please leave a comment below.

A big thank you to @oglekler, @lumiblog, @vipuljnext@swissspidy@costdev@ankit-k-gupta and @webtechpooja  for contributing to this post.

#6-5, #test

Help test WordPress 6.5 Beta 1

It’s time for the next big release in the WordPress world! WordPress 6.5 is planned for March 26, 2024, and we need your help to make it the best it can be. New features and improvements make this release a game-changer as always. 

This is the second Call for Testing post for the 6.5 release after the early call that highlighted new Editor features. 

Table of Contents:

Why should you test the upcoming WordPress version

Are you a professional QA specialist, developer, business owner or blogger? You can easily test WordPress Betas, Release Candidates and the development version at any given moment to be sure that your site, theme and plugins are fully compatible with the upcoming version and there are no complications with server settings, certain data in the database or other things that can be almost unique for your site. This way you can be sure that when a new version is launched, you can easily update your site, or your theme/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 users will be happy when they update their sites. 

Do you find something that does not match up but you are not sure? Report it in the Forums (details below).

This is also a great way for you to contribute to WordPress and become a part of the worldwide open-source community improving the CMS you are using in your day-to-day business that benefits your business as well. 

Get ready

This is quite simple. 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 site you want, but please only test on a 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. and not on a production/live site. You can use any local environment and run WordPress locally or launch another site on your hosting. Some hosting companies provide a simple way to launch a staging site alongside your main site, so check what options you have. And please consider the security of your staging site by avoiding the use of simple passwords or leaving the installation process halfway through.

Test Environment installation

If you are a developer or a QA specialist and 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 a Playground or install WordPress in your local environment and use the WordPress Beta Tester Plugin

For more detailed steps about the Beta Tester Plugin, follow this link for complete instructions.

With Playground, you can also easily test individual Core tickets.

What to test

Each release introduces a lot of new features, improvements and bug fixes. Most of them do not require any additional actions from you, but in some cases, something might need to be changed. This is why testing is a good practice as well as following along with the release to see if something can require actions from your side or provide you new opportunities.

If you missed the previous call for testing, you can start with Early Opportunities to Test WordPress 6.5.

To make your testing experience as smooth as possible and save your time, follow the instructions: 

General testing

  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.

If this looks complicated, just do what you can and take it easy. If you didn’t find anything, most likely everything is working for you just like it should.

Check the WordPress 6.5 Release Schedule to see which pre-release build can be tested now.

Advanced testing

Ready to get started to dive deeply into testing? Be creative and think out of the box. 

Tips:

  • Test across different browsers.
  • Test in different languages.
  • Compare features on different screen sizes, including tablets and mobile.
  • 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.
  • Try to make everything the wrong way.

Key Features to Test

There are a lot of new features mentioned in the 6.5 Beta 1 release post. Each feature needs to be properly tested in all possible ways, noticing nuances and details. Start with the Font library, it will be a lot of fun to explore and will be useful for you shortly. If you are a plugin developer or a plugin user who has issues with plugin dependencies from time to time, try Plugin dependencies to see how it is working and if this meets your expectations. And there are even more new options and enhancements in the Editor. Forget about testing and spend some time admiring the great work… Not really, test them while having fun.

New translation system

WordPress 6.5 changes how translations are being loaded, replacing the existing localization system with a more lightweight and much faster mechanism. This is mostly an invisible change which has been extensively tested before via the Performant Translations plugin. If you are using WordPress in a language other than English (US), you should verify whether translations are still loaded everywhere as expected. Especially if you are using any kind of multilingual/translation plugin. Make sure that all your translations are up-to-date on Dashboard -> Updates as well. More information about this new translation system will be published in a dedicated developer note soon.

Where to report feedback

If you find any issues but are not sure that is actually a bug or where should be reported, share them on the WordPress.org alpha/beta forums. If you are certain that you found a bug in WordPress Alpha/Beta/RC and don’t have an issue with something else, report it on Core Trac. And the Test Reports plugin will help you in creating detailed reports. Please search for an existing report first. 

For helpful reporting guidelines, refer to the Test Reports section of the Test Handbook. Also, see the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Team guidelines for Reporting Bugs.

Please share feedback as soon as you can before the final release on March 26, 2024.

What else you can do

  • Share this post to advise other WordPress developers, DevOps, QA specialists and site owners to join efforts in testing.
  • Ask your local 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. organizers to make a meetup about testing, QA and release cycles. 
  • Subscribe to the Test Team blog to get further information and updates. You may also subscribe to the Core Team blog to stay in the loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. with Core updates, including the latest “Week in Core” posts.
  • Join our regular Test Team meetings in the #core-test Slack channel, where you can get real-time updates, get help with testing or discuss tricky cases. Participate in team meetings and test scrubs every week to engage in the testing community.
  • Do you have suggestions for how this post can be improved? Please leave a comment below.

A big thank you to @vipuljnext, @lumiblog, @swissspidy, @ironprogrammer, @ankit-k-gupta, @webtechpooja and @annezazu for contributing to this post.

Changelog

2024-02-15

  • Initial Post

#6-5

Early Opportunities to Test WordPress 6.5

Ahead of betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 for WordPress 6.5 on February 13th, this is an early opportunity to provide feedback as features are rapidly underway. Of note, this is intentionally just a selection of what’s ready to test and doesn’t include everything mentioned in the roadmap. Expect a broader testing post, like this for 6.4, for the release once beta 1 is out in the world. 

Note: this post currently mentions setting up a test site with Gutenberg 17.5 RC1. This post will be updated once GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 17.5 is released on Jan 17th, 2024. 

New data views in the Site Editor

About the feature

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

  • Ability to display a table with specific fields, pagination and quick actions.
  • UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. for toggling fields and for sorting and filtering data by field.
  • UI for selecting entries and performing bulk actions.
  • Support for different layouts, like classic table, grid view (including gallery), with the option to display a side-by-side preview.
  • Support for saving and toggling between “views”, which are specific configurations of layouts, field visibility, etc.

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

Prerequisites

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

The experiment for ‘new admin views’ will also need to be switched on from the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party experiments page (wp-admin/admin.php?page=gutenberg-experiments).

Testing instructions

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

Templates

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

Patterns

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

Pages

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

Pattern Overrides

About the feature

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

Prerequisites

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

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

Testing instructions

Create a synced pattern with overrides

  1. Create a new post
  2. Insert a mixture of blocks that include paragraphs and optionally other blocks too
  3. Select the blocks, and ‘Create a pattern’ from the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. options menu
  4. Give the pattern a name and make it ‘synced’
  5. Once the pattern has been created, note that the content is locked and uneditable
  6. Click the ‘Edit original’ button on the toolbar, this will take you into an isolated view for editing the pattern
  7. Select a paragraph block in the pattern, and in the block settings sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. expand the advanced section. Check the ‘Allow instance overrides’ option
  8. Use the ‘Back’ button in the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. area of the editor to go back to the post

Editing the instances

  1. Select the pattern and duplicate it
  2. Now click the paragraphs that you checked ‘Allow instance overrides’ for and notice you can edit them, and the updates don’t sync across instances of the pattern, the changes are local to the pattern
  3. View the post, the frontend should match the editor

Robust RevisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. 

About the feature

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

Prerequisites

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

Testing instructions

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

For styles:

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

For templates and template parts:

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

Font Library

About the feature

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

Prerequisites

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

Testing actions

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

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

Additional technical feedback opportunities

Reporting bugs and enhancements 

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

If anything is amiss with this post or you’re having trouble contributing, please comment below or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” me, @annezazu, in WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

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

Help Test WordPress 6.4

Get ready for the next big release in the WordPress world! WordPress 6.4 is set to launch on November 7, 2023, and we need your help to make sure it’s the best it can be. With exciting new features and improvements, this release promises to be a game-changer for WordPress users everywhere.

Stay up to date with the latest pre-release builds by checking the WordPress 6.4 Release Schedule for availability. For real-time updates and discussions, join the #core-test Slack channel. Engage in the testing community by participating in weekly scheduled team meetings and test scrubs.

Table of Contents:

Testing Environment 💻

Please only test on a 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. and not on a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site.

Once your development site is set up, please install and activate the WordPress Beta Tester Plugin. After activation:

  • Navigate to Tools > 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. Testing.
  • Set the update channel to “Bleeding Edge” and click Save Changes.
  • Set the stream option to “Beta/RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. only” and click Save Changes again.
  • Navigate to Dashboard > Updates and click the Update to latest… button.

For more detailed steps, click this link for complete instructions.

Testing Tips 💡

At a high level, here are a few tips to keep in mind to get the most out of helping to test:

  • Test across different browsers.
  • Test in different languages.
  • Compare features on different screen sizes, including tablets and mobile.
  • 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.

Key Features to Test 🔑

Style

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

This release introduced a handy feature that allows you to reset global styles back to their default settings with ease (52965). With this enhancement, you can effortlessly reset any changes made to global styles back to their original state. To try out this feature, simply make a few revisions to the global style and then open the revision panel. You’ll see a list of all the revisions, and at the bottom, there’s an option called “Reset to Default.” Click on it to return to the original settings.  Now, you only need to go through one revision check instead of two (53281). Previously, the revision panel was only available after two styles of revisions were saved in the database.

Please help test global style revisions with this video to guide you:

Twenty Twenty-Four Default Block Theme

Twenty Twenty-Four default theme is set to launch in 6.4. The theme for the year 2024 will use new design tools to make websites look better and be easier to edit. It will have special designs for three groups of people: entrepreneurs and small businesses, photographers and artists, and writers and bloggers. Here, you can find Related Gutenberg Issues and PRs.

Please help test the default Twenty Twenty-Four theme, this is the demo video:

Interface

Write with Ease

In this release, ongoing efforts are being made to ensure a smooth and enjoyable writing experience in WordPress(#53305). These enhancements include the addition of new keyboard shortcuts and improvements in copying and pasting text from other sources. The Link preview feature (53566) now includes a convenient “Open in new tab” control, making it simpler to enable or disable this option. Additionally, toolbars for List, Quote, and Navigation blocks have been enhanced to make your writing and editing process more efficient.(#53699, #53697). Please help test using keyboard shortcuts and copying and testing text from other sources.

Please help test the improved writing experience for list items with this video to guide you:

Please help test the capture toolbar in the quote block with this video to guide you:

Please help test the ‘Open in New Tab’ feature with this video to guide you:

Improvements to List View

The List View in WordPress has undergone some great enhancements. Now, managing your content is even more straightforward and user-friendly. You can easily rename Group blocks using a handy options menu that pops up. When dealing with gallery and image blocks, you can now see previews of your media to make sure everything looks just right. Additionally, resizing and duplicating blocks have become much more efficient, with keyboard shortcuts available for quick actions. The List View now allows the escape key to deselect blocks if blocks are selected(48708). These improvements in the List View make organizing and editing your content in WordPress a breeze.

This video is showcasing the use Escape to deselect blocks feature:

Please help test by renaming group blocks in the list view with this video guide:

This image showcases a media preview for the gallery and image blocks:

An image showcasing media preview for gallery and image blocks


Please help test by using keyboard shortcuts for duplicating blocks with this video to guide you:

 Improvements to the Command Palette 

The Command Palette has undergone several changes and improvements since its first introduction in WordPress 6.3. For example, you can now do more with blocks using new commands, including block transforms and the options to duplicate, copy, remove, and insert after/before. The Command Palette also looks different with a fresh design. Plus, it now supports adding commands without icons. If you’re using WordPress on a small screen, like a mobile phone, the Command Palette will work better for you. It also uses more consistent language and actions, making it easier to use. Lastly, there are improvements in snackbar motion, making your experience smoother. These changes make managing your WordPress site even easier and more user-friendly.

Please help test adding blocks by commands and registering commands without icons with this video to guide you:

This image shows you registering commands without icons.

This video is showing some improvement for the command palette on smaller screens:

Test with tweak and add more consistent commands:

This video displays snackbar motion, and you can test this feature by similarly giving commands.

Please check out more improvements to the recent updates made to the Command Palette.

Blocks

Block HooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. (Previously Auto-inserting Blocks)

Introducing the Block Hooks feature, a reimagined approach to the earlier concept of Auto-inserting Blocks. Basically, Block Hooks is an 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. that developers can use to make websites more flexible. It allows one block to attach itself to another block and show its content before or after that block. You can also attach a block to a parent block and make it appear at the beginning or end of the list of child blocks inside it. (53987

Even though Block Hooks is mainly for developers, it also gives a nice experience to the end users by automatically inserting a block into a specific location. It lets developers place blocks where they want them to be and gives room for customization. The goal is to make block themes more adaptable with the help of plugins.

One thing to keep in mind is that the block using this API will only be auto-inserted if the original template or part hasn’t been changed by the user. This is done to respect the user’s choice. This API can only be applied with block patterns, template parts, and templates that come from the block theme files. It doesn’t alter anything the user has already created or changed on a website. 

Note: This feature is a more technical item to test. Check out this for a more detailed guide.

Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. Block Pagination Enhancements 

Now, you no longer need a full page reload when you navigate between pages in a Query Loop block. There’s a new setting that prevents full page reloads. This improved way of moving between pages is made possible by a special version of the Interactivity API, and it makes browsing smoother. Plus, you can also decide how many pages you want to show using the Query Page Numbers block for even more control. Query block: Client-side pagination (53812), make mid-size parameter settable for Query Pagination block. (#51216).

Please help test adding pagination in your query block. This video guides you through the pagination in the query block.

Client Side Pagination

List Block Enhancement 

In the List Block, a new feature has been introduced that allows you to merge consecutive lists instead of keeping them as individual blocks. This enhancement streamlines your editing experience by combining lists that appear one after another, making it easier to manage and format your content seamlessly. (52995)

Group Block Enhancements

Now, you can easily rename Group blocks to organize your content better (53735). This feature makes it simpler to identify and manage different sections of your page, streamlining your editing experience. Additionally, the introduction of background images for Group blocks brings more creativity and customization to your layouts. These enhancements empower you to create more organized and visually appealing content in WordPress. (53934)

Background image support to the Group block

Please help test by renaming the group blocks using this video guide.

Add Aspect Ratio to the Image Block’s placeholder

Aspect ratio controls to the 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. block were introduced in the 6.3 version, and now, these helpful controls have been extended to the placeholder of the Image block. This enhancement offers greater flexibility, particularly when designing wireframe-style patterns that establish a layout for users to fill in with their content.

You can select the default coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./navigation-link variant within the core/navigation block, offering more flexibility and customization options for your navigation menus (50982)

Please test by adding navigation block and start customizing it with this video to guide you.

Add Lightbox Functionality for your Images

WordPress 6.4 introduces an improvement to the image experience with the new Image Lightbox feature. Recognizing the need for clarity in the user interface (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.), a dedicated Settings panel has been instituted for the image block. Within this panel, users can easily locate the Lightbox toggle, available both in Global Styles and Block settings.Display your pictures in an engaging way using the brand-new lightbox functionality. This cool feature will work with image blocks, so you can click on an image and see it in a bigger size right on top of your existing content. (51132)

General Block Improvements

  • Preformatted: Add margin and padding support. (45196)
  • Social Links: Add Threads Icon. (52685)
  • Verse: Enable line breaks. (52928)
  • Details: Add block gap support. (53282)
  • File: Add margin and padding support. (45107)
  • Column: Add stretch alignment (53325).
  • Image: Keep image size upon replacing an image (49982).
  • Buttons: Allow using a button element for button blocks (54206).
  • Post Content: Add block gap support (54282).
  • Post Content: Add color control support (51326).
  • Footnotes: Add link, background, and text color support (52897).
  • Footnotes: Add typography, dimensions, and border block supports (53044).

Patterns

Create your own Pattern Categories

Now, you can neatly group your patterns by categories when you create them. These categories are handy because you can use them to organize and find your patterns easily. You can also edit these categories in the 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. when you’re editing a pattern.

To ensure this feature functions smoothly, here are the steps to follow: Begin by adding various user patterns, both synced and unsynced, assigning categories to each (remember to hit ‘enter’ or add a ‘,’ after each categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.). Then, navigate to the site editor patterns page and verify that the categories appear in the left navigation panel. Confirm that selecting a category displays the corresponding patterns accurately and that theme patterns continue to appear as expected. Check that all patterns are accessible under ‘All Patterns’ and that the search function operates seamlessly. Lastly, duplicate a theme pattern and ensure that the new pattern inherits the same category. Additionally, when adding a user pattern with the ‘Footer’ category, make sure it displays alongside the theme Footer patterns, taking into account the category slug distinction (theme patterns use ‘footer’ while the user category name should match this).
To make things even simpler, all patterns, whether they’re synced or not, are listed together in one place. There’s no need to look in different tabs for synced patterns; they’re all in the same section. (53837)

Please help test creating categories, adding synced and unsynced patterns, and assign them categories with this video to guide you:

Import/Export Patterns as 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. files.

To maintain compatibility with Reusable blocks, you can now import and export patterns as JSON files, providing a straightforward way to transfer custom patterns between websites. (54337

Please help test import and export patterns with this video to guide you:

Where to Report Feedback 🗣

If you find any issues, it’s best to share them on the WordPress.org alpha/beta forums, or, if you are more technically savvy and comfortable, on Core Trac. For helpful reporting guidelines, refer to the Test Reports section of the Test Handbook.

Please share feedback as soon as you can before the release on November 7, 2023.

A big thank you to @annezazu,@annebovelett @coachbirgit, @ironprogrammer, and @rashiguptaa for reviewing and contributing to this post.

Changelog 🪵

2023-11-01

  • Changed Query loop enhanced pagination name to Force Page Load.

2023-10-06

  • Removed Font Library feature as it is punted(moved) to the WP 6.5 release.

2023-10-03

  • Update on Font library and link added to individual Help Test font library post.

2023-09-26

  • Initial post.

#6-4, #call-for-testing, #fse-outreach-program, #full-site-editing

FSE Program Testing Call #26: Final touches

This post is the twenty-sixth call for testing as part of the Full Site Editing Outreach Program and likely the final one with a title to match. For more information about this experimental program, please review this FAQ for helpful details and check out how it’s going to evolve. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there. 

Overview

With WordPress 6.4 on the horizon, this call for testing takes you through many of the major pieces set to land with this release:

Framing

You’re set to launch your new photography portfolio. You plan to add more content in the coming months so you want to ensure it’s well organized and well equipped for future tweaks/additions with new fonts and new patterns. When you originally started the site, you didn’t yet had a vision for how to finish it until now!

Testing Instructions 

For this test, please use the following pre-built site as we’ll be rapidly switching between 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/ versions:

  1. Open this link only once: https://app.instawp.io/launch?t=fse-testing-call-26&d=v2 
  2. Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created. 
  3. This will launch a site for you to use for up to 24 hours. Select “Magic Login” to log in to the wp-admin dashboard. 
  4. Save the link to your site so you can access it again during the test. 

Manage fonts

  1. Head to Appearance > Editor > Styles > and select the pencil icon to open up the Styles panel.
  2. Select Typography to view a list of active fonts and click the “Aa” icon to open up font management.
  3. Upload a new font file using the drag and drop option. You can download a font from https://fonts.google.com/
  4. From the font manager, select “Inclusive Sans”, a previously uploaded font, and choose “Delete” to uninstall this option. 
  5. From there, close out of the font manager, and change the Headings and Text font option to the new font you uploaded.
  6. Save changes.

Get your site organized 

  1. Use Command + K or evoke the Command Palette by clicking on the Top Toolbar field and use it to open the List View (purposefully leaving out the exact command).
  2. Select the Columns block containing the “Want to work with me?” text and, again using the Command Palette, group this block.
  3. From there, you’ll see two different Group blocks on the page. Select each and, using the three dot menu in List View, find the “rename” option and give each a different name.

Create a pattern 

  1. Select the “Want to work with me?” Group block with its new name and open the block settings.
  2. Under the Styles tab, add a black and white background image from the Media Library. Adjust the colors of the text as needed afterwards. 
  3. Using the three dot menu, create a new synced pattern for “Want to work with me?” content and add a categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of your choosing.

Finish your Portfolio page

  1. Using the Command Palette, open the draft page titled “Portfolio”. On this page, you’re going to create three sections of photos “With People”, “Without people”, and “Black and White” to show off your work alongside a section of all of your photos already listed. 
  2. Add the unsynced pattern titled “Portfolio section” using whatever method of your choosing (Inserter with the + button in the top left or the Quick Inserter with the / option). 
  3. Using this pattern and the default content it provides, fill out the respective details including a proper heading, description, image with a set aspect ratio that epitomizes the rest of the images, and remaining gallery items. Here’s an example of what this should look like.
  4. Create all three sections following these steps: “With People”, “Without people”, and “Black and White”.
  5. Change the font for each of these headings to be different than the global option set originally in Styles (and ensure all options appear).
  6. Open List View and rearrange each section in a different order by dragging and dropping with help from the image and gallery previews. 
  7. As a finishing touch, select the first standalone image in each section, open 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., and toggle on the option to “Expand on click”. 

Swap templates

  1. Once done, open Block Settings and, under the Page tab, select “Pages” next to Template. 
  2. From there, you’ll see options “Edit Template” or “Swap Template”. Select “Swap Template” and choose the “Portfolio” option. 
  3. Before saving, change the Page status to “Published”.
  4. Save changes.
  5. Use the Command Palette to view your site. Notice this new Portfolio page is automatically included in your menu and that when you hover over the first standalone image in each section there’s an option to expand it and view in isolation. 

Announce your new portfolio and remove the Like button

  1. Return to the Site Editor and, using the Command Palette, start the process to add a new post. 
  2. Title the post “Announcing my portfolio” and write a brief paragraph, including a List block that mentions each portfolio section (“With People”, “Without people”, and “Black and White”). Notice that the block toolbar always stays with the overall list rather than each individual item. 
  3. Publish the post and view it. Leave a comment on your own post and notice that there’s a Like button available. 
  4. Go back into the Post Editor and, using the Command Palette, open the Single Post template. 
  5. Using List View, select the Comment Template and open Block Settings. Notice there’s a Plugin section with a Like Button option turned on. Turn this option off and save changes. 

Go further

From there, view your site, click around, and make any additional changes you’d like! Create new posts, create new patterns, or adjust your site’s styles. While this walks through an initial set of items, feel free to explore further based around the new features coming in 6.4.

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? Shout out to @nomadskateboarding for this addition!

Leave Feedback by October 9th, 2023

#fse-testing-call

FSE Program Testing Call #25: Let’s start from the beginning

This post is the twenty-fifth call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there. 

Overview

WordPress 6.3 just launched this week, bringing with it the ability to build out all parts of your site without leaving the Site Editor. While we’ve tested everything leading up to the release, it’s time now to see how all of the pieces are landing with a fresh take, especially with all of the fixes found during the 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. periods, and to look ahead to where 6.4 aims to iterate

To do this, this call for testing will go through a “starting from scratch” experience, from changing styles, using and creating patterns, creating a few pages, and setting up a menu. As part of this, you’ll explore new tools, like the Command Palette, and well loved tools, like List View. This test is intentionally more open ended to encourage exploration and to gather user experience feedback. It’s ultimately not about testing individual, new features and is more centered on testing how the features continue to come together. 

Since the 6.4 cycle is a bit shorter than others, this call for testing will only be open for two weeks rather than three so additional testing can occur as more features and refinements are released. 

Testing Instructions 

To use a prebuilt test site: 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-testing-call-25&d=v2 
  2. Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created. 
  3. This will launch a site for you to use for up to 24 hours. Select “Magic Login” to log in to the wp-admin dashboard. 
  4. Save the link to your site so you can access it again during the test. 

To set up your own test site: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty Three by going to Appearances > Themes.
  3. Install and activate Gutenberg 16.4 or 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/ after 16.4.

If you have any issues with manual setup, just comment on the post or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” me (@annezazu) in WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

What follows are open ended tasks to complete, intentionally listed without detailed instructions in order to better stress test what’s been shipped in 6.3 and discover where the experience can be clarified:

  • Pick and save a new style variation. 
  • Add a border to all Image blocks on your site and change the size of all H2 headings using Styles. 
  • Create an “About” page and turn on the Top Toolbar setting. Copy and paste content from this Google Doc, noting any issues in pasting with the format or content. 
  • Create a “Resume” page with a few different headings and use the Table of Contents 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. to better organize the page. 
  • Change the size and alignment of the Page title in your Pages template. 
  • At various points, use the Command Palette to either navigate between parts of your site or open various tools, like List View, or settings, like Top Toolbar. 
  • Create a menu that just lists your About page, a link to your WordPress.org profile with the Social Icons block, and a Search block. 
  • Create a synced pattern that details how to get in touch with you and add it to your “About” and “Resume” pages where you see fit. 
  • Duplicate the synced pattern from the Patterns section and make an unsynced version.

If you’d like to go further and have time to do so, please explore the following: creating pages and editing the template surrounding the page & building and inserting more patterns, synced and unsynced. 

If you get stuck at any point, please note it in the comments with details around where you tried to attempt to complete the task. 

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? Shout out to @nomadskateboarding for this addition!

Leave Feedback by August 23, 2023

#fse-testing-call

Help Test WordPress 6.3

Get ready for the next big release in the WordPress world! WordPress 6.3 is set to launch on August 8, 2023. Every 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. comes with exciting new features and improvements, and we need your help to make sure it’s the best it can be!

This is the first Call for Testing post for the 6.3 release. Be on the lookout 👀 for future posts that highlight additional enhancements in the release.

Stay up to date with the latest pre-release builds by checking the WordPress 6.3 Release Schedule for availability. For real-time updates and discussions, join the #core-test Slack channel. Engage in the testing community by participating in weekly scheduled team meetings and test scrubs.

Table of Contents:

Testing Environment 💻

Please only test on a 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. and not on a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site.

Once your development site is set up, please install and activate the WordPress Beta Tester Plugin. After activation:

  • Navigate to Tools > 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. Testing.
  • Set the update channel to “Bleeding edge” and click Save Changes.
  • Set the stream option to “Beta/RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. only” and click Save Changes again.
  • Navigate to Dashboard > Updates and click the Update to latest… button.

For more detailed steps, click this link for complete instructions.

Testing Tips 💡

At a high level, here are a few tips to keep in mind to get the most out of helping to test:

  • Test across different browsers.
  • Test in different languages.
  • Compare features on different screen sizes, including tablets and mobile.
  • 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.

Key Features to Test 🔑

Interface

Command Palette

The new Command Palette (formerly “Command Center”) allows users to quickly navigate to specific pages, templates, or template parts, as well as offers an easy way to start to create new content in the site editor. From within the editor just use Cmd-k (macOS) or Ctrl-k (Windows) and start typing for a context-aware selection of commands and shortcuts. (49330)


For a brief video demonstration of this feature in action, see the Command Center Request for Feedback post.

Extenders can also find information on creating custom static, dynamic, and context-aware commands with this feature’s public API. (51169)

Improved Page Management

The site editor now allows site builders to manage pages, edit content, access page details, and even draft new pages to be published later. Look for the new Pages menu from Appearance > Editor. (50857, 50767, 50565, 47142)

Content Editing in Site Editor

This feature allows site authors to seamlessly switch between template and page content editing within the site editor. 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. improvements also highlight what’s being edited – template or content – and allow for a more efficient workflow when building out a site. (44461, 50857)

Distraction Free Mode in Site Editor

Distraction Free mode, previously available in only the post and page editor, now brings the calmness to the site editor, offering a 1:1 preview to site authors. (51173)

Block Theme Preview

Previews of block themes now launch in the site editor, providing efficient previews of locally-installed themes. To see this feature in action, navigate to Appearance > Themes and click “Live Preview” on any block-based theme.


This feature can also be accessed by appending the following to a site editor or frontend URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: ?wp_theme_preview=theme-slug where theme-slug is a locally installed theme to preview (e.g. twentytwentytwo). (50030, Trac 58561)

Using the Style Book in the Styles’ Site View

The Style Book can now be activated while browsing global style options for easier visualization of effects on various page elements. (50566, 50393)

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

This update introduces support for global style revisions in the site editor, providing the ability to review or roll back to a previous state. (50089)

Top Toolbar Improvements

The editor’s “Top toolbar” has been refined with better handling of the limited space in this area, and better accounts for browser viewport width limitations. (40450, 49634)

Blocks

Time to Read Block

This feature has been moved to a future version of WordPress so that it may undergo additional testing before release.

The new Time to Read block allows you to display the estimated time the average reader takes to read the current page or post. Letting readers know right off what their estimated reading time is helps them to decide if they should continue reading, or save the post for later.

Begin by adding the block from the block picker, or from an empty Paragraph block starting with the forward-slash (“/”) key, and start typing the block name: /time to read. (43403)

Details Block

WordPress now introduces the versatile Details block, offering a seamless way to toggle the visibility of content, such as very long text, code samples, or spoilers. This block comes with two new inner blocks: Details Summary and Details Content. The summary is always visible, and the content is collapsable to be shown or hidden when readers toggle it.

Add the Details block through the block picker, or from an empty Paragraph block starting with the forward-slash (“/”) key, and start typing the block name: /details. (45055)

Color and layout support for the Cover block

The Cover block now supports the text color design tool. The enhancement makes it easier for users and theme authors to customize the color for all inner blocks with a single setting. Along with this benefit, this change makes it easier to handle transforms from the Media & Text block. (41572)

Footnotes

The new Footnotes block is a powerful addition that automatically links and formats footnotes, allowing users to work efficiently while annotating content. Not an insertable block per se, Footnotes are activated by highlighting text in a block, and then in the context menu selecting More > Footnote. (51201)

Caption Styling

Theme authors can now create custom styles for Caption elements directly via theme.json. Once added, options become available in the Styles interface, and allow creators and users to customize captions without touching code. (49141)

Image Aspect Ratios

Adding a powerful feature to the Image Block that makes usage of this block much easier. Until now, to effectively replace one image with another, their size had to be the same. The image aspect ratio section solves this problem completely. New image size controller that comes with aspect ratio, scale, width, and height options. (51138, 51545)

Patterns

More Curated Patterns

The new “Curated” filter in the pattern directory helps users differentiate between CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-bundled and community contributed patterns.

Easier Pattern Creation

Effortlessly design and save patterns, just like the convenient reusable blocks you’re familiar with. Now you can easily create and save your favorite patterns as synced or unsynced patterns, saving you time and effort when designing your projects. You can find your saved patterns under Custom Patterns. (46248)

Where to Report Feedback 🗣

If you find any issues, it’s best to share them on the WordPress.org alpha/beta forums, or if you are more technically savvy and comfortable, on Core Trac. For helpful reporting guidelines, refer to the Test Reports section of the Test Handbook.

Please share feedback as soon as you can before the release on August 8, 2023.

A big thank you to @webtechpooja, @boniu91, @annezazu, and @costdev for contributing to this post.

Changelog 🪵

2023-06-28

  • Initial post.

2023-07-06

  • Adding notice related to Time to Read block, which will not be a part of WordPress 6.3.

2023-07-27

#6-3, #fse-outreach-program, #full-site-editing

#call-for-testing

FSE Program Testing Call #24: Momery Makeover

This post is the twenty-fourth call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there. 

Overview

Similar to the twenty-third call for testing, various items slated for WordPress 6.3 are ready for exploration and testing. It’ll start out using an RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. version of the 16.0 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/ release to provide an early look at what’s to come and ensure feedback is timely with the upcoming release deadlines. While there are a lot of changes, big and small, expect this test to cover the following:

Taken together, these new tools and interface enhancements aim to create a more cohesive experience. Similar to a few prior calls for testing, the form of this test is going to be both prescriptive with steps to take in order to ensure certain features are covered and, at points, open-ended so you can explore and think of areas to improve. 

I will be out for two weeks so @bph will be covering responding to this call for testing. Big thank you!

Framing

You run a website with a few others for a fictional town called Momery where you all share upcoming community events for folks to join. After a recent meeting about the website, your task is to implement a few changes: a new footer for parts of the site, a new post layout on the homepage to remove images, a call to action to encourage folks to host across your site, and a new page. As you work, you rely on 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. to try out different options and patterns to speed up creation. 

Testing Instructions 

To use a prebuilt test site: 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-call-for-testing-24&d=v1 
  2. Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created. 
  3. This will launch a site for you to use for up to 24 hours. Select “Magic Login” to log in to the wp-admin dashboard. 
  4. Save the link to your site so you can access it again during the test. 

To set up your own test site: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty Three One by going to Appearances > Themes.
  3. Install and activate Gutenberg 16.0 RC1 or the latest version of Gutenberg after 16.0 RC1. 
  4. Head to Tools > Import and import this file to have access to the same content as above. From there, create a simple menu. 

If you have any issues with manual setup, just comment on the post or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” me (@annezazu) in WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

Create a few new items to exist across your site

  1. Head to Appearance > Site Editor > Templates > Home.
  2. Change the Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. 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. pattern to use a different one that doesn’t show the featured images of each post.
  3. Make the menu 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. always show up as an icon with three lines instead of two.
  4. Save changes.
  5. At the bottom of the template, create a new Footer template part with a full width layout and three columns using the supplied patterns. Ensure this template part matches the background of the site.
  6. Create a new menu within the new template part with links to Host, Partners, Pricing and a search block. 
  7. Create a reusable block with a call to action around hosting an event with Momery with buttons linking to both the “Host” and “Pricing” pages (select the blocks of your choosing > open the three dot menu in the block toolbar > select “Create Reusable block”) . As a reminder, consider how patterns might be used for inspiration.
  8. Save changes.
  9. Use the command-k tool to invoke the command center to ensure both the new footer template part and the reusable block with the call to action exist across your Page template and Single template. 

Edit pages and templates

  1. Edit your About page to add 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. from your media library. Navigate there however you’d like.
  2. Edit your Page template so that the featured image appears full width at 400px height with a duotone 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. of your choosing. 
  3. Change the location of the featured image for the Page template. Make any other changes you’d like to it!
  4. Click the title bar to open the command center and switch to the Contact page. 
  5. Edit the Contact page to add in your preference for communication (email, text, phone call, video chat). 
  6. Click the W icon to open the Site View, find the Pages section, and click the + button to draft a new page titled “Portfolio”. Make any changes you’d like for the page, including adding any patterns.
  7. Save changes.
  8. Go back to your dashboard when done, head to Pages, and publish the page you just created to ensure it shows up on your site. 

Roll back some changes

  1. Return to the Site Editor by going to Appearance > Editor and select Templates > Home.
  2. Open block settings and head to the Template tab. 
  3. Notice there is a revision section at the bottom and select it. 
  4. Roll back to the prior Footer template part so that just your home template is no longer using one with the three columns, instead opting for a simpler version.
  5. Re-add the call to action reusable block you created.
  6. Save changes.

Explore the Library

  1. Click the W icon to open the Site View and select Library. 
  2. Find and open the reusable block you created earlier and make a few changes to the text.
  3. Save changes and check to ensure those changes are visible across your site.

Explore further – here are some ideas:

  • Make changes to your various pieces of your site and explore using the revision history more.
  • Change Style variations to switch up the theme style. In the Site View, use the addition of the Stylebook to see all of your changes.
  • Use the command center to continue jumping around to different parts of your site, make change, and save.
  • Explore creating and editing more pages, templates, template parts, and reusable blocks.

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?
  • 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? Shout out to @nomadskateboarding for this addition!

Leave Feedback by June 28th, 2023

#fse-testing-call

FSE Program Testing Call #23: Rapid Revamp

This post is the twenty-third call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there. 

Overview

With the roadmap to 6.3 published and another 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/ out in the wild, it’s time to test some of the upcoming features that are in the works to upgrade and polish the experience of using the Site Editor:

  • Styles in Site View displaying style variations and improving discoverability of the more granular Style interface. 
  • Pages in Site View, rendering the last 10 pages with a link to the wp admin page list at the bottom.
  • Revision history for Styles, allowing you to roll back as you’d like.
  • Command center, offering a quick way to switch between parts of your site. 
  • Add previewing for block themes unlocking the ability to check out a 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 before activating in the same Site Editor experience. 
  • Navigation block using the Interactivity API as a way to test the new, in-progress 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.. This is just a technical change and the aim here is to ensure the experience is the same. 
  • Details block, adding a new way to hide and reveal information. 
  • List View: Allow dragging to all levels of the block hierarchy.

Much of the above is in an iterative state with more to come, like improved Detail pages with additional functionality, so this is a great chance to provide early feedback on important features. As always, the steps here are mean to guide you through the high level view of the features but you’re welcome to take the experience further by customizing more. 

Framing

Like the last call for testing, you run a site that captures “Daily Delights” about the power of everyday moments to create joy. When you first put the site together, you didn’t have a full vision of what you wanted and, after a recent post went viral, you want to make some quick changes to better reflect what you’re accomplishing. As part of this, you preview a block theme to get a sense of whether you want to switch, create a new “Work with me” page, and update your “About” page while making high level changes to your templates and Styles. Streamlining and supporting this experience are the new command center tool and revision history for styles.   

Testing Instructions 

To use a prebuilt test site: 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-call-for-testing-23&d=v1 
  2. Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created. 
  3. This will launch a site for you to use for up to 24 hours. Select “Magic Login” to log in to the wp-admin dashboard. 
  4. Save the link to your site so you can access it again during the test. 

To set up your own test site: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty Three One by going to Appearances > Themes.
  3. Install and activate Gutenberg 15.8+. From there, head to Gutenberg > Experiments and turn on the Command Center, Details block, Block Theme Previews, and Navigation block experiments.
  4. Head to Tools > Import and import this file to have access to the same content as above. From there, create a simple menu. 

If you have any issues with manual setup, just comment on the post or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” me (@annezazu) in WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

Preview block themes

Note: If you want to explore other block themes, you’re free to do so! You will have to install them first for the preview to work due to this bug. Please just ensure that you end up using “Twenty Twenty-Three”. 

  1. Head to Appearance > Themes where you’ll see a few block themes installed. Select the option to Live Preview the “Twenty Twenty-Three” theme. 
  2. This will take you to a new preview option using the Site Editor where you can explore the theme. 
  3. Select the Style section and choose a style variation you like. Click “Activate and Save”. This will keep you in the Site Editor with the new theme in place. 

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

  1. Click the pencil icon next to Styles to open up more granular style options. Make whatever changes you’d like: add a custom color to your palette (Colors > Palette > Custom) or change the details of individual heading levels (Typography > Headings). Save your changes. 
  2. After making and saving a few changes, click the three dot menu in the Styles panel and select the last option for revisions. Here’s a visual
  3. View different revisions by clicking on them and roll back to a prior version of your choosing by selecting “Apply”. 
  4. Make more changes to Styles either to the overall site or to individual blocks. Once more, view the revisions and decide whether to roll back. 

Content and template editing 

  1. Click the W icon to return to the Site View and use the back arrows to return to the main Design section before selecting the Pages section. From there, choose “About” and click on the canvas to edit it or click the pencil icon next to About in the 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..
  2. Add a details block and shorten the About page by writing a one line summary where it says “Write summary”. Take the remaining About page content, cut it, and add it to the section where it says “Type / to add a hidden block”. Feel free to customize this as much as you’d like. 
  3. Add 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. to the page by clicking the upload icon when hovering over the block and, using List View, move it closer to the top of the template. Make any additional changes to the block order that you’d like using List View. 
  4. Save your changes.

Using the command tool 

  1. Click the W icon to return to the Site View and use the back arrows to return to the main Design section before selecting the Template section. From there, choose the “Home” template and click on the canvas to edit it or click the pencil icon next to the template name in the sidebar.
  2. Select the Navigation block and add a new item to the menu by clicking the + button in the editor itself (not in the settings sidebar).
  3. Instead of adding a current page, search for “Work with me” and notice the option to create a draft page with that title. Select that option.
  4. Press cmd + k (or ctrl + k on Windows and Linux) shortcut to open the command center and type in “About” to quickly switch to the About page.  
  5. Add in a brief note about being open to working with others in the About page content before using the same cmd + k (or ctrl + k on Windows and Linux) shortcut to switch back to the homepage template by typing “home”. 
  6. Select the overall Navigation block and make a few style or settings changes, like changing the color options or the overlay display.
  7. Click the W icon to return to the Site View and notice you have a few changes to save. Click Save and complete the save process.

Publish and view

  1. Use the back arrows to return to the main Design section before selecting the Pages section once more. 
  2. Select “Manage all pages” where you will be brought to the Pages section of the WordPress admin. 
  3. Publish the “Work with me” page before viewing your site and exploring it to ensure all of the changes you want look as you want. Be sure to click on navigation items!

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?
  • 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? Shout out to @nomadskateboarding for this addition!

Leave Feedback by June 8th, 2023

#fse-testing-call