Post Comments block - add style supports for text and background sett…

…ings. (#24080)

* update block.json

* add textAlign in editor

* update wront context check / warnings

* allow comment html (links) to render in editor

* link colors to work in editor

* link colors to register on front end

* remove check for postType

* update editor rendering of comments

packages/block-library/src/editor.scss

@@ -49,6 +49,7 @@
 @import "./verse/editor.scss";
 @import "./video/editor.scss";
 @import "./widget-area/editor.scss";
+@import "./post-comments/editor.scss";
 
 /**
  * Import styles from internal editor components used by the blocks.

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

@@ -1,7 +1,22 @@
 {
 	"name": "core/post-comments",
 	"category": "design",
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		}
+	},
 	"usesContext": [
-		"postId"
-	]
+		"postId",
+		"postType"
+	],
+	"supports": {
+		"html": false,
+		"__experimentalFontSize": true,
+		"__experimentalColor": {
+			"gradients": true,
+			"linkColor": true
+		},
+		"__experimentalLineHeight": true
+	}
 }

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

@@ -1,9 +1,19 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useEntityId } from '@wordpress/core-data';
+import {
+	AlignmentToolbar,
+	BlockControls,
+	Warning,
+} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { RawHTML } from '@wordpress/element';
 
 function PostCommentsDisplay( { postId } ) {
 	return useSelect(
@@ -18,19 +28,51 @@ function PostCommentsDisplay( { postId } ) {
 			// TODO: "No Comments" placeholder should be editable.
 			return comments && comments.length
 				? comments.map( ( comment ) => (
-						<p key={ comment.id }>{ comment.content.raw }</p>
+						<RawHTML
+							className="wp-block-post-comments__comment"
+							key={ comment.id }
+						>
+							{ comment.content.rendered }
+						</RawHTML>
 				  ) )
 				: __( 'No comments.' );
 		},
 		[ postId ]
 	);
 }
 
-export default function PostCommentsEdit() {
-	// TODO: Update to handle multiple post types.
-	const postId = useEntityId( 'postType', 'post' );
-	if ( ! postId ) {
-		return __( 'Post Comments' );
+export default function PostCommentsEdit( {
+	attributes,
+	setAttributes,
+	context,
+} ) {
+	const { postType, postId } = context;
+	const { textAlign } = attributes;
+
+	if ( ! postType || ! postId ) {
+		return (
+			<Warning>{ __( 'Post comments block: no post found.' ) }</Warning>
+		);
 	}
-	return <PostCommentsDisplay postId={ postId } />;
+
+	return (
+		<>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+
+			<div
+				className={ classnames( 'wp-block-post-comments', {
+					[ `has-text-align-${ textAlign }` ]: textAlign,
+				} ) }
+			>
+				<PostCommentsDisplay postId={ postId } />
+			</div>
+		</>
+	);
 }

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

@@ -0,0 +1,3 @@
+.block-editor-block-list__block[data-type="core/post-comments"].has-link-color .wp-block-post-comments a {
+	color: var(--wp--style--color--link);
+}

packages/block-library/src/post-comments/index.php

@@ -30,7 +30,14 @@ function render_block_core_post_comments( $attributes, $content, $block ) {
 	ob_start();
 	comments_template();
 	$post = $post_before;
-	return ob_get_clean();
+
+	$classes = 'wp-block-post-comments';
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes .= ' has-text-align-' . $attributes['textAlign'];
+	}
+
+	$output = sprintf( '<div class="%1$s">', esc_attr( $classes ) ) . ob_get_clean() . '</div>';
+	return $output;
 }
 
 /**

packages/block-library/src/post-comments/style.scss

@@ -0,0 +1,4 @@
+.wp-block-post-comments.has-link-color a,
+.wp-block-post-comments.has-background.has-link-color a {
+	color: var(--wp--style--color--link);
+}

packages/block-library/src/style.scss

@@ -35,6 +35,7 @@
 @import "./text-columns/style.scss";
 @import "./video/style.scss";
 @import "./post-excerpt/style.scss";
+@import "./post-comments/style.scss";
 
 // The following selectors have increased specificity (using the :root prefix)
 // to assure colors take effect over another base class color, mainly to let