Call for Testing: Gutenberg 3.9.0 RC 2

Some updates have been made based on previous testing and issues filed since RC 1 was released.

To help test, please install RC 2 by downloading gutenberg.zip from the releases page or use the button below.

Help is needed testing anything from the list in the Call for Testing: Gutenberg 3.9 Pre-release post or from the following testing list:

  1. Add a classic block, add a latest posts block, save, refresh. (9968)
  2. Add a Vimeo video embed and check for vertical scrollbars. (9920)
  3. Try exporting reusable blocks in IE 11 or Firefox. (10000)
  4. Enable spotlight mode and verify unselected blocks have a lower opacity. (9951)

Please join us in #core-test on WordPress Slack if you have questions or want to bounce ideas around!

#call-for-testing, #gutenberg

Call for Testing: Gutenberg 3.9 Pre-release

Gutenberg is the new editing experience in WordPress, and it is currently the main focus for the testing group. 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 gutenberg.zip from the releases page, or use the button above, and try testing any of the following things:

  1. Select multiple blocks and save them as a reusable block. (9732)
  2. Create, export, import, and modify some reusable blocks. (9788)
  3. Trigger an invalid block warning that says “This block has been modified externally” by modifying the HTML for a paragraph or image block (can you suggest another example for how to trigger an invalid block?) and try out the “Compare Conversion” option in the more menu. (7995)
  4. Find and test the new drag handle in various browsers. (9569)
  5. From a small screen width, test that collapsible toolbar components (such as alignment on paragraph blocks) work as expected. (9687)
  6. Convert a Cover Image block to an Image block and back. (9743)
  7. Open a new post and check whether title field is focused. (9608)
  8. Embed videos with different aspect ratios (16:9, 4:3), check that they look correct. (9500)
  9. Add a gallery as a non-admin role and make sure it loads and is editable. (9875)
  10. Add galleries using IE 11 and Edge. (9622)
  11. Add content using the classic block. (9680)
  12. Find a theme that styles captions for video blocks & make sure styling looks correct. (9609)
  13. Edit a block’s HTML, delete all the content, deselect the block and check that it reverts back to its default state. (9546)
  14. Check that you can insert a Columns block but not a Column (singular) block. (9523)
  15. Use the keyboard shortcut to unlink. (9903)
  16. Bonus: How-to and FAQ blocks with Yoast SEO 8.2  (released Sep 11).
  17. Bonus: write and publish a few posts while logged as a user with a non-admin role such as editor, author, or contributor.
  18. What else would you like to see tested?!

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

Plugin developers: please keep an eye on deprecations in 3.9, especially if you work with colors. Also note that wp.editor.RichTextProvider is deprecated and will be removed from Gutenberg in 4.0.0. Please use wp.data.select( 'core/editor' ) methods instead.

Please join us in #core-test on WordPress Slack any time!

#call-for-testing, #gutenberg

Call for Testing: Gutenberg 3.8 Pre-release

There is a new editing experience in WordPress called Gutenberg—it has been a huge team effort and it is currently the main focus for the testing group.  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.

Gutenberg 3.8 included several improvements and bug fixes and had a short release cycle. There are also a couple test cases from 3.7 thrown in. The testing list tries to cover the major updates as a good starting point for testing.

 

To help with pre-release testing, please download the gutenberg.zip file from the releases page (or use the button above) and try testing the following things:

UPDATE: the following items were added since they made it in to the RC after this post was originally published.

  1. In the top editor toolbar, go to More > Fullscreen Mode and test in that mode. (9567)
  2. Check that the block settings menu works as expected after being moved from the top right of the block to the block toolbar. Note the browser version you tested. (9572)
  3. Add several reusable blocks then bulk delete them. (9588)
  4. Bonus: enable editor styles for a theme you are developing and try writing CSS without adding extra specificity to target the edit area. (9008)

