[Block: Post comment date]: Add link setting and block supports (#35112)

* [Block: Post comment date]: Add link setting and block supports Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>
WordPress · Oct 7, 2021 · 6a46963 · 6a46963
1 parent d968d7b
commit 6a46963
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 14 deletions.
diff --git a/packages/block-library/src/post-comment-date/block.json b/packages/block-library/src/post-comment-date/block.json
@@ -9,10 +9,27 @@
 	"attributes": {
 		"format": {
 			"type": "string"
+		},
+		"isLink": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"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
+		}
 	}
 }
diff --git a/packages/block-library/src/post-comment-date/edit.js b/packages/block-library/src/post-comment-date/edit.js
@@ -4,11 +4,15 @@
 import { useEntityProp } from '@wordpress/core-data';
 import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { PanelBody, CustomSelectControl } from '@wordpress/components';
+import {
+	PanelBody,
+	CustomSelectControl,
+	ToggleControl,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export default function Edit( { attributes, context, setAttributes } ) {
-	const { className, format } = attributes;
+	const { className, format, isLink } = attributes;
 	const { commentId } = context;
 
 	const settings = __experimentalGetSettings();
@@ -24,6 +28,23 @@ export default function Edit( { attributes, context, setAttributes } ) {
 	const resolvedFormat = format || siteDateFormat || settings.formats.date;
 	const blockProps = useBlockProps( { className } );
 
+	let commentDate = (
+		<time dateTime={ dateI18n( 'c', date ) }>
+			{ dateI18n( resolvedFormat, date ) }
+		</time>
+	);
+
+	if ( isLink ) {
+		commentDate = (
+			<a
+				href="#comment-date-pseudo-link"
+				onClick={ ( event ) => event.preventDefault() }
+			>
+				{ commentDate }
+			</a>
+		);
+	}
+
 	return (
 		<>
 			<InspectorControls>
@@ -42,13 +63,15 @@ export default function Edit( { attributes, context, setAttributes } ) {
 						) }
 					/>
 				</PanelBody>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ __( 'Link to comment' ) }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+						checked={ isLink }
+					/>
+				</PanelBody>
 			</InspectorControls>
-
-			<div { ...blockProps }>
-				<time dateTime={ dateI18n( 'c', date ) }>
-					{ dateI18n( resolvedFormat, date ) }
-				</time>
-			</div>
+			<div { ...blockProps }>{ commentDate }</div>
 		</>
 	);
 }
diff --git a/packages/block-library/src/post-comment-date/index.php b/packages/block-library/src/post-comment-date/index.php
@@ -19,14 +19,21 @@ function render_block_core_post_comment_date( $attributes, $content, $block ) {
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$formatted_date     = get_comment_date(
+		isset( $attributes['format'] ) ? $attributes['format'] : '',
+		$block->context['commentId']
+	);
+	$link               = get_comment_link( $block->context['commentId'] );
+
+	if ( ! empty( $attributes['isLink'] ) ) {
+		$formatted_date = sprintf( '<a href="%1s">%2s</a>', $link, $formatted_date );
+	}
+
 	return sprintf(
 		'<div %1$s><time datetime="%2$s">%3$s</time></div>',
 		$wrapper_attributes,
 		get_comment_date( 'c', $block->context['commentId'] ),
-		get_comment_date(
-			isset( $attributes['format'] ) ? $attributes['format'] : '',
-			$block->context['commentId']
-		)
+		$formatted_date
 	);
 }
 

diff --git a/test/integration/fixtures/blocks/core__post-comment-date.json b/test/integration/fixtures/blocks/core__post-comment-date.json
@@ -3,7 +3,9 @@
 		"clientId": "_clientId_0",
 		"name": "core/post-comment-date",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"isLink": false
+		},
 		"innerBlocks": [],
 		"originalContent": ""
 	}