Comparing the Classic Editor and Gutenberg

Some videos of people using the Classic Editor were shown in the State of the WordState of the Word This is the annual report given by Matt Mullenweg, founder of WordPress at WordCamp US. It looks at what we’ve done, what we’re doing, and the future of WordPress. https://wordpress.tv/tag/state-of-the-word/. 2018. These videos illustrate some of the pain points found in past usability testing, studies, surveys, and feedback. We added a few tests 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/ with same tasks and are sharing them here.

Demographics

  • Classic Editor: 10 participants (6 female, 4 male), 3 countries, age range: 20-39, web expertise: average or advanced, WP experience: novice or average, NPS: 6.4.
  • Gutenberg: 3 participants (2 female, 1 male), 2 countries, age range: 19-36, web expertise: average or advanced, WP experience: novice or average, NPS: 8.3.

Tasks

  • You are on assignment to write an article for a new travel blog. Luckily, they are sending you to your favorite vacation spot! Your instructions are to choose a topic you think will get people as excited as you are about this place. It’s up to you to pick a focus (food, activities, lodging, etc.). Start at https://plastic-fox.jurassic.ninja/wp-admin/post-new.php
  1. Log in with username demo and password pass037538
  2. Give your post a title and add one sentence.
  3. Add two images side-by-side. 
  4. Add a YouTube video.
  5. Click “Preview” to check your work so far.
  6. Go back to editing and add a caption to the video you added before.
  7. Add an image on the left and some text on the right and a paragraph below it.
  8. Move the video or images from one part of the content to another (i.e. from the top to the bottom or vice versa).
  9. You love to close each article with the same snippet. Open the following link, copy the HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites., and add it to the end of your post.
1<img draggable=”false” class=”emoji” alt=”<img draggable=”false” class=”emoji” alt=”” src=”https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/1f44b.svg”>” src=”https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg”>
  1. Publish the post!

Classic Editor Highlight Reels

Gutenberg Highlight Reels

Although the questions were initially created for the Classic Editor, the same tasks in Gutenberg were compared.

Net Promoter Score (NPS)

We asked, “based on your experience today, how likely are you to recommend this editor to a friend or colleague? (0=Not at all likely, and 10=Very Likely)?” after each test. Users rated the Classic Editor experience at an average of 6.4 and the Gutenberg experience 8.3.

Links to Full Videos

  1. Session 1 — VideoPress
  2. Session 2 — VideoPress
  3. Session 3 — VideoPress
  4. Session 4 — VideoPress
  5. Session 5 — VideoPress
  6. Session 6 — VideoPress
  7. Session 7 — VideoPress
  8. Session 8 — VideoPress
  9. Session 9 — VideoPress
  10. Session 10 —VideoPress
  11. Session 1 — VideoPress
  12. Session 2 — VideoPress
  13. Session 3 — VideoPress
    (One task was modified here accidentally: “Add two images side-by-side in a gallery” and this little bit helped the user discover how to complete the task.)

There’s More!

A sitebuilding study is under way, and you can volunteer to get involved or follow along on the Make WordPress Design blog.

#gutenberg, #usability-testing

Help Test WordPress 6.8

Mark your calendars! WordPress 6.8 is set to launch on April 15, 2025. WordPress 6.8 will be the first major release of 2025 and will focus primarily on being a polished and bug-fix release. Get ready for a more refined and seamless WordPress experience than ever before! 

Testing early means fewer surprises for users down the line! Whether you have a few minutes or a few hours, your help in catching bugs early during the release cycle ensures a smoother upgrade experience for millions of users after the stable release. Every contribution counts and is deeply appreciated. 

Let’s work together to refine WordPress 6.8! 💪

Stay up to date with the latest pre-release builds by checking the WordPress 6.8 Release Schedule. 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 Tips

WordPress doesn’t require you to be a certified software tester or professional QA to contribute to testing; use WordPress as you normally would for your own needs. If you encounter any issues or feel something isn’t working as expected, please report them. 

Not sure about the expected behaviour? No worries! Join the conversation on WordPress Slack or create a ticket on Trac, where a helpful global WordPress community is always ready to assist.

Recommendations for Testing WordPress 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. Versions:

  • Test CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Features that Matter to You:  Use your site for the purpose it was created. For instance, if you’re a blogger, running a social platform, or managing an e-commerce store, set up a staging site (ask your hosting provider if you’re unfamiliar with the staging site). Update WordPress in the staging environmentStaging Environment A staging environment is a non-production copy of your site. This is a private place to build the site -- design, copy, and code -- until your client approves it for production or live. Sometimes used in addition to, or as a Development Environment., and continue using your site as you would daily. This will help you identify any issues that may affect your regular workflow. Take note of any issues or troubles you experience after the update. Do not test or update your live site with a beta version for testing purposes.
  • Use the General Checklist provided in the post below to verify that everything functions as expected after the update.

Ways to Test WordPress Beta Versions

There are multiple ways to test WordPress development or beta versions:

Playground

Playground is an easy and fast way to test beta or release candidateRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. versions of WordPress without setting up a full environment. You can quickly spin up a test environment using WordPress Playground.

Local Hosted Site

You can make use of software like Local or wp-env to create a local WordPress site. Once the site is ready, you can install the Beta Tester plugin to switch to the beta version of WordPress.

