PlainText v2

packages/block-editor/README.md

@@ -231,10 +231,6 @@ _Returns_
 
 Undocumented declaration.
 
-<a name="Editable" href="#Editable">#</a> **Editable**
-
-Renders an editable text input in which text formatting is not allowed.
-
 <a name="FontSizePicker" href="#FontSizePicker">#</a> **FontSizePicker**
 
 Undocumented declaration.

packages/block-editor/src/components/editable/README.md → packages/block-editor/src/components/editable-text/README.md

@@ -1,4 +1,4 @@
-# `Editable`
+# `EditableText`
 
 Renders an editable text input in which text formatting is not allowed.
 
@@ -45,9 +45,9 @@ Renders an editable text input in which text formatting is not allowed.
 
 *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.
 
-## Editable.Content
+## EditableText.Content
 
-`Text.Content` should be used in the `save` function of your block to correctly save text content.
+`EditableText.Content` should be used in the `save` function of your block to correctly save text content.
 
 ## Example
 
@@ -65,7 +65,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	edit: function( props ) {
-		return wp.element.createElement( wp.editor.Editable, {
+		return wp.element.createElement( wp.editor.EditableText, {
 			className: props.className,
 			value: props.attributes.content,
 			onChange: function( content ) {
@@ -75,7 +75,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	save: function( props ) {
-		return wp.element.createElement( wp.editor.Editable.Content, {
+		return wp.element.createElement( wp.editor.EditableText.Content, {
 			value: props.attributes.content
 		} );
 	}
@@ -84,7 +84,7 @@ wp.blocks.registerBlockType( /* ... */, {
 {% ESNext %}
 ```js
 const { registerBlockType } = wp.blocks;
-const { Editable } = wp.editor;
+const { EditableText } = wp.editor;
 
 registerBlockType( /* ... */, {
 	// ...
@@ -98,7 +98,7 @@ registerBlockType( /* ... */, {
 
 	edit( { className, attributes, setAttributes } ) {
 		return (
-			<Editable
+			<EditableText
 				className={ className }
 				value={ attributes.content }
 				onChange={ ( content ) => setAttributes( { content } ) }
@@ -107,7 +107,7 @@ registerBlockType( /* ... */, {
 	},
 
 	save( { attributes } ) {
-		return <Editable.Content value={ attributes.content } />;
+		return <EditableText.Content value={ attributes.content } />;
 	}
 } );
 ```

packages/block-editor/src/components/editable-text/index.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import RichText from '../rich-text';
+
+const EditableText = forwardRef( ( props, ref ) => {
+	return <RichText ref={ ref } { ...props } __unstableDisableFormats />;
+} );
+
+EditableText.Content = ( { value = '', tagName: Tag = 'div', ...props } ) => {
+	return <Tag { ...props }>{ value }</Tag>;
+};
+
+/**
+ * Renders an editable text input in which text formatting is not allowed.
+ */
+export default EditableText;

packages/block-editor/src/components/index.js

@@ -47,7 +47,6 @@ export {
 	RichTextToolbarButton,
 	__unstableRichTextInputEvent,
 } from './rich-text';
-export { default as Editable } from './editable';
 export { default as ToolSelector } from './tool-selector';
 export { default as URLInput } from './url-input';
 export { default as URLInputButton } from './url-input/button';

packages/block-editor/src/components/plain-text/index.js

@@ -1,24 +1,35 @@
+/**
+ * External dependencies
+ */
+import TextareaAutosize from 'react-autosize-textarea';
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
 
 /**
- * External dependencies
+ * Internal dependencies
  */
-import TextareaAutosize from 'react-autosize-textarea';
-import classnames from 'classnames';
+import EditableText from '../editable-text';
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/plain-text/README.md
  */
-const PlainText = forwardRef( ( { onChange, className, ...props }, ref ) => {
+const PlainText = forwardRef( ( { __experimentalVersion, ...props }, ref ) => {
+	if ( __experimentalVersion === 2 ) {
+		return <EditableText ref={ ref } { ...props } />;
+	}
+
+	const { className, onChange, ...remainingProps } = props;
+
 	return (
 		<TextareaAutosize
 			ref={ ref }
 			className={ classnames( 'block-editor-plain-text', className ) }
 			onChange={ ( event ) => onChange( event.target.value ) }
-			{ ...props }
+			{ ...remainingProps }
 		/>
 	);
 } );

packages/block-library/src/site-title/edit.js

@@ -3,12 +3,13 @@
  */
 import { useEntityProp } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
-import { Editable } from '@wordpress/block-editor';
+import { PlainText } from '@wordpress/block-editor';
 
 export default function SiteTitleEdit() {
 	const [ title, setTitle ] = useEntityProp( 'root', 'site', 'title' );
 	return (
-		<Editable
+		<PlainText
+			__experimentalVersion={ 2 }
 			tagName="h1"
 			placeholder={ __( 'Site Title' ) }
 			value={ title }