From ebcbe8db6cb80689d7f79e9147a62ac6fe1b6935 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 5 Jul 2022 23:22:17 +0200
Subject: [PATCH] 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 (
-			<Tag
-				className={ classnames(
-					'wp-block-comments-query-loop',
-					className
-				) }
-			>
+			<Tag { ...newBlockProps }>
 				<InnerBlocks.Content />
 			</Tag>
 		);
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 @@
-<!-- wp:comments {"className":"comments-post-extra has-luminous-vivid-orange-color has-text-color","textColor":"luminous-vivid-orange"} -->
-<div class="wp-block-comments comments-post-extra has-luminous-vivid-orange-color has-text-color has-luminous-vivid-orange-color has-text-color"><!-- wp:comments-title /-->
+<!-- wp:comments {"className":"wp-block-comments-query-loop comments-post-extra","textColor":"luminous-vivid-orange"} -->
+<div class="wp-block-comments wp-block-comments-query-loop comments-post-extra has-luminous-vivid-orange-color has-text-color"><!-- wp:comments-title /-->
 
 <!-- wp:comment-template -->
 <!-- wp:columns -->