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