From 2c2970e56dfae972a04308289b0d3b9655c73588 Mon Sep 17 00:00:00 2001 From: Maggie Date: Thu, 16 Jun 2022 14:12:11 +0200 Subject: [PATCH] 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 Co-authored-by: Bernie Reiter --- docs/reference-guides/core-blocks.md | 8 +++--- .../src/comment-author-name/block.json | 4 --- .../src/comment-author-name/edit.js | 15 ++-------- .../block-library/src/comment-date/block.json | 4 --- .../block-library/src/comment-date/edit.js | 24 +++++++--------- .../block-library/src/comment-date/index.php | 3 -- .../src/comment-edit-link/block.json | 4 --- .../src/comment-reply-link/block.json | 4 --- .../src/comments-query-loop/edit.js | 28 ++++++++++++++++--- .../blocks/core__comment-author-name.json | 3 +- .../fixtures/blocks/core__comment-date.json | 3 +- .../blocks/core__comment-edit-link.json | 2 +- .../core__comment-edit-link.serialized.html | 2 +- .../blocks/core__comment-reply-link.json | 2 +- .../core__comment-reply-link.serialized.html | 2 +- .../blocks/core__comments-query-loop.json | 13 +++------ 16 files changed, 51 insertions(+), 70 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 93e73f1e7190d2..2a7b2b5566aea5 100644 --- 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 index e7a07e5ddbc23b..cd97e6c3453dc4 100644 --- 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 index 618c60e478879f..e71d26ccee361d 100644 --- 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 } -
- { _x( 'Comment Author', 'block title' ) } -
- - ); + displayName = _x( 'Comment Author', 'block title' ); } const displayAuthor = isLink ? ( @@ -111,9 +103,8 @@ export default function Edit( { { displayName } ) : ( - { displayName } + displayName ); - return ( <> { inspectorControls } diff --git a/packages/block-library/src/comment-date/block.json b/packages/block-library/src/comment-date/block.json index 9af63f281ac2e3..eaf10140148dc3 100644 --- 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 index 769c7499a9ae73..ae762a41c68ab6 100644 --- 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 } -
- -
- - ); + date = _x( 'Comment Date', 'block title' ); } - let commentDate = ( - - ); + let commentDate = + date instanceof Date ? ( + + ) : ( + + ); if ( isLink ) { commentDate = ( diff --git a/packages/block-library/src/comment-date/index.php b/packages/block-library/src/comment-date/index.php index ddddd57f811621..9bff9f2f6cbbfb 100644 --- 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 index 16fe2ca1097a47..d2dd0fe226dc8f 100644 --- 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 index a217511da5a9c1..ea61ca3553f9c1 100644 --- 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 index fa7f048a285f09..574664009e1311 100644 --- 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 index 2d18af64e46af5..fecb9a1e3df45f 100644 --- 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 index bc5abfbda14d3b..2bcfe4a35111a9 100644 --- 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 index 5254558c3d2d49..1584c46ac563bb 100644 --- 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 index 820db57453cadb..8492ea9b93dab1 100644 --- a/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html +++ b/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__comment-reply-link.json b/test/integration/fixtures/blocks/core__comment-reply-link.json index 0a6a45d058c810..5e9bc4df6f4230 100644 --- 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 index 433f13508073e8..5f90cd2be65cb9 100644 --- a/test/integration/fixtures/blocks/core__comment-reply-link.serialized.html +++ b/test/integration/fixtures/blocks/core__comment-reply-link.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.json b/test/integration/fixtures/blocks/core__comments-query-loop.json index d796d78c97ffd9..94222499bd912d 100644 --- 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,8 +106,7 @@ "name": "core/comment-date", "isValid": true, "attributes": { - "isLink": true, - "fontSize": "small" + "isLink": true }, "innerBlocks": [] }, @@ -116,8 +114,7 @@ "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": [] } ]