Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block library: When pressing enter on empty line new Paragraph blocks is crated #16880

Closed
wants to merge 1 commit into from

Conversation

gziolo
Copy link
Member

@gziolo gziolo commented Aug 2, 2019

Description

This is an experiment. I have no idea if the solution is the most expected but it does what I want.

This PR mirrors the behavior of List block where pressing enter on empty line removes it and it creates new Paragraph block and moves focus there. I'd love to have it replicated for the following blocks:

  • Image (caption)
  • Quote (cite)
  • Pullquote (cite)
  • Preformatted
  • Verse

This is how List block works in master:
list-split-empty-line

How has this been tested?

  • Add Verse block and start typing.
  • Press enter key, a new line should be created.
  • Press enter key again, this new line should be removed, new Paragraph block added and focus should move there.

Screenshots

verse-split-empty-line

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.

@gziolo gziolo added [Type] Enhancement A suggestion for improvement. Needs Technical Feedback Needs testing from a developer perspective. [Package] Block library /packages/block-library [Package] Rich text /packages/rich-text [Block] Verse Affects the Verse block labels Aug 2, 2019
@gziolo gziolo requested a review from ellatrix August 2, 2019 12:26
@gziolo gziolo self-assigned this Aug 2, 2019
regExp: /\n$/,
transform: ( { content } ) => [
createBlock( 'core/verse', {
content: content.replace( /\n$/, '' ),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess, it's buggy but it's enough to get feedback :)

@gziolo gziolo mentioned this pull request Aug 2, 2019
5 tasks
@jasmussen
Copy link
Contributor

To me, this makes a ton of sense on a high level. I'm pinging @ellatrix because I know she has tonnes of thoughts on this also. I recall her mentioning that there was a good reason why the caption didn't work this way — perhaps because you should be able to create a multi-paragraph caption?

@ellatrix
Copy link
Member

ellatrix commented Aug 6, 2019

I think something like this would be good. I once started a PR (#14143) that looked to do something similar.

In general, I like the idea that you should be able to Enter out of every rich text field, but the expectation differ across blocks.

For paragraphs and headings, Enter should always create a new paragraph block.
Perhaps we can do the same for captions and other single line instances. You could still press Shift+Enter to create soft line breaks. Depends on the kind of thing you're building.
For multiline instances, we'd require Enter to be pressed when on an empty line.

@jasmussen
Copy link
Contributor

For multiline instances, we'd require Enter to be pressed when on an empty line.

👍 👍👌

@gziolo
Copy link
Member Author

gziolo commented Aug 7, 2019

For paragraphs and headings, Enter should always create a new paragraph block.
Perhaps we can do the same for captions and other single line instances. You could still press Shift+Enter to create soft line breaks. Depends on the kind of thing you're building.
For multiline instances, we'd require Enter to be pressed when on an empty line.

It's exactly what I was thinking about myself. In particular Enter on the empty line was my main motivator to open this PR.

@ellatrix - do you still think, this should be exposed as a new prop of RichText? Ideally, it should be something simple to use so block authors wouldn't have to bother whether you can insert Paragraph in the given context or whether you can insert any block in the first place. I'm thinking about nested blocks in particular where the default behavior might not work as expected. I guess, other behaviors like splitting text blocks are sensitive to that issue as well though.

@ellatrix
Copy link
Member

ellatrix commented Aug 7, 2019

Ideally, it should be something simple to use so block authors wouldn't have to bother whether you can insert Paragraph in the given context or whether you can insert any block in the first place.

Currently this is already the case though. Both the heading and list block insert a paragraph block explicitly. The way I see it, we need an extra prop, because onSplit in already used in single line instances to split on Enter anywhere in the text. And what we want here for verse is the option to split when pressing Enter on an empty line, but it's not a multiline instance like list and quote.

@mapk
Copy link
Contributor

mapk commented Aug 7, 2019

This feels really good! I know I've run into this issue while in the Quote block several times. I hit Enter and it just keeps adding more lines to the Quote. I'd love Gutenberg to recognize the blank line and drop me out of the Quote block and into a Paragraph block.

But I also see the value of being able to hit Shift + Enter to stay within the block no matter how many blank lines are there. Will this option still remain?

@ellatrix
Copy link
Member

I've implemented split for the quote block in #17121.

@gziolo
Copy link
Member Author

gziolo commented Oct 24, 2019

I'm closing this exploration. We definitely should continue working on the changes in the experience.

@gziolo gziolo closed this Oct 24, 2019
@gziolo gziolo deleted the update/text-block-enter-empty-line branch October 24, 2019 15:07
@ellatrix
Copy link
Member

I've been working towards achieving this with onSplit. I'll have a look into that again soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Verse Affects the Verse block Needs Technical Feedback Needs testing from a developer perspective. [Package] Block library /packages/block-library [Package] Rich text /packages/rich-text [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants