Add a forwardRef to wp.blockEditor.PlainText

packages/block-editor/CHANGELOG.md

@@ -6,9 +6,10 @@
 - Added the `addToGallery` property to the `MediaPlaceholder` component. The component passes the property to the `MediaUpload` component used inside the placeholder.
 - Added the `isAppender` property to the `MediaPlaceholder` component. The property changes the look of the placeholder to be adequate to scenarios where new files are added to an already existing set of files, e.g., adding files to a gallery.
 - Added the `dropZoneUIOnly` property to the `MediaPlaceholder` component. The property makes the `MediaPlaceholder` only render a dropzone without any other additional UI.
-- Added a cancel link to the list of buttons in the `MediaPlaceholder` component which appears if an `onCancel` handler exists
-- Added the usage of `mediaPreview` for the `Placeholder` component to the `MediaPlaceholder` component
-- Added a an `onDoubleClick` event handler to the `MediaPlaceholder` component
+- Added a cancel link to the list of buttons in the `MediaPlaceholder` component which appears if an `onCancel` handler exists.
+- Added the usage of `mediaPreview` for the `Placeholder` component to the `MediaPlaceholder` component.
+- Added a an `onDoubleClick` event handler to the `MediaPlaceholder` component.
+- Added a way to pass special `ref` property to the `PlainText` component.
 
 ### Breaking Changes
 

packages/block-editor/src/components/plain-text/README.md

@@ -14,6 +14,10 @@ Render an auto-growing textarea allow users to fill any textual content.
 
 You can also pass any extra prop to the textarea rendered by this component.
 
+### `ref: Object`
+
+*Optional.* The component forwards the `ref` property to the `TextareaAutosize` component.
+
 ## Example
 
 {% codetabs %}

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

@@ -1,17 +1,24 @@
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * External dependencies
  */
 import TextareaAutosize from 'react-autosize-textarea';
 import classnames from 'classnames';
 
-function PlainText( { onChange, className, ...props } ) {
+const PlainText = forwardRef( ( { onChange, className, ...props }, ref ) => {
 	return (
 		<TextareaAutosize
+			ref={ ref }
 			className={ classnames( 'editor-plain-text block-editor-plain-text', className ) }
 			onChange={ ( event ) => onChange( event.target.value ) }
 			{ ...props }
 		/>
 	);
-}
+} );
 
 export default PlainText;