Here is the original testing list:

  1. Drag and drop a block and test that it works as expected: the block being dragged is shown as a grey box, the dragging event shows an image that is a clone of the block being dragged. (9311)
  2. Hover over blocks  and see that the block label appears after a short delay. (9197)
  3. Try to upload a filetype not allowed: `.exe`, empty text file, file w/ no extension. (9578)
  4. Center an image and check that it works as expected on the front end. (9509)
  5. Check that block library icons are aligned properly in various browsers/screen sizes. (9497)
  6. Create a table with 2 columns, remove a column, remove another column. (8767)
  7. Create a table, toggle fixed width table cells, check that alignment works. (8767)
  8. Check to make sure categories still work when the Yoast SEO 8.1.1 plugin is active.
  9. Bonus: test with Yoast SEO 8.1.1 which was released Sep 3.
  10. Bonus: test with WooCommerce 3.4.5 which was released Aug 29.
  11. Bonus: test with Jetpack 6.5 which was released Sep 4.
  12. What else? Are there any major plugins you think should be added to this list?

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

Note for testers/developers: some scripts such as wp.api and underscore are no longer used by Gutenberg. Please keep in mind that plugins should always add their dependencies explicitly when registering scripts, even if it’s already there somehow registered by another script. (9163, 9374)

Please feel free to discuss testing practices or issues here in the comments or in #core-test on WordPress Slack any time.

#call-for-testing, #gutenberg

Call for Testing: Gutenberg 3.7 Pre-release

Gutenberg is the project name of 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. Creating Gutenberg has been a huge team effort – and right now, the team needs your help with testing!

Today, we have a small window for regression testing Gutenberg 3.7 because the release is planned for tomorrow.

If you would like to help with pre-release testing, please install locally so you are using master or download 3.7 as a zip file and install it to your Plugins folder (make sure to delete older versions of the plugin first!), and try testing some of these updates from 3.7:

  1. Write/edit/publish a few posts using the Unified Toolbar (previously called “Fixed Toolbar”).
  2. Change alignment for various images.
  3. Make sure icons and dropdown arrow look correct on hover for block conversion.
  4. Create an Audio block by drag-and-dropping an audio file.
  5. Search for blocks and check that it works as expected (i.e. start with `/` via the inserter).
  6. Convert a multiline-paragraph into a list.
  7. Add links to text.
  8. Add a link by selecting a URL and clicking the link icon.
  9. Upload an image with a space in the filename and check that the title does not have a hyphen added.
  10. Add a post image in a video block.
  11. Add videos and check that all works as expected.
  12. There were several other improvements and bug fixes in the 3.7 release and this list tries to cover the more major updates so we can have a good starting point for testing. Alternately, just run a general test writing or editing posts and pages as you would normally!

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

Please feel free to discuss testing practices or issues here in the comments or in #core-test on WordPress Slack any time.

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

WCUS Gutenberg Testing: Volunteer Feedback

During WCUS, we had a ton of volunteers staff the Gutenberg testing booth (affectionately called the “Gutenbooth.”) A huge thank you to everyone who volunteered their time and ran tests throughout the weekend!

At the end of the weekend, we asked volunteers for some feedback about common trends they saw, along with recommendations for improving the testing process. Here’s the feedback we received:

