From 6cec8db4c59a7a2c364f89185548f4b212e4f559 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Mon, 18 Apr 2022 15:24:10 +0200
Subject: [PATCH 01/15] Create comments title with simple styling

---
 docs/reference-guides/core-blocks.md          |  9 ++++
 lib/blocks.php                                |  1 +
 .../src/comments-title/block.json             | 36 +++++++++++++
 .../block-library/src/comments-title/edit.js  | 40 ++++++++++++++
 .../block-library/src/comments-title/index.js | 18 +++++++
 .../src/comments-title/index.php              | 54 +++++++++++++++++++
 packages/block-library/src/index.js           |  3 ++
 .../fixtures/blocks/core__comments-title.html |  1 +
 .../fixtures/blocks/core__comments-title.json | 20 +++++++
 .../blocks/core__comments-title.parsed.json   | 21 ++++++++
 .../core__comments-title.serialized.html      |  1 +
 11 files changed, 204 insertions(+)
 create mode 100644 packages/block-library/src/comments-title/block.json
 create mode 100644 packages/block-library/src/comments-title/edit.js
 create mode 100644 packages/block-library/src/comments-title/index.js
 create mode 100644 packages/block-library/src/comments-title/index.php
 create mode 100644 test/integration/fixtures/blocks/core__comments-title.html
 create mode 100644 test/integration/fixtures/blocks/core__comments-title.json
 create mode 100644 test/integration/fixtures/blocks/core__comments-title.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__comments-title.serialized.html

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 16a5c8f607c1d8..b3087e13414217 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -215,6 +215,15 @@ An advanced block that allows displaying post comments using different visual co
 -	**Supports:** align (full, wide), color (background, gradients, link, text), ~~html~~
 -	**Attributes:** tagName
 
+## Comments Title
+
+Displays a tittle with the comments count ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-title))
+
+-	**Name:** core/comments-title
+-	**Category:** theme
+-	**Supports:** color (background, gradients, text), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** textAlign
+
 ## Cover
 
 Add an image or video with a text overlay — great for headers. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/cover))
