Improve Link Entry

[anna-harrison]

Dialog style input fields open in layers in Gutenberg right now, resulting in visual clutter. Examples of this issue are raised in #2628 and #2204

For example, when we insert a Button Block, we see this:

Breaking this down, there are 4 elements competing for our attention (numbers 1-4). These elements have a hierarchy in terms of their priority: for example, if the user has inserted a Button Block, they would be most interested in adding a URL and Label for the button first, before tackling alignment, block settings or adding new blocks. Out of the four elements, the link insert has the highest priority:

We can improve the design to facilitate this.

Proposed solution: Serialised dialog
Last year, we developed and user tested a "serialised dialog", which has now been rolled into TinyMCE mobile (wireframes here). In this example, the main toolbar is replaced with a serialised version of the "dialog". The fields in the dialog are ordered by priority, allowing the user to complete the action at any time (without necessarily scrolling through all the input fields).

We could apply this same concept to input fields/dialogs in Gutenberg: i.e. when a selection is made that needs extra input (e.g. link), the main block toolbar is replaced by a serialised dialog. For the button block, this would look something like this

Thoughts? Improvements?

/cc @karmatosed @melchoyce @mtias

[tg-ephox]

@karmatosed @melchoyce @mtias this is about 90% complete, just need to tweak some styles really (auto-complete and loading indicator) ... Thoughts?

[mtias]

@annaephox @tg-ephox I like the direction, but can you look at the link implementation for the image block? It already does the "display in toolbar" and it should be aligned design wise.

[karmatosed]

I also agree that unifying the design would be good. It's not something we want varying.

[anna-harrison]

Yes, agreed
@tg-ephox has been working on making all of the link insert experiences consistent, so button, regular text block, image, hero image, etc
We'll add some videos in here shortly - the fixes are all in #2779

[anna-harrison]

Changes made in #2779 shown below (thanks @tg-ephox): we focussed on making the link insert experience consistent across all the blocks @melchoyce @karmatosed would be great to get your eyes over this quickly and see if it looks OK. Thx

Video showing link dialog animating into position over the toolbar

Block by block

[karmatosed]

Seeing this as a prototype there are a few issues that strike me. The flow feels super weird after a certain point. There's a lot of points likely to confuse users. I think it's a combination of things. The merging hasn't quite gone as hoped of the existing link we have in and these iterations. However, that happens sometimes and we have to iterate, sometimes taking a step back from what is produced.

Let's walk through the flow and I'll discuss as I go.

This first bit feels natural. It works. It makes sense having a limited UI at this point.

We seem to be missing validation at this point, which was a good thing to have. The loader is really badly positioned also.

At this point the visual becomes confused and the flow feels disjointed and confusing.

Here is where we have a mystery meat danger going on. I don't know why but the toggle worked a whole lot better outside of this implementation.

The arrow here enforced the lost feeling. The hover saying submit is weird and then seeing the arrow.. I feel very confused here.

It's a bit weird because whilst cluttered.. this feels better:

I think we can work through this though, so let's do that.

I feel user testing both versions would be good to see what different feedback we get. However, I think there are some iterations needed before we get there.

[anna-harrison]

Hey @karmatosed : the code for the above has been written (#2779), so perhaps we can merge and then user test?
I agree with you that some of the fields (e.g. open in new window, and the last one with the tick) are awkward. We left these fields exactly as they are per current link entry dialogs, so as not too change up too much at once
Can I suggest that we first see whether this general approach sticks, and then refine the fields and chrome on the link entry element?

[karmatosed]

@annaephox I am not happy merging in it's current state, no.

[anna-harrison]

@karmatosed: yes, in light of the proposed designs in #2983, I agree that this approach is no longer relevant (comments here)
@tg-ephox: let's complete this PR anyway, we may want to revisit this approach for mobile link entry down the line

[mtias]

Thanks for the iterations here. With the UI changes in the last couple releases, plus #3283 I think this issues can be considered resolved.