Create comments title with simple styling

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

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

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
+		}
+	}
+}

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

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,
+};

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

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,

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"} /-->

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": []
+	}
+]

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": []
+	}
+]

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"}}} /-->