Verse: Unable to exit via enter

[annezazu]

Initially noted here #50129 (comment). When trying to exit the Verse block, the only way is to use the option to insert after/before or to use the Inserter to insert a new block. This is replicated using 6.3 RC1:

verse.mov

To address this, solutions have been offered #52783 (comment) and #52783 (comment). TLDR: a single return keeps you in the selected block, and a subsequent return exits it. This matches behavior with the List block.

[Mamaduka]

FYI, it was decided to revert the changes and mark this as wontfix. See #52783 and #52928.

[hanneslsm]

Linking the comments #52783 (comment) and #52783 (comment)

The verse block should have the same exit behavior as the list block.

[Mamaduka]

Re-opening the issue.

@annezazu, do you mind updating the description to reflect the suggested solution(s)?

[annezazu]

Done.

[ellatrix]

I've been looking into this issue and tried adding a new RichText prop onSplitBr, which would split when pressing ENTER on a line break. However, I'm not convinced that we should do this. It's super confusing when you have an empty line in a verse, press Enter, and it suddenly splits in two. And what if you want more than one line between text? Imo, this block works as intended.

Verse is pretty close to how the Preformatted and Code blocks work. Enter creates a soft line break and you can add as many as you like. I also wouldn't expect two Enter pressed to exit a Code block. If exiting is difficult, it means there's a larger problem for all blocks.

[annezazu]

@WordPress/gutenberg-design keen to get designer thoughts here. In my mind, this makes it incredibly hard to get out of blocks currently (another example #52774 ) and perhaps a wider solution needs to be considered.

[hanneslsm]

It's super confusing when you have an empty line in a verse, press Enter, and it suddenly splits in two

I didn't get this. Splitting into two verse blocks? I'd expect to be in paragraph block then again.

And what if you want more than one line between text?

You also cannot do this at the moment with paragraphs because empty paragraphs get ignored.

Verse is pretty close to how the Preformatted and Code blocks work. Enter creates a soft line break and you can add as many as you like. I also wouldn't expect two Enter pressed to exit a Code block.

Good point. I also just looked into it and the root of the problem are the visuals.
The verse block looks like a paragraph block but it behaves like a Code block.
I am really not a big fan of opinionated designs for blocks, but here it might make sense. Background, a border, font-color, font-size, an icon in the background…? cc @WordPress/gutenberg-design

[hanneslsm]

@WordPress/gutenberg-design keen to get designer thoughts here. In my mind, this makes it incredibly hard to get out of blocks currently (another example #52774 ) and perhaps a wider solution needs to be considered.

You got me by a minute :)
The column block has the same issue. But since we cannot also change the background or anything else in the column block, it wouldn't make sense for verse. My ideas from the previous post are obsolete.

There must be another way to indicate that the user is "locked" into a block and cannot exit via enter.

How about letting a border bottom appear when pressing enter?
I wish I knew javascript to do an interactive prototype to see if it works. Here is a static image, hope it conveys the idea:

[jasmussen]

My instinct here is to leverage a similar behavior as the List block. That is, double enter exits it, but the full behavior of backspace restoring the last list item seems important:

That is, two enters does escape this verse:

However, the precise flow would likely be this:

• Verse line 1, type something, press enter
• Verse line 2, don't type anything, press enter
• You escape the verse but are still on line 2, now it's just a paragraph
• Press backspace, you're back in the verse, but on line 2

Make sense?

[ellatrix]

It sounds to me like you only want Enter to create a paragraph when at a line break at the end of a verse, and not also in the middle of a verse, which is different from list, which also splits in the middle.

In that case, I think we should slightly modify onSplitAtEnd, to only split on a newline. That will change the behaviour for captions too, but that's fine, It's better to be consistent.

My only worry is that you can no longer insert two line breaks to have a blank line between texts, which is common is verses, and common in the Preformatted and Code blocks too.

So maybe we should only split when there are TWO previous line breaks. In that case we'll need a separate onSplitAtEnd. I will make a PR like that so you can test it.

[ellatrix]

In other words: it should be triple Enter that exits the block.

[jasmussen]

Worth a try, especially if two or three can be tweaked in the PR somewhat easily?

[ellatrix]

• Verse: exit on triple Enter #53332

ready for testing