Merge Comments and Post Comments blocks

docs/reference-guides/core-blocks.md

@@ -177,7 +177,7 @@ An advanced block that allows displaying post comments using different visual co
 -	**Name:** core/comments
 -	**Category:** theme
 -	**Supports:** align (full, wide), color (background, gradients, link, text), ~~html~~
--	**Attributes:** tagName
+-	**Attributes:** legacy, tagName
 
 ## Comments Pagination
 
@@ -485,15 +485,6 @@ This block is deprecated. Please use the Comments block instead. ([Source](https
 -	**Supports:** ~~html~~, ~~inserter~~
 -	**Attributes:** commentId
 
-## Post Comments (deprecated)
-
-This block is deprecated. Please use the Comments block instead. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comments))
-
--	**Name:** core/post-comments
--	**Category:** theme
--	**Supports:** align (full, wide), color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~
--	**Attributes:** textAlign
-
 ## Post Comments Count
 
 Display a post's comments count. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comments-count))

lib/blocks.php

@@ -63,6 +63,7 @@ function gutenberg_reregister_core_block_types() {
 				'comments-pagination-numbers.php'  => 'core/comments-pagination-numbers',
 				'comments-pagination-previous.php' => 'core/comments-pagination-previous',
 				'comments-title.php'               => 'core/comments-title',
+				'comments.php'                     => 'core/comments',
 				'file.php'                         => 'core/file',
 				'home-link.php'                    => 'core/home-link',
 				'image.php'                        => 'core/image',
@@ -79,7 +80,6 @@ function gutenberg_reregister_core_block_types() {
 				'post-author-name.php'             => 'core/post-author-name',
 				'post-author-biography.php'        => 'core/post-author-biography',
 				'post-comment.php'                 => 'core/post-comment',
-				'post-comments.php'                => 'core/post-comments',
 				'post-comments-count.php'          => 'core/post-comments-count',
 				'post-comments-form.php'           => 'core/post-comments-form',
 				'post-comments-link.php'           => 'core/post-comments-link',

packages/block-library/src/comments/block.json

@@ -10,6 +10,10 @@
 		"tagName": {
 			"type": "string",
 			"default": "div"
+		},
+		"legacy": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {
@@ -25,5 +29,6 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-comments-editor"
+	"editorStyle": "wp-block-comments-editor",
+	"usesContext": [ "postId", "postType" ]
 }

packages/block-library/src/comments/edit/comments-legacy.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	AlignmentControl,
+	BlockControls,
+	Warning,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Placeholder from './placeholder';
+
+export default function CommentsLegacy( {
+	attributes,
+	setAttributes,
+	context: { postType, postId },
+} ) {
+	const { textAlign } = attributes;
+
+	const actions = [
+		<Button
+			key="convert"
+			onClick={ () => void setAttributes( { legacy: false } ) }
+			variant="primary"
+		>
+			{ __( 'Switch to editable mode' ) }
+		</Button>,
+	];
+
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+
+			<div { ...blockProps }>
+				<Warning actions={ actions }>
+					{ __(
+						"Comments block: You're currently using this block in legacy mode. " +
+							'The following 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 switching the block to its editable mode.'
+					) }
+				</Warning>
+				<Placeholder postId={ postId } postType={ postType } />
+			</div>
+		</>
+	);
+}

packages/block-library/src/comments/edit/index.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import CommentsInspectorControls from './comments-inspector-controls';
+import CommentsLegacy from './comments-legacy';
+import TEMPLATE from './template';
+
+export default function CommentsEdit( props ) {
+	const { attributes, setAttributes } = props;
+	const { tagName: TagName, legacy } = attributes;
+
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+	} );
+
+	if ( legacy ) {
+		return <CommentsLegacy { ...props } />;
+	}
+
+	return (
+		<>
+			<CommentsInspectorControls
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+			/>
+			<TagName { ...innerBlocksProps } />
+		</>
+	);
+}

packages/block-library/src/comments/edit/placeholder.js

@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useEntityProp } from '@wordpress/core-data';
+import { useDisabled } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import CommentsForm from '../../post-comments-form/form';
+
+export default function PostCommentsPlaceholder( { postType, postId } ) {
+	let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );
+	postTitle = postTitle || __( 'Post Title' );
+
+	const { avatarURL } = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__experimentalDiscussionSettings
+	);
+
+	const disabledRef = useDisabled();
+
+	return (
+		<div
+			className="wp-block-comments__legacy-placeholder"
+			ref={ disabledRef }
+		>
+			<h3>
+				{
+					/* translators: %s: Post title. */
+					sprintf( __( 'One response to %s' ), 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 />
+								{ __(
+									'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>
+
+			<CommentsForm postId={ postId } postType={ postType } />
+		</div>
+	);
+}

packages/block-library/src/comments/edit.js → packages/block-library/src/comments/edit/template.js

@@ -1,13 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import CommentsInspectorControls from './edit/comments-inspector-controls';
-
 const TEMPLATE = [
 	[ 'core/comments-title' ],
 	[
@@ -88,21 +78,4 @@ const TEMPLATE = [
 	[ 'core/post-comments-form' ],
 ];
 
-export default function CommentsEdit( { attributes, setAttributes } ) {
-	const { tagName: TagName } = attributes;
-
-	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		template: TEMPLATE,
-	} );
-
-	return (
-		<>
-			<CommentsInspectorControls
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-			/>
-			<TagName { ...innerBlocksProps } />
-		</>
-	);
-}
+export default TEMPLATE;

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

@@ -1,3 +1,12 @@
+@import "./style.scss";
+
 .block-library-comments-toolbar__popover .components-popover__content {
 	min-width: 230px;
 }
+
+.wp-block-comments__legacy-placeholder {
+	@extend .wp-block-post-comments;
+	* {
+		pointer-events: none;
+	}
+}