Setup Steps:

  1. Download and install Local.
  2. Create a new WordPress site.
  3. Once your site is up and running, you can use 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 to switch it to the development or beta version of WordPress. This plugin makes it easy to install pre-release versions of WordPress.
    To use the plugin:
    1. Install and activate the WordPress Beta Tester plugin.
    2. Navigate to Tools > Beta Testing.
    3. Choose the Bleeding Edge or Point releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. with Nightlies option, depending on what you want to test.
    4. Click on Save Changes
    5. After the changes are saved, you should receive the update notification. Kindly update your WordPress version.

For more detailed instructions, follow this guide.

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

If you prefer working with command-line tools, use WP-CLI to install a WordPress beta version quickly. 

Steps:

  1. Create a local WordPress site using your preferred method.
  2. Once the site is set up, open your terminal and navigate to the root directory of your WordPress installation.
  3. Run the following command to update to the latest beta/RC version:
wp core update --version=6.8-beta1

OR

wp core update --version=6.8-RC1

(Keep updating the version number as needed. E.g. –version=6.8-beta2)

This method helps you to switch between different versions quickly, making it easier to test specific builds.

Using a Staging Site

Create a staging site for your live production siteProduction Site A production site is a live site online meant to be viewed by your visitors, as opposed to a site that is staged for development or testing. and update it to the WordPress beta/RC version. This lets you safely test the new version without impacting your live site. Make sure everything functions as expected before applying updates to your production environment.

Testing Patches

If you plan to test patches, follow these instructions to set up a WordPress development version locally.

Using Playground, you can also easily test individual Core tickets without installing any software in your system, and this is the fastest way to test any PRs.

If there is a specific PR in the wordpress-develop or gutenberg repo that you’d like to test in the browser, you can do so using the following links. Enter the PR number, and the rest will be taken care of.

General Testing Checklist

If you want to quickly test the updated WordPress version’s compatibility with your site, please verify the following important checks. Enable debugging in wp-config.php to capture the warnings, errors or notices.

  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 any new errors or warnings.
  4. Confirm there are no layout breaks or misaligned elements.
  5. Test links and permalinks to ensure there are no 404 errors.
  6. Verify that posts, images, and media are displayed correctly.
  7. Ensure the sitemap and robots.txt files are functioning properly.
  8. Ensure full access to the admin dashboard without errors.
  9. If your site has custom blocks, create content in a new 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 edit existing content.
  10. Create a new post: 
    1. Add content
    2. Copy-paste text
    3. Manually add media files. 
    4. Save the post
    5. Observe the console for any issues.
  11. Create a new page:
    1. Add content
    2. Verify its display in different browsers.
    3. Verify its display in responsive mode.
    4. Verify that the functional part is working as expected regardless of browser or device type.
  12. Keep the browser’s developer console open and check for any errors, warnings, or notices.
  13. Open the error log file and check for notices, warnings, and fatal errors.
  14. Review user roles and permissions to ensure they remain intact.
  15. Verify that any scheduled posts or automated tasks (like backups) still function as intended.
  16. Ensure all integrated services (like payment gateways or analytics) are operational.
  17. Open your site in different browsers and verify that all functionalities work as expected.

Key Features to test

Editor

New default rendering mode for editor via post type supports

The GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ PR #69286 introduces a new approach to setting the default rendering mode in the WordPress block editor based on post-type support. This enhancement allows developers to define how content is rendered in the editor by specifying parameters within the support property of a post type.

Test Steps:

  1. Install and activate any block theme. E.g 2025
  2. Open a new page
  3. Verify that it renders in a template-locked state.
  4. Now, disable the “Show Template” 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. and reload the page.
  5. Verify that it uses “post-only” as the default rendering mode.
  6. Re-enable “Show Template” from the sidebar bar.
  7. Open a post and confirm that it still renders in “post-only”.
  8. Now, switch to a classic theme. E.g. 2011
  9. Confirm that posts and pages both are loading correctly without showing the template.

Design Improvements

The design focus is refinement and fixing issues requiring design feedback. Let’s check them one by one.

Stylebook improvement for classic theme

The Style Book now provides a more structured layout, making it easier to preview and understand site colours, typography, and block styles.

Support is available for classic themes that either support editor styles via add_theme_support( 'editor-styles' )  or have a theme.json file. 
Each block example and style group is labelled for better clarity. For classic themes, the Style Book now supports site patterns, which have been relocated to Appearance > Design > Patterns for a more intuitive experience. Previously, patterns were listed under Appearance > Patterns.

Testing Instruction:

Please help identify potential issues and suggest areas for improvement by logging your feedback on #68036. Follow PR 66851 for more details about this fix.

Reset Button for Color Control

A new Reset button has been added to the colour control, allowing users to quickly revert the color changes.

Testing Instruction:

Test Steps:

  1. Create a page and a paragraph block. 
  2. Add text/background/link colors to the paragraph.
  3. Observe the change in the color.
  4. Now, hover/focus on the element and observe the presence of the reset(-) button.
  5. Clicking on the reset button resets the applied color.

If you encounter any issues or have suggestions, feel free to drop your feedback in this ticket #41866.

Zoom-Out Mode Enhancements

Users can now apply different section styles and designs directly from the toolbar.

Testing Instruction:

Test Steps:

  1. Navigate to Appearance > Editor
  2. Edit the page and choose the pattern.
  3. Enter into zoom-out mode.
  4. Observe the toolbar with a newly added icon.
  5. Verify that there should be no shuffle button present and that the change design option should be visible.
  6. Click on the icon, and it will change color based on the different styles.

Follow PR #67140 for a detailed understanding of the implementation path.

Improved Font Picker Previews

The font family list in Global Styles now previews each font directly in the dropdown. This provides a better visual indication of how the font will look before applying it.
Testing Instruction: