Call for Testing: Gutenberg 5.5 rc.1

This release includes:

  • Try using a Group block by adding some inner blocks to it and changing the Group block background color.
  • Add vertical alignment support to the Media & Text block.
  • Add the image fill option to the Media & Text block.
  • Lots of bug fixes and enhancements.

You can find a full list to test against here.

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. The Gutenberg plugin is currently the main focus for the testing group and Gutenberg is the new editing experience in WordPress.

To help test, please download gutenberg.zip from the releases page or use the button above, install/activate the plugin, and try testing the new features and also if existing flows work.

You can also see other options for getting set up for testing in the handbook. When testing, use the latest stable release of WordPress (5.1) and the Gutenberg 5.5 plugin (download using the links above). All testing is welcome even if it’s just one or two items!

If you find a new bug, please file it in gutenberg on GitHub. Thank you! Please join us in #core-test on WordPress Slack any time if you have questions about testing!

#5.5, #call-for-testing#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.

Gutenberg usability testing meeting three

Last week we had a usability meeting. The meeting time wasn’t good for everyone, so let’s change the time this week.

When? Tuesday 31st October 19:00 UTC.
Where? wordpress.org Slack #core-flow: the testing channel.
Who should come? Anyone interested in helping test Gutenberg, all skill levels welcome.

Last week we talked about plans for testing. We will continue that conversation this week.

#gutenberg

Call for Testing: Gutenberg 5.0

This release includes two new blocks and a way to change the focal point in a cover image block. It also implements a performance improvement when adding/removing blocks, several enhancements, bug fixes, documentation improvements, tooling updates, and removed PHP code now maintained in Core.

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. The Gutenberg plugin is currently the main focus for the testing group and Gutenberg is the new editing experience in WordPress. To help test, please download gutenberg.zip from the releases page or use the button above, install/activate the plugin, and try testing any of the items listed below. You can also see other options for getting setup for testing in the handbook. When testing, use the latest stable release of WordPress (5.0.3) and the Gutenberg 5.0 plugin (download using the links above). All testing is welcome even if it’s just one or two items!
  1. Add an RSS feed using the new RSS block. (7966)
  2. Find the Amazon instant preview link for your favorite book and embed it into a post. (13510)
  3. Add a Cover block and change the focal point for the image. (10925)
  4. Add several blocks in quick succession (it should feel faster than in the previous release). (13067)
  5. Try to create a reusable block as a contributor (you should not be able to). (12378)
  6. Log in as an admin and create a reusable block. Log in as an author or contributor and try to delete it (you should not be able to). (12378)
  7. Log in as an author and try to edit the reusable block created in the previous step (you should not be able to). (12378)
  8. Add a SmugMug photo or slideshow embed. Check to make sure the embed works on the front-end but you do not see a preview in the editor (12961).
  9. Add a gallery block with 4 images and set the columns to 4 then click the pencil icon in the gallery block toolbar and remove an image. Check that the columns option changes to 3. (13423)
  10. Create a new category with no published posts in it. Start a new post and try to assign the new category to it (you should not be able to). (13549)
  11. Add a columns block with an odd number of columns and check that the margins on the right and left work as expected. Try from different themes. (12199)
  12. Add a list block and use the indent and outdent buttons on various list items in the list. (12667)
  13. Accessibility: using a screen reader, go to the More menu and toggle between the views for Top Toolbar, Spotlight Mode, and Fullscreen Mode and check that the change is announced properly. (13385)
  14. Accessibility: using a screen reader, use the block inserter to search for any block and check that the label “Search for a block” is announced correctly followed by the number of results. (13388)
  15. For more, see pull requests merged in the 5.0 milestone.
If you find a new bug, please file it in gutenberg on GitHub. Thank you! Please join us in #core-test on WordPress Slack any time if you have questions about testing!

#5-0, #call-for-testing, #gutenberg

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.

+make.wordpress.org/core +make.wordpress.org/design

#needs-testing

Call for Testing: Gutenberg 4.9

This release includes a lot of tweaks, bug fixes and performance improvements. It includes a new Async Rendering Mode for blocks so it’s important to test it with custom blocks.

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. The Gutenberg plugin is currently the main focus for the testing group and Gutenberg is the new editing experience in WordPress. To help test, please download gutenberg.zip from the releases page or use the button above, install/activate the plugin, and try testing any of the items listed below. You can also see other options for getting setup for testing in the handbook. When testing, use the latest stable release of WordPress (5.0.3) and the Gutenberg 4.9 plugin (download using the links above). All testing is welcome even if it’s just one or two items!
  1. Open a large document and quickly type a short word. Typing should not feel slow, if it does please note the document size you tested. (13056)
  2. Check custom blocks from many available plugins. (13056)
  3. Mark a post as pending review and check that the publish date still says “immediately”. (13178)
  4. Upload an image with a title in its metadata and check that the title in the media library is the same. (13193)
  5. Try applying background colors for the table block stripes. (10611)
  6. Try using the fullscreen mode in different browsers including Edge and notice that you only have a single scrollbar on long posts. (13327)
  7. Try using the alignment toolbar in the Cover and Categories blocks .
  8. For more, see pull requests merged in the 4.8 milestone.
If you find a new bug, please file it in gutenberg on GitHub. Thank you! Please join us in #core-test on WordPress Slack any time if you have questions about testing! #4-9, #call-for-testing, #gutenberg

Call for Testing: Gutenberg 4.8

This release includes 5.0.3 fixes and other small improvements, including another round of performance improvements. It will line up with includes WordPress 5.0.3 fixes but it doesn’t align with it completely and can be first tested as plugin version 4.8.

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. The Gutenberg plugin is currently the main focus for the testing group and Gutenberg is the new editing experience in WordPress. To help test, please download gutenberg.zip from the releases page or use the button above, install/activate the plugin, and try testing any of the items listed below. You can also see other options for getting setup for testing in the handbook. When testing, use the latest stable release of WordPress (5.0.2) and the Gutenberg 4.8 plugin (download using the links above). All testing is welcome even if it’s just one or two items!
  1. Open a large document and quickly type a short word. Typing should not feel slow, if it does please note the document size you tested. (12312)
  2. Check that drag and drop works as expected when adding media before/after blocks and on the media placeholder. (12852)
  3. Open the editor and try to drag an image that is larger than the max file upload limit. You should see a relevant error message. (10224)
  4. Add a File block, upload a large file, click the Copy URL button. Make sure the URL copied does not start with “blob”. Throttle your connection speed if needed. (12499)
  5. Add a gallery of images, set an alignment, convert the gallery into images and verify the alignment is preserved. (12242)
  6. Create a post with multiple paragraphs, ensure you have a large number of plugins active that make the left hand menu long (e.g. 10 custom post types), publish or refresh, attempt to scroll to the end. (12644)
  7. Add a Latest Posts block, add an extra class in Additional CSS Class box, make sure the date position does not change. (12725)
  8. Add a Latest Posts block, click on Align Center, and check that the content centers as expected. (12306)
  9. Add a short sentence to a paragraph block, enable dropcaps from block options, hover over the block and note the hover area is shown around the dropcap and content. (12177)
  10. Create a classic post, insert an image with a caption AND link to the media file, publish the classic post, edit the post in the block editor, convert the classic block to blocks. There should not be a duplicate image. (12315)
  11. Open any post, run this command in the console dispatch action command 'wp.data.dispatch('core/editor').lockPostSaving('lockName');' then click on “Update”. Update button should not do any action if it is locked. (11809)
  12. If you use custom post types with taxonomies, ensure all taxonomies have show_in_rest, and check that you can see more than 10 taxonomies. (12971)
  13. If you use custom posts types with 'publicly_queryable' => false, check that you can save the post without any problems. (12800)
  14. For more, see issues in the 4.8 milestone.
If you find a new bug, please file it in gutenberg on GitHub. Thank you! Block developers: make sure to be aware of deprecations. Please join us in #core-test on WordPress Slack any time if you have questions about testing! #4-8, #call-for-testing, #gutenberg

Call for Testing: Gutenberg 4.7

