Components: Adding a PlainText component for raw editable content

blocks/index.js

@@ -23,6 +23,7 @@ export { default as BlockIcon } from './block-icon';
 export { default as ColorPalette } from './color-palette';
 export { default as Editable } from './rich-text/editable';
 export { default as InspectorControls } from './inspector-controls';
+export { default as PlainText } from './plain-text';
 export { default as MediaUpload } from './media-upload';
 export { default as MediaUploadButton } from './media-upload/button';
 export { default as RichText } from './rich-text';

blocks/library/code/editor.scss

@@ -1,16 +1,11 @@
-.gutenberg .wp-block-code {
-	textarea {
-		box-shadow: none;
-		font-family: $editor-html-font;
-		font-size: $text-editor-font-size;
-		color: $dark-gray-800;
-		border: 1px solid $light-gray-500;
-		border-radius: 4px;
-		padding: .8em 1.6em;
-		margin: 0;
-		overflow-x: auto;
-		width: 100%;
-	}
+.wp-block-code .blocks-plain-text {
+	font-family: $editor-html-font;
+	font-size: $text-editor-font-size;
+	color: $dark-gray-800;
+	padding: .8em 1.6em;
+	overflow-x: auto !important;
+	border: 1px solid $light-gray-500;
+	border-radius: 4px;
 }
 
 // We should extract this to a separate components-toolbar

blocks/library/code/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import TextareaAutosize from 'react-autosize-textarea';
-
 /**
  * WordPress dependencies
  */
@@ -12,6 +7,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import './editor.scss';
+import PlainText from '../../plain-text';
 import { createBlock } from '../../api';
 
 export const name = 'core/code';
@@ -60,9 +56,9 @@ export const settings = {
 	edit( { attributes, setAttributes, className } ) {
 		return (
 			<div className={ className }>
-				<TextareaAutosize
+				<PlainText
 					value={ attributes.content }
-					onChange={ ( event ) => setAttributes( { content: event.target.value } ) }
+					onChange={ ( content ) => setAttributes( { content } ) }
 					placeholder={ __( 'Write code…' ) }
 					aria-label={ __( 'Code' ) }
 				/>

blocks/library/code/test/__snapshots__/index.js.snap

@@ -6,6 +6,7 @@ exports[`core/code block edit matches snapshot 1`] = `
 >
   <textarea
     aria-label="Code"
+    class="blocks-plain-text"
     placeholder="Write code…"
     rows="1"
   />

blocks/library/html/editor.scss

@@ -1,12 +1,9 @@
-.gutenberg textarea.wp-block-html {
-	box-shadow: none;
+.wp-block-html.blocks-plain-text {
 	font-family: $editor-html-font;
 	font-size: $text-editor-font-size;
 	color: $dark-gray-800;
+	padding: .8em 1.6em;
+	overflow-x: auto !important;
 	border: 1px solid $light-gray-500;
 	border-radius: 4px;
-	padding: .8em 1.6em;
-	margin: 0;
-	overflow-x: auto;
-	width: 100%;
 }

blocks/library/html/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import TextareaAutosize from 'react-autosize-textarea';
-
 /**
  * WordPress dependencies
  */
@@ -14,6 +9,7 @@ import { withState } from '@wordpress/components';
  */
 import './editor.scss';
 import BlockControls from '../../block-controls';
+import PlainText from '../../plain-text';
 
 export const name = 'core/html';
 
@@ -64,11 +60,11 @@ export const settings = {
 			<div
 				key="preview"
 				dangerouslySetInnerHTML={ { __html: attributes.content } } /> :
-			<TextareaAutosize
+			<PlainText
 				className="wp-block-html"
 				key="editor"
 				value={ attributes.content }
-				onChange={ ( event ) => setAttributes( { content: event.target.value } ) }
+				onChange={ ( content ) => setAttributes( { content } ) }
 				aria-label={ __( 'HTML' ) }
 			/>,
 	] ),

blocks/library/html/test/__snapshots__/index.js.snap

@@ -3,7 +3,7 @@
 exports[`core/html block edit matches snapshot 1`] = `
 <textarea
   aria-label="HTML"
-  class="wp-block-html"
+  class="blocks-plain-text wp-block-html"
   rows="1"
 />
 `;

blocks/library/shortcode/editor.scss

@@ -12,8 +12,16 @@
 		white-space: nowrap;
 	}
 
-	textarea {
+	.blocks-plain-text {
 		flex: 1 0 0%;
+		padding: 4px 8px;
+		border: 1px solid $light-gray-500;
+		font-family: $default-font;
+		font-size: 13px;
+
+		&:focus {
+			border: 1px solid $dark-gray-500;
+		}
 	}
 
 	.dashicon {

blocks/library/shortcode/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import TextareaAutosize from 'react-autosize-textarea';
-
 /**
  * WordPress dependencies
  */
@@ -13,6 +8,7 @@ import { withInstanceId, Dashicon } from '@wordpress/components';
  * Internal dependencies
  */
 import './editor.scss';
+import PlainText from '../../plain-text';
 
 export const name = 'core/shortcode';
 
@@ -72,14 +68,11 @@ export const settings = {
 						<Dashicon icon="editor-code" />
 						{ __( 'Shortcode' ) }
 					</label>
-					<TextareaAutosize
+					<PlainText
 						id={ inputId }
-						autoComplete="off"
 						value={ attributes.text }
 						placeholder={ __( 'Write shortcode here…' ) }
-						onChange={ ( event ) => setAttributes( {
-							text: event.target.value,
-						} ) }
+						onChange={ ( text ) => setAttributes( { text } ) }
 					/>
 				</div>
 			);

blocks/library/shortcode/test/__snapshots__/index.js.snap

@@ -24,7 +24,7 @@ exports[`core/shortcode block edit matches snapshot 1`] = `
     Shortcode
   </label>
   <textarea
-    autocomplete="off"
+    class="blocks-plain-text"
     id="blocks-shortcode-input-0"
     placeholder="Write shortcode here…"
     rows="1"

blocks/plain-text/README.md

@@ -0,0 +1,66 @@
+# `PlainText`
+
+Render an auto-growing textarea allow users to fill any textual content.
+
+## Properties
+
+### `value: string`
+
+*Required.* String value of the textarea
+
+### `onChange( value: string ): Function`
+
+*Required.* Called when the value changes.
+
+You can also pass any extra prop to the textarea rendered by this component.
+
+## Example
+
+{% codetabs %}
+{% ES5 %}
+```js
+wp.blocks.registerBlockType( /* ... */, {
+	// ...
+
+	attributes: {
+		content: {
+			type: 'string',
+		},
+	},
+
+	edit: function( props ) {
+		return wp.element.createElement( wp.blocks.PlainText, {
+			className: props.className,
+			value: props.attributes.content,
+			onChange: function( content ) {
+				props.setAttributes( { content: content } );
+			},
+		} );
+	},
+} );
+```
+{% ESNext %}
+```js
+const { registerBlockType, PlainText } = wp.blocks;
+
+registerBlockType( /* ... */, {
+	// ...
+
+	attributes: {
+		content: {
+			type: 'string',
+		},
+	},
+
+	edit( { className, attributes, setAttributes } ) {
+		return (
+			<PlainText
+				className={ className }
+				value={ attributes.content }
+				onChange={ ( content ) => setAttributes( { content } ) }
+			/>
+		);
+	},
+} );
+```
+{% end %}

blocks/plain-text/index.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import TextareaAutosize from 'react-autosize-textarea';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function PlainText( { onChange, className, ...props } ) {
+	return (
+		<TextareaAutosize
+			className={ classnames( 'blocks-plain-text', className ) }
+			onChange={ ( event ) => onChange( event.target.value ) }
+			{ ...props }
+		/>
+	);
+}
+
+export default PlainText;

blocks/plain-text/style.scss

@@ -0,0 +1,11 @@
+.gutenberg .blocks-plain-text {
+	box-shadow: none;
+	font-family: inherit;
+	font-size: inherit;
+	color: inherit;
+	line-height: inherit;
+	border: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+}