Image block: Improve text entry for long text in the image settings bottom sheet

[rachelmcr]

Text entry in the image settings bottom sheet is difficult. It's a small space and confined to a single line. To proofread or change the text, you have to scroll horizontally.

It would be good to improve this text entry for long text, e.g. have the text field expand vertically as you type.

Screenshot of current behavior on iOS:

As tested on iPhone XS, iOS 12.2, WP 12.2.0.20190412.

h/t @ryanboren for raising this issue.

[rachelmcr]

Additional feedback from @ryanboren about this experience:

[...] it doesn’t show the image while you type, so you can’t see what you’re describing.

Whatever solution we find for the alt text field should keep this in mind, as ideally you'd be able to view the full image while writing alt text for it.

[guarani]

Whatever solution we find for the alt text field should keep this in mind, as ideally you'd be able to view the full image while writing alt text for it.

@iamthomasbishop are you aware of any design proposal for this, especially in regards to the above comment?

[iamthomasbishop]

@guarani Nothing fully fleshed out, but there has been a lot of discussion around how we solve it. A few approaches that have been raised:

• Bump the text input to below the row title, and allow that text input to grow vertically
• Show a truncated version of the string on the main sheet, then when the user taps to change it, swap in a sub-sheet for easier text entry
• Show a dialog/alert of sorts with a text input

We are working on sub-sheets, so there may be a solution there, but in the meantime, it wouldn't hurt to do a quick spike on bumping the text input below the title.

[guarani]

Bump the text input to below the row title, and allow that text input to grow vertically

@iamthomasbishop Thanks for the response.
By row title you are referring to "Alt Text", correct? Does this mean changing just this row to use a title positioned above the the text input like so:

 Alt Text
+---------------------------+
| Input text placeholder    |
+---------------------------+

Th input text would now be full width and grow vertically. All other rows would remain unchanged.

[iamthomasbishop]

@guarani Yes, exactly 😄 Seems like this would probably be the simplest approach, even if it might feel a little odd on iOS in particular.

[iamthomasbishop]

An updated note: we might be able to take advantage of a new "sub-sheets" approach that @lukewalczak has been working on alongside the Color Picker work. Until we have access to that, we can keep this extremely simple.

[iamthomasbishop]

@guarani Not sure if you're already working on this one or not, but I'd like to get it prioritized relatively high on the priority list if possible and I have some UX suggestions based on the recent work done on bottom sheets (sub-sheets, transitions, etc). Most importantly, this would address a concern we've heard from users that entering longer text strings is frustrating for things like alt text and URLs, among other things.

Here is what I'm thinking for a solution that would be beneficial in many places that we have long-form text entry:

• Let's utilize the sheet => sub-sheet transitions that are now available rather than forcing everything into a single sheet
• Show a chevron/disclosure icon on the right side of any cell that directs the user to a sub-sheet
• When the cell/chevron is tapped, we transition to a sub-sheet
• This sub-sheet contains:
  • A header with a "back" action (< Back on iOS and a <- icon on Android) on the left and centered title (using the same string as the cell's title)
  • A single text cell that would expand vertically as needed (and thus expanding the overall height of the sheet)
  • A footer cell that would explain the benefits of using alt text

Altogether it would look like this:

The sub-sheet specifically would look like this (left: iOS, right: Android):

Let me know if you have any questions, concerns, or suggestions to improve this. I'll also get a couple of other sets of eyes on it to see if it would be a sufficient solution.

[guarani]

I like the look of the proposal @iamthomasbishop 👍. I haven't had time to go through it yet, but I will look at it in-depth and get back to you soon.

[guarani]

Let's utilize the sheet => sub-sheet transitions that are now available rather than forcing everything into a single sheet

The sub-sheets we already have in Cover and Button block settings do look like they can be used here.

Show a chevron/disclosure icon on the right side of any cell that directs the user to a sub-sheet

Sounds good 👍

When the cell/chevron is tapped, we transition to a sub-sheet

@iamthomasbishop we would be using the existing fade/dissolve transition used in the Cover and Button blocks, right?

A header with a "back" action (< Back on iOS and a <- icon on Android) on the left and centered title (using the same string as the cell's title)

I think this will come "for free" from the existing implementation.

A single text cell that would expand vertically as needed (and thus expanding the overall height of the sheet)

This auto-expanding text cell that pushes outward to expand the bottom sheet is key and probably the part with the most unknowns for me — especially making it work on both Android and iOS. But it should be possible.

A footer cell that would explain the benefits of using alt text

The footer cell should be straightforward.

[iamthomasbishop]

we would be using the existing fade/dissolve transition used in the Cover and Button blocks, right?

Yea, exactly. We've been experimenting w/ a "push" transition, but I think we're going to stick with the cross-fade transition because it feels more natural on both platforms.

I think this will come "for free" from the existing implementation.

Awesome 👍

This auto-expanding text cell that pushes outward to expand the bottom sheet is key and probably the part with the most unknowns for me — especially making it work on both Android and iOS. But it should be possible.

If an expanding sheet is a challenge, one thing we could do is start with a taller cell -- perhaps ~4 or 5 lines tall. Also, we might want a new text input style for multi-line inputs -- I'll think about that this week.

Thanks @guarani !

[iamthomasbishop]

@guarani I whipped up a quick example of what I was describing above, with edge-to-edge borders on the text input and ~4 lines tall. I also included the web's input description on the alt text panel, and added a "what is alt text?" link that I thought could link to the same link provided on the web.

[SiobhyB]

I'd like to give this a try for HACK week. :)

[SiobhyB]

I've gone ahead to create an initial PR for review in #3236 and added some code-related questions as a comment here on the Gutenberg PR (WordPress/gutenberg#29670).