Did you see any issues come up repeatedly while you were watching people test?

  • Aligning caption citation, converting paragraphs to list, changing block type when clicking into “Write your story”.
  • Typing the quote into the paragraph block, then trying to format it to match. The ability to change the block type was surprising info, as was the quote block having different styles available.
  • People couldn’t find the second quote style.
  • Right aligning quote blocks instead of changing the quote style.
  • People didn’t realize they should use the quote block type.
  • People didn’t know there were two quote styles.
  • May be more issues of the test itself, but most often people didn’t think to make the text style a quote block. They would be looking for font controls. If they did discover blocks sometimes they wouldn’t see the quote block.
  • No one really noticed the second quote style. They were more likely to find the Block settings, so maybe we move the quote style options to the quote > Block > Settings for easier discoverability.
  • People often missed the existence of the Quote block and used two Paragraph blocks instead, and when they did find the Quote block, they often didn’t know they could select different quote styles.
  • It feels like there are too many places for block settings. The icon for the second quote style was unclear. Some people didn’t know it was a quote and made paragraphs and styled those. Developers added inline CSS to make it match the design.
  • Insert block and then edit was not default mindset (at this point). Discovery of the ability to transform wasn’t strong.
  • There were plenty of issues with people not finding block creation or navigation intuitive. block controls cover up the previous block bottom line of text. If it’s a short line of text you might not see it at all. People sometimes got confused thinking their text was gone.
  • Undo/Redo is not intuitively discovered.
  • It wasn’t obvious what was behind the three vertical dots.
  • /slash commands could be interesting to search and use. We may consider a walk-thru wizard for new users to get them acquainted with now the new blocks can work.
  • Some tech glitches.
  • Mostly related to the test setup (e.g. not knowing to switch tabs to Gutenberg / switch tabs back to finish survey).

tl;dr: The two separate quote styles were the biggest pain point, followed by trouble learning the editor and block interface, particularly switching blocks, the ••• menu, and block controls.

Is there anything you think we should change about the test?

  • I suspect part of the issue with caption alignment was due to the task of the test to be imitation, not creation, so I think it leads people to think in terms of alignment, not necessarily style.
  • Make the screenshot not achievable using Gutenberg / Provide people with content and let them do much more free-form style.
  • Maybe written instructions instead of asking people to “mimic” output, because it this is not the way people write content in general, they do not “copy” something.
  • I’d have the sample printed out and set next to the laptop to keep the user from having to swap between windows.
  • Automate screen recording start/stop, one-button reset for survey etc.
  • Yes. I think expecting people to know they should be recreating a block quote without telling them that is what it is, skews the test results a bit. We need to try to replicate a more natural publishing process somehow.
  • No, this was a good example to make people search for options and solutions.

tl;dr: Imitating an existing design make people focus too much on the details and not as much on the editing experience, we need to print out whatever instructions we provide, and better automation.

If you attended WCUS and ran through the Gutenberg usability test, we’d also love your feedback with how you think the test can be improved!

#gutenberg, #wcus

Gutenberg Usability Testing at WordCamp US

Hello folks! We’re going to be running a Gutenberg usability testing station at WordCamp US, and are looking for volunteers to help staff the testing booth throughout the conference.

Volunteers will:

  • Welcome people interested in testing Gutenberg.
  • Set up testers with the Gutenberg test survey, the Gutenberg testing site, and start the provided screen recording app.
  • After the test is complete, save the test recording and reset everything.
  • Chat with testers about their experiences and their thoughts on Gutenberg, taking notes where possible.

Shifts are a half-hour each and you can sign up for as many as you think you can commit to. If you’re interested and available, you can sign up here:

https://docs.google.com/spreadsheets/d/1GxtoZT3ztCf3NzpXbcGEP8zfWczwvceW-tpEDSVZ0Go/edit?usp=sharing

We’ll be using pre-set tests. Folks will have limited time and attention, so we want to get them in and out of the booth in a timely manner. For more information, check out these previous posts from @annaharrison:

Hope to see you there!

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

#gutenberg, #wcus

Gutenberg Usability Testing Plan – Feedback Needed

We are getting ready to roll out a new round of usability tests for Gutenberg mid-November. In this next round, we will focus on testing writing flow. We are also very keen to widen the net for participant feedback, including testing with participants who are not current WordPress users.

In order to make this happen we have drafted a usability testing plan – and we need your feedback and suggestions (in the comments below) before the next meeting in #core-flow on Thursday 9 Nov at 18:00 UTC. The next steps will be to test the user test on a small sample set (week of Nov 10th), refine at the #core-meeting on  Tuesday 14 Nov 17:00 UTC, and roll out to a wider audience starting from 15th Nov.

