Call for Testing: Gutenberg 4.2 Pre-release

Gutenberg is currently the main focus for the testing group and it is the new editing experience in WordPress. The goal of Gutenberg is to simplify the creation of rich pages and posts in WordPress by replacing old custom HTML, CSS, and shortcodes with native Blocks.

To help test, please download from the releases page or use the button above, install/activate the plugin, and try testing any of the items listed below (or anything listed in the 4.2 release notes). Testing even just a few items is helpful. All testing is welcome!

  1. In block toolbars, check that all writing formatters (e.g. bold, italic, link, strikethrough) work as expected. Try both clicking and keyboard shortcuts. Try from different browsers. (10209)
  2. Add several blocks and use the sibling inserter to add new blocks between them. Try from different browsers. (11018, 11243)
  3. Add new categories to a post. Save draft. Refresh. Are categories added as expected? (10089)
  4. Type some text into a paragraph block and check that pressing Escape makes the block toolbar appear (note: Unified Toolbar mode should be off for this test). (10906)
  5. Type /img into a new block and check that the image block appears as an option. (10955)
  6. Add the Latest Posts block, toggle “Display post date” on, publish or preview the post and check that the has-dates class appears in the source code both in the editor and on the front end. (10727)
  7. Using a small screen (mobile), check that you can open and close the Options panel from More menu (three dots, very top right) > Options (near the bottom). (10894)
  8. Add an image, add a link for the image (sidebar near the bottom), toggle “Open in New Window” on, publish the post and check that a new window opens when you click on the image. (9520)
  9. Add a button block and change the background and text color. Do the color changes work as you expected? (10658)
  10. Add a file block, attache a file, publish the post, and check that the “Download” button works normally. Try different types of files. (10976)
  11. Turn on Unified Toolbar mode. Add a Media & Text block and check that you can resize media. (10913)
  12. Add a classic block and include some inline images, links, bold text, italic text and try modifying each of those after making edits throughout.  (10723)
  13. Using a small screen (mobile), log in as a contributor, submit a post, and make sure the “Submit for Review” button appears. (10941)
  14. General: performance improvements were made to toolbars, inserters, and the classic block. Did you notice the changes? (ref)
  15. General: some descriptions of blocks and options in block settings have changed. If you spot one that doesn’t make sense to you, leave a note in the comments here or ask about it in #core-editor on Slack.
  16. General accessibility: in the WP Admin main menu on the left, go to Gutenberg > Demo and try to navigate to the pullquote block using the keyboard. Did keyboard navigation work as expected for you? Why or why not? Add notes for this one to the comments here and I will pull details and compile them for a succinct issue if needed. 🙂
  17. There is more to test! See What’s new in Gutenberg? (30th Oct) .

Accessibility Related

I wanted to call out accessibility-related testing steps this time in order to highlight some of the important accessibility updates coming through right now and because it may make sense to group them together while testing. Anyone can help test these!

  1. Type some text into a paragraph block and check that the toolbar shows when you press Escape. (10906)
  2. Add a Media & Text block with an image and change the alt text for the image. (11073)
  3. Open the sidebar, click “Document”, press Tab, press Spacebar, check that the “Block” tab is still focused. (10917)
  4. Using a screen reader (if you have a Mac you can use VoiceOver and Safari), open the block inserter, search for a block, and check that you hear an audible response for the number of search results or “no results”. (10755)
  5. Using a screen reader (if you have a Mac you can use VoiceOver and Safari): add, edit, and then remove a link and check that those actions are announced audibly. (10795)

Bonus Round

I’m also adding a separate section as an optional bonus round for testing. You should test these if you know of (or can find) custom plugins that use some of the updated capabilities (such as registering new toolbar buttons in blocks) or if you would like to help test Gutenberg with popular plugins. If you think of a plugin you’d like to see added, please comment to note it!

  1. Add a WordPress embed and check that there is not a big empty space after the block. (10985)
  2. Find a plugin that adds buttons to any block toolbar and check that the added buttons are working as expected. (11196)
  3. i18n: using a small screen (mobile) and with the site language set to something other than English, log in as a contributor, submit a post, and make sure the “Submit for Review” button appears. (10941)
  4. i18n: change your site language to something other than English and check that taxonomy panels display localized strings. (8449)
  5. i18n: install a plugin which contains a block name made in a non-Latin script (e.g. Список for the List block in Russian) and check that the block appears when you type /сп into a new block. Note that searching for names with diacrytics should also work. (10961, 10770)
  6. Plugin developers can now disable post publishing (lock the post) if certain conditions aren’t met such as a required a minimum title length, requiring a featured image, disallowing certain types of content, etc. If you have a plugin which has a pre-publish lock or checklist, can you note it in the comments with testing steps? 🙂 (10649)
  7. Test with Advanced Custom Forms (ACF).
  8. Test with Yoast SEO.

