Block Library: Add new Comment Reply Link block (#35774)

* Comment Reply: Init block files

* Remove unexpected throw

* Comment Reply: Render a clickable link

- It uses `get_comment_reply_link` to generate the link.
- That function already cover most of the cases, except comments depth.

* Comment Reply: Add style settings

* Comment Reply: Create block fixture files

* Comment Reply: Fix phpcs errors

* Comment Reply: Fix some comments

* Icons: Fix comment reply link

* Comment Reply: Change href in editor

Using `#comment-reply-pseudo-link` for consistency.
That pattern is being used in other blocks, e.g.
Post Comment Author or Post Comment Date

* Comment Reply: Fix SSR for some cases

The cases are:
- The comment ID passed is invalid
- The comment doesn't have any parents
- There is no link to render

Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>

lib/blocks.php

@@ -75,6 +75,7 @@ function gutenberg_reregister_core_block_types() {
 				'post-comment-content.php'       => 'core/post-comment-content',
 				'post-comment-date.php'          => 'core/post-comment-date',
 				'post-comment-edit.php'          => 'core/post-comment-edit',
+				'post-comment-reply-link.php'    => 'core/post-comment-reply-link',
 				'post-comments.php'              => 'core/post-comments',
 				'post-comments-count.php'        => 'core/post-comments-count',
 				'post-comments-form.php'         => 'core/post-comments-form',

packages/block-library/src/index.js

@@ -84,6 +84,7 @@ import * as postCommentAuthorAvatar from './post-comment-author-avatar';
 import * as postCommentContent from './post-comment-content';
 import * as postCommentDate from './post-comment-date';
 import * as postCommentEdit from './post-comment-edit';
+import * as postCommentReplyLink from './post-comment-reply-link';
 import * as postComments from './post-comments';
 import * as postCommentsCount from './post-comments-count';
 import * as postCommentsForm from './post-comments-form';
@@ -247,6 +248,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								postCommentContent,
 								postCommentDate,
 								postCommentEdit,
+								postCommentReplyLink,
 								postComments,
 								postCommentsCount,
 								postCommentsForm,

packages/block-library/src/post-comment-reply-link/block.json

@@ -0,0 +1,32 @@
+{
+	"apiVersion": 2,
+	"name": "core/post-comment-reply-link",
+	"title": "Post Comment Reply Link",
+	"category": "design",
+	"parent": [ "core/post-comment" ],
+	"description": "Displays a link to reply to a comment.",
+	"textdomain": "default",
+	"usesContext": [ "commentId" ],
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"color": {
+			"gradients": true,
+			"link": true,
+			"text": false
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true
+		},
+		"html": false
+	}
+}

packages/block-library/src/post-comment-reply-link/edit.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	AlignmentControl,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+
+/**
+ * Renders the `core/post-comment-reply-link` block on the editor.
+ *
+ * @param {Object} props                      React props.
+ * @param {Object} props.setAttributes        Callback for updating block attributes.
+ * @param {Object} props.attributes           Block attributes.
+ * @param {string} props.attributes.textAlign The `textAlign` attribute.
+ *
+ * @return {JSX.Element} React element.
+ */
+function Edit( { setAttributes, attributes: { textAlign } } ) {
+	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 }>
+				<a
+					href="#comment-reply-pseudo-link"
+					onClick={ ( event ) => event.preventDefault() }
+				>
+					{ __( 'Reply' ) }
+				</a>
+			</div>
+		</>
+	);
+}
+
+export default Edit;