We will also have a usability testing section at WCUS, so if you are attending please drop by the and join in!

Proposed Usability Tests

To test the flow of writing, we propose to construct a three part usability test:

  1. General demographics:  including prior WordPress experience, age and device used. This information will help us to segment findings
  2. The main task: participants will be asked to re-create the post shown in an image. There will be three images to select from, mapping roughly to a beginner, intermediate and advanced level
  3. Follow up questions: a few questions about the experience of re-creating the post

Participants will be optionally invited to upload their screen recording, and answer a few questions about their video footage.

Testing Script

Question 1: Do you currently use WordPress?

  • Yes
  • No

Question 2: Would you describe yourself mostly as a…

  • Developer
  • Designer
  • Blogger
  • Business Owner
  • Other: ________

Question 3 (optional): How old are you?

  • Under 18
  • 18 – 30
  • 31 – 40
  • 41 – 50
  • 50 – 60
  • Over 60

Question 4: What device are you using?

  • Mobile phone
  • Tablet
  • Laptop
  • Desktop

Question 5: Let’s get set up!

Check that you have the following items ready as you will need them to complete the task

  • Open Gutenberg editor in a new browser window
  • Ensure that you have the Twenty Seventeen theme selected
  • Open the task image in a new window [ beginner | intermediate | advanced ]
  • Start a screen recording
  • Remember to talk out loud as you complete the task

Your task is to re-create the page that you see in the image using the Gutenberg editor. Remember to start your screen recorder, and talk out loud as you complete the task! When you are finished, continue on to answer a few questions about your editing experience.

Question 6:  Did the task take long or shorter than you expected?

  • It took longer than I expected
  • It took about the amount of time that I expected
  • It took less time than I expected

Question 7: Can you tell us why?

Question 8: Was the task easier or harder than you expected?

  • It was harder than I expected
  • It was about what I expected
  • It was easier than I expected

Question 9: Can you tell us why?

Question 10: Are you more or less likely to use the Gutenberg editor in the future?

  • I am not likely to use Gutenberg in the future
  • I am unsure
  • I am likely to use Gutenberg in the future

Optional section: screen recording analysis

It would help us out a lot if you could upload your screen recording and answer a few questions about your recording

Question 11:  Save your screen recording, and upload your file here…

Question 12: How long did it take to complete the task?

Question 13: Was the title added correctly?

  • Yes
  • No

Question 14: Was the quote added correctly?

  • Yes
  • No

Question 15: Was the image added correctly?

  • Yes
  • No

Question 16: Where were the main sources of friction?

Thank you so much for your help!

If you would like to be kept in the loop with the progress of Gutenberg testing, please leave us your email below and we will add you to the Make.WordPress user testing mailing list

Test Setup

The test can be completed by a participant, or used as a run sheet for an observational research session.

In order to complete the test, participants will need to:

  1. Get their hands on a device (laptop, tablet, desktop or mobile device)
  2. Ensure that they know how to do a screen recording on the device
  3. Load up the user test
  4. Follow the instructions in the test
  5. Upload the screen recording to the cloud
  6. Optionally, code the results from the screen recording
  7. Optionally, write up a blog post and tell us what you found

Reporting usability test 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. Remember to upload your screen recording at the end
  2. You can optionally analyse your screen recording footage by answering the optional questions in the final section of the test instructions
  3. In addition, you are welcome to write up your test results in a blog post

Get Involved

Have an idea on how to improve the usability testing plan? Have your say in the comments below before the next meeting in #core-flow on Thursday 9 Nov at 18:00 UTC. Once we have collected all feedback we will post a link to the test script and open the call for user testing!

 

#gutenberg, #usability-testing

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

Gutenberg usability testing meeting two

Some work has already been doing after our first meeting, which you can find out about here. It’s time to build on that work, let’s have another meeting.

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

#gutenberg