From 79131644ad409aab0c987843a10366fb9f128c5b Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 14 Apr 2022 20:06:15 -0500
Subject: [PATCH 01/10] Post Comments Form: Add UI elements in the editor

---
 .../src/post-comments-form/edit.js            | 55 ++++++++++++++++++-
 .../src/post-comments-form/editor.scss        | 23 ++++++++
 2 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 packages/block-library/src/post-comments-form/editor.scss

diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
index 1d204a508f4b15..d0bea18d12b6dc 100644
--- a/packages/block-library/src/post-comments-form/edit.js
+++ b/packages/block-library/src/post-comments-form/edit.js
@@ -67,8 +67,59 @@ export default function PostCommentsFormEdit( {
 					</Warning>
 				) }
 
-				{ ( 'open' === commentStatus || isInSiteEditor ) &&
-					__( 'Post Comments Form' ) }
+				{ ( 'open' === commentStatus || isInSiteEditor ) && (
+					<div className="wp-block-post-comments">
+						<h3>{ __( 'Leave a Reply' ) }</h3>
+						<form noValidate="" className="comment-form">
+							<p>
+								<a
+									href="#post-comments-pseudo-link"
+									onClick={ ( event ) =>
+										event.preventDefault()
+									}
+								>
+									{ __( 'Logged in as admin' ) }
+								</a>
+								.{ ' ' }
+								<a
+									href="#post-comments-pseudo-link"
+									onClick={ ( event ) =>
+										event.preventDefault()
+									}
+								>
+									{ __( 'Log out?' ) }
+								</a>{ ' ' }
+								<span>
+									{ __( 'Required fields are marked' ) }{ ' ' }
+									<span>*</span>
+								</span>
+							</p>
+							<p>
+								<label htmlFor="comment">
+									{ __( 'Comment' ) }
+									<span>*</span>
+								</label>
+								<textarea
+									/* eslint-disable-next-line no-restricted-syntax */
+									id="comment"
+									name="comment"
+									cols="45"
+									rows="8"
+									maxLength="65525"
+									required=""
+								/>
+							</p>
+							<p>
+								<input
+									name="submit"
+									type="submit"
+									className="submit wp-block-button__link"
+									value={ __( 'Post Comment' ) }
+								/>
+							</p>
+						</form>
+					</div>
+				) }
 			</div>
 		</>
 	);
diff --git a/packages/block-library/src/post-comments-form/editor.scss b/packages/block-library/src/post-comments-form/editor.scss
new file mode 100644
index 00000000000000..576ef9d2e2881c
--- /dev/null
+++ b/packages/block-library/src/post-comments-form/editor.scss
@@ -0,0 +1,23 @@
+.wp-block-post-comments-form {
+	textarea {
+		padding: calc(0.667em + 2px);
+	}
+
+	.comment-form {
+		textarea,
+		label {
+			display: block;
+			margin-bottom: 0.25em;
+		}
+	}
+
+	// Styles copied from button block styles.
+	input[type="submit"] {
+		border: none;
+		box-shadow: none;
+		cursor: pointer;
+		display: inline-block;
+		text-align: center;
+		overflow-wrap: break-word;
+	}
+}

From 860999b447107fa9f6471d4cf3e69eded9e52b37 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Fri, 15 Apr 2022 17:49:40 -0500
Subject: [PATCH 02/10]  Post Comments Form: Massage editor styles & markup a
 bit

---
 .../src/post-comments-form/edit.js            | 33 +++----------------
 .../src/post-comments-form/editor.scss        |  6 ++--
 2 files changed, 8 insertions(+), 31 deletions(-)

diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
index d0bea18d12b6dc..06a665353e423f 100644
--- a/packages/block-library/src/post-comments-form/edit.js
+++ b/packages/block-library/src/post-comments-form/edit.js
@@ -68,36 +68,12 @@ export default function PostCommentsFormEdit( {
 				) }
 
 				{ ( 'open' === commentStatus || isInSiteEditor ) && (
-					<div className="wp-block-post-comments">
+					<div className="wp-block-post-comments-form">
 						<h3>{ __( 'Leave a Reply' ) }</h3>
-						<form noValidate="" className="comment-form">
-							<p>
-								<a
-									href="#post-comments-pseudo-link"
-									onClick={ ( event ) =>
-										event.preventDefault()
-									}
-								>
-									{ __( 'Logged in as admin' ) }
-								</a>
-								.{ ' ' }
-								<a
-									href="#post-comments-pseudo-link"
-									onClick={ ( event ) =>
-										event.preventDefault()
-									}
-								>
-									{ __( 'Log out?' ) }
-								</a>{ ' ' }
-								<span>
-									{ __( 'Required fields are marked' ) }{ ' ' }
-									<span>*</span>
-								</span>
-							</p>
+						<form noValidate className="comment-form">
 							<p>
 								<label htmlFor="comment">
 									{ __( 'Comment' ) }
-									<span>*</span>
 								</label>
 								<textarea
 									/* eslint-disable-next-line no-restricted-syntax */
@@ -105,15 +81,14 @@ export default function PostCommentsFormEdit( {
 									name="comment"
 									cols="45"
 									rows="8"
-									maxLength="65525"
-									required=""
+									disabled
 								/>
 							</p>
 							<p>
 								<input
 									name="submit"
-									type="submit"
 									className="submit wp-block-button__link"
+									label={ __( 'Post Comment' ) }
 									value={ __( 'Post Comment' ) }
 								/>
 							</p>
diff --git a/packages/block-library/src/post-comments-form/editor.scss b/packages/block-library/src/post-comments-form/editor.scss
index 576ef9d2e2881c..b40646ee9960a6 100644
--- a/packages/block-library/src/post-comments-form/editor.scss
+++ b/packages/block-library/src/post-comments-form/editor.scss
@@ -1,6 +1,9 @@
 .wp-block-post-comments-form {
 	textarea {
 		padding: calc(0.667em + 2px);
+		border: 1px solid $gray-600;
+		font-size: 1em;
+		font-family: inherit;
 	}
 
 	.comment-form {
@@ -11,8 +14,7 @@
 		}
 	}
 
-	// Styles copied from button block styles.
-	input[type="submit"] {
+	input[name="submit"] {
 		border: none;
 		box-shadow: none;
 		cursor: pointer;

From fb4a0b16a6a33dd69c8725f89d848e7797726a3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bruno=20Ribari=C4=87?=
 <43731400+ribaricplusplus@users.noreply.github.com>
Date: Tue, 19 Apr 2022 02:52:45 +0200
Subject: [PATCH 03/10] e2e tests for post comments form placeholder (#40396)

* Tests

* Change tests directory

* Remove second test

* Fix test
---
 .../blocks/post-comments-form.test.js         | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js

diff --git a/packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js b/packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js
new file mode 100644
index 00000000000000..0ba5eb72e59158
--- /dev/null
+++ b/packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	insertBlock,
+	activateTheme,
+	setOption,
+	visitSiteEditor,
+	openSiteEditorNavigationPanel,
+	navigateSiteEditorBackToRoot,
+	deleteAllTemplates,
+	canvas,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'Post Comments Form', () => {
+	beforeAll( async () => {
+		await activateTheme( 'emptytheme' );
+		await deleteAllTemplates( 'wp_template' );
+	} );
+
+	describe( 'placeholder', () => {
+		it( 'displays in site editor even when comments are closed by default', async () => {
+			await setOption( 'default_comment_status', 'closed' );
+
+			// Navigate to "Singular" post template
+			await visitSiteEditor();
+			await openSiteEditorNavigationPanel();
+			await navigateSiteEditorBackToRoot();
+			await expect( page ).toClick(
+				'.components-navigation__item-title',
+				{ text: /templates/i }
+			);
+			await expect( page ).toClick( '.components-heading > a', {
+				text: /singular/i,
+			} );
+
+			// Insert post comments form
+			await insertBlock( 'Post Comments Form' );
+
+			// Ensure the placeholder is there
+			await expect( canvas() ).toMatchElement(
+				'.wp-block-post-comments-form .comment-form'
+			);
+		} );
+	} );
+} );

From e78e57e336f435ff6ca005356fcc434a28bf7e52 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Wed, 20 Apr 2022 11:33:14 -0500
Subject: [PATCH 04/10] Add a `readOnly` attribute to the <input>

Co-authored-by: Michael Burridge <mburridge@users.noreply.github.com>
---
 packages/block-library/src/post-comments-form/edit.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
index 06a665353e423f..c419a592e13a40 100644
--- a/packages/block-library/src/post-comments-form/edit.js
+++ b/packages/block-library/src/post-comments-form/edit.js
@@ -90,6 +90,7 @@ export default function PostCommentsFormEdit( {
 									className="submit wp-block-button__link"
 									label={ __( 'Post Comment' ) }
 									value={ __( 'Post Comment' ) }
+									readOnly
 								/>
 							</p>
 						</form>

From 63cf602b79582d327bf95601248971b8ca7f32cd Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Thu, 21 Apr 2022 17:38:02 +0200
Subject: [PATCH 05/10] Disable form element with `useDisabled`

---
 packages/block-library/src/post-comments-form/edit.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
index c419a592e13a40..f01f22eceb368d 100644
--- a/packages/block-library/src/post-comments-form/edit.js
+++ b/packages/block-library/src/post-comments-form/edit.js
@@ -14,6 +14,7 @@ import {
 } from '@wordpress/block-editor';
 import { useEntityProp } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
+import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
 
 export default function PostCommentsFormEdit( {
 	attributes,
@@ -36,6 +37,8 @@ export default function PostCommentsFormEdit( {
 
 	const isInSiteEditor = postType === undefined || postId === undefined;
 
+	const disabledFormRef = useDisabled();
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -70,7 +73,11 @@ export default function PostCommentsFormEdit( {
 				{ ( 'open' === commentStatus || isInSiteEditor ) && (
 					<div className="wp-block-post-comments-form">
 						<h3>{ __( 'Leave a Reply' ) }</h3>
-						<form noValidate className="comment-form">
+						<form
+							noValidate
+							className="comment-form"
+							ref={ disabledFormRef }
+						>
 							<p>
 								<label htmlFor="comment">
 									{ __( 'Comment' ) }
@@ -81,7 +88,6 @@ export default function PostCommentsFormEdit( {
 									name="comment"
 									cols="45"
 									rows="8"
-									disabled
 								/>
 							</p>
 							<p>

From 4e1c59b9d45a127d39c20e77c2a09d700eb08d8d Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 21 Apr 2022 18:14:02 -0500
Subject: [PATCH 06/10] Remove the wp-block-post-comments-form class

---
 packages/block-library/src/post-comments-form/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
index f01f22eceb368d..3cb20082f52943 100644
--- a/packages/block-library/src/post-comments-form/edit.js
+++ b/packages/block-library/src/post-comments-form/edit.js
@@ -71,7 +71,7 @@ export default function PostCommentsFormEdit( {
 				) }
 
 				{ ( 'open' === commentStatus || isInSiteEditor ) && (
-					<div className="wp-block-post-comments-form">
+					<div>
 						<h3>{ __( 'Leave a Reply' ) }</h3>
 						<form
 							noValidate

From ca28820214c817180840bf86f4d73c1628b37693 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 21 Apr 2022 18:59:59 -0500
Subject: [PATCH 07/10] Use the useInstanceId hook

---
 packages/block-library/src/post-comments-form/edit.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
index 3cb20082f52943..d985850d88f4b8 100644
--- a/packages/block-library/src/post-comments-form/edit.js
+++ b/packages/block-library/src/post-comments-form/edit.js
@@ -14,7 +14,10 @@ import {
 } from '@wordpress/block-editor';
 import { useEntityProp } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
-import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
+import {
+	__experimentalUseDisabled as useDisabled,
+	useInstanceId,
+} from '@wordpress/compose';
 
 export default function PostCommentsFormEdit( {
 	attributes,
@@ -39,6 +42,8 @@ export default function PostCommentsFormEdit( {
 
 	const disabledFormRef = useDisabled();
 
+	const instanceId = useInstanceId( PostCommentsFormEdit );
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -79,12 +84,12 @@ export default function PostCommentsFormEdit( {
 							ref={ disabledFormRef }
 						>
 							<p>
-								<label htmlFor="comment">
+								<label htmlFor={ `comment-${ instanceId }` }>
 									{ __( 'Comment' ) }
 								</label>
 								<textarea
 									/* eslint-disable-next-line no-restricted-syntax */
-									id="comment"
+									id={ `comment-${ instanceId }` }
 									name="comment"
 									cols="45"
 									rows="8"

From d2d7ccc2bb3e0a2bdc8b9b3018dccd2ea6d3ea2a Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 21 Apr 2022 19:11:34 -0500
Subject: [PATCH 08/10] Fix styling

---
 packages/block-library/src/editor.scss        |  1 +
 .../src/post-comments-form/block.json         |  1 +
 .../src/post-comments-form/editor.scss        | 26 ++-----------------
 3 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index dcc9e6e165abd5..5e1b6d7afa733b 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -50,6 +50,7 @@
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
 @import "./post-comments/editor.scss";
+@import "./post-comments-form/editor.scss";
 
 :root .editor-styles-wrapper {
 	@include background-colors-deprecated();
diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json
index 7a5c161584f838..70cb4dde7beae8 100644
--- a/packages/block-library/src/post-comments-form/block.json
+++ b/packages/block-library/src/post-comments-form/block.json
@@ -34,6 +34,7 @@
 			}
 		}
 	},
+	"editorStyle": "wp-block-post-comments-form",
 	"style": [
 		"wp-block-post-comments-form",
 		"wp-block-buttons",
diff --git a/packages/block-library/src/post-comments-form/editor.scss b/packages/block-library/src/post-comments-form/editor.scss
index b40646ee9960a6..7bb2fb1eb3e150 100644
--- a/packages/block-library/src/post-comments-form/editor.scss
+++ b/packages/block-library/src/post-comments-form/editor.scss
@@ -1,25 +1,3 @@
-.wp-block-post-comments-form {
-	textarea {
-		padding: calc(0.667em + 2px);
-		border: 1px solid $gray-600;
-		font-size: 1em;
-		font-family: inherit;
-	}
-
-	.comment-form {
-		textarea,
-		label {
-			display: block;
-			margin-bottom: 0.25em;
-		}
-	}
-
-	input[name="submit"] {
-		border: none;
-		box-shadow: none;
-		cursor: pointer;
-		display: inline-block;
-		text-align: center;
-		overflow-wrap: break-word;
-	}
+.wp-block-post-comments-form * {
+	pointer-events: none;
 }

From d78f1c78d415a6908e26961b10176b0eb6ef2b8d Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Thu, 21 Apr 2022 19:19:50 -0500
Subject: [PATCH 09/10] Remove the unnecessary eslint comment

---
 packages/block-library/src/post-comments-form/edit.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
index d985850d88f4b8..5fd73c11c7fdc0 100644
--- a/packages/block-library/src/post-comments-form/edit.js
+++ b/packages/block-library/src/post-comments-form/edit.js
@@ -88,7 +88,6 @@ export default function PostCommentsFormEdit( {
 									{ __( 'Comment' ) }
 								</label>
 								<textarea
-									/* eslint-disable-next-line no-restricted-syntax */
 									id={ `comment-${ instanceId }` }
 									name="comment"
 									cols="45"

From 5f652e7fc4171dba0e04fc6a0c9518d2e256dd74 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Fri, 22 Apr 2022 11:48:42 +0200
Subject: [PATCH 10/10] Append -editor to editorStyle

---
 packages/block-library/src/post-comments-form/block.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json
index 70cb4dde7beae8..47cc0a443baee8 100644
--- a/packages/block-library/src/post-comments-form/block.json
+++ b/packages/block-library/src/post-comments-form/block.json
@@ -34,7 +34,7 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-post-comments-form",
+	"editorStyle": "wp-block-post-comments-form-editor",
 	"style": [
 		"wp-block-post-comments-form",
 		"wp-block-buttons",