diff --git a/lib/blocks.php b/lib/blocks.php
index 41ad13c442411d..c7bf4e2d36c270 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -69,6 +69,7 @@ function gutenberg_reregister_core_block_types() {
 				'comments-pagination-next.php'     => 'core/comments-pagination-next',
 				'comments-pagination-numbers.php'  => 'core/comments-pagination-numbers',
 				'comments-pagination-previous.php' => 'core/comments-pagination-previous',
+				'comments-title.php'               => 'core/comments-title',
 				'file.php'                         => 'core/file',
 				'home-link.php'                    => 'core/home-link',
 				'image.php'                        => 'core/image',
diff --git a/packages/block-library/src/comments-title/block.json b/packages/block-library/src/comments-title/block.json
new file mode 100644
index 00000000000000..d3cd30d1b53d21
--- /dev/null
+++ b/packages/block-library/src/comments-title/block.json
@@ -0,0 +1,36 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/comments-title",
+	"title": "Comments Title",
+	"category": "theme",
+	"ancestor": [ "core/comments-query-loop" ],
+	"description": "Displays a tittle with the comments count",
+	"textdomain": "default",
+	"usesContext": [ "commentId" ],
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"html": false,
+		"color": {
+			"gradients": true,
+			"text": true,
+			"background": true,
+			"__experimentalDefaultControls": {
+				"text": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true
+		}
+	}
+}
diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
new file mode 100644
index 00000000000000..6cab77499f6375
--- /dev/null
+++ b/packages/block-library/src/comments-title/edit.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	AlignmentControl,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function Edit( { attributes: { textAlign }, setAttributes } ) {
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	const blockControls = (
+		<BlockControls group="block">
+			<AlignmentControl
+				value={ textAlign }
+				onChange={ ( newAlign ) =>
+					setAttributes( { textAlign: newAlign } )
+				}
+			/>
+		</BlockControls>
+	);
+
+	return (
+		<>
+			{ blockControls }
+			<div { ...blockProps }>{ __( 'Comments Title' ) }</div>
+		</>
+	);
+}
diff --git a/packages/block-library/src/comments-title/index.js b/packages/block-library/src/comments-title/index.js
new file mode 100644
index 00000000000000..65ceb0efb64225
--- /dev/null
+++ b/packages/block-library/src/comments-title/index.js
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { title as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};
diff --git a/packages/block-library/src/comments-title/index.php b/packages/block-library/src/comments-title/index.php
new file mode 100644
index 00000000000000..c0d00ef8095008
--- /dev/null
+++ b/packages/block-library/src/comments-title/index.php
@@ -0,0 +1,54 @@
+<?php
+/**
+ * Server-side rendering of the `core/comments-title` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comments-title` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Return the post comments title.
+ */
+function render_block_core_comments_title( $attributes, $content, $block ) {
+	$comments_title     = '';
+	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	if ( 1 === (int) get_comments_number() ) {
+		$comments_title = sprintf(
+			/* translators: %s: The post title. */
+			__( 'One Response to "%s"' ),
+			get_the_title()
+		);
+	} else {
+		$comments_title = sprintf(
+			/* translators: 1: The number of comments, 2: The post title. */
+			_n( '%1$s Response to "%2$s"', '%1$s Responses to "%2$s"', get_comments_number() ),
+			number_format_i18n( get_comments_number() ),
+			get_the_title()
+		);
+	}
+	return sprintf(
+		'<h3 id="comments" %1$s>%2$s</h3>',
+		$wrapper_attributes,
+		$comments_title
+	);
+}
+
+/**
+ * Registers the `core/comments-title` block on the server.
+ */
+function register_block_core_comments_title() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comments-title',
+		array(
+			'render_callback' => 'render_block_core_comments_title',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_comments_title' );
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 1fe0de453d4e6f..03e79846060c08 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -35,6 +35,7 @@ import * as commentsQueryLoop from './comments-query-loop';
 import * as commentsPagination from './comments-pagination';
 import * as commentsPaginationNext from './comments-pagination-next';
 import * as commentsPaginationNumbers from './comments-pagination-numbers';
+import * as commentsTitle from './comments-title';
 import * as cover from './cover';
 import * as embed from './embed';
 import * as file from './file';
@@ -212,11 +213,13 @@ export const __experimentalGetCoreBlocks = () => [
 	commentEditLink,
 	commentReplyLink,
 	commentTemplate,
+	commentsTitle,
 	commentsQueryLoop,
 	commentsPagination,
 	commentsPaginationNext,
 	commentsPaginationNumbers,
 	commentsPaginationPrevious,
+
 	postComments,
 	homeLink,
 	logInOut,
diff --git a/test/integration/fixtures/blocks/core__comments-title.html b/test/integration/fixtures/blocks/core__comments-title.html
new file mode 100644
index 00000000000000..3ba9fbb36f6112
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__comments-title.html
@@ -0,0 +1 @@
+<!-- wp:comments-title {"style":{"typography":{"textTransform":"uppercase","fontStyle":"italic","fontWeight":"900","lineHeight":"3"}},"textColor":"vivid-purple","fontSize":"x-large","fontFamily":"source-serif-pro"} /-->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__comments-title.json b/test/integration/fixtures/blocks/core__comments-title.json
new file mode 100644
index 00000000000000..b2823dfb349109
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__comments-title.json
@@ -0,0 +1,20 @@
+[
+	{
+		"name": "core/comments-title",
+		"isValid": true,
+		"attributes": {
+			"textColor": "vivid-purple",
+			"fontFamily": "source-serif-pro",
+			"fontSize": "x-large",
+			"style": {
+				"typography": {
+					"textTransform": "uppercase",
+					"fontStyle": "italic",
+					"fontWeight": "900",
+					"lineHeight": "3"
+				}
+			}
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__comments-title.parsed.json b/test/integration/fixtures/blocks/core__comments-title.parsed.json
new file mode 100644
index 00000000000000..0fc109ee27be98
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__comments-title.parsed.json
@@ -0,0 +1,21 @@
+[
+	{
+		"blockName": "core/comments-title",
+		"attrs": {
+			"style": {
+				"typography": {
+					"textTransform": "uppercase",
+					"fontStyle": "italic",
+					"fontWeight": "900",
+					"lineHeight": "3"
+				}
+			},
+			"textColor": "vivid-purple",
+			"fontSize": "x-large",
+			"fontFamily": "source-serif-pro"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__comments-title.serialized.html b/test/integration/fixtures/blocks/core__comments-title.serialized.html
new file mode 100644
index 00000000000000..e54095328f79a3
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__comments-title.serialized.html
@@ -0,0 +1 @@
+<!-- wp:comments-title {"textColor":"vivid-purple","fontFamily":"source-serif-pro","fontSize":"x-large","style":{"typography":{"textTransform":"uppercase","fontStyle":"italic","fontWeight":"900","lineHeight":"3"}}} /-->

From 034ebff2b7a17c6bba97f87dbc1c14a0d58babaa Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Mon, 18 Apr 2022 18:45:17 +0200
Subject: [PATCH 02/15] Add options for multiple comments on editor

---
 docs/reference-guides/core-blocks.md          |   4 +-
 .../src/comments-title/block.json             |  48 +++++++-
 .../block-library/src/comments-title/edit.js  | 112 +++++++++++++++++-
 .../src/comments-title/index.php              |   7 +-
 .../fixtures/blocks/core__comments-title.json |   1 +
 5 files changed, 160 insertions(+), 12 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index b3087e13414217..a46765ba99eeb5 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -221,8 +221,8 @@ Displays a tittle with the comments count ([Source](https://github.com/WordPress
 
 -	**Name:** core/comments-title
 -	**Category:** theme
--	**Supports:** color (background, gradients, text), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** textAlign
+-	**Supports:** align, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~anchor~~, ~~html~~
+-	**Attributes:** multipleCommentsLabel, showPostTitle, showSingleCommentLabel, singleCommentLabel, textAlign
 
 ## Cover
 
diff --git a/packages/block-library/src/comments-title/block.json b/packages/block-library/src/comments-title/block.json
index d3cd30d1b53d21..08454992a2ab5d 100644
--- a/packages/block-library/src/comments-title/block.json
+++ b/packages/block-library/src/comments-title/block.json
@@ -7,30 +7,66 @@
 	"ancestor": [ "core/comments-query-loop" ],
 	"description": "Displays a tittle with the comments count",
 	"textdomain": "default",
-	"usesContext": [ "commentId" ],
+	"usesContext": [ "postId", "postType" ],
 	"attributes": {
 		"textAlign": {
 			"type": "string"
+		},
+		"singleCommentLabel": {
+			"type": "string"
+		},
+		"multipleCommentsLabel": {
+			"type": "string"
+		},
+		"showPostTitle": {
+			"type": "boolean",
+			"default": true
+		},
+		"showSingleCommentLabel": {
+			"type": "boolean"
 		}
 	},
 	"supports": {
+		"anchor": false,
+		"align": true,
 		"html": false,
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"width": true,
+				"color": true
+			}
+		},
 		"color": {
 			"gradients": true,
-			"text": true,
-			"background": true,
 			"__experimentalDefaultControls": {
+				"background": true,
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontFamily": true,
-			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontFamily": true,
 			"__experimentalTextTransform": true,
-			"__experimentalLetterSpacing": true
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"__experimentalFontFamily": true,
+				"__experimentalFontStyle": true,
+				"__experimentalFontWeight": true
+			}
 		}
 	}
 }
diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
index 6cab77499f6375..ae35cbe1b202ec 100644
--- a/packages/block-library/src/comments-title/edit.js
+++ b/packages/block-library/src/comments-title/edit.js
@@ -10,16 +10,58 @@ import {
 	AlignmentControl,
 	BlockControls,
 	useBlockProps,
+	PlainText,
+	InspectorControls,
 } from '@wordpress/block-editor';
+import { withInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { useEntityProp } from '@wordpress/core-data';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+function Edit( {
+	attributes: {
+		textAlign,
+		singleCommentLabel,
+		multipleCommentsLabel,
+		showSingleCommentLabel,
+		showPostTitle,
+	},
+	setAttributes,
+	context: { postType, postId },
+} ) {
+	const [ commentsCount, setCommentsCount ] = useState();
+
+	const [ rawTitle ] = useEntityProp( 'postType', postType, 'title', postId );
 
-export default function Edit( { attributes: { textAlign }, setAttributes } ) {
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
 
+	useEffect( () => {
+		if ( ! postId ) {
+			setCommentsCount( 2 );
+		}
+		const currentPostId = postId;
+		apiFetch( {
+			path: addQueryArgs( '/wp/v2/comments', {
+				post: postId,
+				_fields: 'id',
+			} ),
+			method: 'HEAD',
+			parse: false,
+		} ).then( ( res ) => {
+			// Stale requests will have the `currentPostId` of an older closure.
+			if ( currentPostId === postId ) {
+				setCommentsCount( parseInt( res.headers.get( 'X-WP-Total' ) ) );
+			}
+		} );
+	}, [ postId ] );
+
 	const blockControls = (
 		<BlockControls group="block">
 			<AlignmentControl
@@ -31,10 +73,76 @@ export default function Edit( { attributes: { textAlign }, setAttributes } ) {
 		</BlockControls>
 	);
 
+	const inspectorControls = (
+		<InspectorControls>
+			<PanelBody title={ __( 'Settings' ) }>
+				<ToggleControl
+					label={ __( 'Show post title' ) }
+					checked={ showPostTitle }
+					onChange={ ( value ) =>
+						setAttributes( { showPostTitle: value } )
+					}
+				/>
+				{ ! postId && (
+					<ToggleControl
+						label={ __( 'Show single comment' ) }
+						help={ __(
+							'Toggles between single comments and multiple comments reply sentence'
+						) }
+						checked={ showSingleCommentLabel }
+						onChange={ ( value ) =>
+							setAttributes( { showSingleCommentLabel: value } )
+						}
+					/>
+				) }
+			</PanelBody>
+		</InspectorControls>
+	);
+
+	const postTitle = postId ? rawTitle : 'Post Title';
+
 	return (
 		<>
 			{ blockControls }
-			<div { ...blockProps }>{ __( 'Comments Title' ) }</div>
+			{ inspectorControls }
+			<h3 { ...blockProps }>
+				{ showSingleCommentLabel || commentsCount === 1 ? (
+					<>
+						<PlainText
+							__experimentalVersion={ 2 }
+							tagName="span"
+							aria-label={ __( 'One response to ' ) }
+							placeholder={ __( 'One response to ' ) }
+							value={ singleCommentLabel }
+							onChange={ ( newLabel ) =>
+								setAttributes( {
+									singleCommentLabel: newLabel,
+								} )
+							}
+						/>
+						{ showPostTitle ? postTitle : null }
+					</>
+				) : (
+					<>
+						{ commentsCount }
+						<PlainText
+							__experimentalVersion={ 2 }
+							tagName="span"
+							aria-label={ __( ' Responses to ' ) }
+							placeholder={ __( ' Responses to ' ) }
+							value={ multipleCommentsLabel }
+							onChange={ ( newLabel ) =>
+								setAttributes( {
+									multipleCommentsLabel: newLabel,
+								} )
+							}
+						/>
+						{ showPostTitle ? postTitle : null }
+					</>
+				) }
+			</h3>
 		</>
 	);
 }
+
+export default withInstanceId( Edit );
diff --git a/packages/block-library/src/comments-title/index.php b/packages/block-library/src/comments-title/index.php
index c0d00ef8095008..c2cc5648d6f633 100644
--- a/packages/block-library/src/comments-title/index.php
+++ b/packages/block-library/src/comments-title/index.php
@@ -18,16 +18,19 @@ function render_block_core_comments_title( $attributes, $content, $block ) {
 	$comments_title     = '';
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	/* translators: %s: The post title. */
+	$single_comment_label   = __( 'One Response to "%s"' );
+	$multiple_comment_label = __( '%1$s Responses to "%2$s"' );
 	if ( 1 === (int) get_comments_number() ) {
 		$comments_title = sprintf(
 			/* translators: %s: The post title. */
-			__( 'One Response to "%s"' ),
+			$single_comment_label,
 			get_the_title()
 		);
 	} else {
 		$comments_title = sprintf(
 			/* translators: 1: The number of comments, 2: The post title. */
-			_n( '%1$s Response to "%2$s"', '%1$s Responses to "%2$s"', get_comments_number() ),
+			$multiple_comment_label,
 			number_format_i18n( get_comments_number() ),
 			get_the_title()
 		);
diff --git a/test/integration/fixtures/blocks/core__comments-title.json b/test/integration/fixtures/blocks/core__comments-title.json
index b2823dfb349109..1e7a386971f7b7 100644
--- a/test/integration/fixtures/blocks/core__comments-title.json
+++ b/test/integration/fixtures/blocks/core__comments-title.json
@@ -3,6 +3,7 @@
 		"name": "core/comments-title",
 		"isValid": true,
 		"attributes": {
+			"showPostTitle": true,
 			"textColor": "vivid-purple",
 			"fontFamily": "source-serif-pro",
 			"fontSize": "x-large",

From 5c918350cb4dd66bb15393525c9dc92989440ffe Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Mon, 18 Apr 2022 16:10:17 -0500
Subject: [PATCH 03/15] Comment Title: Fix typos and update wording

---
 docs/reference-guides/core-blocks.md                 | 2 +-
 packages/block-library/src/comments-title/block.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index a46765ba99eeb5..b5d5593053be40 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -217,7 +217,7 @@ An advanced block that allows displaying post comments using different visual co
 
 ## Comments Title
 
-Displays a tittle with the comments count ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-title))
+Displays a title with the number of comments ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-title))
 
 -	**Name:** core/comments-title
 -	**Category:** theme
diff --git a/packages/block-library/src/comments-title/block.json b/packages/block-library/src/comments-title/block.json
index 08454992a2ab5d..afb8a62ee81400 100644
--- a/packages/block-library/src/comments-title/block.json
+++ b/packages/block-library/src/comments-title/block.json
@@ -5,7 +5,7 @@
 	"title": "Comments Title",
 	"category": "theme",
 	"ancestor": [ "core/comments-query-loop" ],
-	"description": "Displays a tittle with the comments count",
+	"description": "Displays a title with the number of comments",
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType" ],
 	"attributes": {

From 64ce6222617b212664d8b2b1d88c09a4748d7f83 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Mon, 18 Apr 2022 18:20:47 -0500
Subject: [PATCH 04/15] Fix the phpcs errors

---
 packages/block-library/src/comments-title/index.php | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/comments-title/index.php b/packages/block-library/src/comments-title/index.php
index c2cc5648d6f633..7c48c639a8e2f6 100644
--- a/packages/block-library/src/comments-title/index.php
+++ b/packages/block-library/src/comments-title/index.php
@@ -8,28 +8,25 @@
 /**
  * Renders the `core/comments-title` block on the server.
  *
- * @param array    $attributes Block attributes.
- * @param string   $content    Block default content.
- * @param WP_Block $block      Block instance.
+ * @param array $attributes Block attributes.
  *
  * @return string Return the post comments title.
  */
-function render_block_core_comments_title( $attributes, $content, $block ) {
+function render_block_core_comments_title( $attributes ) {
 	$comments_title     = '';
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 	/* translators: %s: The post title. */
-	$single_comment_label   = __( 'One Response to "%s"' );
+	$single_comment_label = __( 'One Response to "%s"' );
+	/* translators: 1: The number of comments, 2: The post title. */
 	$multiple_comment_label = __( '%1$s Responses to "%2$s"' );
 	if ( 1 === (int) get_comments_number() ) {
 		$comments_title = sprintf(
-			/* translators: %s: The post title. */
 			$single_comment_label,
 			get_the_title()
 		);
 	} else {
 		$comments_title = sprintf(
-			/* translators: 1: The number of comments, 2: The post title. */
 			$multiple_comment_label,
 			number_format_i18n( get_comments_number() ),
 			get_the_title()

From a2ee6845c9d154009e639762a12f5af6860d9b17 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Mon, 18 Apr 2022 19:04:57 -0500
Subject: [PATCH 05/15] Add quotes around postTitle in editor

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

diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
index ae35cbe1b202ec..ff05dae8ca6506 100644
--- a/packages/block-library/src/comments-title/edit.js
+++ b/packages/block-library/src/comments-title/edit.js
@@ -99,7 +99,7 @@ function Edit( {
 		</InspectorControls>
 	);
 
-	const postTitle = postId ? rawTitle : 'Post Title';
+	const postTitle = postId ? `“${ rawTitle }”` : 'Post Title';
 
 	return (
 		<>

From 00bd1b0097a8134d36073860a536dd159b823c9b Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Tue, 19 Apr 2022 09:52:51 +0200
Subject: [PATCH 06/15] Clean default options

---
 docs/reference-guides/core-blocks.md          |  2 +-
 .../src/comments-query-loop/edit.js           |  1 +
 .../src/comments-title/block.json             | 15 +++----
 .../block-library/src/comments-title/edit.js  | 41 ++++++++++++-------
 4 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index b5d5593053be40..a918a3a66dd508 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -222,7 +222,7 @@ Displays a title with the number of comments ([Source](https://github.com/WordPr
 -	**Name:** core/comments-title
 -	**Category:** theme
 -	**Supports:** align, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~anchor~~, ~~html~~
--	**Attributes:** multipleCommentsLabel, showPostTitle, showSingleCommentLabel, singleCommentLabel, textAlign
+-	**Attributes:** level, multipleCommentsLabel, showPostTitle, showSingleCommentLabel, singleCommentLabel, textAlign
 
 ## Cover
 
diff --git a/packages/block-library/src/comments-query-loop/edit.js b/packages/block-library/src/comments-query-loop/edit.js
index 297811030f15ef..8aa6d6a1155a59 100644
--- a/packages/block-library/src/comments-query-loop/edit.js
+++ b/packages/block-library/src/comments-query-loop/edit.js
@@ -9,6 +9,7 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import CommentsInspectorControls from './edit/comments-inspector-controls';
 
 const TEMPLATE = [
+	[ 'core/comments-title' ],
 	[
 		'core/comment-template',
 		{},
diff --git a/packages/block-library/src/comments-title/block.json b/packages/block-library/src/comments-title/block.json
index afb8a62ee81400..9e2e3c3d6b419e 100644
--- a/packages/block-library/src/comments-title/block.json
+++ b/packages/block-library/src/comments-title/block.json
@@ -24,6 +24,10 @@
 		},
 		"showSingleCommentLabel": {
 			"type": "boolean"
+		},
+		"level": {
+			"type": "number",
+			"default": 2
 		}
 	},
 	"supports": {
@@ -34,11 +38,7 @@
 			"radius": true,
 			"color": true,
 			"width": true,
-			"style": true,
-			"__experimentalDefaultControls": {
-				"width": true,
-				"color": true
-			}
+			"style": true
 		},
 		"color": {
 			"gradients": true,
@@ -49,10 +49,7 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true,
-			"__experimentalDefaultControls": {
-				"padding": true
-			}
+			"padding": true
 		},
 		"typography": {
 			"fontSize": true,
diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
index ff05dae8ca6506..cc4c929cc6a066 100644
--- a/packages/block-library/src/comments-title/edit.js
+++ b/packages/block-library/src/comments-title/edit.js
@@ -13,7 +13,6 @@ import {
 	PlainText,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import { withInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
 import { PanelBody, ToggleControl } from '@wordpress/components';
@@ -21,7 +20,7 @@ import { useState, useEffect } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 
-function Edit( {
+export default function Edit( {
 	attributes: {
 		textAlign,
 		singleCommentLabel,
@@ -44,7 +43,7 @@ function Edit( {
 
 	useEffect( () => {
 		if ( ! postId ) {
-			setCommentsCount( 2 );
+			setCommentsCount( 0 );
 		}
 		const currentPostId = postId;
 		apiFetch( {
@@ -54,12 +53,18 @@ function Edit( {
 			} ),
 			method: 'HEAD',
 			parse: false,
-		} ).then( ( res ) => {
-			// Stale requests will have the `currentPostId` of an older closure.
-			if ( currentPostId === postId ) {
-				setCommentsCount( parseInt( res.headers.get( 'X-WP-Total' ) ) );
-			}
-		} );
+		} )
+			.then( ( res ) => {
+				// Stale requests will have the `currentPostId` of an older closure.
+				if ( currentPostId === postId ) {
+					setCommentsCount(
+						parseInt( res.headers.get( 'X-WP-Total' ) )
+					);
+				}
+			} )
+			.catch( () => {
+				setCommentsCount( 0 );
+			} );
 	}, [ postId ] );
 
 	const blockControls = (
@@ -101,6 +106,14 @@ function Edit( {
 
 	const postTitle = postId ? `“${ rawTitle }”` : 'Post Title';
 
+	const singlePlaceholder = showPostTitle
+		? __( 'One response to ' )
+		: __( 'One response' );
+
+	const multiplePlaceholder = showPostTitle
+		? __( ' Responses to ' )
+		: __( ' Responses' );
+
 	return (
 		<>
 			{ blockControls }
@@ -111,8 +124,8 @@ function Edit( {
 						<PlainText
 							__experimentalVersion={ 2 }
 							tagName="span"
-							aria-label={ __( 'One response to ' ) }
-							placeholder={ __( 'One response to ' ) }
+							aria-label={ singlePlaceholder }
+							placeholder={ singlePlaceholder }
 							value={ singleCommentLabel }
 							onChange={ ( newLabel ) =>
 								setAttributes( {
@@ -128,8 +141,8 @@ function Edit( {
 						<PlainText
 							__experimentalVersion={ 2 }
 							tagName="span"
-							aria-label={ __( ' Responses to ' ) }
-							placeholder={ __( ' Responses to ' ) }
+							aria-label={ multiplePlaceholder }
+							placeholder={ multiplePlaceholder }
 							value={ multipleCommentsLabel }
 							onChange={ ( newLabel ) =>
 								setAttributes( {
@@ -144,5 +157,3 @@ function Edit( {
 		</>
 	);
 }
-
-export default withInstanceId( Edit );

From 5d59dc043305d39b50e560a7641ad9dc1aa3d3b5 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Tue, 19 Apr 2022 11:18:56 +0200
Subject: [PATCH 07/15] Some refactor, fix space blank on comments count, add
 comments count selector

---
 docs/reference-guides/core-blocks.md          |  2 +-
 .../src/comments-title/block.json             |  4 ++
 .../block-library/src/comments-title/edit.js  | 68 +++++++++++++------
 3 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index a918a3a66dd508..7b8c0e5ce2a83e 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -222,7 +222,7 @@ Displays a title with the number of comments ([Source](https://github.com/WordPr
 -	**Name:** core/comments-title
 -	**Category:** theme
 -	**Supports:** align, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~anchor~~, ~~html~~
--	**Attributes:** level, multipleCommentsLabel, showPostTitle, showSingleCommentLabel, singleCommentLabel, textAlign
+-	**Attributes:** level, multipleCommentsLabel, showCommentsCount, showPostTitle, showSingleCommentLabel, singleCommentLabel, textAlign
 
 ## Cover
 
diff --git a/packages/block-library/src/comments-title/block.json b/packages/block-library/src/comments-title/block.json
index 9e2e3c3d6b419e..02d17cfc16a505 100644
--- a/packages/block-library/src/comments-title/block.json
+++ b/packages/block-library/src/comments-title/block.json
@@ -25,6 +25,10 @@
 		"showSingleCommentLabel": {
 			"type": "boolean"
 		},
+		"showCommentsCount": {
+			"type": "boolean",
+			"default": true
+		},
 		"level": {
 			"type": "number",
 			"default": 2
diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
index cc4c929cc6a066..353bc59ac284f9 100644
--- a/packages/block-library/src/comments-title/edit.js
+++ b/packages/block-library/src/comments-title/edit.js
@@ -12,6 +12,7 @@ import {
 	useBlockProps,
 	PlainText,
 	InspectorControls,
+	Warning,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
@@ -27,6 +28,7 @@ export default function Edit( {
 		multipleCommentsLabel,
 		showSingleCommentLabel,
 		showPostTitle,
+		showCommentsCount,
 	},
 	setAttributes,
 	context: { postType, postId },
@@ -35,6 +37,8 @@ export default function Edit( {
 
 	const [ rawTitle ] = useEntityProp( 'postType', postType, 'title', postId );
 
+	const isSiteEditor = typeof postId === 'undefined';
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -42,8 +46,9 @@ export default function Edit( {
 	} );
 
 	useEffect( () => {
-		if ( ! postId ) {
-			setCommentsCount( 0 );
+		if ( isSiteEditor ) {
+			setCommentsCount( 3 );
+			return;
 		}
 		const currentPostId = postId;
 		apiFetch( {
@@ -88,31 +93,46 @@ export default function Edit( {
 						setAttributes( { showPostTitle: value } )
 					}
 				/>
-				{ ! postId && (
-					<ToggleControl
-						label={ __( 'Show single comment' ) }
-						help={ __(
-							'Toggles between single comments and multiple comments reply sentence'
-						) }
-						checked={ showSingleCommentLabel }
-						onChange={ ( value ) =>
-							setAttributes( { showSingleCommentLabel: value } )
-						}
-					/>
-				) }
+				<ToggleControl
+					label={ __( 'Show comments count' ) }
+					checked={ showCommentsCount }
+					onChange={ ( value ) =>
+						setAttributes( { showCommentsCount: value } )
+					}
+				/>
+				<ToggleControl
+					label={ __( 'Show single comment' ) }
+					help={ __(
+						'Toggles between single comments and multiple comments reply sentence'
+					) }
+					checked={ showSingleCommentLabel }
+					onChange={ ( value ) =>
+						setAttributes( { showSingleCommentLabel: value } )
+					}
+				/>
 			</PanelBody>
 		</InspectorControls>
 	);
 
-	const postTitle = postId ? `“${ rawTitle }”` : 'Post Title';
+	const postTitle = isSiteEditor ? '"Post Title"' : `“${ rawTitle }”`;
 
 	const singlePlaceholder = showPostTitle
 		? __( 'One response to ' )
 		: __( 'One response' );
 
 	const multiplePlaceholder = showPostTitle
-		? __( ' Responses to ' )
-		: __( ' Responses' );
+		? __( 'Responses to ' )
+		: __( 'Responses' );
+
+	if ( commentsCount === 0 && ! isSiteEditor ) {
+		return (
+			<Warning>
+				{ __(
+					'Comments Title block: No comments found. The title will not be displayed on the site.'
+				) }
+			</Warning>
+		);
+	}
 
 	return (
 		<>
@@ -137,12 +157,20 @@ export default function Edit( {
 					</>
 				) : (
 					<>
-						{ commentsCount }
+						{ showCommentsCount ? commentsCount : null }
 						<PlainText
 							__experimentalVersion={ 2 }
 							tagName="span"
-							aria-label={ multiplePlaceholder }
-							placeholder={ multiplePlaceholder }
+							aria-label={
+								showCommentsCount
+									? ` ${ multiplePlaceholder }`
+									: multiplePlaceholder
+							}
+							placeholder={
+								showCommentsCount
+									? ` ${ multiplePlaceholder }`
+									: multiplePlaceholder
+							}
 							value={ multipleCommentsLabel }
 							onChange={ ( newLabel ) =>
 								setAttributes( {

From 5d880e941a3c88257f70671fbf06e658a275eb6f Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Tue, 19 Apr 2022 11:58:43 +0200
Subject: [PATCH 08/15] Fix background issue, add tag selector

---
 .../block-library/src/comments-title/edit.js  | 20 ++++++++++++++-----
 .../src/comments-title/editor.scss            |  4 ++++
 packages/block-library/src/editor.scss        |  1 +
 3 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 packages/block-library/src/comments-title/editor.scss

diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
index 353bc59ac284f9..60cfd913e07207 100644
--- a/packages/block-library/src/comments-title/edit.js
+++ b/packages/block-library/src/comments-title/edit.js
@@ -21,6 +21,11 @@ import { useState, useEffect } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 
+/**
+ * Internal dependencies
+ */
+import HeadingLevelDropdown from '../heading/heading-level-dropdown';
+
 export default function Edit( {
 	attributes: {
 		textAlign,
@@ -29,16 +34,15 @@ export default function Edit( {
 		showSingleCommentLabel,
 		showPostTitle,
 		showCommentsCount,
+		level,
 	},
 	setAttributes,
 	context: { postType, postId },
 } ) {
+	const TagName = 'h' + level;
 	const [ commentsCount, setCommentsCount ] = useState();
-
 	const [ rawTitle ] = useEntityProp( 'postType', postType, 'title', postId );
-
 	const isSiteEditor = typeof postId === 'undefined';
-
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -80,6 +84,12 @@ export default function Edit( {
 					setAttributes( { textAlign: newAlign } )
 				}
 			/>
+			<HeadingLevelDropdown
+				selectedLevel={ level }
+				onChange={ ( newLevel ) =>
+					setAttributes( { level: newLevel } )
+				}
+			/>
 		</BlockControls>
 	);
 
@@ -138,7 +148,7 @@ export default function Edit( {
 		<>
 			{ blockControls }
 			{ inspectorControls }
-			<h3 { ...blockProps }>
+			<TagName { ...blockProps }>
 				{ showSingleCommentLabel || commentsCount === 1 ? (
 					<>
 						<PlainText
@@ -181,7 +191,7 @@ export default function Edit( {
 						{ showPostTitle ? postTitle : null }
 					</>
 				) }
-			</h3>
+			</TagName>
 		</>
 	);
 }
diff --git a/packages/block-library/src/comments-title/editor.scss b/packages/block-library/src/comments-title/editor.scss
new file mode 100644
index 00000000000000..6f9d964bbb9c66
--- /dev/null
+++ b/packages/block-library/src/comments-title/editor.scss
@@ -0,0 +1,4 @@
+
+.wp-block-comments-title.has-background {
+	padding: inherit;
+}
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 59c1f993a51e1c..ff322e97d467f4 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -10,6 +10,7 @@
 @import "./comments-query-loop/editor.scss";
 @import "./comments-pagination/editor.scss";
 @import "./comments-pagination-numbers/editor.scss";
+@import "./comments-title/editor.scss";
 @import "./cover/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";

From 43e19bade7cc4d3eaaa4f03a0b2b4e6d5fc2aede Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Tue, 19 Apr 2022 13:31:17 +0200
Subject: [PATCH 09/15] Add frontend part

---
 .../block-library/src/comments-title/edit.js  | 22 ++++----
 .../src/comments-title/index.php              | 53 +++++++++++--------
 2 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
index 60cfd913e07207..2a646477ac0247 100644
--- a/packages/block-library/src/comments-title/edit.js
+++ b/packages/block-library/src/comments-title/edit.js
@@ -110,16 +110,18 @@ export default function Edit( {
 						setAttributes( { showCommentsCount: value } )
 					}
 				/>
-				<ToggleControl
-					label={ __( 'Show single comment' ) }
-					help={ __(
-						'Toggles between single comments and multiple comments reply sentence'
-					) }
-					checked={ showSingleCommentLabel }
-					onChange={ ( value ) =>
-						setAttributes( { showSingleCommentLabel: value } )
-					}
-				/>
+				{ isSiteEditor && (
+					<ToggleControl
+						label={ __( 'Show single comment' ) }
+						help={ __(
+							'Toggles between single comments and multiple comments reply sentence'
+						) }
+						checked={ showSingleCommentLabel }
+						onChange={ ( value ) =>
+							setAttributes( { showSingleCommentLabel: value } )
+						}
+					/>
+				) }
 			</PanelBody>
 		</InspectorControls>
 	);
diff --git a/packages/block-library/src/comments-title/index.php b/packages/block-library/src/comments-title/index.php
index 7c48c639a8e2f6..07a66eac33375d 100644
--- a/packages/block-library/src/comments-title/index.php
+++ b/packages/block-library/src/comments-title/index.php
@@ -13,25 +13,34 @@
  * @return string Return the post comments title.
  */
 function render_block_core_comments_title( $attributes ) {
-	$comments_title     = '';
-	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
-	/* translators: %s: The post title. */
-	$single_comment_label = __( 'One Response to "%s"' );
-	/* translators: 1: The number of comments, 2: The post title. */
-	$multiple_comment_label = __( '%1$s Responses to "%2$s"' );
-	if ( 1 === (int) get_comments_number() ) {
-		$comments_title = sprintf(
-			$single_comment_label,
-			get_the_title()
-		);
-	} else {
-		$comments_title = sprintf(
-			$multiple_comment_label,
-			number_format_i18n( get_comments_number() ),
-			get_the_title()
-		);
+
+	$align_class_name    = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+	$show_post_title     = ! empty( $attributes['showPostTitle'] ) && $attributes['showPostTitle'];
+	$show_comments_count = ! empty( $attributes['showCommentsCount'] ) && $attributes['showCommentsCount'];
+	$wrapper_attributes  = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	$post_title          = $show_post_title ? sprintf( '"%1$s"', get_the_title() ) : null;
+	$comments_count      = number_format_i18n( get_comments_number() );
+
+	if ( '0' === $comments_count ) {
+		return;
 	}
+
+	$single_default_comment_label = $show_post_title ? 'One response to' : 'One response';
+	$single_comment_label         = ! empty( $attributes['singleCommentLabel'] ) ? $attributes['singleCommentLabel'] : $single_default_comment_label;
+
+	$multiple_default_comment_label = $show_post_title ? 'Responses to' : 'Responses';
+	$multiple_comment_label         = ! empty( $attributes['multipleCommentsLabel'] ) ? $attributes['multipleCommentsLabel'] : $multiple_default_comment_label;
+
+	$comments_title = '%1$s %2$s %3$s';
+
+	$comments_title = sprintf(
+		$comments_title,
+		// If there is only one comment, only display the label.
+		'1' !== $comments_count && $show_comments_count ? $comments_count : null,
+		'1' === $comments_count ? $single_comment_label : $multiple_comment_label,
+		$post_title
+	);
+
 	return sprintf(
 		'<h3 id="comments" %1$s>%2$s</h3>',
 		$wrapper_attributes,
@@ -39,9 +48,9 @@ function render_block_core_comments_title( $attributes ) {
 	);
 }
 
-/**
- * Registers the `core/comments-title` block on the server.
- */
+	/**
+	 * Registers the `core/comments-title` block on the server.
+	 */
 function register_block_core_comments_title() {
 	register_block_type_from_metadata(
 		__DIR__ . '/comments-title',
@@ -51,4 +60,4 @@ function register_block_core_comments_title() {
 	);
 }
 
-add_action( 'init', 'register_block_core_comments_title' );
+	add_action( 'init', 'register_block_core_comments_title' );

From b074bacd0df17589a1bb65736824a36a46b4e477 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Tue, 19 Apr 2022 13:43:07 +0200
Subject: [PATCH 10/15] Add translatable defaults

---
 packages/block-library/src/comments-title/index.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/comments-title/index.php b/packages/block-library/src/comments-title/index.php
index 07a66eac33375d..48d0180a85d3d4 100644
--- a/packages/block-library/src/comments-title/index.php
+++ b/packages/block-library/src/comments-title/index.php
@@ -25,10 +25,10 @@ function render_block_core_comments_title( $attributes ) {
 		return;
 	}
 
-	$single_default_comment_label = $show_post_title ? 'One response to' : 'One response';
+	$single_default_comment_label = $show_post_title ? __( 'One response to' ) : __( 'One response' );
 	$single_comment_label         = ! empty( $attributes['singleCommentLabel'] ) ? $attributes['singleCommentLabel'] : $single_default_comment_label;
 
-	$multiple_default_comment_label = $show_post_title ? 'Responses to' : 'Responses';
+	$multiple_default_comment_label = $show_post_title ? __( 'Responses to' ) : __( 'Responses' );
 	$multiple_comment_label         = ! empty( $attributes['multipleCommentsLabel'] ) ? $attributes['multipleCommentsLabel'] : $multiple_default_comment_label;
 
 	$comments_title = '%1$s %2$s %3$s';

From e5d2a2b9e29477e9d11c0d700f8b072bab19e96c Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Tue, 19 Apr 2022 15:30:20 +0200
Subject: [PATCH 11/15] Update fixtures

---
 .../blocks/core__comments-query-loop.html     | 56 ++++++--------
 .../blocks/core__comments-query-loop.json     | 28 +++++++
 .../core__comments-query-loop.parsed.json     | 75 +++++++++++++------
 .../core__comments-query-loop.serialized.html |  4 +-
 .../fixtures/blocks/core__comments-title.html |  2 +-
 .../fixtures/blocks/core__comments-title.json | 25 +++++--
 .../blocks/core__comments-title.parsed.json   | 24 ++++--
 .../core__comments-title.serialized.html      |  2 +-
 8 files changed, 142 insertions(+), 74 deletions(-)

diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.html b/test/integration/fixtures/blocks/core__comments-query-loop.html
index 2fbc1e0de80de2..156166ee90f9a4 100644
--- a/test/integration/fixtures/blocks/core__comments-query-loop.html
+++ b/test/integration/fixtures/blocks/core__comments-query-loop.html
@@ -1,41 +1,33 @@
 <!-- wp:comments-query-loop -->
-<div class="wp-block-comments-query-loop">
+<div class="wp-block-comments-query-loop"><!-- wp:comments-title {"level":4,"style":{"spacing":{"padding":{"top":"6px","right":"6px","bottom":"6px","left":"6px"}},"border":{"width":"3px","radius":"100px"}},"borderColor":"vivid-red","backgroundColor":"primary","textColor":"background","fontSize":"large"} /-->
+
 	<!-- wp:comment-template -->
 	<!-- wp:columns -->
-	<div class="wp-block-columns">
-		<!-- wp:column {"width":"40px"} -->
-		<div class="wp-block-column" style="flex-basis:40px">
-			<!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"}}} /-->
-		</div>
-		<!-- /wp:column -->
-
-		<!-- wp:column -->
-		<div class="wp-block-column">
-			<!-- wp:comment-author-name /-->
-
-			<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
-			<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
-				<!-- wp:comment-date /-->
-
-				<!-- wp:comment-edit-link /-->
-			</div>
-			<!-- /wp:group -->
-
-			<!-- wp:comment-content /-->
-
-			<!-- wp:comment-reply-link /-->
-		</div>
-		<!-- /wp:column -->
-	</div>
+	<div class="wp-block-columns"><!-- wp:column {"width":"40px"} -->
+	<div class="wp-block-column" style="flex-basis:40px"><!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"}}} /--></div>
+	<!-- /wp:column -->
+	
+	<!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:comment-author-name /-->
+	
+	<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
+	<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date /-->
+	
+	<!-- wp:comment-edit-link /--></div>
+	<!-- /wp:group -->
+	
+	<!-- wp:comment-content /-->
+	
+	<!-- wp:comment-reply-link /--></div>
+	<!-- /wp:column --></div>
 	<!-- /wp:columns -->
 	<!-- /wp:comment-template -->
-
+	
 	<!-- wp:comments-pagination -->
 	<!-- wp:comments-pagination-previous /-->
-
+	
 	<!-- wp:comments-pagination-numbers /-->
-
+	
 	<!-- wp:comments-pagination-next /-->
-	<!-- /wp:comments-pagination -->
-</div>
-<!-- /wp:comments-query-loop -->
+	<!-- /wp:comments-pagination --></div>
+	<!-- /wp:comments-query-loop -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.json b/test/integration/fixtures/blocks/core__comments-query-loop.json
index 98e97afdb9c90a..d796d78c97ffd9 100644
--- a/test/integration/fixtures/blocks/core__comments-query-loop.json
+++ b/test/integration/fixtures/blocks/core__comments-query-loop.json
@@ -6,6 +6,34 @@
 			"tagName": "div"
 		},
 		"innerBlocks": [
+			{
+				"name": "core/comments-title",
+				"isValid": true,
+				"attributes": {
+					"showPostTitle": true,
+					"showCommentsCount": true,
+					"level": 4,
+					"borderColor": "vivid-red",
+					"backgroundColor": "primary",
+					"textColor": "background",
+					"fontSize": "large",
+					"style": {
+						"spacing": {
+							"padding": {
+								"top": "6px",
+								"right": "6px",
+								"bottom": "6px",
+								"left": "6px"
+							}
+						},
+						"border": {
+							"width": "3px",
+							"radius": "100px"
+						}
+					}
+				},
+				"innerBlocks": []
+			},
 			{
 				"name": "core/comment-template",
 				"isValid": true,
diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json b/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json
index a5f207fff8388a..529336e78a0985 100644
--- a/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json
+++ b/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json
@@ -3,6 +3,33 @@
 		"blockName": "core/comments-query-loop",
 		"attrs": {},
 		"innerBlocks": [
+			{
+				"blockName": "core/comments-title",
+				"attrs": {
+					"level": 4,
+					"style": {
+						"spacing": {
+							"padding": {
+								"top": "6px",
+								"right": "6px",
+								"bottom": "6px",
+								"left": "6px"
+							}
+						},
+						"border": {
+							"width": "3px",
+							"radius": "100px"
+						}
+					},
+					"borderColor": "vivid-red",
+					"backgroundColor": "primary",
+					"textColor": "background",
+					"fontSize": "large"
+				},
+				"innerBlocks": [],
+				"innerHTML": "",
+				"innerContent": []
+			},
 			{
 				"blockName": "core/comment-template",
 				"attrs": {},
@@ -32,11 +59,11 @@
 										"innerContent": []
 									}
 								],
-								"innerHTML": "\n\t\t<div class=\"wp-block-column\" style=\"flex-basis:40px\">\n\t\t\t\n\t\t</div>\n\t\t",
+								"innerHTML": "\n\t<div class=\"wp-block-column\" style=\"flex-basis:40px\"></div>\n\t",
 								"innerContent": [
-									"\n\t\t<div class=\"wp-block-column\" style=\"flex-basis:40px\">\n\t\t\t",
+									"\n\t<div class=\"wp-block-column\" style=\"flex-basis:40px\">",
 									null,
-									"\n\t\t</div>\n\t\t"
+									"</div>\n\t"
 								]
 							},
 							{
@@ -81,13 +108,13 @@
 												"innerContent": []
 											}
 										],
-										"innerHTML": "\n\t\t\t<div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">\n\t\t\t\t\n\n\t\t\t\t\n\t\t\t</div>\n\t\t\t",
+										"innerHTML": "\n\t<div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">\n\t\n\t</div>\n\t",
 										"innerContent": [
-											"\n\t\t\t<div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">\n\t\t\t\t",
+											"\n\t<div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">",
 											null,
-											"\n\n\t\t\t\t",
+											"\n\t\n\t",
 											null,
-											"\n\t\t\t</div>\n\t\t\t"
+											"</div>\n\t"
 										]
 									},
 									{
@@ -105,27 +132,27 @@
 										"innerContent": []
 									}
 								],
-								"innerHTML": "\n\t\t<div class=\"wp-block-column\">\n\t\t\t\n\n\t\t\t\n\n\t\t\t\n\n\t\t\t\n\t\t</div>\n\t\t",
+								"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\n\t\n\t\n\t\n\t\n\t</div>\n\t",
 								"innerContent": [
-									"\n\t\t<div class=\"wp-block-column\">\n\t\t\t",
+									"\n\t<div class=\"wp-block-column\">",
 									null,
-									"\n\n\t\t\t",
+									"\n\t\n\t",
 									null,
-									"\n\n\t\t\t",
+									"\n\t\n\t",
 									null,
-									"\n\n\t\t\t",
+									"\n\t\n\t",
 									null,
-									"\n\t\t</div>\n\t\t"
+									"</div>\n\t"
 								]
 							}
 						],
-						"innerHTML": "\n\t<div class=\"wp-block-columns\">\n\t\t\n\n\t\t\n\t</div>\n\t",
+						"innerHTML": "\n\t<div class=\"wp-block-columns\">\n\t\n\t</div>\n\t",
 						"innerContent": [
-							"\n\t<div class=\"wp-block-columns\">\n\t\t",
+							"\n\t<div class=\"wp-block-columns\">",
 							null,
-							"\n\n\t\t",
+							"\n\t\n\t",
 							null,
-							"\n\t</div>\n\t"
+							"</div>\n\t"
 						]
 					}
 				],
@@ -158,25 +185,27 @@
 						"innerContent": []
 					}
 				],
-				"innerHTML": "\n\t\n\n\t\n\n\t\n\t",
+				"innerHTML": "\n\t\n\t\n\t\n\t\n\t\n\t",
 				"innerContent": [
 					"\n\t",
 					null,
-					"\n\n\t",
+					"\n\t\n\t",
 					null,
-					"\n\n\t",
+					"\n\t\n\t",
 					null,
 					"\n\t"
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-comments-query-loop\">\n\t\n\n\t\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-comments-query-loop\">\n\n\t\n\t\n\t</div>\n\t",
 		"innerContent": [
-			"\n<div class=\"wp-block-comments-query-loop\">\n\t",
+			"\n<div class=\"wp-block-comments-query-loop\">",
 			null,
 			"\n\n\t",
 			null,
-			"\n</div>\n"
+			"\n\t\n\t",
+			null,
+			"</div>\n\t"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html b/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html
index 014b6210aaa089..dd0aa7f091628c 100644
--- a/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html
+++ b/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html
@@ -1,5 +1,7 @@
 <!-- wp:comments-query-loop -->
-<div class="wp-block-comments-query-loop"><!-- wp:comment-template -->
+<div class="wp-block-comments-query-loop"><!-- wp:comments-title {"level":4,"borderColor":"vivid-red","backgroundColor":"primary","textColor":"background","fontSize":"large","style":{"spacing":{"padding":{"top":"6px","right":"6px","bottom":"6px","left":"6px"}},"border":{"width":"3px","radius":"100px"}}} /-->
+
+<!-- wp:comment-template -->
 <!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"40px"} -->
 <div class="wp-block-column" style="flex-basis:40px"><!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"}}} /--></div>
diff --git a/test/integration/fixtures/blocks/core__comments-title.html b/test/integration/fixtures/blocks/core__comments-title.html
index 3ba9fbb36f6112..5af6be31bedfe0 100644
--- a/test/integration/fixtures/blocks/core__comments-title.html
+++ b/test/integration/fixtures/blocks/core__comments-title.html
@@ -1 +1 @@
-<!-- wp:comments-title {"style":{"typography":{"textTransform":"uppercase","fontStyle":"italic","fontWeight":"900","lineHeight":"3"}},"textColor":"vivid-purple","fontSize":"x-large","fontFamily":"source-serif-pro"} /-->
\ No newline at end of file
+<!-- wp:comments-title {"level":4,"style":{"spacing":{"padding":{"top":"6px","right":"6px","bottom":"6px","left":"6px"}},"border":{"width":"3px","radius":"100px"}},"borderColor":"vivid-red","backgroundColor":"primary","textColor":"background","fontSize":"large"} /-->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__comments-title.json b/test/integration/fixtures/blocks/core__comments-title.json
index 1e7a386971f7b7..bb436b955cd9ca 100644
--- a/test/integration/fixtures/blocks/core__comments-title.json
+++ b/test/integration/fixtures/blocks/core__comments-title.json
@@ -4,15 +4,24 @@
 		"isValid": true,
 		"attributes": {
 			"showPostTitle": true,
-			"textColor": "vivid-purple",
-			"fontFamily": "source-serif-pro",
-			"fontSize": "x-large",
+			"showCommentsCount": true,
+			"level": 4,
+			"borderColor": "vivid-red",
+			"backgroundColor": "primary",
+			"textColor": "background",
+			"fontSize": "large",
 			"style": {
-				"typography": {
-					"textTransform": "uppercase",
-					"fontStyle": "italic",
-					"fontWeight": "900",
-					"lineHeight": "3"
+				"spacing": {
+					"padding": {
+						"top": "6px",
+						"right": "6px",
+						"bottom": "6px",
+						"left": "6px"
+					}
+				},
+				"border": {
+					"width": "3px",
+					"radius": "100px"
 				}
 			}
 		},
diff --git a/test/integration/fixtures/blocks/core__comments-title.parsed.json b/test/integration/fixtures/blocks/core__comments-title.parsed.json
index 0fc109ee27be98..2aeed039c3a928 100644
--- a/test/integration/fixtures/blocks/core__comments-title.parsed.json
+++ b/test/integration/fixtures/blocks/core__comments-title.parsed.json
@@ -2,17 +2,25 @@
 	{
 		"blockName": "core/comments-title",
 		"attrs": {
+			"level": 4,
 			"style": {
-				"typography": {
-					"textTransform": "uppercase",
-					"fontStyle": "italic",
-					"fontWeight": "900",
-					"lineHeight": "3"
+				"spacing": {
+					"padding": {
+						"top": "6px",
+						"right": "6px",
+						"bottom": "6px",
+						"left": "6px"
+					}
+				},
+				"border": {
+					"width": "3px",
+					"radius": "100px"
 				}
 			},
-			"textColor": "vivid-purple",
-			"fontSize": "x-large",
-			"fontFamily": "source-serif-pro"
+			"borderColor": "vivid-red",
+			"backgroundColor": "primary",
+			"textColor": "background",
+			"fontSize": "large"
 		},
 		"innerBlocks": [],
 		"innerHTML": "",
diff --git a/test/integration/fixtures/blocks/core__comments-title.serialized.html b/test/integration/fixtures/blocks/core__comments-title.serialized.html
index e54095328f79a3..6507dc669314d4 100644
--- a/test/integration/fixtures/blocks/core__comments-title.serialized.html
+++ b/test/integration/fixtures/blocks/core__comments-title.serialized.html
@@ -1 +1 @@
-<!-- wp:comments-title {"textColor":"vivid-purple","fontFamily":"source-serif-pro","fontSize":"x-large","style":{"typography":{"textTransform":"uppercase","fontStyle":"italic","fontWeight":"900","lineHeight":"3"}}} /-->
+<!-- wp:comments-title {"level":4,"borderColor":"vivid-red","backgroundColor":"primary","textColor":"background","fontSize":"large","style":{"spacing":{"padding":{"top":"6px","right":"6px","bottom":"6px","left":"6px"}},"border":{"width":"3px","radius":"100px"}}} /-->

From 35277859a0341139b4f6f95599b6d1bf2fa6e627 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Tue, 19 Apr 2022 16:10:39 +0200
Subject: [PATCH 12/15] Address review comments

---
 packages/block-library/src/comments-title/edit.js   | 2 +-
 packages/block-library/src/comments-title/index.php | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
index 2a646477ac0247..7e399c9ebf6acc 100644
--- a/packages/block-library/src/comments-title/edit.js
+++ b/packages/block-library/src/comments-title/edit.js
@@ -126,7 +126,7 @@ export default function Edit( {
 		</InspectorControls>
 	);
 
-	const postTitle = isSiteEditor ? '"Post Title"' : `“${ rawTitle }”`;
+	const postTitle = isSiteEditor ? __( '"Post Title"' ) : `"${ rawTitle }"`;
 
 	const singlePlaceholder = showPostTitle
 		? __( 'One response to ' )
diff --git a/packages/block-library/src/comments-title/index.php b/packages/block-library/src/comments-title/index.php
index 48d0180a85d3d4..ed95541b7ecb0d 100644
--- a/packages/block-library/src/comments-title/index.php
+++ b/packages/block-library/src/comments-title/index.php
@@ -20,6 +20,10 @@ function render_block_core_comments_title( $attributes ) {
 	$wrapper_attributes  = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 	$post_title          = $show_post_title ? sprintf( '"%1$s"', get_the_title() ) : null;
 	$comments_count      = number_format_i18n( get_comments_number() );
+	$tag_name            = 'h2';
+	if ( isset( $attributes['level'] ) ) {
+		$tag_name = 'h' . $attributes['level'];
+	}
 
 	if ( '0' === $comments_count ) {
 		return;
@@ -42,7 +46,8 @@ function render_block_core_comments_title( $attributes ) {
 	);
 
 	return sprintf(
-		'<h3 id="comments" %1$s>%2$s</h3>',
+		'<%1$s id="comments" %2$s>%3$s</%1$s>',
+		$tag_name,
 		$wrapper_attributes,
 		$comments_title
 	);

From 3136b87904f6514e382230233a81340072c5a25f Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 19 Apr 2022 18:48:24 +0200
Subject: [PATCH 13/15] Add commentTitle icon, use in block

---
 packages/block-library/src/comments-title/index.js |  2 +-
 packages/icons/CHANGELOG.md                        |  2 ++
 packages/icons/src/index.js                        |  1 +
 packages/icons/src/library/comment-title.js        | 12 ++++++++++++
 4 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 packages/icons/src/library/comment-title.js

diff --git a/packages/block-library/src/comments-title/index.js b/packages/block-library/src/comments-title/index.js
index 65ceb0efb64225..988be3ef86169d 100644
--- a/packages/block-library/src/comments-title/index.js
+++ b/packages/block-library/src/comments-title/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { title as icon } from '@wordpress/icons';
+import { commentTitle as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 4655d0ee7a5a3b..afb1ace38c3e7f 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+-   Add new `commentTitle` icon. ([#40419](https://github.com/WordPress/gutenberg/pull/40419))
+
 ## 8.2.0 (2022-04-08)
 
 ### New Features
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 32d4cfe14bfdf2..231dbf6ac6a563 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -54,6 +54,7 @@ export { default as commentAuthorName } from './library/comment-author-name';
 export { default as commentContent } from './library/comment-content';
 export { default as commentReplyLink } from './library/comment-reply-link';
 export { default as commentEditLink } from './library/comment-edit-link';
+export { default as commentTitle } from './library/comment-title';
 export { default as cover } from './library/cover';
 export { default as create } from './library/create';
 export { default as crop } from './library/crop';
diff --git a/packages/icons/src/library/comment-title.js b/packages/icons/src/library/comment-title.js
new file mode 100644
index 00000000000000..dd119dea0e03dc
--- /dev/null
+++ b/packages/icons/src/library/comment-title.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const commentTitle = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M6 11.9c.6.3 1.3.5 2.1.5.4 0 .8 0 1.2-.1.4-.1.7-.2 1-.3l-.1-1.3c-.3.1-.6.3-.9.3-.3.1-.7.1-1.1.1-.6 0-1.1-.1-1.5-.4-.4-.3-.7-.6-.9-1-.2-.5-.3-1-.3-1.5 0-.6.1-1.1.3-1.5.2-.4.5-.8.9-1 .4-.3.9-.4 1.5-.4.4 0 .7 0 1.1.1l.9.3.1-1.3c-.3-.1-.6-.2-1-.3C9 4 8.6 4 8.2 4c-.9 0-1.6.2-2.2.5-.6.4-1.1.8-1.5 1.5-.3.6-.5 1.3-.5 2.2s.2 1.6.5 2.2c.4.6.9 1.1 1.5 1.5zm-2 2.6V16h16v-1.5H4zM4 20h9v-1.5H4V20z" />
+	</SVG>
+);
+
+export default commentTitle;

From aa8699ae975dd7d19ce3f382073d2b34e4c634d4 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 19 Apr 2022 20:19:27 +0200
Subject: [PATCH 14/15] Remove warning if there are no comments

---
 packages/block-library/src/comments-title/edit.js | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
index 7e399c9ebf6acc..0f0a9a313a33da 100644
--- a/packages/block-library/src/comments-title/edit.js
+++ b/packages/block-library/src/comments-title/edit.js
@@ -12,7 +12,6 @@ import {
 	useBlockProps,
 	PlainText,
 	InspectorControls,
-	Warning,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
@@ -136,16 +135,6 @@ export default function Edit( {
 		? __( 'Responses to ' )
 		: __( 'Responses' );
 
-	if ( commentsCount === 0 && ! isSiteEditor ) {
-		return (
-			<Warning>
-				{ __(
-					'Comments Title block: No comments found. The title will not be displayed on the site.'
-				) }
-			</Warning>
-		);
-	}
-
 	return (
 		<>
 			{ blockControls }

From b649cbaf99962ad14172ee4979117b25bd5656ad Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 19 Apr 2022 20:59:43 +0200
Subject: [PATCH 15/15] Use ToggleGroupControl and internal state for editing
 mode

---
 docs/reference-guides/core-blocks.md          |  2 +-
 .../src/comments-title/block.json             |  3 --
 .../block-library/src/comments-title/edit.js  | 39 ++++++++++++-------
 3 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 7b8c0e5ce2a83e..08367cb90f925c 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -222,7 +222,7 @@ Displays a title with the number of comments ([Source](https://github.com/WordPr
 -	**Name:** core/comments-title
 -	**Category:** theme
 -	**Supports:** align, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~anchor~~, ~~html~~
--	**Attributes:** level, multipleCommentsLabel, showCommentsCount, showPostTitle, showSingleCommentLabel, singleCommentLabel, textAlign
+-	**Attributes:** level, multipleCommentsLabel, showCommentsCount, showPostTitle, singleCommentLabel, textAlign
 
 ## Cover
 
diff --git a/packages/block-library/src/comments-title/block.json b/packages/block-library/src/comments-title/block.json
index 02d17cfc16a505..3ad6babf81e571 100644
--- a/packages/block-library/src/comments-title/block.json
+++ b/packages/block-library/src/comments-title/block.json
@@ -22,9 +22,6 @@
 			"type": "boolean",
 			"default": true
 		},
-		"showSingleCommentLabel": {
-			"type": "boolean"
-		},
 		"showCommentsCount": {
 			"type": "boolean",
 			"default": true
diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
index 0f0a9a313a33da..e3855d60c2a560 100644
--- a/packages/block-library/src/comments-title/edit.js
+++ b/packages/block-library/src/comments-title/edit.js
@@ -15,7 +15,12 @@ import {
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	PanelBody,
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
@@ -30,7 +35,6 @@ export default function Edit( {
 		textAlign,
 		singleCommentLabel,
 		multipleCommentsLabel,
-		showSingleCommentLabel,
 		showPostTitle,
 		showCommentsCount,
 		level,
@@ -40,6 +44,7 @@ export default function Edit( {
 } ) {
 	const TagName = 'h' + level;
 	const [ commentsCount, setCommentsCount ] = useState();
+	const [ editingMode, setEditingMode ] = useState( 'plural' );
 	const [ rawTitle ] = useEntityProp( 'postType', postType, 'title', postId );
 	const isSiteEditor = typeof postId === 'undefined';
 	const blockProps = useBlockProps( {
@@ -95,6 +100,22 @@ export default function Edit( {
 	const inspectorControls = (
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
+				{ isSiteEditor && (
+					<ToggleGroupControl
+						label={ __( 'Editing mode' ) }
+						onChange={ setEditingMode }
+						value={ editingMode }
+					>
+						<ToggleGroupControlOption
+							label={ __( 'Singular' ) }
+							value="singular"
+						/>
+						<ToggleGroupControlOption
+							label={ __( 'Plural' ) }
+							value="plural"
+						/>
+					</ToggleGroupControl>
+				) }
 				<ToggleControl
 					label={ __( 'Show post title' ) }
 					checked={ showPostTitle }
@@ -109,18 +130,6 @@ export default function Edit( {
 						setAttributes( { showCommentsCount: value } )
 					}
 				/>
-				{ isSiteEditor && (
-					<ToggleControl
-						label={ __( 'Show single comment' ) }
-						help={ __(
-							'Toggles between single comments and multiple comments reply sentence'
-						) }
-						checked={ showSingleCommentLabel }
-						onChange={ ( value ) =>
-							setAttributes( { showSingleCommentLabel: value } )
-						}
-					/>
-				) }
 			</PanelBody>
 		</InspectorControls>
 	);
@@ -140,7 +149,7 @@ export default function Edit( {
 			{ blockControls }
 			{ inspectorControls }
 			<TagName { ...blockProps }>
-				{ showSingleCommentLabel || commentsCount === 1 ? (
+				{ editingMode === 'singular' || commentsCount === 1 ? (
 					<>
 						<PlainText
 							__experimentalVersion={ 2 }