Robot doberman climbing the computer tower.

Preventing line break elements in the RichText component

By default the WordPress Gutenberg RichText component will insert <br> tags into the block grammar when the “enter” key is used. While this is okay in some circumstances, it may not always be wanted behavior.

If you do not actually need features like bold, italics, links, or other text formats. I would recommend using a text input instead of the RichText component.

What Doesn’t Work

If you’ve checked out the documentation around the RichText component, you may have seen the multiline prop as a possible solution. However, this feature is misleading because it does not prevent multiple lines. Instead, it inserts a <br> tag on return or <someTagName> on return. For example, the core/list has multiline enabled and creates new line wrapped in an <li></li>.

How to Prevent Line Breaks

Taking a look at onSplit property for the RichText component we can override the default behavior for when a split should occur (Returns count as a split). By returning a function that does nothing, when the return key is used no changes will occur. However, we still need to add one more change.

Due to the codependent relationship of onSplit and onReplace we must include the onReplace property and pass it an empty function as well.

UPDATE 5-25-21: The multiline prop on the RichText component must be set to false for this feature to work. The multiline prop defaults to false so it’s not explicitly required. Any value other than false will cause the return disable not to work.

  multiline={false} // Not required, this is the default value.
  onReplace={() => {}}
  onSplit={() => {}}

Testing the Results

Once your RichText component has these properties in place hitting the “enter” key should not do anything. Hopefully this helps someone else out there.

Micheal England

Article by Micheal England.