EditableText

Renders an editable text input in which text formatting is not allowed.

Properties

value: String

Required. String to make editable.

onChange( value: String ): Function

Required. Called when the value changes.

tagName: String

Default: div. The tag name of the editable element.

disableLineBreaks: Boolean

Optional. Text won't insert line breaks on Enter if set to true.

placeholder: String

Optional. Placeholder text to show when the field is empty, similar to the input and textarea attribute of the same name.

onSplit( value: String ): Function

Optional. Called when the content can be split, where value is a piece of content being split off. Here you should create a new block with that content and return it. Note that you also need to provide onReplace in order for this to take any effect.

onReplace( blocks: Array ): Function

Optional. Called when the Text instance can be replaced with the given blocks.

onMerge( forward: Boolean ): Function

Optional. Called when blocks can be merged. forward is true when merging with the next block, false when merging with the previous block.

onRemove( forward: Boolean ): Function

Optional. Called when the block can be removed. forward is true when the selection is expected to move to the next block, false to the previous block.

EditableText.Content

EditableText.Content should be used in the save function of your block to correctly save text content.

Example

{% codetabs %} {% ES5 %}

wp.blocks.registerBlockType( /* ... */, {
	// ...

	attributes: {
		content: {
			source: 'html',
			selector: 'div',
		},
	},

	edit: function( props ) {
		return wp.element.createElement( wp.editor.EditableText, {
			className: props.className,
			value: props.attributes.content,
			onChange: function( content ) {
				props.setAttributes( { content: content } );
			}
		} );
	},

	save: function( props ) {
		return wp.element.createElement( wp.editor.EditableText.Content, {
			value: props.attributes.content
		} );
	}
} );

{% ESNext %}

const { registerBlockType } = wp.blocks;
const { EditableText } = wp.editor;

registerBlockType( /* ... */, {
	// ...

	attributes: {
		content: {
			source: 'html',
			selector: '.text',
		},
	},

	edit( { className, attributes, setAttributes } ) {
		return (
			<EditableText
				className={ className }
				value={ attributes.content }
				onChange={ ( content ) => setAttributes( { content } ) }
			/>
		);
	},

	save( { attributes } ) {
		return <EditableText.Content value={ attributes.content } />;
	}
} );

{% end %}