If you find a new bug, please file it in gutenberg on GitHub. Thank you!

Block developers: note that there are several deprecations in 4.2 to keep an eye on. It is also noteworthy that you can now write a format that is usable across all blocks that use RichText (10209).

Please join us in #core-test on WordPress Slack any time if you have questions about testing!

#4-2, #call-for-testing, #editor, #gutenberg

Testing Flow in Gutenberg: Instructions for how to contribute to usability testing

The new editing experience is now ready to be tested! In this round of usability testing, we invite anyone from the WordPress community to either complete a test, or moderate an observational usability testing session. We have worked hard to make the tests simple to administer, so you can contribute even if you have zero usability testing experience.

How you can help!

  1. Run through one of the three usability tests yourself (A, B C)
  2. Help others run through one of the three usability tests
  3. Recruit your [mother | sister | partner | grandfather | child | puppy | entire social media network] to run though one of the three user tests

What feedback are we looking for?

We welcome all kinds of feedback (our doors are always open, join the conversation in #core-editor on the core WordPress Slack). To make sure we get a diverse range of perspectives, our key focus is to deploy the user tests to a wide, global audience. In particular, we are really keen to reach participants outside of the WordPress community.

About the test

There are three usability tests that you can choose from. The tests are almost identical, except for the complexity of the task that you will be asked to complete. Each test scales in time to take and difficulty. You are free to complete any of these tests, irrespective of whether you have prior WordPress experience or not.

Each usability test consist of three sections:

  1. Part 1 asks you some general questions about your experience with using WordPress
  2. Part 2 asks you to complete a task using the Gutenberg editor
  3. Part 3 asks some questions about your editing experience. You also have the option to upload your screen recording and answer some questions about the video footage in this section

Running the usability test

If you are new to usability testing, please have a quick look at our Guide to observational usability testing. There are some handy tips that will help you run a fun usability testing session. We also have a quick Guide to screen recordings for those who have not done that before.

In order to complete the usability test, you will need to set up a few things:

  1. Get your hands on a device (laptop, tablet, desktop or mobile device)
  2. Ensure that you are familiar with the process for how to run a usability test
  3. Ensure that you know how to do a screen recording on your device
  4. Open two browser windows, one with the test instructions (either A, B or C) and one with the Gutenberg editor loaded with the Twenty Seventeen theme. Example setup here.
  5. Follow the instructions in the test
  6. Optionally, upload your screen recording
  7. Optionally, write up a blog post about your observations*

How to report your results

There are three ways in which you can report back your user test results:

  1. You can simply answer all the questions in the test instructions
  2. You can optionally analyse your screen recording footage by answering the video coding questions in Part 3 of the test instructions
  3. In addition, you are welcome to write up your test results in a blog post like this one. Share your link with us in the comments below and in #core-editor on the core WordPress Slack

If you are new to usability testing, you may find it confusing to figure out how to provide feedback. A really easy rule to follow is to articulate what the user did when they hit an obstacle. A common mistake for new user testers is to jump straight into solution or resolution mode. While we all love to solve problems (us too!!), doing this during the testing phase is likely to cloud our ability to uncover the underlying causes of the friction. For this reason, we prefer to keep identifying the friction separate from fixing the friction.

Get Involved

Run through one of the three tests yourself, set up a user testing session or join one at a WordCamp near you.

Call for testing: Gutenberg

Gutenberg is now in beta, with that comes a new opportunity for testing.

There is now a testing page dedicated to Gutenberg, you can find it right here. There are currently 2 types of testing being looked for, each has a central feedback form.

Looking for other ways to give feedback? You can also write a blog post (let the editor team know about that in Slack #core-editor) or add an issue to the GitHub repository.

Your feedback and testing is really important at this stage of Gutenberg, it really does matter and help make this as good as it can be.