Comments block: Change ID to core/comments (#40506)

* Rename block id and add fallback * Update parent and ancestor fields * Update block ID in schema def * Add deprecation and bypass generated classname This is not a real fix. It's just a fast way to show where is the problem. * Add `apiVersion` to the comments block deprecation * Add inline comment to point to block deprecation * Support custom class names in deprecation * Refactor deprecation to its own file * Add fallback class of previous block name * Add legacy class name during block conversion * Update fixtures * Add test fixture for the deprecation * Fix deprecation * Add explanatory comment * Update a comment Co-authored-by: Bernie Reiter <[email protected]> Co-authored-by: Luis Herranz <[email protected]> Co-authored-by: Michal Czaplinski <[email protected]>
WordPress · Jul 7, 2022 · bbd198d · bbd198d
1 parent 62a2fa1
commit bbd198d
Show file tree

Hide file tree

Showing 20 changed files with 593 additions and 202 deletions.
diff --git 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/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
@@ -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
@@ -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" ],

diff --git 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/block-library/src/comments/deprecated.js b/packages/block-library/src/comments/deprecated.js
@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } 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: { tagName: Tag } } ) {
+		const blockProps = useBlockProps.save();
+		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'
+		);
+		const newBlockProps = {
+			...blockProps,
+			className: newClasses.join( ' ' ),
+		};
+
+		return (
+			<Tag { ...newBlockProps }>
+				<InnerBlocks.Content />
+			</Tag>
+		);
+	},
+};
+
+export default [ v1 ];
diff --git 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/index.js b/packages/block-library/src/comments/index.js
@@ -7,6 +7,7 @@ import { postComments as icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import metadata from './block.json';
+import deprecated from './deprecated';
 import edit from './edit';
 import save from './save';
 
@@ -17,4 +18,5 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	deprecated,
 };
diff --git a/packages/blocks/src/api/parser/convert-legacy-block.js b/packages/blocks/src/api/parser/convert-legacy-block.js
@@ -60,6 +60,18 @@ export function convertLegacyBlockNameAndAttributes( name, attributes ) {
 	if ( name === 'core/post-comment-date' ) {
 		name = 'core/comment-date';
 	}
+	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
+		// for the ID change to work.
+	}
 
 	return [ name, newAttributes ];
 }
diff --git 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": {

diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.html b/test/integration/fixtures/blocks/core__comments-query-loop.html
diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html b/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html
diff --git a/test/integration/fixtures/blocks/core__comments.html b/test/integration/fixtures/blocks/core__comments.html
@@ -0,0 +1,29 @@
+<!-- wp:comments {"className":"comments-post-extra"} -->
+<div class="wp-block-comments comments-post-extra"><!-- wp:comments-title /-->
+
+    <!-- wp:comment-template -->
+    <!-- wp:columns -->
+    <div class="wp-block-columns"><!-- wp:column {"width":"40px"} -->
+    <div class="wp-block-column" style="flex-basis:40px"><!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"}}} /--></div>
+    <!-- /wp:column -->
+
+    <!-- wp:column -->
+    <div class="wp-block-column"><!-- wp:comment-author-name {"fontSize":"small"} /-->
+
+    <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
+    <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date {"fontSize":"small"} /-->
+
+    <!-- wp:comment-edit-link {"fontSize":"small"} /--></div>
+    <!-- /wp:group -->
+
+    <!-- wp:comment-content /-->
+
+    <!-- wp:comment-reply-link {"fontSize":"small"} /--></div>
+    <!-- /wp:column --></div>
+    <!-- /wp:columns -->
+    <!-- /wp:comment-template -->
+
+    <!-- wp:comments-pagination /-->
+
+    <!-- wp:post-comments-form /--></div>
+    <!-- /wp:comments -->
diff --git a/...res/blocks/core__comments-query-loop.json → ...ation/fixtures/blocks/core__comments.json b/...res/blocks/core__comments-query-loop.json → ...ation/fixtures/blocks/core__comments.json
@@ -1,9 +1,10 @@
 [
 	{
-		"name": "core/comments-query-loop",
+		"name": "core/comments",
 		"isValid": true,
 		"attributes": {
-			"tagName": "div"
+			"tagName": "div",
+			"className": "comments-post-extra"
 		},
 		"innerBlocks": [
 			{
@@ -12,25 +13,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": []
 			},
@@ -80,7 +63,8 @@
 										"isValid": true,
 										"attributes": {
 											"isLink": true,
-											"linkTarget": "_self"
+											"linkTarget": "_self",
+											"fontSize": "small"
 										},
 										"innerBlocks": []
 									},
@@ -106,15 +90,17 @@
 												"name": "core/comment-date",
 												"isValid": true,
 												"attributes": {
-													"isLink": true
+													"isLink": true,
+													"fontSize": "small"
 												},
 												"innerBlocks": []
 											},
 											{
 												"name": "core/comment-edit-link",
 												"isValid": true,
 												"attributes": {
-													"linkTarget": "_self"
+													"linkTarget": "_self",
+													"fontSize": "small"
 												},
 												"innerBlocks": []
 											}
@@ -129,7 +115,9 @@
 									{
 										"name": "core/comment-reply-link",
 										"isValid": true,
-										"attributes": {},
+										"attributes": {
+											"fontSize": "small"
+										},
 										"innerBlocks": []
 									}
 								]
@@ -144,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": []
 			}
 		]
 	}