Comment Content Block: Add typography, color and padding support (#35183

)

* Comment Content Block: add more `supports` settings

Settings are:
* Typography and color settings (same as the Paragraph block)
* Layout settings (same as Post Content block)

* Comment Content: Add block icon

* Comment Content: Show placeholder when no context

* Comment Content: Add jsdoc to `edit` component

* Comment Content: Remove the layout setting

* Comment Content: Fix path props in icon

* Comment Content: Check if the comment is ready

* Comment Content: Replace loading message with placeholder

* Comment Content: Support for `textAlign` attribute

I've also removed some cases that I think
should be handled in the parent block:
- When the comment is not ready yet
- When the comment does not exist

* Comment Content: Add padding support

* Comment Content: Add more typography settings

Added experimental settings for changing
- Font family
- Font weight
- Font style
- Text transform
- Letter spacing

* Comment Content: Remove unnecessary comments

* Icons: Add `post` prefix to Comment Content icon

* Comment Content: Show block name as placeholder

packages/block-library/src/post-comment-content/block.json

@@ -7,7 +7,31 @@
 	"description": "Post comment content",
 	"textdomain": "default",
 	"usesContext": [ "commentId" ],
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		}
+	},
 	"supports": {
+		"color": {
+			"gradients": true,
+			"link": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true
+		},
+		"spacing": {
+			"padding": [ "horizontal", "vertical" ],
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
 		"html": false
 	}
 }

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

@@ -1,32 +1,70 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { RawHTML } from '@wordpress/element';
-import { useEntityProp } from '@wordpress/core-data';
-import { useBlockProps, Warning } from '@wordpress/block-editor';
 import { Disabled } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+import {
+	AlignmentControl,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+
+/**
+ * Renders the `core/post-comment-content` 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.
+ * @param {Object} props.context              Inherited context.
+ * @param {string} props.context.commentId    The comment ID.
+ *
+ * @return {JSX.Element} React element.
+ */
+export default function Edit( {
+	setAttributes,
+	attributes: { textAlign },
+	context: { commentId },
+} ) {
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
 
-export default function Edit( { context: { commentId } } ) {
-	const blockProps = useBlockProps();
 	const [ content ] = useEntityProp(
 		'root',
 		'comment',
 		'content',
 		commentId
 	);
-	if ( ! content?.rendered ) {
-		return (
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( newAlign ) =>
+						setAttributes( { textAlign: newAlign } )
+					}
+				/>
+			</BlockControls>
 			<div { ...blockProps }>
-				<Warning>{ __( 'Comment has no content.' ) }</Warning>
+				{ ! commentId || ! content ? (
+					<p>{ __( 'Post Comment Content' ) }</p>
+				) : (
+					<Disabled>
+						<RawHTML key="html">{ content.rendered }</RawHTML>
+					</Disabled>
+				) }
 			</div>
-		);
-	}
-	return (
-		<div { ...blockProps }>
-			<Disabled>
-				<RawHTML key="html">{ content.rendered }</RawHTML>
-			</Disabled>
-		</div>
+		</>
 	);
 }

packages/block-library/src/post-comment-content/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { postContent as icon } from '@wordpress/icons';
+import { postCommentContent as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies

packages/block-library/src/post-comment-content/index.php

@@ -17,13 +17,22 @@ function render_block_core_post_comment_content( $attributes, $content, $block )
 	if ( ! isset( $block->context['commentId'] ) ) {
 		return '';
 	}
+
 	$comment_text = get_comment_text( $block->context['commentId'] );
 	if ( ! $comment_text ) {
 		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>',
-		get_block_wrapper_attributes(),
+		$wrapper_attributes,
 		$comment_text
 	);
 }

packages/icons/src/index.js

@@ -50,6 +50,7 @@ export { default as column } from './library/column';
 export { default as columns } from './library/columns';
 export { default as comment } from './library/comment';
 export { default as commentAuthor } from './library/comment-author';
+export { default as postCommentContent } from './library/post-comment-content';
 export { default as cover } from './library/cover';
 export { default as create } from './library/create';
 export { default as crop } from './library/crop';

packages/icons/src/library/post-comment-content.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const postCommentContent = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M6.68822 16.625L5.5 17.8145L5.5 5.5L18.5 5.5L18.5 16.625L6.68822 16.625ZM7.31 18.125L19 18.125C19.5523 18.125 20 17.6773 20 17.125L20 5C20 4.44772 19.5523 4 19 4H5C4.44772 4 4 4.44772 4 5V19.5247C4 19.8173 4.16123 20.086 4.41935 20.2237C4.72711 20.3878 5.10601 20.3313 5.35252 20.0845L7.31 18.125ZM16 9.99997H8V8.49997H16V9.99997ZM8 14H13V12.5H8V14Z"
+		/>
+	</SVG>
+);
+
+export default postCommentContent;