diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 6b8fef7d61a948..eb132d03c1d186 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/comment-template/block.json b/packages/block-library/src/comment-template/block.json
index 03b2990968fee2..7596ed312ee141 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 dcaa428856d0e7..79c8a3acdf721a 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 cc98c4902e513d..a927f7d98c6525 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" ],
diff --git a/packages/block-library/src/comments/block.json b/packages/block-library/src/comments/block.json
index fbdfdd253b278b..582de73d8d0e93 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/block-library/src/comments/deprecated.js b/packages/block-library/src/comments/deprecated.js
new file mode 100644
index 00000000000000..bba13be11e754c
--- /dev/null
+++ 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 (
+
+
+
+ );
+ },
+};
+
+export default [ v1 ];
diff --git a/packages/block-library/src/comments/edit.js b/packages/block-library/src/comments/edit.js
index 7b4533e228eed8..2191c1a84fb99b 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/index.js b/packages/block-library/src/comments/index.js
index 1743783286c744..9cecb54f5a64dc 100644
--- 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
index 657daf17ad87dc..fd40b55e136ba2 100644
--- 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
index 1498ef9ac38a4f..c699cd78424b90 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": {
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 156166ee90f9a4..00000000000000
--- 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-query-loop.serialized.html b/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html
deleted file mode 100644
index dd0aa7f091628c..00000000000000
--- a/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
-
diff --git a/test/integration/fixtures/blocks/core__comments.html b/test/integration/fixtures/blocks/core__comments.html
new file mode 100644
index 00000000000000..8dab93c5d812ae
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__comments.html
@@ -0,0 +1,29 @@
+
+
+
\ 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 71%
rename from test/integration/fixtures/blocks/core__comments-query-loop.json
rename to test/integration/fixtures/blocks/core__comments.json
index 94222499bd912d..6f1d1c5c9e8431 100644
--- a/test/integration/fixtures/blocks/core__comments-query-loop.json
+++ b/test/integration/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,7 +90,8 @@
"name": "core/comment-date",
"isValid": true,
"attributes": {
- "isLink": true
+ "isLink": true,
+ "fontSize": "small"
},
"innerBlocks": []
},
@@ -114,7 +99,8 @@
"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": []
}
]
}
diff --git a/test/integration/fixtures/blocks/core__comments.parsed.json b/test/integration/fixtures/blocks/core__comments.parsed.json
new file mode 100644
index 00000000000000..a1315efd66ce6a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__comments.parsed.json
@@ -0,0 +1,180 @@
+[
+ {
+ "blockName": "core/comments",
+ "attrs": {
+ "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 ",
+ "innerContent": [
+ "\n\n "
+ ]
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__comments.serialized.html b/test/integration/fixtures/blocks/core__comments.serialized.html
new file mode 100644
index 00000000000000..6a4e6c09df37da
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__comments.serialized.html
@@ -0,0 +1,29 @@
+
+
+
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 00000000000000..2af6a10a488f39
--- /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 00000000000000..ff97b76a5f3838
--- /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": "wp-block-comments-query-loop comments-post-extra",
+ "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-query-loop.parsed.json b/test/integration/fixtures/blocks/core__comments__deprecated-1.parsed.json
similarity index 52%
rename from test/integration/fixtures/blocks/core__comments-query-loop.parsed.json
rename to test/integration/fixtures/blocks/core__comments__deprecated-1.parsed.json
index 529336e78a0985..5748b935266a2a 100644
--- a/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json
+++ b/test/integration/fixtures/blocks/core__comments__deprecated-1.parsed.json
@@ -1,31 +1,14 @@
[
{
"blockName": "core/comments-query-loop",
- "attrs": {},
+ "attrs": {
+ "textColor": "luminous-vivid-orange",
+ "className": "comments-post-extra"
+ },
"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 +42,11 @@
"innerContent": []
}
],
- "innerHTML": "\n\t\n\t",
+ "innerHTML": "\n \n ",
"innerContent": [
- "\n\t",
+ "\n
",
null,
- "
\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\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\t\n\t
\n\t",
+ "innerHTML": "\n \n \n
\n ",
"innerContent": [
- "\n\t",
+ "\n
",
null,
- "\n\t\n\t",
+ "\n \n ",
null,
- "
\n\t"
+ "