Gutenberg: Insert content between two blocks

[jasmussen]

Currently, the UI prototype shows the Plus to insert new blocks below the last paragraph (or the paragraph you're writing in). We should consider moving it to the side when you are on a new line. Here's a quick and dirty animatic:

Right after that, start typing and it converts into the type switcher, showing a paragraph block as selected.

This would also tie nicely into the #24, which would then invoke the plus dialog on the left.

This should inform how we can insert content between two blocks. Hover between two blocks to show a blue line and plus on the side:

Or, make a newline and insert, like you would at the end:

[JohnPixle]

I like it. I am not sure how this will work in a front-end or customizer editor context, with the theme's styles applied to the layouts. How will this feel in narrow places, columns etc? But I definitely find this better than before.

[jasmussen]

I am not sure how this will work in a front-end or customizer editor context, with the theme's styles applied to the layouts. How will this feel in narrow places, columns etc? But I definitely find this better than before.

Some of those answers will likely present themselves if/when we test this out in a prototype.

[timmyc]

So I have been playing around with this a bit, specifically showing the blue line and plus on hover. I have taken a few different paths, one was to hard-code some <span />s between each block, which allows me to get the desired design effect, but of course this falls apart due to contenteditable, as these <span/>s are easily deleted.

The other route I have tried so far is to add an :after pseudo element - and exposing the ( + ) on hover of the block above... but this suffers from some of the issues outlined in #58 - where by using the pseudo element displayed on hover, there is no way to actually _click_ on it.

.editor p:after {
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
    top: 24px;
}

.editor p:hover:after {
    height: 0px;
    content: url("data:image/svg+xml; utf8, <svg fill='#008ec2' height='24' width='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><path d='M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm5 9h-4V7h-2v4H7v2h4v4h2v-4h4v-2z'></path></g></svg>")
}

Kind of _feels_ like the markup again is creating some of our challenges here and was curious to hear other thoughts.

One other idea is to apply a background color to the section.editor and add a click handler for these in-between block scenarios.

[jasmussen]

Sounds difficult.

This particular feature is not super urgent as it's a desktop only & hover only enhancement. So long as linebreak lets you insert between two items, that's good for now, then we can keep noodling on how to best solve this. Not crucial for the UI prototype.

[mapk]

DIVI handles this quite well. The insertion button is a part of the block (centered at bottom).

[ellatrix]

I love this ^ :)

[timmyc]

That would be much easier to implement as well.

[aduth]

For many blocks*, I imagine it would be difficult on mobile to position the cursor such that a new linebreak could be added, which might be further evidence in favor of showing an "insert after" button to the currently focused block.

_*_ Particularly rich content like a gallery or tweet, which can already be a bit awkward to position in the current editor.

[jasmussen]

CC: @shaunandrews because I'm pretty sure I saw something Divi-esque from him yesterday in Slack, that kind of elegantly solved this.

[shaunandrews]

Here's what I've been playing with:

[jasmussen]

Really, really dig this stuff, Shaun. Thanks so much for doing this.

The "Insert in between" thing feels solid. The behavior of the type switcher feels too, though it feels like that bit needs a little more polish. Same for the inserter, which should be able to contain a virtually endless amount of blocks, 50+, so will probably need a search box.

It does feel solid, though, that the type switcher sits next to the block and inline level controls, though! This seems worth trying next, along with the "insert between" behavior.

[jasmussen]

The animatic really sells it @shaunandrews. But does it become a fiddly UI if you have to modify inline text close to or around the area where the button sits?

If yes, do you feel we can expand the block boundaries for a block, without changing the spacing of paragraphs? If we were to allow the block boundaries to overlap, we could get another 3px of space between the text and the block boundaries.

[ellatrix]

I've added this to https://wordpress.github.io/gutenberg/tinymce-single/ to try it out.
It's on the some line with the arrows though, stuffing it between the the two blocks felt a bit strange. Happy to adjust to try in between the line though.

[jasmussen]

Works well, thanks for doing that. I think it's worth trying it on the border, though, as it seems to suggest where the new content will appear.

In general probably best to adhere to the mockups for the prototypes. Then we can all try it and if we all agree it feels weird then we can mock up alternatives.

The thing that primarily felt weird to me is that is that it's close to the edge, and if you want to select text down there you might invoke the plus. But it's worth testing, seeing if it's actually an issue and not just one that's perceived from the mockups.

[ellatrix]

In general probably best to adhere to the mockups for the prototypes. Then we can all try it and if we all agree it feels weird then we can mock up alternatives.

You can see it as a mock up too :) I'll move it on the border.

[jasmussen]

You can see it as a mock up too :) I'll move it on the border.

mindblown.gif :)

Certainly, but the purpose of the prototypes is to compare the underlying tech across the prototypes, not competing UI.

Competing UI is best mocked up as separate things and discussed in GitHub issues, like what Shaun did here. Such mockups can be gifs, pngs, html mockups, even one off prototypes or codepens for sure.

[ellatrix]

Adjusted so we can try in single mce. Note that I still have to add the insert menu there. Will do so tomorrow.

[jasmussen]

Having used the prototypes for a bit now, I can't help but feel like inserting between two blocks becomes less of an issue when you can insert a linebreak to get access to the inserter.

What does everyone else think?

Edit: Here are mockups for how it could work.

No inserter visible when you are interacting with a block:

Inserter shows up on a newline, where the up/down arrows would have been:

If we combine it with an "insert" button that permanently sits somewhere else, and an editing system where making linebreaks is as easy as pie, this is arguably fine for inserting content between two. It's keyboard friendly, and it's the same UI for mobile.

Try the LinkedIn editor, it works somewhat this way: https://www.linkedin.com/post/edit/

[ellatrix]

Isn't that what we had before? The issue was that it can be harder to discover. It also may not be evident to create a line break between non text blocks.

[ellatrix]

In the single prototype the non text issues is partly solved because you can move the cursor to the side (select block, then arrow left/right). Can also make it so the cursor get the right position when clicking next to it.

[aduth]

What does everyone else think?

Should also consider:

• What's shown when starting a new post? Does the user first have to focus the editor to see an inserter, which assumes that the user will know to click on the blank screen?
• Is it always easy to create a newline between blocks? I think we should strive for this, but for example it may be difficult to position the text caret such that I can insert a new line between two embed blocks. _(Sorry, I think I'm repeating what @iseulde already outlined in previous comments)_

[jasmussen]

What's shown when starting a new post? Does the user first have to focus the editor to see an inserter, which assumes that the user will know to click on the blank screen?

I'm increasingly leaning towards us having, in addition to the plus or / invoked inserter, having a permanent button somewhere in the admin, not yet mocked up.

Though if we had that, we'd have parity on this experience compared to the current editor.

[ellatrix]

Undo and redo buttons are also ones that might have to be permanent somewhere, so it wouldn't be the only one.

[jasmussen]

Closing in favor of #323.