packages/block-library/src/post-comment-reply-link/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { postCommentReplyLink 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 = {
+	edit,
+	icon,
+};

packages/block-library/src/post-comment-reply-link/index.php

@@ -0,0 +1,80 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-comment-reply-link` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-comment-reply-link` 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 comment's reply link.
+ */
+function render_block_core_post_comment_reply_link( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['commentId'] ) ) {
+		return '';
+	}
+
+	$thread_comments = get_option( 'thread_comments' );
+	if ( ! $thread_comments ) {
+		return '';
+	}
+
+	$comment = get_comment( $block->context['commentId'] );
+	if ( empty( $comment ) ) {
+		return '';
+	}
+
+	$depth     = 1;
+	$max_depth = get_option( 'thread_comments_depth' );
+	$parent_id = $comment->comment_parent;
+
+	// Compute comment's depth iterating over its ancestors.
+	while ( ! empty( $parent_id ) ) {
+		$depth++;
+		$parent_id = get_comment( $parent_id )->comment_parent;
+	}
+
+	$comment_reply_link = get_comment_reply_link(
+		array(
+			'depth'     => $depth,
+			'max_depth' => $max_depth,
+		),
+		$comment
+	);
+
+	// Render nothing if the generated reply link is empty.
+	if ( empty( $comment_reply_link ) ) {
+		return;
+	}
+
+	$classes = '';
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes .= 'has-text-align-' . $attributes['textAlign'];
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		$comment_reply_link
+	);
+}
+
+/**
+ * Registers the `core/post-comment-reply-link` block on the server.
+ */
+function register_block_core_post_comment_reply_link() {
+	register_block_type_from_metadata(
+		__DIR__ . '/post-comment-reply-link',
+		array(
+			'render_callback' => 'render_block_core_post_comment_reply_link',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_post_comment_reply_link' );

packages/block-library/src/post-comment/edit.js

@@ -14,10 +14,12 @@ const ALLOWED_BLOCKS = [
 	'core/post-comment-content',
 	'core/post-comment-author',
 	'core/post-comment-date',
+	'core/post-comment-reply-link',
 ];
 const TEMPLATE = [
 	[ 'core/post-comment-content' ],
 	[ 'core/post-comment-author' ],
+	[ 'core/post-comment-reply-link' ],
 ];
 
 export default function Edit( { attributes: { commentId }, setAttributes } ) {

packages/icons/src/index.js

@@ -152,6 +152,7 @@ export { default as plus } from './library/plus';
 export { default as postAuthor } from './library/post-author';
 export { default as postCategories } from './library/post-categories';
 export { default as postContent } from './library/post-content';
+export { default as postCommentReplyLink } from './library/post-comment-reply-link';
 export { default as postComments } from './library/post-comments';
 export { default as postCommentAuthorAvatar } from './library/post-comment-author-avatar';
 export { default as postCommentsCount } from './library/post-comments-count';

packages/icons/src/library/post-comment-reply-link.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const postCommentsReplyLink = (
+	<SVG
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Path d="M6.68822 10.625L6.24878 11.0649L5.5 11.8145L5.5 5.5L12.5 5.5V8L14 6.5V5C14 4.44772 13.5523 4 13 4H5C4.44772 4 4 4.44771 4 5V13.5247C4 13.8173 4.16123 14.086 4.41935 14.2237C4.72711 14.3878 5.10601 14.3313 5.35252 14.0845L7.31 12.125H8.375L9.875 10.625H7.31H6.68822ZM14.5605 10.4983L11.6701 13.75H16.9975C17.9963 13.75 18.7796 14.1104 19.3553 14.7048C19.9095 15.2771 20.2299 16.0224 20.4224 16.7443C20.7645 18.0276 20.7543 19.4618 20.7487 20.2544C20.7481 20.345 20.7475 20.4272 20.7475 20.4999L19.2475 20.5001C19.2475 20.4191 19.248 20.3319 19.2484 20.2394V20.2394C19.2526 19.4274 19.259 18.2035 18.973 17.1307C18.8156 16.5401 18.586 16.0666 18.2778 15.7483C17.9909 15.4521 17.5991 15.25 16.9975 15.25H11.8106L14.5303 17.9697L13.4696 19.0303L8.96956 14.5303L13.4394 9.50171L14.5605 10.4983Z" />
+	</SVG>
+);
+
+export default postCommentsReplyLink;

test/integration/fixtures/blocks/core__post-comment-reply-link.html

@@ -0,0 +1 @@
+<!-- wp:post-comment-reply-link {"textAlign":"right","style":{"typography":{"lineHeight":"0.8","textTransform":"uppercase","letterSpacing":"10px"},"elements":{"link":{"color":{"text":"var:preset|color|blue"}}},"color":{"background":"#c82222"}},"fontSize":"extra-large","fontFamily":"cambria-georgia"} /-->

test/integration/fixtures/blocks/core__post-comment-reply-link.json

@@ -0,0 +1,31 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/post-comment-reply-link",
+		"isValid": true,
+		"attributes": {
+			"textAlign": "right",
+			"fontFamily": "cambria-georgia",
+			"fontSize": "extra-large",
+			"style": {
+				"typography": {
+					"lineHeight": "0.8",
+					"textTransform": "uppercase",
+					"letterSpacing": "10px"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var:preset|color|blue"
+						}
+					}
+				},
+				"color": {
+					"background": "#c82222"
+				}
+			}
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
+]

test/integration/fixtures/blocks/core__post-comment-reply-link.parsed.json

@@ -0,0 +1,30 @@
+[
+	{
+		"blockName": "core/post-comment-reply-link",
+		"attrs": {
+			"textAlign": "right",
+			"style": {
+				"typography": {
+					"lineHeight": "0.8",
+					"textTransform": "uppercase",
+					"letterSpacing": "10px"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var:preset|color|blue"
+						}
+					}
+				},
+				"color": {
+					"background": "#c82222"
+				}
+			},
+			"fontSize": "extra-large",
+			"fontFamily": "cambria-georgia"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]

test/integration/fixtures/blocks/core__post-comment-reply-link.serialized.html

@@ -0,0 +1 @@
+<!-- wp:post-comment-reply-link {"textAlign":"right","fontFamily":"cambria-georgia","fontSize":"extra-large","style":{"typography":{"lineHeight":"0.8","textTransform":"uppercase","letterSpacing":"10px"},"elements":{"link":{"color":{"text":"var:preset|color|blue"}}},"color":{"background":"#c82222"}}} /-->