Rename block id and add fallback

WordPress · Apr 26, 2022 · cd004c4 · cd004c4
1 parent 3519426
commit cd004c4
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 115 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/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
@@ -66,6 +66,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
diff --git a/test/integration/fixtures/blocks/core__comments.html b/test/integration/fixtures/blocks/core__comments.html
@@ -0,0 +1,33 @@
+<!-- wp:comments -->
+<div class="wp-block-comments"><!-- 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 /-->
+
+    <!-- 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 /-->
+
+    <!-- wp:comment-edit-link /--></div>
+    <!-- /wp:group -->
+
+    <!-- wp:comment-content {"style":{"elements":{"link":{"color":{"text":"var:preset|color|vivid-cyan-blue"}}}},"textColor":"foreground"} /-->
+
+    <!-- wp:comment-reply-link {"style":{"elements":{"link":{"color":{"text":"var:preset|color|vivid-cyan-blue"}}}}} /--></div>
+    <!-- /wp:column --></div>
+    <!-- /wp:columns -->
+    <!-- /wp:comment-template -->
+
+    <!-- wp:comments-pagination -->
+    <!-- wp:comments-pagination-previous /-->
+
+    <!-- wp:comments-pagination-numbers /-->
+
+    <!-- wp:comments-pagination-next /-->
+    <!-- /wp:comments-pagination --></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,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": []
 			},
@@ -126,14 +108,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": {
-											"fontSize": "small"
+											"fontSize": "small",
+											"style": {
+												"elements": {
+													"link": {
+														"color": {
+															"text": "var:preset|color|vivid-cyan-blue"
+														}
+													}
+												}
+											}
 										},
 										"innerBlocks": []
 									}

diff --git a/...cks/core__comments-query-loop.parsed.json → ...ixtures/blocks/core__comments.parsed.json b/...cks/core__comments-query-loop.parsed.json → ...ixtures/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<div class=\"wp-block-column\" style=\"flex-basis:40px\"></div>\n\t",
+								"innerHTML": "\n    <div class=\"wp-block-column\" style=\"flex-basis:40px\"></div>\n    ",
 								"innerContent": [
-									"\n\t<div class=\"wp-block-column\" style=\"flex-basis:40px\">",
+									"\n    <div class=\"wp-block-column\" style=\"flex-basis:40px\">",
 									null,
-									"</div>\n\t"
+									"</div>\n    "
 								]
 							},
 							{
@@ -108,56 +88,77 @@
 												"innerContent": []
 											}
 										],
-										"innerHTML": "\n\t<div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">\n\t\n\t</div>\n\t",
+										"innerHTML": "\n    <div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">\n    \n    </div>\n    ",
 										"innerContent": [
-											"\n\t<div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">",
+											"\n    <div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">",
 											null,
-											"\n\t\n\t",
+											"\n    \n    ",
 											null,
-											"</div>\n\t"
+											"</div>\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<div class=\"wp-block-column\">\n\t\n\t\n\t\n\t\n\t\n\t</div>\n\t",
+								"innerHTML": "\n    <div class=\"wp-block-column\">\n    \n    \n    \n    \n    \n    </div>\n    ",
 								"innerContent": [
-									"\n\t<div class=\"wp-block-column\">",
+									"\n    <div class=\"wp-block-column\">",
 									null,
-									"\n\t\n\t",
+									"\n    \n    ",
 									null,
-									"\n\t\n\t",
+									"\n    \n    ",
 									null,
-									"\n\t\n\t",
+									"\n    \n    ",
 									null,
-									"</div>\n\t"
+									"</div>\n    "
 								]
 							}
 						],
-						"innerHTML": "\n\t<div class=\"wp-block-columns\">\n\t\n\t</div>\n\t",
+						"innerHTML": "\n    <div class=\"wp-block-columns\">\n    \n    </div>\n    ",
 						"innerContent": [
-							"\n\t<div class=\"wp-block-columns\">",
+							"\n    <div class=\"wp-block-columns\">",
 							null,
-							"\n\t\n\t",
+							"\n    \n    ",
 							null,
-							"</div>\n\t"
+							"</div>\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<div class=\"wp-block-comments-query-loop\">\n\n\t\n\t\n\t</div>\n\t",
+		"innerHTML": "\n<div class=\"wp-block-comments\">\n\n    \n    \n    </div>\n    ",
 		"innerContent": [
-			"\n<div class=\"wp-block-comments-query-loop\">",
+			"\n<div class=\"wp-block-comments\">",
 			null,
-			"\n\n\t",
+			"\n\n    ",
 			null,
-			"\n\t\n\t",
+			"\n    \n    ",
 			null,
-			"</div>\n\t"
+			"</div>\n    "
 		]
 	}
 ]
diff --git a/...core__comments-query-loop.serialized.html → ...res/blocks/core__comments.serialized.html b/...core__comments-query-loop.serialized.html → ...res/blocks/core__comments.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:comments-query-loop -->
-<div class="wp-block-comments-query-loop"><!-- wp:comments-title {"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"}}} /-->
+<!-- wp:comments -->
+<div class="wp-block-comments"><!-- wp:comments-title /-->
 
 <!-- wp:comment-template -->
 <!-- wp:columns -->
@@ -16,9 +16,9 @@
 <!-- wp:comment-edit-link /--></div>
 <!-- /wp:group -->
 
-<!-- wp:comment-content /-->
+<!-- wp:comment-content {"textColor":"foreground","style":{"elements":{"link":{"color":{"text":"var:preset|color|vivid-cyan-blue"}}}}} /-->
 
-<!-- wp:comment-reply-link /--></div>
+<!-- wp:comment-reply-link {"style":{"elements":{"link":{"color":{"text":"var:preset|color|vivid-cyan-blue"}}}}} /--></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
 <!-- /wp:comment-template -->
@@ -30,4 +30,4 @@
 
 <!-- wp:comments-pagination-next /-->
 <!-- /wp:comments-pagination --></div>
-<!-- /wp:comments-query-loop -->
+<!-- /wp:comments -->