Merge pull request #364 from material-components/fix/button-invalidation

Fix button and image list block invalidation issue
material-components · Jun 21, 2022 · 43e366d · 43e366d
2 parents e86ee71 + 2338be7
commit 43e366d
Show file tree

Hide file tree

Showing 7 changed files with 1,534 additions and 1,540 deletions.
diff --git a/plugin/assets/src/block-editor/blocks/button/block.json b/plugin/assets/src/block-editor/blocks/button/block.json
@@ -77,6 +77,5 @@
       "type": "string",
       "default": "normal"
     }
-  },
-  "apiVersion": 2
+  }
 }
diff --git a/plugin/assets/src/block-editor/blocks/buttons/edit.js b/plugin/assets/src/block-editor/blocks/buttons/edit.js
@@ -31,9 +31,7 @@ const ALLOWED_BLOCKS = [ name ];
 const BUTTONS_TEMPLATE = [ [ name ] ];
 
 const Edit = () => {
-	const blockProps = useBlockProps( {
-		className: 'wp-block-material-buttons',
-	} );
+	const blockProps = useBlockProps();
 	return (
 		<div { ...blockProps }>
 			<InnerBlocks

diff --git a/plugin/assets/src/block-editor/blocks/buttons/save.js b/plugin/assets/src/block-editor/blocks/buttons/save.js
@@ -17,11 +17,11 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 const Save = () => {
 	return (
-		<div>
+		<div { ...useBlockProps.save() }>
 			<InnerBlocks.Content />
 		</div>
 	);

diff --git a/plugin/assets/src/block-editor/blocks/image-list/edit.js b/plugin/assets/src/block-editor/blocks/image-list/edit.js
@@ -233,8 +233,6 @@ const ImageListEdit = ( {
 		noticeOperations.createErrorNotice( message );
 	};
 
-	const classNames = useBlockProps()?.className;
-
 	const galleryProps = {
 		images: images.map( image => {
 			image.caption = getCaption( image.id ) || image.caption;
@@ -252,19 +250,17 @@ const ImageListEdit = ( {
 		onMove: moveImage,
 		onSelect: setSelectedImage,
 		onLinkChange: updateImageLink,
-		className: classNames,
 	};
 
 	return (
-		<>
+		<div { ...useBlockProps() }>
 			{ 'function' === typeof noticeUI ? noticeUI() : noticeUI }
 
 			{ hasImages && <Gallery { ...galleryProps } /> }
 
 			<MediaPlaceholder
 				addToGallery={ hasImagesWithId }
 				isAppender={ hasImages }
-				className={ classNames }
 				disableMediaButtons={ hasImages && ! isSelected }
 				icon={
 					! hasImages && (
@@ -400,7 +396,7 @@ const ImageListEdit = ( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-		</>
+		</div>
 	);
 };
 

diff --git a/plugin/tests/js/block-editor/blocks/buttons/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/buttons/__snapshots__/edit.test.js.snap
@@ -5,9 +5,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <div
-        class="wp-block-material-buttons"
-      >
+      <div>
         <div>
            
           {"id":"button-1","name":"material/button"}
@@ -17,9 +15,7 @@ Object {
     </div>
   </body>,
   "container": <div>
-    <div
-      class="wp-block-material-buttons"
-    >
+    <div>
       <div>
          
         {"id":"button-1","name":"material/button"}