diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 574e77a1ddce82..e9ea7ce70d1cc0 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -231,10 +231,6 @@ _Returns_ Undocumented declaration. -# **Editable** - -Renders an editable text input in which text formatting is not allowed. - # **FontSizePicker** Undocumented declaration. diff --git a/packages/block-editor/src/components/editable/README.md b/packages/block-editor/src/components/editable-text/README.md similarity index 86% rename from packages/block-editor/src/components/editable/README.md rename to packages/block-editor/src/components/editable-text/README.md index 38c7c89dc3ba5b..6696a43c7e05c0 100644 --- a/packages/block-editor/src/components/editable/README.md +++ b/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 ( - setAttributes( { content } ) } @@ -107,7 +107,7 @@ registerBlockType( /* ... */, { }, save( { attributes } ) { - return ; + return ; } } ); ``` diff --git a/packages/block-editor/src/components/editable-text/index.js b/packages/block-editor/src/components/editable-text/index.js new file mode 100644 index 00000000000000..62bb166efa8e6b --- /dev/null +++ b/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 ; +} ); + +EditableText.Content = ( { value = '', tagName: Tag = 'div', ...props } ) => { + return { value }; +}; + +/** + * Renders an editable text input in which text formatting is not allowed. + */ +export default EditableText; diff --git a/packages/block-editor/src/components/editable/index.js b/packages/block-editor/src/components/editable/index.js deleted file mode 100644 index 25fb330ea9a1e2..00000000000000 --- a/packages/block-editor/src/components/editable/index.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Internal dependencies - */ -import RichText from '../rich-text'; - -function Editable( props ) { - return ; -} - -Editable.Content = ( { value = '', tagName: Tag = 'div', ...props } ) => { - return { value }; -}; - -/** - * Renders an editable text input in which text formatting is not allowed. - */ -export default Editable; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 3467ef2cee5c25..31365b395684a9 100644 --- a/packages/block-editor/src/components/index.js +++ b/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'; diff --git a/packages/block-editor/src/components/plain-text/index.js b/packages/block-editor/src/components/plain-text/index.js index a0a2aae23a2ce7..7421fe3be0932f 100644 --- a/packages/block-editor/src/components/plain-text/index.js +++ b/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 ; + } + + const { className, onChange, ...remainingProps } = props; + return ( onChange( event.target.value ) } - { ...props } + { ...remainingProps } /> ); } ); diff --git a/packages/block-library/src/site-title/edit.js b/packages/block-library/src/site-title/edit.js index 382493e17c8c5d..55661ca1ae9b29 100644 --- a/packages/block-library/src/site-title/edit.js +++ b/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 ( -