Gutenberg: RichText multiline paragraph and line-break

Created on 8 Feb 2019  路  5Comments  路  Source: WordPress/gutenberg

Is there a way to enable multiline and also line-break in a RichText component? For example, if you press enter it wraps that line in a p tag, but if you press shift+enter it inserts a br tag.

[Type] Help Request

Most helpful comment

Looks like this same issue was present in Lists (https://github.com/WordPress/gutenberg/issues/11215) and was fixed in this pull request: https://github.com/WordPress/gutenberg/pull/13546

For me, shift + enter works as expected (creates manual line break) when using the standard Paragraph block in a new post or page. However, when I import RichText for a custom block and then implement like so:

<RichText
  className="custom-block-body"
  value={attributes.body}
  onChange={value => setAttributes({ body: value })}
  tagName="div"
  multiline="p"
/>

The shift + enter no longer creates a manual line break (<br/>) but creates a new paragraph (<p>).

All 5 comments

I take it you mean you want to do this (i.e., add a line break on shift+enter) but it does not work right now.

I can't find the issue, but this should work and is broken, unless there was a very recent fix. It's a bug.

I'm not sure if that's how it's supposed to function or not. Currently I don't think it allows me to do both. I can set multiline to paragraph but shift+enter does not insert line breaks.

Same here, is there a way or a patch for that problem ?, as in the List item we can not add a break line while staying in the same Item, once you hit shift+enter it creates a new list Item instead of adding a break-line.

Looks like this same issue was present in Lists (https://github.com/WordPress/gutenberg/issues/11215) and was fixed in this pull request: https://github.com/WordPress/gutenberg/pull/13546

For me, shift + enter works as expected (creates manual line break) when using the standard Paragraph block in a new post or page. However, when I import RichText for a custom block and then implement like so:

<RichText
  className="custom-block-body"
  value={attributes.body}
  onChange={value => setAttributes({ body: value })}
  tagName="div"
  multiline="p"
/>

The shift + enter no longer creates a manual line break (<br/>) but creates a new paragraph (<p>).

I just tried the solution proposed by @davidyeiser and it seems to work for both (Enter and shift+Enter). It might have been completely fixed in the last versions.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mhenrylucero picture mhenrylucero  路  3Comments

aaronjorbin picture aaronjorbin  路  3Comments

cr101 picture cr101  路  3Comments

nylen picture nylen  路  3Comments

pfefferle picture pfefferle  路  3Comments