Would you like to help test Gutenberg?

We would love to have you! 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/ releases are happening every few weeks right now.

To help with general testing after opting in to the “Try Gutenberg” callout in the WordPress 4.9.8 dashboard, please comment here or say hello in #core-test on WordPress Slack.

To help with pre-release testing, or regression testing, first get a testing environment setup.

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

Anyone can jump in to help with issues labeled Needs Testing and if you are a developer then issues labeled Needs Technical Feedback would be a great place to lend a hand. See the bug testing guidelines in the handbook for some tips.

If you want to help and aren’t sure where to start, just ask!

#editor

Help us Analyse the WCUS Gutenberg Usability Videos!

Huge thanks to everyone who participated in usability testing at WCUS. Our next step is to analyze the video footage – and we need your help!

The rest of this post tells you how you can help us with the analysis, even if you are new to usability testing and have never done this before.

If you have any questions comment below or better yet 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.” us in #core-flow on WordPress Slack.

How to analyze video footage:

  1. Go to the Volunteer Reviewers tab to fill out your name, 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/. username and your 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/ username.
  2. Go to the Survey Results tab to assign yourself at least 5 videos to review. Enter your name in column B (or column D if column B is NOT empty) of the videos you are reviewing.
  3. Go to the session tab using the ID link listed in column A of the Survey Results tab.
  4. Review the tester’s survey results before watching the video.
  5. Follow the video link to watch the session and enter the following information in the highlighted cells:
  • Start time – when the tester started using 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/.
  • End time – when the tester completed the task in Gutenberg.
  • Summarize the participant’s WordPress experience, if they mentioned it. (Some participants were asked or may have mentioned it during their session.)
  • Take notes about the user experience in the note section below. Include the timestamp from the video for the note, select note type (Bug, Pain pointPain point Pain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life, or Insight) and your name with each note.
  1. Return to the Volunteer Reviewers tab to summarize the sessions in column E. Include any notable or/and recurring themes. If you feel a video should be reviewed by the Gutenberg team, specify this in column F.

For your reference, these are the two sample posts users were asked to replicate using Gutenberg: Test 1, Test 2.

Tips on Reviewing:

  • When taking notes on the session, please be sure to keep your feedback separate from the participant feedback. Notes on the individual session tabs should be from the participant. If you have suggestions or conclusions of your own, keep those on the reviewer’s tab, and be sure to flag any videos you think worthwhile for additional review.
  • Watch for and note any instances where user confuses functionality, i.e. looks for caption when should be attempting to add 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. quote, etc. or moments of delight, was there anything they mentioned that they liked?
  • Note whether the participant succeed in completing the task or if they gave up. Try to note where or why they stopped.
  • In attempting to complete the task, does the participant pause for any length of time? Do they hover the mouse or appear to randomly click around? Does the participant get “lost”? Try to note what they were attempting to find or trying to do during this time.
  • Watch for visual cues from the participant like a furrowed brow of concentration, or audible cues like “hmmm…”? If these occur, note what the participant was trying to do at the time. If they solved it, are you able to note how?
  • If available, watch through the participant completing the Part 3 end survey. Do their responses provide any additional insight on pain points they experienced during the task? Sometimes participants will provide additional explanation of why they seemed to struggle. Is there anything they say but don’t type into the form?

Special thanks to @betsela, @fuyuko, @annaharrison, and @lynneux for developing and refining these plans.

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.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/. #core-flow: the testing channel.
Who should come? Anyone interested in helping test 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/, 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.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/. #core-flow: the testing channel
Who should come? Anyone interested in helping test 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/, all skill levels welcome.

#gutenberg

Writing my first Gutenberg Block

Inspired by a comment I read a week or so ago, I wrote my first Gutenblock. Here are my impressions of that process.

I initially planned on copying an existing 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., but quickly found the example in the blocks directory README.

This is the ultimate result, you should open the example and the result to follow along how things changed.

Getting from one to the other was not too tricky, but did have a handful of surprises and confusing bits.

I started with changing the block name, which caused the first problem – I got an error that it needed to be namespaced. That was easily rectified.

Changing the title was easy enough, but I didn’t know what I should change the categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. to. I got an error when I left it blank, so I set it to common.

Next up, changing the attribute definition. Changing the type to ‘int’ was a lucky guess, there was nothing to suggest what the valid types are. source confused me for some time, as I didn’t really know what it needed to be. I figured I needed to store the value as a data attribute on 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. that Star returned, so I wrote a basic version of the Star element, and tried to save it there. It… didn’t work. I tried several variations of this before noticing in the docs that source is optional. So, I tried deleting it, and it worked! That bit of magic made me smile, but I was a bit annoyed I spent so much time on a non-problem.

Writing the setStars() method was easy enough, even without really knowing what the props.setAttributes() call did.

Trying to add the Stars render to the children array gave me a weird error, complaining that the element needed an identifier. I tried adding an id attribute to the HTML that Stars rendered, but that didn’t help. Googling the error message showed me that I needed to set the key attribute, which was kind of weird, and I didn’t understand why it was necessary now, when the example didn’t need it. But it worked, so I moved on.

