Gutenberg: Consider removing the trailing inserter in favor of a clickable area

[jasmussen]

Right now we have a trailing inserter that lets you insert content at the end. There are also hover buttons to the right of this. This is working reasonably well, but it is also a design that was created before we had a slash command, and before we had the "insert between" shortcut. As it stands, this gives us 4 ways to insert content — from the toolbar, in between, using the slash command, and at the end.

In most content editors, clicking below all the content simply sets focus there, which lets you either insert new content, or start typing. Perhaps with recent advances in insertion by other means, we can retire this interface?

It could look like this:

Just click at the end of the post — the white area below — and you'd be in a paragraph where you could type, or use the slash command. There would be no placeholder text like we've tried in the past, doesn't even have to be a special cursor.

We'd probably want to combine this feature with a change to how the inserter works when focus is in an empty paragraph. That is, it should work like the slash command inserter does, and replace the empty text block.

Thoughts?

[gziolo]

Just saying that it would make the following UI issue non-actionable:

I wanted to fix it, but now I'll wait until we decide what to do next with the very bottom inserter :)

[jasmussen]

Here's how Medium does it:

☝️ that's an image at the end. There is no linebreak until the white area is clicked. It's a "fake" textarea.

[folletto]

This seems a solid idea.
Very solid.

I keep thinking that the "on editor canvas" (+) buttons add clutter and remove focus from the (+) Add button in the top toolbar.

If we have a reliable method to add on the toolbar and a single fast method with the cursor (and typing) I think it's more than enough.

[paaljoachim]

That looks very interesting!

I think we should have a predefined outline around an area we can call the canvas or document. This area one can click into this area and just begin writing. It should be easy to just write and adjust the writing with easily available text options.

I made this issue: #3539 which is somewhat similar.

[afercia]

Of course this should be done in an accessible way. What the "clickable area" would be in terms of semantic HTML? How that would be announced by assistive technologies? How that would work when using only the keyboard?

Worth reminding any UI control should be properly labeled, whether it's a textarea, an input field, an editable block, a button, etc. Ideally, labels should be visible. If there's a strong design need to hide the labels, a possible trade-off would be hiding them visually with screen-reader-text or similar CSS technique.

[jasmussen]

So, we had this merged in, and then reverted again due to some keyboard troubles, and suggestions to resurface the trailing inserter. Here are mockups for addressing the latter.

1, you hover near the end:

2, you click that spot, and get a textarea to type in, and a clickable inserter on the left.

3, if you start typing, it's business as usual:

3b, Otherwise, you can click the inserter on the left, which is also mostly business as usual

The big difference is that the trailing inserter is not visible until you've put focus in the trailing placeholder.

Thoughts?

[folletto]

reverted again due to some keyboard troubles

May I ask a short tl;dr summary of what were the issues that made us to revert? Just to understand and give more grounded feedback.

---

That said, this direction seems a good one to explore: simple, reusing all our elements. :)

[jasmussen]

May I ask a short tl;dr summary of what were the issues that made us to revert? Just to understand and give more grounded feedback.

The details start here, but the summary is:

• I'd made the hit area for the placeholder bigger, making the container jumpy when clicking
• A good argument was put forth for why the trailing inserter plus might still be viable, even if in a less emphasized way
• Arrowkey navigation from the title to the first placeholder broke
• Clicking this empty area, then clicking away, created an empty placeholder block, which should probably be snipped if you didn't type anything

[youknowriad]

Closing as this is now a thing.

[paaljoachim]

Nice! The above approach seems to create a much better text writing flow.
I look forward to trying it out.