Some results from user testing the prototype Gutenberg Core Editor

During WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. London contributor dayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/., Martin Lugton (@martinlugton), Johan Falk (@j-falk) and Lucijan Blagonic (@lucijanblagonic) created a user testing script to test the features of 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/ editor. This is a guest post from them of their findings.

Issues observed:

When an image is aligned left or right just above the heading, the heading 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. encompasses the image block. Could probably be corrected with adding CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. to clear the floated element?
Adding links when no text is selected creates a link with no text. Maybe force the user to select something?
Dragging and dropping of blocks. In prototype 3, the user can drag and drop blocks. But this is only allowed if a user clicks on the left- or right-hand border of the block. Could we allow users to click and drag a block from its top or bottom border as well? Could we allow users to click and drag a block, just by clicking somewhere in its body?
Adding new block at the top of the page. Do we want to allow and facilitate this?
When adding new blocks, the user clicked 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. link instead of Paragraph.
Could we rearrange the links in a more meaningful way? (Headings, Paragraphs, Images, Embed, Quote and HTML (last)).

inhll 2:52 pm on March 30, 2017

Adding links when no text is selected creates a link with no text. Maybe force the user to select something?

Perhaps the default “empty” text should show a sensible default, like the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org the user enters?

Dragging and dropping of blocks. In prototype 3, the user can drag and drop blocks. But this is only allowed if a user clicks on the left- or right-hand border of the 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.. Could we allow users to click and drag a block from its top or bottom border as well? Could we allow users to click and drag a block, just by clicking somewhere in its body?

Perhaps a “draggable frame” exists on all four sides of the block within 20px of the edge to make grabbing / dragging easier?

Adding new block at the top of the page. Do we want to allow and facilitate this?

What drawbacks might this introduce? I cannot think of any and unless reasons, this action should be possible.

When adding new blocks, the user clicked 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. link instead of Paragraph. Could we rearrange the links in a more meaningful way? (Headings, Paragraphs, Images, Embed, Quote and HTML (last)).

I agree that ordering the objects such that the most commonly used are the first displayed is a good move. Perhaps changing “HTML” to “Raw HTML” would also help users understand what they are adding?
Joen Asmussen 3:44 pm on March 30, 2017

Solid! Thank you again for doing this, everyone. 👏

All of this sounds like things we should address.

Dragging and dropping of blocks. In prototype 3, the user can drag and drop blocks. But this is only allowed if a user clicks on the left- or right-hand border of the 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.. Could we allow users to click and drag a block from its top or bottom border as well?

That’s a great idea!

Could we allow users to click and drag a block, just by clicking somewhere in its body?

That would invoke the selection controls for most blocks. In galleries you’d rearrange the images inside.

Adding new block at the top of the page. Do we want to allow and facilitate this?

Probably not for the editor focus, but possibly down the road with the customize focus 😉
eh3an2010 12:13 am on April 3, 2017

Hi , tanx , i used in my website https://sitedp.com
pierpaoloalessio 1:52 pm on April 7, 2017

I loved this editor.
In my video test 1 and 2 I tested the version 2 that i liked more than the version 3 because it’s more focusing when I write and edit text and images.
I do the steps suggested in the survey and I found a problem in the 4.1 point because the button to add text is at the bottom of the page and when I try to add a new title I needed to press Enter and then move the title at the right place.
Nice work, as I was saying in the #design 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/. discussion I usually use Evernote to write my posts, but with this editor I just write in the right place.
mickstrisciante 1:56 pm on April 7, 2017

Here’s the link to my 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/ user testing.
I found it very nice and simple, though there are some minor bug that needs to be fixed. Generally, I will consider implementing the drag and drop to move box and a button to remove 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..