Testing feedback: adding an image

[karmatosed]

As the tests come in for Gutenberg I am going to make issues but also add feedback here as a constant thread for people to check.

For reference the tests are here: https://make.wordpress.org/test/2017/06/27/call-for-testing-gutenberg/

This feedback is on this task:

"Following the heading, add an image block and upload the picture of Einstein. The image required for this exercise can be found here: http://media.salon.com/2015/06/einsteins-letters.jpeg-1280x960.jpg.."

[karmatosed]

"I failed. I had trouble getting from the post title (I assume that's what headline meant above) to the content editor. I assumed hitting "enter" would move to the next block and it didn't. When I clicked in the next block a floating toolbar to edit texted appeared but nothing to insert media. Finding the "insert media" button took a while. I guess I'd get used to it, but it's weird it's separated from the content and hidden up by "preview". When I did find it I couldn't figure out how to "insert media by URL". I swore that used to be there."

[karmatosed]

"The popup box with content types is difficult to use/scroll on a laptop. Plus if your screen is small and it's below the + button to add a new content type, it's not very easy to scroll through the box and use it. Have it hover around the plus button perhaps?"

[karmatosed]

"I unintentionally created 3 extra blank blocks before properly adding the image blog"

Note: added this to the ticket to fix this.

[karmatosed]

"I thought with Gutenberg I might be able to just add the remote link to use that image. Once I realized I needed to first download the image so I could upload it I managed to get it done. I did find the sudden jump into the old Media Library disconcerting even though I recognized this. I suspect novice users would find this very confusing"

[karmatosed]

"Is it not possible to get an image via an url? If so, I could not find a way to do it."

Added to: #1536

[jwold]

"The popup box with content types is difficult to use/scroll on a laptop. Plus if your screen is small and it's below the + button to add a new content type, it's not very easy to scroll through the box and use it. Have it hover around the plus button perhaps?"

I wonder if others have this feedback. If this is an issue there might be other ways of looking at how the insert modal (picker) is displayed.

[karmatosed]

"Not all the buttons are spoken, I found out by trial and error.

1. click the media add button
2. click the visual button, there is no feadback on this button.
3. scroll down and find the add from link, interestingly I never found out how to add directly from my computer and upload a file.
   Then tab to the text name.
   I could type what I would like the link to be called.
   Would be nice if there was some sort of alt text generater to tell the blind person what he was seeing.
   I don't even know what einstein looks like, I put a boring picture description as the name of link but you could easily put click here to see image and the poor blindy would be none the wiser.

Next, I have to scroll round eventually going back to the top of the page with control home.
Finding the media panel, calapsing the panel, the button is at the end of a long list of controls quite unwieldy by the way.
Hit that, then click text.
if I don't then there is this ritch text application error which does nothing.
Next, lets scroll down to the text.
Oh but wait, the link is in the way, the text ariea is basically hidden.
by trial and error I realise I am in a text field, scroll to the end of the code, hit the enter key and now the code is at the top of the window.
Could we at least hide the code, and just have what it is or simply don't have it shown up in the text ariea at all?
I know there is a media link in there I don't need it in the way."

This user was using Nvda screen reader

[karmatosed]

"I am used to being able to resize the image and get back to the Image Details dialog box - doesn't seem possible to do either. The buttons all need tooltips - it's unclear what they do."

[karmatosed]

"I keep clicking the 'Write' button and then constantly having to delete new text blocks."

[karmatosed]

"It was easy to do but there where some odd things going on with the media library pop-up. I dragged the image over from my desktop, it upload, and I could select it in the attachment details pane on the right. It did not show on the left hand side though. I'm also unable to see any other images that have been previously uploaded to the media library."

[karmatosed]

"For me it was clear, but for a lot of my clients, I don't think the plus sign is obvious enough for them to be able to find how to add an image. They would need a tutorial. "

[karmatosed]

"I liked that the 'add' button below my headline had a clear option to add text or an image next. It made the process very intuitive."

[karmatosed]

"This was super easy, very intuitive. Can immediately see right below my first block the option to add a photo - no looking around necessary."

[karmatosed]

"It was easy for me. Although I do feel knowing to hover over the small plus icon was a 'lucky guess'."

[karmatosed]

"I have no idea what the icons above the image mean. I can tell the first three.. (Left, Center, and Right) but the last two... I have no clue. A tooltip would be nice."

[karmatosed]

"This was easy enough for me, but this is a pain point for regular users. Saving and uploading is what it is, but what about file optimization? I would never want a client to upload a 250k image. As a side note, I also would like to see the Alt tag become required. "

[karmatosed]

"I'm not sure if a person with no experience using visual page builders would intuitively know to click on the encircled + sign, unless there is documentation for getting started with Gutenberg"

[karmatosed]

"pretty easy, hovered over the + under the text and clicked the image link that appeared. However when I added the image I used the corners to resize the image to be smaller and then tried to click the align options for the image and they didn't behave how I expected. The image wasn't then centered in the block."

[karmatosed]

"I tried to delete the "Write your story" block (I assumed this was a paragraph block and was unnecessary) but despite tapping repeatedly on the trash icon I wasn't able to delete it. I decided to leave it and add the image block below it.

I was then hoping to add the image to my post from the URL, but I wasn't able to find a way to upload an image that way. I then hoped I could copy and paste the image into the editor, but also couldn't find a way to make that work. I eventually decided to save the image to my iPad and then upload it to the post."

[karmatosed]

"It was not difficult to insert an image, but one thing I noticed is that when an empty post is created there is initially an empty paragraph added after the title.
I inserted the image and the empty paragraph was still there before the image.

From my experience, some people don't notice such things and will probably leave an empty paragraph there and not delete it, so it might happen that there will be sites with an empty first paragraph before an image."

[karmatosed]

Closing as moving to the project. We are moving things to projects that aren't core Gutenberg and need to be done apart.