Comments Block: fixed issue with custom font sizes and links color (#…

…41627) Fix an issue where custom font sizes were not showing up properly on the frontend and after a reload they were disappearing from the editor. Also fix an issue where link color is not applied on site editor, both in Comment Author and Comment Date block. Co-authored-by: Carlos Bravo <[email protected]> Co-authored-by: Bernie Reiter <[email protected]>
WordPress · Jun 21, 2022 · 2c2970e · 2c2970e
1 parent 66fb75b
commit 2c2970e
Show file tree

Hide file tree

Showing 16 changed files with 51 additions and 70 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -123,7 +123,7 @@ Displays the name of the author of the comment. ([Source](https://github.com/Wor
 -	**Name:** core/comment-author-name
 -	**Category:** theme
 -	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** fontSize, isLink, linkTarget, textAlign
+-	**Attributes:** isLink, linkTarget, textAlign
 
 ## Comment Content
 
@@ -141,7 +141,7 @@ Displays the date on which the comment was posted. ([Source](https://github.com/
 -	**Name:** core/comment-date
 -	**Category:** theme
 -	**Supports:** color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** fontSize, format, isLink
+-	**Attributes:** format, isLink
 
 ## Comment Edit Link
 
@@ -150,7 +150,7 @@ Displays a link to edit the comment in the WordPress Dashboard. This link is onl
 -	**Name:** core/comment-edit-link
 -	**Category:** theme
 -	**Supports:** color (background, gradients, link, ~~text~~), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** fontSize, linkTarget, textAlign
+-	**Attributes:** linkTarget, textAlign
 
 ## Comment Reply Link
 
@@ -159,7 +159,7 @@ Displays a link to reply to a comment. ([Source](https://github.com/WordPress/gu
 -	**Name:** core/comment-reply-link
 -	**Category:** theme
 -	**Supports:** color (background, gradients, link, ~~text~~), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** fontSize, textAlign
+-	**Attributes:** textAlign
 
 ## Comment Template
 

diff --git a/packages/block-library/src/comment-author-name/block.json b/packages/block-library/src/comment-author-name/block.json
@@ -18,10 +18,6 @@
 		},
 		"textAlign": {
 			"type": "string"
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"usesContext": [ "commentId" ],

diff --git a/packages/block-library/src/comment-author-name/edit.js b/packages/block-library/src/comment-author-name/edit.js
@@ -41,7 +41,7 @@ export default function Edit( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
-	const displayName = useSelect(
+	let displayName = useSelect(
 		( select ) => {
 			const { getEntityRecord } = select( coreStore );
 
@@ -92,15 +92,7 @@ export default function Edit( {
 	);
 
 	if ( ! commentId || ! displayName ) {
-		return (
-			<>
-				{ inspectorControls }
-				{ blockControls }
-				<div { ...blockProps }>
-					{ _x( 'Comment Author', 'block title' ) }
-				</div>
-			</>
-		);
+		displayName = _x( 'Comment Author', 'block title' );
 	}
 
 	const displayAuthor = isLink ? (
@@ -111,9 +103,8 @@ export default function Edit( {
 			{ displayName }
 		</a>
 	) : (
-		{ displayName }
+		displayName
 	);
-
 	return (
 		<>
 			{ inspectorControls }

diff --git a/packages/block-library/src/comment-date/block.json b/packages/block-library/src/comment-date/block.json
@@ -14,10 +14,6 @@
 		"isLink": {
 			"type": "boolean",
 			"default": true
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"usesContext": [ "commentId" ],

diff --git a/packages/block-library/src/comment-date/edit.js b/packages/block-library/src/comment-date/edit.js
@@ -33,7 +33,7 @@ export default function Edit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps();
-	const [ date ] = useEntityProp( 'root', 'comment', 'date', commentId );
+	let [ date ] = useEntityProp( 'root', 'comment', 'date', commentId );
 	const [ siteFormat = getDateSettings().formats.date ] = useEntityProp(
 		'root',
 		'site',
@@ -60,21 +60,17 @@ export default function Edit( {
 	);
 
 	if ( ! commentId || ! date ) {
-		return (
-			<>
-				{ inspectorControls }
-				<div { ...blockProps }>
-					<time>{ _x( 'Comment Date', 'block title' ) }</time>
-				</div>
-			</>
-		);
+		date = _x( 'Comment Date', 'block title' );
 	}
 
-	let commentDate = (
-		<time dateTime={ dateI18n( 'c', date ) }>
-			{ dateI18n( format || siteFormat, date ) }
-		</time>
-	);
+	let commentDate =
+		date instanceof Date ? (
+			<time dateTime={ dateI18n( 'c', date ) }>
+				{ dateI18n( format || siteFormat, date ) }
+			</time>
+		) : (
+			<time>{ date }</time>
+		);
 
 	if ( isLink ) {
 		commentDate = (

diff --git a/packages/block-library/src/comment-date/index.php b/packages/block-library/src/comment-date/index.php
@@ -24,9 +24,6 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 	}
 
 	$classes = '';
-	if ( isset( $attributes['fontSize'] ) ) {
-		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
-	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	$formatted_date     = get_comment_date(

diff --git a/packages/block-library/src/comment-edit-link/block.json b/packages/block-library/src/comment-edit-link/block.json
@@ -15,10 +15,6 @@
 		},
 		"textAlign": {
 			"type": "string"
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/comment-reply-link/block.json b/packages/block-library/src/comment-reply-link/block.json
@@ -11,10 +11,6 @@
 	"attributes": {
 		"textAlign": {
 			"type": "string"
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/comments-query-loop/edit.js b/packages/block-library/src/comments-query-loop/edit.js
@@ -37,7 +37,12 @@ const TEMPLATE = [
 						'core/column',
 						{},
 						[
-							[ 'core/comment-author-name' ],
+							[
+								'core/comment-author-name',
+								{
+									fontSize: 'small',
+								},
+							],
 							[
 								'core/group',
 								{
@@ -52,12 +57,27 @@ const TEMPLATE = [
 									},
 								},
 								[
-									[ 'core/comment-date' ],
-									[ 'core/comment-edit-link' ],
+									[
+										'core/comment-date',
+										{
+											fontSize: 'small',
+										},
+									],
+									[
+										'core/comment-edit-link',
+										{
+											fontSize: 'small',
+										},
+									],
 								],
 							],
 							[ 'core/comment-content' ],
-							[ 'core/comment-reply-link' ],
+							[
+								'core/comment-reply-link',
+								{
+									fontSize: 'small',
+								},
+							],
 						],
 					],
 				],

diff --git a/test/integration/fixtures/blocks/core__comment-author-name.json b/test/integration/fixtures/blocks/core__comment-author-name.json
@@ -4,8 +4,7 @@
 		"isValid": true,
 		"attributes": {
 			"isLink": true,
-			"linkTarget": "_self",
-			"fontSize": "small"
+			"linkTarget": "_self"
 		},
 		"innerBlocks": []
 	}

diff --git a/test/integration/fixtures/blocks/core__comment-date.json b/test/integration/fixtures/blocks/core__comment-date.json
@@ -3,8 +3,7 @@
 		"name": "core/comment-date",
 		"isValid": true,
 		"attributes": {
-			"isLink": true,
-			"fontSize": "small"
+			"isLink": true
 		},
 		"innerBlocks": []
 	}

diff --git a/test/integration/fixtures/blocks/core__comment-edit-link.json b/test/integration/fixtures/blocks/core__comment-edit-link.json
@@ -4,9 +4,9 @@
 		"isValid": true,
 		"attributes": {
 			"linkTarget": "_blank",
-			"fontSize": "extra-large",
 			"backgroundColor": "recommended-color-03",
 			"fontFamily": "system-monospace",
+			"fontSize": "extra-large",
 			"style": {
 				"typography": {
 					"fontStyle": "normal",

diff --git a/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html b/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html
@@ -1 +1 @@
-<!-- wp:comment-edit-link {"linkTarget":"_blank","fontSize":"extra-large","backgroundColor":"recommended-color-03","fontFamily":"system-monospace","style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"2","textTransform":"uppercase","letterSpacing":"13px"},"elements":{"link":{"color":{"text":"#ed1717"}}}}} /-->
+<!-- wp:comment-edit-link {"linkTarget":"_blank","backgroundColor":"recommended-color-03","fontFamily":"system-monospace","fontSize":"extra-large","style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"2","textTransform":"uppercase","letterSpacing":"13px"},"elements":{"link":{"color":{"text":"#ed1717"}}}}} /-->
diff --git a/test/integration/fixtures/blocks/core__comment-reply-link.json b/test/integration/fixtures/blocks/core__comment-reply-link.json
@@ -4,8 +4,8 @@
 		"isValid": true,
 		"attributes": {
 			"textAlign": "right",
-			"fontSize": "extra-large",
 			"fontFamily": "cambria-georgia",
+			"fontSize": "extra-large",
 			"style": {
 				"typography": {
 					"lineHeight": "0.8",

diff --git a/test/integration/fixtures/blocks/core__comment-reply-link.serialized.html b/test/integration/fixtures/blocks/core__comment-reply-link.serialized.html
@@ -1 +1 @@
-<!-- wp:comment-reply-link {"textAlign":"right","fontSize":"extra-large","fontFamily":"cambria-georgia","style":{"typography":{"lineHeight":"0.8","textTransform":"uppercase","letterSpacing":"10px"},"elements":{"link":{"color":{"text":"var:preset|color|blue"}}},"color":{"background":"#c82222"}}} /-->
+<!-- wp: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"}}} /-->
diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.json b/test/integration/fixtures/blocks/core__comments-query-loop.json
@@ -80,8 +80,7 @@
 										"isValid": true,
 										"attributes": {
 											"isLink": true,
-											"linkTarget": "_self",
-											"fontSize": "small"
+											"linkTarget": "_self"
 										},
 										"innerBlocks": []
 									},
@@ -107,17 +106,15 @@
 												"name": "core/comment-date",
 												"isValid": true,
 												"attributes": {
-													"isLink": true,
-													"fontSize": "small"
+													"isLink": true
 												},
 												"innerBlocks": []
 											},
 											{
 												"name": "core/comment-edit-link",
 												"isValid": true,
 												"attributes": {
-													"linkTarget": "_self",
-													"fontSize": "small"
+													"linkTarget": "_self"
 												},
 												"innerBlocks": []
 											}
@@ -132,9 +129,7 @@
 									{
 										"name": "core/comment-reply-link",
 										"isValid": true,
-										"attributes": {
-											"fontSize": "small"
-										},
+										"attributes": {},
 										"innerBlocks": []
 									}
 								]
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!-- wp:comment-edit-link {"linkTarget":"_blank","fontSize":"extra-large","backgroundColor":"recommended-color-03","fontFamily":"system-monospace","style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"2","textTransform":"uppercase","letterSpacing":"13px"},"elements":{"link":{"color":{"text":"#ed1717"}}}}} /-->
		<!-- wp:comment-edit-link {"linkTarget":"_blank","backgroundColor":"recommended-color-03","fontFamily":"system-monospace","fontSize":"extra-large","style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"2","textTransform":"uppercase","letterSpacing":"13px"},"elements":{"link":{"color":{"text":"#ed1717"}}}}} /-->
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!-- wp:comment-reply-link {"textAlign":"right","fontSize":"extra-large","fontFamily":"cambria-georgia","style":{"typography":{"lineHeight":"0.8","textTransform":"uppercase","letterSpacing":"10px"},"elements":{"link":{"color":{"text":"var:preset\|color\|blue"}}},"color":{"background":"#c82222"}}} /-->
		<!-- wp: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"}}} /-->