This Gutenberg release includes several bug fixes and focuses on improving the performance of the block editor, particularly when editing large posts. It will line up with WordPress 5.0.1 and can be first tested as a plugin version 4.7.

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. The Gutenberg plugin is currently the main focus for the testing group and Gutenberg is the new editing experience in WordPress. To help test, please download gutenberg.zip from the releases page or use the button above, install/activate the plugin, and try testing any of the items listed below. You can also see other options for getting setup for testing in the handbook. Currently, you should be testing with WordPress 5.0 stable alongside the Gutenberg 4.7 plugin. This is because 5.1-alpha trunk is currently undergoing some cleanup (normally, testing with trunk is fine). All testing is welcome even if it’s just one or two items!
  1. Create a very long post with thousands of words. (12480)
  2. Open a very long post and begin typing to add new content. (12386, 12460, 12521, 12547)
  3. Create a large post with many different types of blocks. (12384, 12510)
  4. Add an image to the Media & Text block and try to resize the image. (12619)
  5. Add an image by selecting one from the media library, click undo, and make sure the placeholder shows properly at that point. (12567)
  6. Copy and paste content from one block to another. Switch to Code Editor mode. (12543)
  7. Insert several images into a classic block and make sure they are inserted into the correct location where the cursor was positioned. (10509)
  8. Try tabbing through blocks and check to see if it works as expected even after pressing Ctrl + backtick twice to jump to the top toolbar and back to the content area. (12390)
  9. Create, delete, add, then trash a reusable block. After it is trashed checked to see that a “Deleted or unavailable” message appears in its place in the editor. (12345)
  10. Copy content from a word processing app and confirm no spaces are collapsed unexpectedly. (12166)
  11. Edit a paragraph as HTML. Remove a space and insert a line break (use ENTER). Edit visually. You should see a space where you inserted the line break. Edit the content. Edit as HTML. The line break should be replaced by a space. (12166)
  12. Disable a core block, try pasting content that will trigger that block, expect it to. (11057)
  13. Install ACF and make sure hidden meta boxes stay hidden. (12628)
  14. Install a plugin which uses TinyMCE in a textarea in a meta box area, such as Memberlite Elements or Meta Box (and can you think of any others we can test?), then create a post using that content and make sure it saves. (12568)
  15. For more, see issues in the 4.7 milestone.
If you find a new bug, please file it in gutenberg on GitHub. Thank you! Block developers: make sure to be aware of deprecations. Please join us in #core-test on WordPress Slack any time if you have questions about testing!

#4-7, #call-for-testing, #gutenberg

Comparing the Classic Editor and Gutenberg

Some videos of people using the Classic Editor were shown in the 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 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 HTML, 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

Call for Testing: Gutenberg + Popular Plugins

Calls for testing WordPress 5.0 beta have been running since Oct 24, and the release is right around the corner. While we have highlighted a few plugins to test in past calls for testing here on make/test, it was pointed out that more plugin testing would be helpful to have and so let’s add it in!

Plugins that are most likely to have compatibility issues are those that modify the the interface of the post edit screen, perform actions on post update/save or add custom taxonomies. /hat tip @gschoppe via https://twitter.com/gschoppe/status/1070344946643816448
To help test, you can install and activate the WordPress Beta Tester plugin on a test site, select “Bleeding edge nightlies” from the Tools > Beta Testing page and then click “Update Now” on the Dashboard > Updates page in wp-admin. From there, pick any plugin from the list below and see what you can break. 🙂 If you find a plugin conflict between the plugin you are testing and Gutenberg, the very best place to report it is to the plugin developer directly. Each plugin has a support forum available by using the Support tab at the top of the plugin directory page. You may also report plugin conflicts to the gutenberg repository on GitHub where you will likely get more help testing and advice on where and how to report back to the plugin author if needed. To start, I’ve picked a handful of plugins either because they seem like good candidates from the popular plugins list or have been mentioned in  gutenberg on GitHub or on this blog:
  1. Yoast SEO
  2. Advanced Custom Forms
  3. Wordfence
  4. Elementor
  5. Contact Form 7
  6. WPForms
  7. NextGEN Gallery
  8. Divi Theme
There are many more plugins to test, and suggestions are welcome if you think any should be added to this list. This list should be considered a starting point and anything from the first four pages of the popular plugins list would also be good to consider for testing. If you are able to help test, pick something you like, or that looks interesting to you, or (even better!) that you use on your own site. It is worth noting that several of these plugins have been tested already and many developers have been working hard on updates along the way—some even include custom Gutenberg blocks. This call for testing is an extra way to try to provide help for those developers. If you are a plugin developer and would like to add your plugin as a suggested addition for testing, it would be helpful to provide a link and a short list of testing ideas or steps to help testers get oriented with your work. Please leave a comment if you’re interested!

#call-for-testing, #gutenberg, #plugins, #popular-plugins