From a528611c5261b6ff01c2962336ffc671db88e97e Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@users.noreply.github.com>
Date: Thu, 10 May 2018 09:51:18 +0100
Subject: [PATCH] Update PostExcerpt component to use TextareaControl (#4997)

* Update PostExcerpt component to use TextareaControl.

* Fix build error.

* Fix spacing between 'Learn more about manual excerpts' link and textarea.

* Add missing ) after failed rebase
---
 editor/components/post-excerpt/index.js   | 17 ++++++-----------
 editor/components/post-excerpt/style.scss |  4 ++++
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/editor/components/post-excerpt/index.js b/editor/components/post-excerpt/index.js
index 0129c7dab7ef33..b7c7c9ce088b8c 100644
--- a/editor/components/post-excerpt/index.js
+++ b/editor/components/post-excerpt/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ExternalLink, withInstanceId } from '@wordpress/components';
+import { ExternalLink, TextareaControl } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/element';
 
@@ -11,17 +11,13 @@ import { compose } from '@wordpress/element';
  */
 import './style.scss';
 
-function PostExcerpt( { excerpt, onUpdateExcerpt, instanceId } ) {
-	const id = `editor-post-excerpt-${ instanceId }`;
-	const onChange = ( event ) => onUpdateExcerpt( event.target.value );
-
+function PostExcerpt( { excerpt, onUpdateExcerpt } ) {
 	return (
-		<div>
-			<label key="label" htmlFor={ id }>{ __( 'Write an excerpt (optional)' ) }</label>
-			<textarea
-				id={ id }
+		<div className="editor-post-excerpt">
+			<TextareaControl
+				label={ __( 'Write an excerpt (optional)' ) }
 				className="editor-post-excerpt__textarea"
-				onChange={ onChange }
+				onChange={ ( value ) => onUpdateExcerpt( value ) }
 				value={ excerpt }
 			/>
 			<ExternalLink href="https://codex.wordpress.org/Excerpt">
@@ -42,5 +38,4 @@ export default compose( [
 			dispatch( 'core/editor' ).editPost( { excerpt } );
 		},
 	} ) ),
-	withInstanceId,
 ] )( PostExcerpt );
diff --git a/editor/components/post-excerpt/style.scss b/editor/components/post-excerpt/style.scss
index 5381151f939e3c..9c344b39ebae9f 100644
--- a/editor/components/post-excerpt/style.scss
+++ b/editor/components/post-excerpt/style.scss
@@ -1,3 +1,7 @@
+.editor-post-excerpt > .blocks-base-control {
+	margin-bottom: 0;
+}
+
 .editor-post-excerpt__textarea {
 	width: 100%;
 	height: 80px;