Adding the input element to children was also easy. I got the same error as before about needing an identifier, so I added a key attribute to that, too. I added all the extra attributes for fun, but realised when defining the min / max attributes that there was no nice way to validate the data being put into the stars attribute.

It was around this time that I discovered the Stars element wasn’t actually rendering, the problem was that I didn’t know how to put the text inside the div element. Did I need to append it? Was there a createTextNode() method I needed to call? As it turns out, it just magically accepted the string, but I only found that out by guessing. (Excuse the hacky math to add the “½”, I got a little carried away.)

One annoyance throughout was that every time I changed the attribute definition, or the output of Stars, 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/ threw a warning about the format changing. It seems like this warning would show whenever a 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 upgrade included a block change, though I didn’t test that.

And that’s about the sum of it – I found it to be a generally pleasant experience, it was nice that I could do this all without needing to compile from JSX, but I knew that option was there for if I wanted it. It’s still a bit of a raw experience, but it shows a lot of promise for creating a delightful development experience.

Next steps for Gutenberg testing

There was an open 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/ testing chat held on Wednesday, you can find out more about this and catch the video and notes here. There were a few outcomes from this and some next steps.

Firstly, what has happened so far?

Organised testing for Gutenberg has been in the form of 2 unmoderated usability tests. You can find out more about those here. These were a freeform and a task based test.

The test so far worked whilst Gutenberg was in early stages. However, it was limited in user type and response. The goal now is to scale up testing and make sure there are usability tests with each user type defined and prioritized, as well as non-WordPress users.

What are we going to do now?

In the group chat it was decided, the next step was to define user types, goals for testing, and the tasks for testing with each of the various user types defined.

To begin this, let’s use a collaborative spreadsheet to gather ideas. The scope of what we’re going to add is:

  • User types: In this tab let’s braindump a list of user types. For a starting point, the ones outlined in Matt’s post here have been added. What more should we add? Then let’s define:
    • Goals: What are the main goals of this user type? What do they want to achieve with an online publishing process?
    • Notes: Do you have anything else you think needs noting about this user type?
  • Tasks: In this tab the focus is tasks that people will do with Gutenberg. What can be broken down into tasks and test?

Add your thoughts on the above to the existing spreadsheet over the course of this week. If it’s easier you can leave a comment on this post with your thoughts and it will get added to the spreadsheet. Do you have some past research you can link to help add to this?

Are you a member of an agency, University, or are you in contact with a user type that can help the project reach? If so, let us know in the comments below, saying what you are able to help with for testing outreach.

Once the week is up, we can have a meeting again in #core-flow 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/. (time to be announced). We will go over the types and look at how we can begin testing.

If there is anything else you think should be considering in this testing focus, please let add a comment.

Get involved!

If you’d like to be involved in helping test Gutenberg, please leave a comment below and you can be added to the list of amazing people helping test this project.

This post was composed with the help of @msdesign21.

Gutenberg testing planning group chat

As 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/ project develops, it’s now time to think about a testing plan. A way to get this tested on as many users as possible, on as many environments as possible.

As a first step, come and join the first Gutenberg testing planning group chat at 19:00 UTC on Wednesday. Join #core-flow to get the link to the group chat just before it starts – it will also be added as a comment here.

Why a chat to plan? Coming up with a scalable plan on how to progress testing is important. A few points for discussion:

  • What are our initial testing goals?
  • What format should the testing be in?
  • How do we reach outside WordPress to test with as many people as possible?
  • How do we scale testing?
  • How can we improve gathering feedback

… If there are any other points you think we should add please put them as a comment.

This chat will be recorded and a video put up after to ensure that everyone gets a chance to keep up. Notes will also be taken.

From this chat a plan will be formed that will be posted for iteration from feedback. This will then form the structure for testing Gutenberg.

+make.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//design +make.wordpress.org/coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.

Updating plugins with .zip uploads

As detailed in this Trac ticket, when you try to upload a new version of a 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, you get an error. Meaning, if I have a plugin on my WordPress site that needs to be updated to the latest version, or even to a development version, I can’t just upload a new .zip file to do this. Instead I have to either update from the plugins page or upload a new folder via SFTPSFTP SFTP is an acronym for Secure File Transfer Protocol: A standard protocol to move computer files from one host to another over the Internet with enhanced security..

Following are the steps to replicate the existing issue where you get blocked when trying to upload a new version of a plugin:

Call for testing: Gutenberg

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/ is now in 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., 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 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/. #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.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//coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. +make.wordpress.org/design

#needs-testing

A new call for testing…

A new call for testing is out for the prototype editor. It looks neat! If you’d like to help test, remember that it’s in very early prototype stages so functionality is limited and they’ve asked for help with the following (other functions haven’t been built yet):

  1. Add a new paragraph.
  2. Add an image.

Written response:

  1. Is it clear what each section does?
  2. How do the flows for adding paragraphs and images feel overall?

Post testing notes on the thread at https://make.wordpress.org/design/2017/02/09/initial-gutenberg-prototype-editor-testing/

Report bugs (search first!) at https://github.com/WordPress/gutenberg/issues

#needs-testing