From 2b357d32fca6947e3c1ee8a8bbeab5dd6e161cff Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Thu, 21 Apr 2022 15:22:33 +0200 Subject: [PATCH 01/15] Rename block id and add fallback --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/comments/block.json | 2 +- .../src/api/parser/convert-legacy-block.js | 3 + .../blocks/core__comments-query-loop.html | 33 ------ .../fixtures/blocks/core__comments.html | 33 ++++++ ...ts-query-loop.json => core__comments.json} | 47 ++++---- ...parsed.json => core__comments.parsed.json} | 107 +++++++++--------- ...ed.html => core__comments.serialized.html} | 10 +- 8 files changed, 122 insertions(+), 115 deletions(-) delete mode 100644 test/integration/fixtures/blocks/core__comments-query-loop.html create mode 100644 test/integration/fixtures/blocks/core__comments.html rename test/integration/fixtures/blocks/{core__comments-query-loop.json => core__comments.json} (83%) rename test/integration/fixtures/blocks/{core__comments-query-loop.parsed.json => core__comments.parsed.json} (62%) rename test/integration/fixtures/blocks/{core__comments-query-loop.serialized.html => core__comments.serialized.html} (66%) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 6b8fef7d61a94..eb132d03c1d18 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -174,7 +174,7 @@ Contains the block elements used to display a comment, like the title, date, aut An advanced block that allows displaying post comments using different visual configurations. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments)) -- **Name:** core/comments-query-loop +- **Name:** core/comments - **Category:** theme - **Supports:** align (full, wide), color (background, gradients, link, text), ~~html~~ - **Attributes:** tagName diff --git a/packages/block-library/src/comments/block.json b/packages/block-library/src/comments/block.json index fbdfdd253b278..582de73d8d0e9 100644 --- a/packages/block-library/src/comments/block.json +++ b/packages/block-library/src/comments/block.json @@ -1,7 +1,7 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 2, - "name": "core/comments-query-loop", + "name": "core/comments", "title": "Comments", "category": "theme", "description": "An advanced block that allows displaying post comments using different visual configurations.", diff --git a/packages/blocks/src/api/parser/convert-legacy-block.js b/packages/blocks/src/api/parser/convert-legacy-block.js index 657daf17ad87d..53c06f83013c6 100644 --- a/packages/blocks/src/api/parser/convert-legacy-block.js +++ b/packages/blocks/src/api/parser/convert-legacy-block.js @@ -60,6 +60,9 @@ export function convertLegacyBlockNameAndAttributes( name, attributes ) { if ( name === 'core/post-comment-date' ) { name = 'core/comment-date'; } + if ( name === 'core/comments-query-loop' ) { + name = 'core/comments'; + } return [ name, newAttributes ]; } diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.html b/test/integration/fixtures/blocks/core__comments-query-loop.html deleted file mode 100644 index 156166ee90f9a..0000000000000 --- a/test/integration/fixtures/blocks/core__comments-query-loop.html +++ /dev/null @@ -1,33 +0,0 @@ - -
- - - -
-
- - - -
- - -
- -
- - - - -
-
- - - - - - - - - -
- \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__comments.html b/test/integration/fixtures/blocks/core__comments.html new file mode 100644 index 0000000000000..ca533b162a4b2 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments.html @@ -0,0 +1,33 @@ + +
+ + + +
+
+ + + +
+ + +
+ +
+ + + + +
+
+ + + + + + + + + +
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.json b/test/integration/fixtures/blocks/core__comments.json similarity index 83% rename from test/integration/fixtures/blocks/core__comments-query-loop.json rename to test/integration/fixtures/blocks/core__comments.json index 94222499bd912..85348b9622ccb 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.json +++ b/test/integration/fixtures/blocks/core__comments.json @@ -1,6 +1,6 @@ [ { - "name": "core/comments-query-loop", + "name": "core/comments", "isValid": true, "attributes": { "tagName": "div" @@ -12,25 +12,7 @@ "attributes": { "showPostTitle": true, "showCommentsCount": true, - "level": 4, - "borderColor": "vivid-red", - "backgroundColor": "primary", - "textColor": "background", - "fontSize": "large", - "style": { - "spacing": { - "padding": { - "top": "6px", - "right": "6px", - "bottom": "6px", - "left": "6px" - } - }, - "border": { - "width": "3px", - "radius": "100px" - } - } + "level": 2 }, "innerBlocks": [] }, @@ -123,13 +105,34 @@ { "name": "core/comment-content", "isValid": true, - "attributes": {}, + "attributes": { + "textColor": "foreground", + "style": { + "elements": { + "link": { + "color": { + "text": "var:preset|color|vivid-cyan-blue" + } + } + } + } + }, "innerBlocks": [] }, { "name": "core/comment-reply-link", "isValid": true, - "attributes": {}, + "attributes": { + "style": { + "elements": { + "link": { + "color": { + "text": "var:preset|color|vivid-cyan-blue" + } + } + } + } + }, "innerBlocks": [] } ] diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json b/test/integration/fixtures/blocks/core__comments.parsed.json similarity index 62% rename from test/integration/fixtures/blocks/core__comments-query-loop.parsed.json rename to test/integration/fixtures/blocks/core__comments.parsed.json index 529336e78a098..486262b9dbe60 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json +++ b/test/integration/fixtures/blocks/core__comments.parsed.json @@ -1,31 +1,11 @@ [ { - "blockName": "core/comments-query-loop", + "blockName": "core/comments", "attrs": {}, "innerBlocks": [ { "blockName": "core/comments-title", - "attrs": { - "level": 4, - "style": { - "spacing": { - "padding": { - "top": "6px", - "right": "6px", - "bottom": "6px", - "left": "6px" - } - }, - "border": { - "width": "3px", - "radius": "100px" - } - }, - "borderColor": "vivid-red", - "backgroundColor": "primary", - "textColor": "background", - "fontSize": "large" - }, + "attrs": {}, "innerBlocks": [], "innerHTML": "", "innerContent": [] @@ -59,11 +39,11 @@ "innerContent": [] } ], - "innerHTML": "\n\t
\n\t", + "innerHTML": "\n
\n ", "innerContent": [ - "\n\t
", + "\n
", null, - "
\n\t" + "
\n " ] }, { @@ -108,56 +88,77 @@ "innerContent": [] } ], - "innerHTML": "\n\t
\n\t\n\t
\n\t", + "innerHTML": "\n
\n \n
\n ", "innerContent": [ - "\n\t
", + "\n
", null, - "\n\t\n\t", + "\n \n ", null, - "
\n\t" + "
\n " ] }, { "blockName": "core/comment-content", - "attrs": {}, + "attrs": { + "style": { + "elements": { + "link": { + "color": { + "text": "var:preset|color|vivid-cyan-blue" + } + } + } + }, + "textColor": "foreground" + }, "innerBlocks": [], "innerHTML": "", "innerContent": [] }, { "blockName": "core/comment-reply-link", - "attrs": {}, + "attrs": { + "style": { + "elements": { + "link": { + "color": { + "text": "var:preset|color|vivid-cyan-blue" + } + } + } + } + }, "innerBlocks": [], "innerHTML": "", "innerContent": [] } ], - "innerHTML": "\n\t
\n\t\n\t\n\t\n\t\n\t\n\t
\n\t", + "innerHTML": "\n
\n \n \n \n \n \n
\n ", "innerContent": [ - "\n\t
", + "\n
", null, - "\n\t\n\t", + "\n \n ", null, - "\n\t\n\t", + "\n \n ", null, - "\n\t\n\t", + "\n \n ", null, - "
\n\t" + "
\n " ] } ], - "innerHTML": "\n\t
\n\t\n\t
\n\t", + "innerHTML": "\n
\n \n
\n ", "innerContent": [ - "\n\t
", + "\n
", null, - "\n\t\n\t", + "\n \n ", null, - "
\n\t" + "
\n " ] } ], - "innerHTML": "\n\t\n\t", - "innerContent": [ "\n\t", null, "\n\t" ] + "innerHTML": "\n \n ", + "innerContent": [ "\n ", null, "\n " ] }, { "blockName": "core/comments-pagination", @@ -185,27 +186,27 @@ "innerContent": [] } ], - "innerHTML": "\n\t\n\t\n\t\n\t\n\t\n\t", + "innerHTML": "\n \n \n \n \n \n ", "innerContent": [ - "\n\t", + "\n ", null, - "\n\t\n\t", + "\n \n ", null, - "\n\t\n\t", + "\n \n ", null, - "\n\t" + "\n " ] } ], - "innerHTML": "\n
\n\n\t\n\t\n\t
\n\t", + "innerHTML": "\n
\n\n \n \n
\n ", "innerContent": [ - "\n
", + "\n
", null, - "\n\n\t", + "\n\n ", null, - "\n\t\n\t", + "\n \n ", null, - "
\n\t" + "
\n " ] } ] diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html b/test/integration/fixtures/blocks/core__comments.serialized.html similarity index 66% rename from test/integration/fixtures/blocks/core__comments-query-loop.serialized.html rename to test/integration/fixtures/blocks/core__comments.serialized.html index dd0aa7f091628..1230aa24234bd 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html +++ b/test/integration/fixtures/blocks/core__comments.serialized.html @@ -1,5 +1,5 @@ - -
+ +
@@ -16,9 +16,9 @@
- + -
+ @@ -30,4 +30,4 @@ - + From 90fb53392eeb662d8d15e92eb391bf9698905a64 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 26 Apr 2022 16:40:00 +0200 Subject: [PATCH 02/15] Update parent and ancestor fields --- packages/block-library/src/comment-template/block.json | 2 +- packages/block-library/src/comments-pagination/block.json | 2 +- packages/block-library/src/comments-title/block.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/comment-template/block.json b/packages/block-library/src/comment-template/block.json index 03b2990968fee..7596ed312ee14 100644 --- a/packages/block-library/src/comment-template/block.json +++ b/packages/block-library/src/comment-template/block.json @@ -4,7 +4,7 @@ "name": "core/comment-template", "title": "Comment Template", "category": "design", - "parent": [ "core/comments-query-loop" ], + "parent": [ "core/comments" ], "description": "Contains the block elements used to display a comment, like the title, date, author, avatar and more.", "textdomain": "default", "usesContext": [ "postId" ], diff --git a/packages/block-library/src/comments-pagination/block.json b/packages/block-library/src/comments-pagination/block.json index dcaa428856d0e..79c8a3acdf721 100644 --- a/packages/block-library/src/comments-pagination/block.json +++ b/packages/block-library/src/comments-pagination/block.json @@ -4,7 +4,7 @@ "name": "core/comments-pagination", "title": "Comments Pagination", "category": "theme", - "parent": [ "core/comments-query-loop" ], + "parent": [ "core/comments" ], "description": "Displays a paginated navigation to next/previous set of comments, when applicable.", "textdomain": "default", "attributes": { diff --git a/packages/block-library/src/comments-title/block.json b/packages/block-library/src/comments-title/block.json index cc98c4902e513..a927f7d98c652 100644 --- a/packages/block-library/src/comments-title/block.json +++ b/packages/block-library/src/comments-title/block.json @@ -4,7 +4,7 @@ "name": "core/comments-title", "title": "Comments Title", "category": "theme", - "ancestor": [ "core/comments-query-loop" ], + "ancestor": [ "core/comments" ], "description": "Displays a title with the number of comments", "textdomain": "default", "usesContext": [ "postId", "postType" ], From 51586dde2b2e92ea6596d8c2bc898e4379c33647 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 26 Apr 2022 17:34:21 +0200 Subject: [PATCH 03/15] Update block ID in schema def --- schemas/json/theme.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 1498ef9ac38a4..c699cd78424b9 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -606,7 +606,7 @@ "core/comment-template": { "$ref": "#/definitions/settingsPropertiesComplete" }, - "core/comments-query-loop": { + "core/comments": { "$ref": "#/definitions/settingsPropertiesComplete" }, "core/cover": { @@ -1187,7 +1187,7 @@ "core/comment-template": { "$ref": "#/definitions/stylesPropertiesAndElementsComplete" }, - "core/comments-query-loop": { + "core/comments": { "$ref": "#/definitions/stylesPropertiesAndElementsComplete" }, "core/cover": { From bfcff0e6cb1690998200f8c45184de3926f76284 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Wed, 27 Apr 2022 19:44:14 +0200 Subject: [PATCH 04/15] Add deprecation and bypass generated classname This is not a real fix. It's just a fast way to show where is the problem. --- .../src/hooks/generated-class-name.js | 1 + packages/block-library/src/comments/index.js | 31 +++++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/packages/block-editor/src/hooks/generated-class-name.js b/packages/block-editor/src/hooks/generated-class-name.js index b5ca340cc3b4c..79720e85ef53b 100644 --- a/packages/block-editor/src/hooks/generated-class-name.js +++ b/packages/block-editor/src/hooks/generated-class-name.js @@ -20,6 +20,7 @@ import { hasBlockSupport, getBlockDefaultClassName } from '@wordpress/blocks'; * @return {Object} Filtered props applied to save element. */ export function addGeneratedClassName( extraProps, blockType ) { + if ( blockType.name === 'core/comments' ) return extraProps; // Adding the generated className. if ( hasBlockSupport( blockType, 'className', true ) ) { if ( typeof extraProps.className === 'string' ) { diff --git a/packages/block-library/src/comments/index.js b/packages/block-library/src/comments/index.js index 1743783286c74..feaff46edb925 100644 --- a/packages/block-library/src/comments/index.js +++ b/packages/block-library/src/comments/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { postComments as icon } from '@wordpress/icons'; +import { InnerBlocks } from '@wordpress/block-editor'; /** * Internal dependencies @@ -17,4 +18,34 @@ export const settings = { icon, edit, save, + deprecated: [ + { + attributes: { + tagName: { + type: 'string', + default: 'div', + }, + }, + supports: { + align: [ 'wide', 'full' ], + html: false, + color: { + gradients: true, + link: true, + __experimentalDefaultControls: { + background: true, + text: true, + link: true, + }, + }, + }, + save( { attributes: { tagName: Tag } } ) { + return ( + + + + ); + }, + }, + ], }; From 94139f7b7889b09d8d9ec2a679011cf97b6bc448 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Wed, 27 Apr 2022 18:48:46 -0500 Subject: [PATCH 05/15] Add `apiVersion` to the comments block deprecation --- packages/block-editor/src/hooks/generated-class-name.js | 1 - packages/block-library/src/comments/index.js | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/generated-class-name.js b/packages/block-editor/src/hooks/generated-class-name.js index 79720e85ef53b..b5ca340cc3b4c 100644 --- a/packages/block-editor/src/hooks/generated-class-name.js +++ b/packages/block-editor/src/hooks/generated-class-name.js @@ -20,7 +20,6 @@ import { hasBlockSupport, getBlockDefaultClassName } from '@wordpress/blocks'; * @return {Object} Filtered props applied to save element. */ export function addGeneratedClassName( extraProps, blockType ) { - if ( blockType.name === 'core/comments' ) return extraProps; // Adding the generated className. if ( hasBlockSupport( blockType, 'className', true ) ) { if ( typeof extraProps.className === 'string' ) { diff --git a/packages/block-library/src/comments/index.js b/packages/block-library/src/comments/index.js index feaff46edb925..19b97cc8ee91e 100644 --- a/packages/block-library/src/comments/index.js +++ b/packages/block-library/src/comments/index.js @@ -26,6 +26,7 @@ export const settings = { default: 'div', }, }, + apiVersion: 2, supports: { align: [ 'wide', 'full' ], html: false, From 4369821c98daefa82415408cf9494c9327c28c43 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Fri, 29 Apr 2022 14:05:07 +0200 Subject: [PATCH 06/15] Add inline comment to point to block deprecation --- packages/blocks/src/api/parser/convert-legacy-block.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/blocks/src/api/parser/convert-legacy-block.js b/packages/blocks/src/api/parser/convert-legacy-block.js index 53c06f83013c6..8ff1cba614bed 100644 --- a/packages/blocks/src/api/parser/convert-legacy-block.js +++ b/packages/blocks/src/api/parser/convert-legacy-block.js @@ -62,6 +62,8 @@ export function convertLegacyBlockNameAndAttributes( name, attributes ) { } if ( name === 'core/comments-query-loop' ) { name = 'core/comments'; + // Note that we also had to add a deprecation to the block in order to remove the old, + // generated `wp-block-comments-query-loop` class name. } return [ name, newAttributes ]; From 2d575776920a08bb41b979a0eca9cbaef4dbaff7 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Fri, 29 Apr 2022 14:38:36 +0200 Subject: [PATCH 07/15] Support custom class names in deprecation --- packages/block-library/src/comments/index.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/comments/index.js b/packages/block-library/src/comments/index.js index 19b97cc8ee91e..7fb2781618353 100644 --- a/packages/block-library/src/comments/index.js +++ b/packages/block-library/src/comments/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -40,9 +45,14 @@ export const settings = { }, }, }, - save( { attributes: { tagName: Tag } } ) { + save( { attributes: { className, tagName: Tag } } ) { return ( - + ); From ed8091ad58e7fbb6c5a949208cdfaec0b80dfd33 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Fri, 29 Apr 2022 14:43:46 +0200 Subject: [PATCH 08/15] Refactor deprecation to its own file --- .../block-library/src/comments/deprecated.js | 48 +++++++++++++++++++ packages/block-library/src/comments/index.js | 44 +---------------- 2 files changed, 50 insertions(+), 42 deletions(-) create mode 100644 packages/block-library/src/comments/deprecated.js diff --git a/packages/block-library/src/comments/deprecated.js b/packages/block-library/src/comments/deprecated.js new file mode 100644 index 0000000000000..c916ee5c52e25 --- /dev/null +++ b/packages/block-library/src/comments/deprecated.js @@ -0,0 +1,48 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +// v1: Deprecate the initial version of the block which was called "Comments +// Query Loop" instead of "Comments". +const v1 = { + attributes: { + tagName: { + type: 'string', + default: 'div', + }, + }, + apiVersion: 2, + supports: { + align: [ 'wide', 'full' ], + html: false, + color: { + gradients: true, + link: true, + __experimentalDefaultControls: { + background: true, + text: true, + link: true, + }, + }, + }, + save( { attributes: { className, tagName: Tag } } ) { + return ( + + + + ); + }, +}; + +export default [ v1 ]; diff --git a/packages/block-library/src/comments/index.js b/packages/block-library/src/comments/index.js index 7fb2781618353..9cecb54f5a64d 100644 --- a/packages/block-library/src/comments/index.js +++ b/packages/block-library/src/comments/index.js @@ -1,18 +1,13 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ import { postComments as icon } from '@wordpress/icons'; -import { InnerBlocks } from '@wordpress/block-editor'; /** * Internal dependencies */ import metadata from './block.json'; +import deprecated from './deprecated'; import edit from './edit'; import save from './save'; @@ -23,40 +18,5 @@ export const settings = { icon, edit, save, - deprecated: [ - { - attributes: { - tagName: { - type: 'string', - default: 'div', - }, - }, - apiVersion: 2, - supports: { - align: [ 'wide', 'full' ], - html: false, - color: { - gradients: true, - link: true, - __experimentalDefaultControls: { - background: true, - text: true, - link: true, - }, - }, - }, - save( { attributes: { className, tagName: Tag } } ) { - return ( - - - - ); - }, - }, - ], + deprecated, }; From 904074f487394b5a27a55f5ee5b03eba129b3429 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Thu, 23 Jun 2022 17:51:36 +0200 Subject: [PATCH 09/15] Add fallback class of previous block name --- packages/block-library/src/comments/edit.js | 5 +- packages/block-library/src/comments/save.js | 7 +- .../fixtures/blocks/core__comments.html | 22 ++--- .../fixtures/blocks/core__comments.json | 62 ++++--------- .../blocks/core__comments.parsed.json | 88 ++++++------------- .../blocks/core__comments.serialized.html | 22 ++--- 6 files changed, 73 insertions(+), 133 deletions(-) diff --git a/packages/block-library/src/comments/edit.js b/packages/block-library/src/comments/edit.js index 7b4533e228eed..2191c1a84fb99 100644 --- a/packages/block-library/src/comments/edit.js +++ b/packages/block-library/src/comments/edit.js @@ -91,7 +91,10 @@ const TEMPLATE = [ export default function CommentsEdit( { attributes, setAttributes } ) { const { tagName: TagName } = attributes; - const blockProps = useBlockProps(); + const blockProps = useBlockProps( { + // We add the previous block name for backward compatibility. + className: 'wp-block-comments-query-loop', + } ); const innerBlocksProps = useInnerBlocksProps( blockProps, { template: TEMPLATE, } ); diff --git a/packages/block-library/src/comments/save.js b/packages/block-library/src/comments/save.js index 47c774fc4b9bb..52a76f6a80845 100644 --- a/packages/block-library/src/comments/save.js +++ b/packages/block-library/src/comments/save.js @@ -5,7 +5,12 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; export default function CommentsSave( { attributes: { tagName: Tag } } ) { return ( - + ); diff --git a/test/integration/fixtures/blocks/core__comments.html b/test/integration/fixtures/blocks/core__comments.html index ca533b162a4b2..7ac9273f45d93 100644 --- a/test/integration/fixtures/blocks/core__comments.html +++ b/test/integration/fixtures/blocks/core__comments.html @@ -1,5 +1,5 @@ - -
+ +
@@ -8,26 +8,22 @@ -
+
-
+
-
+
- + -
+
- - + - - - -
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__comments.json b/test/integration/fixtures/blocks/core__comments.json index 85348b9622ccb..6f1d1c5c9e843 100644 --- a/test/integration/fixtures/blocks/core__comments.json +++ b/test/integration/fixtures/blocks/core__comments.json @@ -3,7 +3,8 @@ "name": "core/comments", "isValid": true, "attributes": { - "tagName": "div" + "tagName": "div", + "className": "comments-post-extra" }, "innerBlocks": [ { @@ -62,7 +63,8 @@ "isValid": true, "attributes": { "isLink": true, - "linkTarget": "_self" + "linkTarget": "_self", + "fontSize": "small" }, "innerBlocks": [] }, @@ -88,7 +90,8 @@ "name": "core/comment-date", "isValid": true, "attributes": { - "isLink": true + "isLink": true, + "fontSize": "small" }, "innerBlocks": [] }, @@ -96,7 +99,8 @@ "name": "core/comment-edit-link", "isValid": true, "attributes": { - "linkTarget": "_self" + "linkTarget": "_self", + "fontSize": "small" }, "innerBlocks": [] } @@ -105,33 +109,14 @@ { "name": "core/comment-content", "isValid": true, - "attributes": { - "textColor": "foreground", - "style": { - "elements": { - "link": { - "color": { - "text": "var:preset|color|vivid-cyan-blue" - } - } - } - } - }, + "attributes": {}, "innerBlocks": [] }, { "name": "core/comment-reply-link", "isValid": true, "attributes": { - "style": { - "elements": { - "link": { - "color": { - "text": "var:preset|color|vivid-cyan-blue" - } - } - } - } + "fontSize": "small" }, "innerBlocks": [] } @@ -147,26 +132,13 @@ "attributes": { "paginationArrow": "none" }, - "innerBlocks": [ - { - "name": "core/comments-pagination-previous", - "isValid": true, - "attributes": {}, - "innerBlocks": [] - }, - { - "name": "core/comments-pagination-numbers", - "isValid": true, - "attributes": {}, - "innerBlocks": [] - }, - { - "name": "core/comments-pagination-next", - "isValid": true, - "attributes": {}, - "innerBlocks": [] - } - ] + "innerBlocks": [] + }, + { + "name": "core/post-comments-form", + "isValid": true, + "attributes": {}, + "innerBlocks": [] } ] } diff --git a/test/integration/fixtures/blocks/core__comments.parsed.json b/test/integration/fixtures/blocks/core__comments.parsed.json index 486262b9dbe60..52fd0486e65aa 100644 --- a/test/integration/fixtures/blocks/core__comments.parsed.json +++ b/test/integration/fixtures/blocks/core__comments.parsed.json @@ -1,7 +1,9 @@ [ { "blockName": "core/comments", - "attrs": {}, + "attrs": { + "className": "comments-post-extra" + }, "innerBlocks": [ { "blockName": "core/comments-title", @@ -52,7 +54,9 @@ "innerBlocks": [ { "blockName": "core/comment-author-name", - "attrs": {}, + "attrs": { + "fontSize": "small" + }, "innerBlocks": [], "innerHTML": "", "innerContent": [] @@ -75,14 +79,18 @@ "innerBlocks": [ { "blockName": "core/comment-date", - "attrs": {}, + "attrs": { + "fontSize": "small" + }, "innerBlocks": [], "innerHTML": "", "innerContent": [] }, { "blockName": "core/comment-edit-link", - "attrs": {}, + "attrs": { + "fontSize": "small" + }, "innerBlocks": [], "innerHTML": "", "innerContent": [] @@ -99,18 +107,7 @@ }, { "blockName": "core/comment-content", - "attrs": { - "style": { - "elements": { - "link": { - "color": { - "text": "var:preset|color|vivid-cyan-blue" - } - } - } - }, - "textColor": "foreground" - }, + "attrs": {}, "innerBlocks": [], "innerHTML": "", "innerContent": [] @@ -118,15 +115,7 @@ { "blockName": "core/comment-reply-link", "attrs": { - "style": { - "elements": { - "link": { - "color": { - "text": "var:preset|color|vivid-cyan-blue" - } - } - } - } + "fontSize": "small" }, "innerBlocks": [], "innerHTML": "", @@ -163,49 +152,28 @@ { "blockName": "core/comments-pagination", "attrs": {}, - "innerBlocks": [ - { - "blockName": "core/comments-pagination-previous", - "attrs": {}, - "innerBlocks": [], - "innerHTML": "", - "innerContent": [] - }, - { - "blockName": "core/comments-pagination-numbers", - "attrs": {}, - "innerBlocks": [], - "innerHTML": "", - "innerContent": [] - }, - { - "blockName": "core/comments-pagination-next", - "attrs": {}, - "innerBlocks": [], - "innerHTML": "", - "innerContent": [] - } - ], - "innerHTML": "\n \n \n \n \n \n ", - "innerContent": [ - "\n ", - null, - "\n \n ", - null, - "\n \n ", - null, - "\n " - ] + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/post-comments-form", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] } ], - "innerHTML": "\n
\n\n \n \n
\n ", + "innerHTML": "\n
\n\n \n \n \n \n
\n ", "innerContent": [ - "\n
", + "\n
", null, "\n\n ", null, "\n \n ", null, + "\n \n ", + null, "
\n " ] } diff --git a/test/integration/fixtures/blocks/core__comments.serialized.html b/test/integration/fixtures/blocks/core__comments.serialized.html index 1230aa24234bd..97a3d7ce73dbf 100644 --- a/test/integration/fixtures/blocks/core__comments.serialized.html +++ b/test/integration/fixtures/blocks/core__comments.serialized.html @@ -1,5 +1,5 @@ - -
+ +
@@ -8,26 +8,22 @@ -
+
-
+
-
+
- + -
+
- - + - - - -
+
From 5b968ca165bd19035dd934d035c629e09220e6ee Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 4 Jul 2022 20:53:43 +0200 Subject: [PATCH 10/15] Add legacy class name during block conversion --- packages/block-library/src/comments/save.js | 7 +------ packages/blocks/src/api/parser/convert-legacy-block.js | 7 +++++++ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/comments/save.js b/packages/block-library/src/comments/save.js index 52a76f6a80845..47c774fc4b9bb 100644 --- a/packages/block-library/src/comments/save.js +++ b/packages/block-library/src/comments/save.js @@ -5,12 +5,7 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; export default function CommentsSave( { attributes: { tagName: Tag } } ) { return ( - + ); diff --git a/packages/blocks/src/api/parser/convert-legacy-block.js b/packages/blocks/src/api/parser/convert-legacy-block.js index 8ff1cba614bed..a444e05785958 100644 --- a/packages/blocks/src/api/parser/convert-legacy-block.js +++ b/packages/blocks/src/api/parser/convert-legacy-block.js @@ -62,6 +62,13 @@ export function convertLegacyBlockNameAndAttributes( name, attributes ) { } if ( name === 'core/comments-query-loop' ) { name = 'core/comments'; + const { className = '' } = newAttributes; + if ( ! className.includes( 'wp-block-comments-query-loop' ) ) { + newAttributes.className = [ + 'wp-block-comments-query-loop', + className, + ].join( ' ' ); + } // Note that we also had to add a deprecation to the block in order to remove the old, // generated `wp-block-comments-query-loop` class name. } From 3720d397bc0ba5387d9d7505c5174f9b64388b16 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 5 Jul 2022 13:41:55 +0200 Subject: [PATCH 11/15] Update fixtures --- test/integration/fixtures/blocks/core__comments.html | 2 +- test/integration/fixtures/blocks/core__comments.parsed.json | 4 ++-- .../fixtures/blocks/core__comments.serialized.html | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/integration/fixtures/blocks/core__comments.html b/test/integration/fixtures/blocks/core__comments.html index 7ac9273f45d93..8dab93c5d812a 100644 --- a/test/integration/fixtures/blocks/core__comments.html +++ b/test/integration/fixtures/blocks/core__comments.html @@ -1,5 +1,5 @@ -
+
diff --git a/test/integration/fixtures/blocks/core__comments.parsed.json b/test/integration/fixtures/blocks/core__comments.parsed.json index 52fd0486e65aa..a1315efd66ce6 100644 --- a/test/integration/fixtures/blocks/core__comments.parsed.json +++ b/test/integration/fixtures/blocks/core__comments.parsed.json @@ -164,9 +164,9 @@ "innerContent": [] } ], - "innerHTML": "\n
\n\n \n \n \n \n
\n ", + "innerHTML": "\n
\n\n \n \n \n \n
\n ", "innerContent": [ - "\n
", + "\n
", null, "\n\n ", null, diff --git a/test/integration/fixtures/blocks/core__comments.serialized.html b/test/integration/fixtures/blocks/core__comments.serialized.html index 97a3d7ce73dbf..6a4e6c09df37d 100644 --- a/test/integration/fixtures/blocks/core__comments.serialized.html +++ b/test/integration/fixtures/blocks/core__comments.serialized.html @@ -1,5 +1,5 @@ -
+
From 786f817cbed9a9d2e1efebb098403aeb61e9b8e4 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 5 Jul 2022 13:59:23 +0200 Subject: [PATCH 12/15] Add test fixture for the deprecation --- .../blocks/core__comments__deprecated-1.html | 29 +++ .../blocks/core__comments__deprecated-1.json | 146 ++++++++++++++ .../core__comments__deprecated-1.parsed.json | 181 ++++++++++++++++++ ...re__comments__deprecated-1.serialized.html | 29 +++ 4 files changed, 385 insertions(+) create mode 100644 test/integration/fixtures/blocks/core__comments__deprecated-1.html create mode 100644 test/integration/fixtures/blocks/core__comments__deprecated-1.json create mode 100644 test/integration/fixtures/blocks/core__comments__deprecated-1.parsed.json create mode 100644 test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html diff --git a/test/integration/fixtures/blocks/core__comments__deprecated-1.html b/test/integration/fixtures/blocks/core__comments__deprecated-1.html new file mode 100644 index 0000000000000..2af6a10a488f3 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments__deprecated-1.html @@ -0,0 +1,29 @@ + +
+ + + +
+
+ + + +
+ + +
+ +
+ + + + +
+
+ + + + + +
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__comments__deprecated-1.json b/test/integration/fixtures/blocks/core__comments__deprecated-1.json new file mode 100644 index 0000000000000..c10de2a420802 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments__deprecated-1.json @@ -0,0 +1,146 @@ +[ + { + "name": "core/comments", + "isValid": true, + "attributes": { + "tagName": "div", + "className": "comments-post-extra has-luminous-vivid-orange-color has-text-color", + "textColor": "luminous-vivid-orange" + }, + "innerBlocks": [ + { + "name": "core/comments-title", + "isValid": true, + "attributes": { + "showPostTitle": true, + "showCommentsCount": true, + "level": 2 + }, + "innerBlocks": [] + }, + { + "name": "core/comment-template", + "isValid": true, + "attributes": {}, + "innerBlocks": [ + { + "name": "core/columns", + "isValid": true, + "attributes": { + "isStackedOnMobile": true + }, + "innerBlocks": [ + { + "name": "core/column", + "isValid": true, + "attributes": { + "width": "40px" + }, + "innerBlocks": [ + { + "name": "core/avatar", + "isValid": true, + "attributes": { + "size": 40, + "isLink": false, + "linkTarget": "_self", + "style": { + "border": { + "radius": "20px" + } + } + }, + "innerBlocks": [] + } + ] + }, + { + "name": "core/column", + "isValid": true, + "attributes": {}, + "innerBlocks": [ + { + "name": "core/comment-author-name", + "isValid": true, + "attributes": { + "isLink": true, + "linkTarget": "_self", + "fontSize": "small" + }, + "innerBlocks": [] + }, + { + "name": "core/group", + "isValid": true, + "attributes": { + "tagName": "div", + "style": { + "spacing": { + "margin": { + "top": "0px", + "bottom": "0px" + } + } + }, + "layout": { + "type": "flex" + } + }, + "innerBlocks": [ + { + "name": "core/comment-date", + "isValid": true, + "attributes": { + "isLink": true, + "fontSize": "small" + }, + "innerBlocks": [] + }, + { + "name": "core/comment-edit-link", + "isValid": true, + "attributes": { + "linkTarget": "_self", + "fontSize": "small" + }, + "innerBlocks": [] + } + ] + }, + { + "name": "core/comment-content", + "isValid": true, + "attributes": {}, + "innerBlocks": [] + }, + { + "name": "core/comment-reply-link", + "isValid": true, + "attributes": { + "fontSize": "small" + }, + "innerBlocks": [] + } + ] + } + ] + } + ] + }, + { + "name": "core/comments-pagination", + "isValid": true, + "attributes": { + "paginationArrow": "none" + }, + "innerBlocks": [] + }, + { + "name": "core/post-comments-form", + "isValid": true, + "attributes": {}, + "innerBlocks": [] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__comments__deprecated-1.parsed.json b/test/integration/fixtures/blocks/core__comments__deprecated-1.parsed.json new file mode 100644 index 0000000000000..5748b935266a2 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments__deprecated-1.parsed.json @@ -0,0 +1,181 @@ +[ + { + "blockName": "core/comments-query-loop", + "attrs": { + "textColor": "luminous-vivid-orange", + "className": "comments-post-extra" + }, + "innerBlocks": [ + { + "blockName": "core/comments-title", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/comment-template", + "attrs": {}, + "innerBlocks": [ + { + "blockName": "core/columns", + "attrs": {}, + "innerBlocks": [ + { + "blockName": "core/column", + "attrs": { + "width": "40px" + }, + "innerBlocks": [ + { + "blockName": "core/avatar", + "attrs": { + "size": 40, + "style": { + "border": { + "radius": "20px" + } + } + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } + ], + "innerHTML": "\n
\n ", + "innerContent": [ + "\n
", + null, + "
\n " + ] + }, + { + "blockName": "core/column", + "attrs": {}, + "innerBlocks": [ + { + "blockName": "core/comment-author-name", + "attrs": { + "fontSize": "small" + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/group", + "attrs": { + "style": { + "spacing": { + "margin": { + "top": "0px", + "bottom": "0px" + } + } + }, + "layout": { + "type": "flex" + } + }, + "innerBlocks": [ + { + "blockName": "core/comment-date", + "attrs": { + "fontSize": "small" + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/comment-edit-link", + "attrs": { + "fontSize": "small" + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } + ], + "innerHTML": "\n
\n \n
\n ", + "innerContent": [ + "\n
", + null, + "\n \n ", + null, + "
\n " + ] + }, + { + "blockName": "core/comment-content", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/comment-reply-link", + "attrs": { + "fontSize": "small" + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } + ], + "innerHTML": "\n
\n \n \n \n \n \n
\n ", + "innerContent": [ + "\n
", + null, + "\n \n ", + null, + "\n \n ", + null, + "\n \n ", + null, + "
\n " + ] + } + ], + "innerHTML": "\n
\n \n
\n ", + "innerContent": [ + "\n
", + null, + "\n \n ", + null, + "
\n " + ] + } + ], + "innerHTML": "\n \n ", + "innerContent": [ "\n ", null, "\n " ] + }, + { + "blockName": "core/comments-pagination", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/post-comments-form", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } + ], + "innerHTML": "\n
\n\n \n \n \n \n
\n ", + "innerContent": [ + "\n
", + null, + "\n\n ", + null, + "\n \n ", + null, + "\n \n ", + null, + "
\n " + ] + } +] diff --git a/test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html new file mode 100644 index 0000000000000..9ad43815d7829 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html @@ -0,0 +1,29 @@ + +
+ + + +
+
+ + + +
+ + +
+ +
+ + + + +
+
+ + + + + +
+ From ebcbe8db6cb80689d7f79e9147a62ac6fe1b6935 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 5 Jul 2022 23:22:17 +0200 Subject: [PATCH 13/15] Fix deprecation --- .../block-library/src/comments/deprecated.js | 28 ++++++++++--------- .../blocks/core__comments__deprecated-1.json | 2 +- ...re__comments__deprecated-1.serialized.html | 4 +-- 3 files changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/comments/deprecated.js b/packages/block-library/src/comments/deprecated.js index c916ee5c52e25..2a51a1ccbf63c 100644 --- a/packages/block-library/src/comments/deprecated.js +++ b/packages/block-library/src/comments/deprecated.js @@ -1,12 +1,7 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ -import { InnerBlocks } from '@wordpress/block-editor'; +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; // v1: Deprecate the initial version of the block which was called "Comments // Query Loop" instead of "Comments". @@ -31,14 +26,21 @@ const v1 = { }, }, }, - save( { attributes: { className, tagName: Tag } } ) { + save( { attributes: { tagName: Tag } } ) { + const blockProps = useBlockProps.save(); + const { className } = blockProps; + const classes = className?.split( ' ' ) || []; + + const newClasses = classes?.filter( + ( cls ) => cls !== 'wp-block-comments' + ); + const newBlockProps = { + ...blockProps, + className: newClasses.join( ' ' ), + }; + return ( - + ); diff --git a/test/integration/fixtures/blocks/core__comments__deprecated-1.json b/test/integration/fixtures/blocks/core__comments__deprecated-1.json index c10de2a420802..ff97b76a5f383 100644 --- a/test/integration/fixtures/blocks/core__comments__deprecated-1.json +++ b/test/integration/fixtures/blocks/core__comments__deprecated-1.json @@ -4,7 +4,7 @@ "isValid": true, "attributes": { "tagName": "div", - "className": "comments-post-extra has-luminous-vivid-orange-color has-text-color", + "className": "wp-block-comments-query-loop comments-post-extra", "textColor": "luminous-vivid-orange" }, "innerBlocks": [ diff --git a/test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html index 9ad43815d7829..33d5b11b2b9e0 100644 --- a/test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html +++ b/test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html @@ -1,5 +1,5 @@ - -
+ +
From 3e50efbb19717c1fa10651849d853a90f1c799d3 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 6 Jul 2022 13:23:13 +0200 Subject: [PATCH 14/15] Add explanatory comment --- packages/block-library/src/comments/deprecated.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/comments/deprecated.js b/packages/block-library/src/comments/deprecated.js index 2a51a1ccbf63c..bba13be11e754 100644 --- a/packages/block-library/src/comments/deprecated.js +++ b/packages/block-library/src/comments/deprecated.js @@ -31,6 +31,9 @@ const v1 = { const { className } = blockProps; const classes = className?.split( ' ' ) || []; + // The ID of the previous version of the block + // didn't have the `wp-block-comments` class, + // so we need to remove it here in order to mimic it. const newClasses = classes?.filter( ( cls ) => cls !== 'wp-block-comments' ); From 64f1aa9f42c67ce7a1b52648014254c4e952acb3 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 6 Jul 2022 13:25:23 +0200 Subject: [PATCH 15/15] Update a comment --- packages/blocks/src/api/parser/convert-legacy-block.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/blocks/src/api/parser/convert-legacy-block.js b/packages/blocks/src/api/parser/convert-legacy-block.js index a444e05785958..fd40b55e136ba 100644 --- a/packages/blocks/src/api/parser/convert-legacy-block.js +++ b/packages/blocks/src/api/parser/convert-legacy-block.js @@ -69,8 +69,8 @@ export function convertLegacyBlockNameAndAttributes( name, attributes ) { className, ].join( ' ' ); } - // Note that we also had to add a deprecation to the block in order to remove the old, - // generated `wp-block-comments-query-loop` class name. + // Note that we also had to add a deprecation to the block in order + // for the ID change to work. } return [ name, newAttributes ];