[Block: Post comment author]: Add link settings and block supports (#…

…35595)

* Update post comment author icon

* Update post comment author with new options

* Refactor to move the link wrapper outside the select function

* Fix linter comma trailing on php

* Fixed some comments

* Add p tag inside, renamed icon

* Unify removing p tag on both editor and frontend

* Reset p to previous status

Co-authored-by: Carlos Bravo <carlos@ticloop.com>

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

@@ -6,8 +6,31 @@
 	"parent": [ "core/post-comment" ],
 	"description": "Post comment author.",
 	"textdomain": "default",
+	"attributes": {
+		"isLink": {
+			"type": "boolean",
+			"default": false
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
+		}
+	},
 	"usesContext": [ "commentId" ],
 	"supports": {
-		"html": false
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true
+		}
 	}
 }

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

@@ -3,12 +3,24 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useBlockProps } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 
-export default function Edit( { attributes, context } ) {
-	const { className } = attributes;
+/**
+ * Renders the `core/post-comment-author` 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 {Object} props.context       Inherited context.
+ *
+ * @return {JSX.Element} React element.
+ */
+export default function Edit( { attributes, context, setAttributes } ) {
+	const { className, isLink, linkTarget } = attributes;
 	const { commentId } = context;
+	const blockProps = useBlockProps( { className } );
 
 	const displayName = useSelect(
 		( select ) => {
@@ -21,15 +33,45 @@ export default function Edit( { attributes, context } ) {
 				const user = getEntityRecord( 'root', 'user', comment.author );
 				return user?.name ?? __( 'Anonymous' );
 			}
-
 			return authorName ?? '';
 		},
 		[ commentId ]
 	);
 
+	const displayAuthor = isLink ? (
+		<a
+			href="#comment-author-pseudo-link"
+			onClick={ ( event ) => event.preventDefault() }
+		>
+			{ displayName }
+		</a>
+	) : (
+		<p>{ displayName }</p>
+	);
+
 	return (
-		<div { ...useBlockProps() }>
-			<p className={ className }>{ displayName }</p>
-		</div>
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ __( 'Link to authors URL' ) }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+						checked={ isLink }
+					/>
+					{ isLink && (
+						<ToggleControl
+							label={ __( 'Open in new tab' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									linkTarget: value ? '_blank' : '_self',
+								} )
+							}
+							checked={ linkTarget === '_blank' }
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			<div { ...blockProps }>{ displayAuthor }</div>
+		</>
 	);
 }

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

@@ -7,7 +7,7 @@ import edit from './edit';
 /**
  * WordPress dependencies
  */
-import { postAuthor as icon } from '@wordpress/icons';
+import { commentAuthor as icon } from '@wordpress/icons';
 
 const { name } = metadata;
 export { metadata, name };

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

@@ -11,19 +11,25 @@
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
- * @return string Return the post comment's content.
+ * @return string Return the post comment's author.
  */
 function render_block_core_post_comment_author( $attributes, $content, $block ) {
 	if ( ! isset( $block->context['commentId'] ) ) {
 		return '';
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$comment_author     = get_comment_author( $block->context['commentId'] );
+	$link               = get_comment_author_url( $block->context['commentId'] );
+
+	if ( ! empty( $attributes['isLink'] ) && ! empty( $attributes['linkTarget'] ) ) {
+		$comment_author = sprintf( '<a rel="external nofollow ugc" href="%1s" target="%2s" >%3s</a>', $link, $attributes['linkTarget'], $comment_author );
+	}
 
 	return sprintf(
 		'<div %1$s>%2$s</div>',
 		$wrapper_attributes,
-		get_comment_author( $block->context['commentId'] )
+		$comment_author
 	);
 }
 

packages/icons/src/index.js

@@ -49,6 +49,7 @@ export { default as color } from './library/color';
 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 cover } from './library/cover';
 export { default as create } from './library/create';
 export { default as crop } from './library/crop';

packages/icons/src/library/comment-author.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path, Circle } from '@wordpress/primitives';
+
+const commentAuthor = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF">
+		<Path
+			d="M18 4H6c-1.1 0-2 .9-2 2v12.9c0 .6.5 1.1 1.1 1.1.3 0 .5-.1.8-.3L8.5 17H18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 11c0 .3-.2.5-.5.5H7.9l-2.4 2.4V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v9z"
+			fillRule="evenodd"
+			clipRule="evenodd"
+		/>
+		<Path
+			d="M15 15V15C15 13.8954 14.1046 13 13 13L11 13C9.89543 13 9 13.8954 9 15V15"
+			fillRule="evenodd"
+			clipRule="evenodd"
+		/>
+		<Circle cx="12" cy="9" r="2" fillRule="evenodd" clipRule="evenodd" />
+	</SVG>
+);
+
+export default commentAuthor;

test/integration/fixtures/blocks/core__post-comment-author.json

@@ -3,7 +3,10 @@
 		"clientId": "_clientId_0",
 		"name": "core/post-comment-author",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"isLink": false,
+			"linkTarget": "_self"
+		},
 		"innerBlocks": [],
 		"originalContent": ""
 	}