Fix deprecation

WordPress · Jul 6, 2022 · ebcbe8d · ebcbe8d
1 parent 786f817
commit ebcbe8d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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 -->