From 15465be4261e4552872bc31cec0ef5a9c403d45f Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Wed, 20 Apr 2022 17:08:00 +0200
Subject: [PATCH 1/6] Add placeholder to Post Comments block

---
 .../block-library/src/post-comments/edit.js   | 185 +++++++++++++-----
 .../src/post-comments/style.scss              |   6 +-
 2 files changed, 142 insertions(+), 49 deletions(-)

diff --git a/packages/block-library/src/post-comments/edit.js b/packages/block-library/src/post-comments/edit.js
index 237569227c61e7..41e872903c6952 100644
--- a/packages/block-library/src/post-comments/edit.js
+++ b/packages/block-library/src/post-comments/edit.js
@@ -6,7 +6,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import {
 	AlignmentControl,
 	BlockControls,
@@ -14,58 +13,25 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { RawHTML } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-
-function PostCommentsDisplay( { postId } ) {
-	return useSelect(
-		( select ) => {
-			const comments = select( coreStore ).getEntityRecords(
-				'root',
-				'comment',
-				{
-					post: postId,
-				}
-			);
-			// TODO: "No Comments" placeholder should be editable.
-			return comments && comments.length
-				? comments.map( ( comment ) => (
-						<RawHTML
-							className="wp-block-post-comments__comment"
-							key={ comment.id }
-						>
-							{ comment.content.rendered }
-						</RawHTML>
-				  ) )
-				: __( 'No comments.' );
-		},
-		[ postId ]
-	);
-}
+import { useSelect } from '@wordpress/data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 
 export default function PostCommentsEdit( {
-	attributes,
+	attributes: { textAlign },
 	setAttributes,
-	context,
+	context: { postType, postId },
 } ) {
-	const { postType, postId } = context;
-	const { textAlign } = attributes;
+	let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );
+	postTitle = postTitle || __( 'Post Title' );
+	const { name: currentUserName } = useSelect( ( select ) =>
+		select( coreStore ).getCurrentUser()
+	);
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
 
-	if ( ! postType || ! postId ) {
-		return (
-			<div { ...blockProps }>
-				<Warning>
-					{ __( 'Post comments block: no post found.' ) }
-				</Warning>
-			</div>
-		);
-	}
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -78,7 +44,138 @@ export default function PostCommentsEdit( {
 			</BlockControls>
 
 			<div { ...blockProps }>
-				<PostCommentsDisplay postId={ postId } />
+				<Warning>
+					{ __(
+						'This is just a placeholder, not a real comment. The final styling may differ because it also depends on the current theme. For better compatibility with the Block Editor, please consider replacing this block with the "Comments Query Loop" block.'
+					) }
+				</Warning>
+
+				<h3>
+					{ __( 'One response to' ) } “{ postTitle }”
+				</h3>
+
+				<div className="navigation">
+					<div className="alignleft">
+						<a href="#top">« { __( 'Older Comments' ) }</a>
+					</div>
+					<div className="alignright">
+						<a href="#top">{ __( 'Newer Comments' ) } »</a>
+					</div>
+				</div>
+
+				<ol className="commentlist">
+					<li className="comment even thread-even depth-1">
+						<article className="comment-body">
+							<footer className="comment-meta">
+								<div className="comment-author vcard">
+									<img
+										alt=""
+										src="http://1.gravatar.com/avatar/d7a973c7dab26985da5f961be7b74480?s=32&d=mm&r=g"
+										className="avatar avatar-32 photo"
+										height="32"
+										width="32"
+										loading="lazy"
+									/>
+									<b className="fn">
+										<a href="#top" className="url">
+											{ __( 'A WordPress Commenter' ) }
+										</a>
+									</b>{ ' ' }
+									<span className="says">
+										{ __( 'says' ) }:
+									</span>
+								</div>
+
+								<div className="comment-metadata">
+									<a href="#top">
+										<time dateTime="2000-01-01T00:00:00+00:00">
+											{ __(
+												'January 1, 2000 at 00:00 am'
+											) }
+										</time>
+									</a>{ ' ' }
+									<span className="edit-link">
+										<a
+											className="comment-edit-link"
+											href="#top"
+										>
+											{ __( 'Edit' ) }
+										</a>
+									</span>
+								</div>
+							</footer>
+
+							<div className="comment-content">
+								<p>
+									{ __( 'Hi, this is a comment.' ) }
+									<br />
+									{ __(
+										'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'
+									) }
+									<br />
+									{ __(
+										'Commenter avatars come from'
+									) }{ ' ' }
+									<a href="https://gravatar.com/">Gravatar</a>
+									.
+								</p>
+							</div>
+
+							<div className="reply">
+								<a
+									className="comment-reply-link"
+									href="#top"
+									aria-label="Reply to A WordPress Commenter"
+								>
+									{ __( 'Reply' ) }
+								</a>
+							</div>
+						</article>
+					</li>
+				</ol>
+
+				<div className="navigation">
+					<div className="alignleft">
+						<a href="#top">« { __( 'Older Comments' ) }</a>
+					</div>
+					<div className="alignright">
+						<a href="#top">{ __( 'Newer Comments' ) } »</a>
+					</div>
+				</div>
+
+				<div className="comment-respond">
+					<h3 className="comment-reply-title">
+						{ __( 'Leave a Reply' ) }
+					</h3>
+
+					<form className="comment-form" noValidate={ true }>
+						<p className="logged-in-as">
+							{ __( 'Logged in as' ) } { currentUserName }.{ ' ' }
+							<a href="#top">{ __( 'Log out?' ) }</a>{ ' ' }
+						</p>
+						<p className="comment-form-comment">
+							<label htmlFor="comment">
+								{ __( 'Comment' ) }{ ' ' }
+								<span className="required">*</span>
+							</label>
+							<textarea
+								name="comment"
+								cols="45"
+								rows="8"
+								required={ true }
+							/>
+						</p>
+						<p className="form-submit wp-block-button">
+							<input
+								name="submit"
+								type="submit"
+								disabled={ true }
+								className="submit wp-block-button__link"
+								value={ __( 'Post Comment' ) }
+							/>
+						</p>
+					</form>
+				</div>
 			</div>
 		</>
 	);
diff --git a/packages/block-library/src/post-comments/style.scss b/packages/block-library/src/post-comments/style.scss
index 8adb65b61aa2c0..c3a89318f09fd6 100644
--- a/packages/block-library/src/post-comments/style.scss
+++ b/packages/block-library/src/post-comments/style.scss
@@ -1,10 +1,6 @@
 .wp-block-post-comments {
-	// Remove extraneous top padding added to the first heading of the block.
-	> h3:first-of-type {
-		margin-top: 0;
-	}
-
 	.commentlist {
+		clear: both;
 		list-style: none;
 		margin: 0;
 		padding: 0;

From b3b2b6c824d6cb153ee3b0b17e0f7d9a05ee5d64 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 21 Apr 2022 08:39:24 +0200
Subject: [PATCH 2/6] Use default avatar

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

diff --git a/packages/block-library/src/post-comments/edit.js b/packages/block-library/src/post-comments/edit.js
index 41e872903c6952..2ce54eb689721e 100644
--- a/packages/block-library/src/post-comments/edit.js
+++ b/packages/block-library/src/post-comments/edit.js
@@ -11,6 +11,7 @@ import {
 	BlockControls,
 	Warning,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -23,9 +24,17 @@ export default function PostCommentsEdit( {
 } ) {
 	let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );
 	postTitle = postTitle || __( 'Post Title' );
+
 	const { name: currentUserName } = useSelect( ( select ) =>
 		select( coreStore ).getCurrentUser()
 	);
+
+	const { avatarURL } = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__experimentalDiscussionSettings
+	);
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -69,8 +78,8 @@ export default function PostCommentsEdit( {
 							<footer className="comment-meta">
 								<div className="comment-author vcard">
 									<img
-										alt=""
-										src="http://1.gravatar.com/avatar/d7a973c7dab26985da5f961be7b74480?s=32&d=mm&r=g"
+										alt="Commenter Avatar"
+										src={ avatarURL }
 										className="avatar avatar-32 photo"
 										height="32"
 										width="32"

From fe62c6569b367ed2382772c863635362cc11114a Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 21 Apr 2022 08:43:33 +0200
Subject: [PATCH 3/6] Remove logged-in as text from placeholder

---
 packages/block-library/src/post-comments/edit.js | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/block-library/src/post-comments/edit.js b/packages/block-library/src/post-comments/edit.js
index 2ce54eb689721e..541b9c13028cd9 100644
--- a/packages/block-library/src/post-comments/edit.js
+++ b/packages/block-library/src/post-comments/edit.js
@@ -15,7 +15,7 @@ import {
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useEntityProp } from '@wordpress/core-data';
 
 export default function PostCommentsEdit( {
 	attributes: { textAlign },
@@ -25,10 +25,6 @@ export default function PostCommentsEdit( {
 	let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );
 	postTitle = postTitle || __( 'Post Title' );
 
-	const { name: currentUserName } = useSelect( ( select ) =>
-		select( coreStore ).getCurrentUser()
-	);
-
 	const { avatarURL } = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings()
@@ -158,10 +154,6 @@ export default function PostCommentsEdit( {
 					</h3>
 
 					<form className="comment-form" noValidate={ true }>
-						<p className="logged-in-as">
-							{ __( 'Logged in as' ) } { currentUserName }.{ ' ' }
-							<a href="#top">{ __( 'Log out?' ) }</a>{ ' ' }
-						</p>
 						<p className="comment-form-comment">
 							<label htmlFor="comment">
 								{ __( 'Comment' ) }{ ' ' }

From 772549e0d339fb0d6e2ef1a64d26a752e76f0ad7 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 21 Apr 2022 12:39:10 +0200
Subject: [PATCH 4/6] Add different warnings depending on the settings

---
 lib/compat/wordpress-6.0/blocks.php           |  15 +-
 .../block-library/src/post-comments/edit.js   | 296 ++++++++++--------
 2 files changed, 181 insertions(+), 130 deletions(-)

diff --git a/lib/compat/wordpress-6.0/blocks.php b/lib/compat/wordpress-6.0/blocks.php
index 547d3246319fde..3b4d457dade8da 100644
--- a/lib/compat/wordpress-6.0/blocks.php
+++ b/lib/compat/wordpress-6.0/blocks.php
@@ -228,13 +228,14 @@ function get_comments_pagination_arrow( $block, $pagination_type = 'next' ) {
 function gutenberg_extend_block_editor_settings_with_discussion_settings( $settings ) {
 
 	$settings['__experimentalDiscussionSettings'] = array(
-		'commentOrder'        => get_option( 'comment_order' ),
-		'commentsPerPage'     => get_option( 'comments_per_page' ),
-		'defaultCommentsPage' => get_option( 'default_comments_page' ),
-		'pageComments'        => get_option( 'page_comments' ),
-		'threadComments'      => get_option( 'thread_comments' ),
-		'threadCommentsDepth' => get_option( 'thread_comments_depth' ),
-		'avatarURL'           => get_avatar_url(
+		'commentOrder'         => get_option( 'comment_order' ),
+		'commentsPerPage'      => get_option( 'comments_per_page' ),
+		'defaultCommentsPage'  => get_option( 'default_comments_page' ),
+		'pageComments'         => get_option( 'page_comments' ),
+		'threadComments'       => get_option( 'thread_comments' ),
+		'threadCommentsDepth'  => get_option( 'thread_comments_depth' ),
+		'defaultCommentStatus' => get_option( 'default_comment_status' ),
+		'avatarURL'            => get_avatar_url(
 			'',
 			array(
 				'size'          => 96,
diff --git a/packages/block-library/src/post-comments/edit.js b/packages/block-library/src/post-comments/edit.js
index 541b9c13028cd9..9e753245c15c4d 100644
--- a/packages/block-library/src/post-comments/edit.js
+++ b/packages/block-library/src/post-comments/edit.js
@@ -13,9 +13,9 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useEntityProp } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 
 export default function PostCommentsEdit( {
 	attributes: { textAlign },
@@ -25,12 +25,57 @@ export default function PostCommentsEdit( {
 	let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );
 	postTitle = postTitle || __( 'Post Title' );
 
-	const { avatarURL } = useSelect(
+	const [ commentStatus ] = useEntityProp(
+		'postType',
+		postType,
+		'comment_status',
+		postId
+	);
+
+	const { avatarURL, defaultCommentStatus } = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings()
 				.__experimentalDiscussionSettings
 	);
 
+	const isSiteEditor = postType === undefined || postId === undefined;
+
+	const postTypeSupportsComments = useSelect( ( select ) =>
+		postType
+			? !! select( coreStore ).getPostType( postType )?.supports.comments
+			: false
+	);
+
+	let warning = __(
+		'Post Comments block: This is just a placeholder, not a real comment. The final styling may differ because it also depends on the current theme. For better compatibility with the Block Editor, please consider replacing this block with the "Comments Query Loop" block.'
+	);
+	let showPlacholder = true;
+
+	if ( ! isSiteEditor && 'open' !== commentStatus ) {
+		if ( 'closed' === commentStatus ) {
+			warning = sprintf(
+				/* translators: 1: Post type (i.e. "post", "page") */
+				__(
+					'Post Comments block: Comments to this %s are not allowed.'
+				),
+				postType
+			);
+			showPlacholder = false;
+		} else if ( ! postTypeSupportsComments ) {
+			warning = sprintf(
+				/* translators: 1: Post type (i.e. "post", "page") */
+				__(
+					'Post Comments block: Comments for this post type (%s) are not enabled.'
+				),
+				postType
+			);
+			showPlacholder = false;
+		} else if ( 'open' !== defaultCommentStatus ) {
+			warning = __( 'Post Comments block: Comments are not enabled.' );
+			showPlacholder = false;
+		}
+	}
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -49,134 +94,139 @@ export default function PostCommentsEdit( {
 			</BlockControls>
 
 			<div { ...blockProps }>
-				<Warning>
-					{ __(
-						'This is just a placeholder, not a real comment. The final styling may differ because it also depends on the current theme. For better compatibility with the Block Editor, please consider replacing this block with the "Comments Query Loop" block.'
-					) }
-				</Warning>
-
-				<h3>
-					{ __( 'One response to' ) } “{ postTitle }”
-				</h3>
-
-				<div className="navigation">
-					<div className="alignleft">
-						<a href="#top">« { __( 'Older Comments' ) }</a>
-					</div>
-					<div className="alignright">
-						<a href="#top">{ __( 'Newer Comments' ) } »</a>
-					</div>
-				</div>
-
-				<ol className="commentlist">
-					<li className="comment even thread-even depth-1">
-						<article className="comment-body">
-							<footer className="comment-meta">
-								<div className="comment-author vcard">
-									<img
-										alt="Commenter Avatar"
-										src={ avatarURL }
-										className="avatar avatar-32 photo"
-										height="32"
-										width="32"
-										loading="lazy"
-									/>
-									<b className="fn">
-										<a href="#top" className="url">
-											{ __( 'A WordPress Commenter' ) }
-										</a>
-									</b>{ ' ' }
-									<span className="says">
-										{ __( 'says' ) }:
-									</span>
-								</div>
-
-								<div className="comment-metadata">
-									<a href="#top">
-										<time dateTime="2000-01-01T00:00:00+00:00">
+				<Warning>{ warning }</Warning>
+
+				{ showPlacholder && (
+					<>
+						<h3>
+							{ __( 'One response to' ) } “{ postTitle }”
+						</h3>
+
+						<div className="navigation">
+							<div className="alignleft">
+								<a href="#top">« { __( 'Older Comments' ) }</a>
+							</div>
+							<div className="alignright">
+								<a href="#top">{ __( 'Newer Comments' ) } »</a>
+							</div>
+						</div>
+
+						<ol className="commentlist">
+							<li className="comment even thread-even depth-1">
+								<article className="comment-body">
+									<footer className="comment-meta">
+										<div className="comment-author vcard">
+											<img
+												alt="Commenter Avatar"
+												src={ avatarURL }
+												className="avatar avatar-32 photo"
+												height="32"
+												width="32"
+												loading="lazy"
+											/>
+											<b className="fn">
+												<a href="#top" className="url">
+													{ __(
+														'A WordPress Commenter'
+													) }
+												</a>
+											</b>{ ' ' }
+											<span className="says">
+												{ __( 'says' ) }:
+											</span>
+										</div>
+
+										<div className="comment-metadata">
+											<a href="#top">
+												<time dateTime="2000-01-01T00:00:00+00:00">
+													{ __(
+														'January 1, 2000 at 00:00 am'
+													) }
+												</time>
+											</a>{ ' ' }
+											<span className="edit-link">
+												<a
+													className="comment-edit-link"
+													href="#top"
+												>
+													{ __( 'Edit' ) }
+												</a>
+											</span>
+										</div>
+									</footer>
+
+									<div className="comment-content">
+										<p>
+											{ __( 'Hi, this is a comment.' ) }
+											<br />
 											{ __(
-												'January 1, 2000 at 00:00 am'
+												'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'
 											) }
-										</time>
-									</a>{ ' ' }
-									<span className="edit-link">
+											<br />
+											{ __(
+												'Commenter avatars come from'
+											) }{ ' ' }
+											<a href="https://gravatar.com/">
+												Gravatar
+											</a>
+											.
+										</p>
+									</div>
+
+									<div className="reply">
 										<a
-											className="comment-edit-link"
+											className="comment-reply-link"
 											href="#top"
+											aria-label="Reply to A WordPress Commenter"
 										>
-											{ __( 'Edit' ) }
+											{ __( 'Reply' ) }
 										</a>
-									</span>
-								</div>
-							</footer>
-
-							<div className="comment-content">
-								<p>
-									{ __( 'Hi, this is a comment.' ) }
-									<br />
-									{ __(
-										'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'
-									) }
-									<br />
-									{ __(
-										'Commenter avatars come from'
-									) }{ ' ' }
-									<a href="https://gravatar.com/">Gravatar</a>
-									.
-								</p>
-							</div>
+									</div>
+								</article>
+							</li>
+						</ol>
 
-							<div className="reply">
-								<a
-									className="comment-reply-link"
-									href="#top"
-									aria-label="Reply to A WordPress Commenter"
-								>
-									{ __( 'Reply' ) }
-								</a>
+						<div className="navigation">
+							<div className="alignleft">
+								<a href="#top">« { __( 'Older Comments' ) }</a>
 							</div>
-						</article>
-					</li>
-				</ol>
-
-				<div className="navigation">
-					<div className="alignleft">
-						<a href="#top">« { __( 'Older Comments' ) }</a>
-					</div>
-					<div className="alignright">
-						<a href="#top">{ __( 'Newer Comments' ) } »</a>
-					</div>
-				</div>
-
-				<div className="comment-respond">
-					<h3 className="comment-reply-title">
-						{ __( 'Leave a Reply' ) }
-					</h3>
-
-					<form className="comment-form" noValidate={ true }>
-						<p className="comment-form-comment">
-							<label htmlFor="comment">
-								{ __( 'Comment' ) }{ ' ' }
-								<span className="required">*</span>
-							</label>
-							<textarea
-								name="comment"
-								cols="45"
-								rows="8"
-								required={ true }
-							/>
-						</p>
-						<p className="form-submit wp-block-button">
-							<input
-								name="submit"
-								type="submit"
-								disabled={ true }
-								className="submit wp-block-button__link"
-								value={ __( 'Post Comment' ) }
-							/>
-						</p>
-					</form>
-				</div>
+							<div className="alignright">
+								<a href="#top">{ __( 'Newer Comments' ) } »</a>
+							</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">
+										{ __( 'Comment' ) }{ ' ' }
+										<span className="required">*</span>
+									</label>
+									<textarea
+										name="comment"
+										cols="45"
+										rows="8"
+										required
+									/>
+								</p>
+								<p className="form-submit wp-block-button">
+									<input
+										name="submit"
+										type="submit"
+										disabled
+										className="submit wp-block-button__link"
+										value={ __( 'Post Comment' ) }
+										readOnly
+									/>
+								</p>
+							</form>
+						</div>
+					</>
+				) }
 			</div>
 		</>
 	);

From ff55b9b3ce1fd2ce401665c5f6e45364c52a42ae Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 21 Apr 2022 17:28:13 +0200
Subject: [PATCH 5/6] Disable the placeholder

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

diff --git a/packages/block-library/src/post-comments/edit.js b/packages/block-library/src/post-comments/edit.js
index 9e753245c15c4d..9ed717a2865acd 100644
--- a/packages/block-library/src/post-comments/edit.js
+++ b/packages/block-library/src/post-comments/edit.js
@@ -16,6 +16,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
 
 export default function PostCommentsEdit( {
 	attributes: { textAlign },
@@ -82,6 +83,8 @@ export default function PostCommentsEdit( {
 		} ),
 	} );
 
+	const disabledRef = useDisabled();
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -97,7 +100,10 @@ export default function PostCommentsEdit( {
 				<Warning>{ warning }</Warning>
 
 				{ showPlacholder && (
-					<>
+					<div
+						className="wp-block-post-comments__placeholder"
+						ref={ disabledRef }
+					>
 						<h3>
 							{ __( 'One response to' ) } “{ postTitle }”
 						</h3>
@@ -217,15 +223,13 @@ export default function PostCommentsEdit( {
 									<input
 										name="submit"
 										type="submit"
-										disabled
 										className="submit wp-block-button__link"
 										value={ __( 'Post Comment' ) }
-										readOnly
 									/>
 								</p>
 							</form>
 						</div>
-					</>
+					</div>
 				) }
 			</div>
 		</>

From ebb8b721e3d92c8a195ccd45fad254584134b5cd Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 21 Apr 2022 17:28:59 +0200
Subject: [PATCH 6/6] Remove pointer events in the placeholder

---
 packages/block-library/src/editor.scss               | 1 +
 packages/block-library/src/post-comments/block.json  | 3 ++-
 packages/block-library/src/post-comments/editor.scss | 3 +++
 3 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 packages/block-library/src/post-comments/editor.scss

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index ff322e97d467f4..dcc9e6e165abd5 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -49,6 +49,7 @@
 @import "./query-pagination/editor.scss";
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
+@import "./post-comments/editor.scss";
 
 :root .editor-styles-wrapper {
 	@include background-colors-deprecated();
diff --git a/packages/block-library/src/post-comments/block.json b/packages/block-library/src/post-comments/block.json
index c3b569f5981544..6c5c4e16b8f748 100644
--- a/packages/block-library/src/post-comments/block.json
+++ b/packages/block-library/src/post-comments/block.json
@@ -40,5 +40,6 @@
 		"wp-block-post-comments",
 		"wp-block-buttons",
 		"wp-block-button"
-	]
+	],
+	"editorStyle": "wp-block-post-comments-editor"
 }
diff --git a/packages/block-library/src/post-comments/editor.scss b/packages/block-library/src/post-comments/editor.scss
new file mode 100644
index 00000000000000..9d7c54f020fe37
--- /dev/null
+++ b/packages/block-library/src/post-comments/editor.scss
@@ -0,0 +1,3 @@
+.wp-block-post-comments__placeholder * {
+	pointer-events: none;
+}