Post Comments Form: Add "proper" visual representation in the editor (#…

…40368)

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

@@ -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();

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",

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>
 		</>
 	);

packages/block-library/src/post-comments-form/editor.scss

@@ -0,0 +1,3 @@
+.wp-block-post-comments-form * {
+	pointer-events: none;
+}

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'
+			);
+		} );
+	} );
+} );