The Block Editor RichText Component – Single Line Only

React Graphic with a computer
License: Adobe Stock

I was working on an alert block, but I needed something for the title of the alert. I figured I could use the RichText component that comes with Gutenberg (aka, the block editor).

The RichText component allows for returns ( or line breaks). This was problematic, as I only wanted the user to enter one line of text for the headline.

I did a bunch of searching, but it took a nose-dive into the component’s innards to figure out how to do a single line of text.

Enter the prop disableLineBreaks. Just pass it true and you now have a RichText component that is only a single line of text.

Here’s some sample code with the prop set to true.

<RichText
	tagName="h2"
	placeholder={ __( 'Alert title', 'quotes-dlx' ) }
	value={ alert_title }
	className="alertx-dlx-title"
	disableLineBreaks={ true }
	allowedFormats={ [
		'core/bold',
		'core/italic',
		'core/text-color',
		'core/subscript',
		'core/superscript',
		'core/strikethrough',
		'core/link',
	] }
	onChange={ ( value ) => {
		setAttributes( { alert_title: value } );
	} }
	ref={ alertTitleField }
/>Code language: JavaScript (javascript)
Ronald Huereca
By: Ronald Huereca
Published On: on August 26, 2022

Ronald Huereca founded DLX Plugins in 2022 with the goal of providing deluxe plugins available for download. Find out more about DLX Plugins, check out some tutorials, and check out our plugins.

Leave Your Valuable Feedback

Your email address will not be published. Required fields are marked *

Shopping Cart
  • Your cart is empty.
Scroll to Top