From 7e7d6cde00acadc45f7509853caeacc454c78fd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 21 Jun 2022 16:03:14 +0200
Subject: [PATCH] Refactor: Reuse code of the editor placeholder across Post
 Comments and Post Comments Form (#40560)

* Create a separate template for the Comments Form

* Use the form in the Post Comments block

* Add the missing "return" in the CommentForm
---
 .../src/post-comments-form/edit.js            | 43 +++---------------
 .../src/post-comments-form/form.js            | 43 ++++++++++++++++++
 .../block-library/src/post-comments/edit.js   | 45 ++++---------------
 3 files changed, 57 insertions(+), 74 deletions(-)
 create mode 100644 packages/block-library/src/post-comments-form/form.js

diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
index 5fd73c11c7fdc..fbcd99d93f3f4 100644
--- a/packages/block-library/src/post-comments-form/edit.js
+++ b/packages/block-library/src/post-comments-form/edit.js
@@ -14,10 +14,11 @@ import {
 } from '@wordpress/block-editor';
 import { useEntityProp } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	__experimentalUseDisabled as useDisabled,
-	useInstanceId,
-} from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import CommentsForm from './form';
 
 export default function PostCommentsFormEdit( {
 	attributes,
@@ -40,10 +41,6 @@ export default function PostCommentsFormEdit( {
 
 	const isInSiteEditor = postType === undefined || postId === undefined;
 
-	const disabledFormRef = useDisabled();
-
-	const instanceId = useInstanceId( PostCommentsFormEdit );
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -76,35 +73,7 @@ export default function PostCommentsFormEdit( {
 				) }
 
 				{ ( 'open' === commentStatus || isInSiteEditor ) && (
-					<div>
-						<h3>{ __( 'Leave a Reply' ) }</h3>
-						<form
-							noValidate
-							className="comment-form"
-							ref={ disabledFormRef }
-						>
-							<p>
-								<label htmlFor={ `comment-${ instanceId }` }>
-									{ __( 'Comment' ) }
-								</label>
-								<textarea
-									id={ `comment-${ instanceId }` }
-									name="comment"
-									cols="45"
-									rows="8"
-								/>
-							</p>
-							<p>
-								<input
-									name="submit"
-									className="submit wp-block-button__link"
-									label={ __( 'Post Comment' ) }
-									value={ __( 'Post Comment' ) }
-									readOnly
-								/>
-							</p>
-						</form>
-					</div>
+					<CommentsForm />
 				) }
 			</div>
 		</>
diff --git a/packages/block-library/src/post-comments-form/form.js b/packages/block-library/src/post-comments-form/form.js
new file mode 100644
index 0000000000000..1e09e5691d9de
--- /dev/null
+++ b/packages/block-library/src/post-comments-form/form.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalUseDisabled as useDisabled,
+	useInstanceId,
+} from '@wordpress/compose';
+
+const CommentsForm = () => {
+	const disabledFormRef = useDisabled();
+	const instanceId = useInstanceId( CommentsForm );
+
+	return (
+		<div className="comment-respond">
+			<h3 className="comment-reply-title">{ __( 'Leave a Reply' ) }</h3>
+			<form noValidate className="comment-form" ref={ disabledFormRef }>
+				<p>
+					<label htmlFor={ `comment-${ instanceId }` }>
+						{ __( 'Comment' ) }
+					</label>
+					<textarea
+						id={ `comment-${ instanceId }` }
+						name="comment"
+						cols="45"
+						rows="8"
+					/>
+				</p>
+				<p className="form-submit wp-block-button">
+					<input
+						name="submit"
+						type="submit"
+						className="submit wp-block-button__link"
+						label={ __( 'Post Comment' ) }
+						value={ __( 'Post Comment' ) }
+					/>
+				</p>
+			</form>
+		</div>
+	);
+};
+
+export default CommentsForm;
diff --git a/packages/block-library/src/post-comments/edit.js b/packages/block-library/src/post-comments/edit.js
index bd87d542a0332..caa50bb83a90c 100644
--- a/packages/block-library/src/post-comments/edit.js
+++ b/packages/block-library/src/post-comments/edit.js
@@ -16,11 +16,14 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import {
-	__experimentalUseDisabled as useDisabled,
-	useInstanceId,
-} from '@wordpress/compose';
+
 import { createInterpolateElement } from '@wordpress/element';
+import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import CommentsForm from '../post-comments-form/form';
 
 export default function PostCommentsEdit( {
 	attributes: { textAlign },
@@ -89,8 +92,6 @@ export default function PostCommentsEdit( {
 
 	const disabledRef = useDisabled();
 
-	const textareaId = useInstanceId( PostCommentsEdit );
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -238,37 +239,7 @@ export default function PostCommentsEdit( {
 							</div>
 						</div>
 
-						<div className="comment-respond">
-							<h3 className="comment-reply-title">
-								{ __( 'Leave a Reply' ) }
-							</h3>
-
-							<form className="comment-form" noValidate>
-								<p className="comment-form-comment">
-									<label
-										htmlFor={ `comment-${ textareaId }` }
-									>
-										{ __( 'Comment' ) }{ ' ' }
-										<span className="required">*</span>
-									</label>
-									<textarea
-										id={ `comment-${ textareaId }` }
-										name="comment"
-										cols="45"
-										rows="8"
-										required
-									/>
-								</p>
-								<p className="form-submit wp-block-button">
-									<input
-										name="submit"
-										type="submit"
-										className="submit wp-block-button__link"
-										value={ __( 'Post Comment' ) }
-									/>
-								</p>
-							</form>
-						</div>
+						<CommentsForm />
 					</div>
 				) }
 			</div>