From bbcb457559942e8b011ee404a7c944cd8494ccab Mon Sep 17 00:00:00 2001
From: Michal <mmczaplinski@gmail.com>
Date: Fri, 22 Apr 2022 05:30:40 -0500
Subject: [PATCH] Post Comments Form: Add "proper" visual representation in the
 editor (#40368)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Bruno Ribarić <43731400+ribaricplusplus@users.noreply.github.com>
Co-authored-by: Michael Burridge <mburridge@users.noreply.github.com>
Co-authored-by: David Arenas <david.arenas@automattic.com>
Co-authored-by: Bernie Reiter <ockham@raz.or.at>
---
 packages/block-library/src/editor.scss        |  2 +
 .../src/post-comments-form/block.json         |  1 +
 .../src/post-comments-form/edit.js            | 41 ++++++++++++++++-
 .../src/post-comments-form/editor.scss        |  3 ++
 .../blocks/post-comments-form.test.js         | 46 +++++++++++++++++++
 5 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 packages/block-library/src/post-comments-form/editor.scss
 create mode 100644 packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 59c1f993a51e1..ade4e3d0637af 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -48,6 +48,8 @@
 @import "./query-pagination/editor.scss";
 @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 7a5c161584f83..47cc0a443baee 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-editor",
 	"style": [
 		"wp-block-post-comments-form",
 		"wp-block-buttons",
diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
index 1d204a508f4b1..5fd73c11c7fdc 100644
--- a/packages/block-library/src/post-comments-form/edit.js
+++ b/packages/block-library/src/post-comments-form/edit.js
@@ -14,6 +14,10 @@ import {
 } from '@wordpress/block-editor';
 import { useEntityProp } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalUseDisabled as useDisabled,
+	useInstanceId,
+} from '@wordpress/compose';
 
 export default function PostCommentsFormEdit( {
 	attributes,
@@ -36,6 +40,10 @@ export default function PostCommentsFormEdit( {
 
 	const isInSiteEditor = postType === undefined || postId === undefined;
 
+	const disabledFormRef = useDisabled();
+
+	const instanceId = useInstanceId( PostCommentsFormEdit );
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -67,8 +75,37 @@ export default function PostCommentsFormEdit( {
 					</Warning>
 				) }
 
-				{ ( 'open' === commentStatus || isInSiteEditor ) &&
-					__( 'Post Comments Form' ) }
+				{ ( '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>
+				) }
 			</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 0000000000000..7bb2fb1eb3e15
--- /dev/null
+++ b/packages/block-library/src/post-comments-form/editor.scss
@@ -0,0 +1,3 @@
+.wp-block-post-comments-form * {
+	pointer-events: none;
+}
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 0000000000000..0ba5eb72e5915
--- /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'
+			);
+		} );
+	} );
+} );