Set the default dimRatio in the transformation instead of changing at…

…tribute defaults and setting in useEffect
WordPress · Nov 15, 2021 · 65b5290 · 65b5290
1 parent 025c7f1
commit 65b5290
Show file tree

Hide file tree

Showing 26 changed files with 58 additions and 71 deletions.
diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
@@ -29,7 +29,8 @@
 			"default": false
 		},
 		"dimRatio": {
-			"type": "number"
+			"type": "number",
+			"default": 100
 		},
 		"overlayColor": {
 			"type": "string"

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -310,7 +310,6 @@ function CoverEdit( {
 	setAttributes,
 	setOverlayColor,
 	toggleSelection,
-	markNextChangeAsNotPersistent,
 } ) {
 	const {
 		contentPosition,
@@ -398,15 +397,6 @@ function CoverEdit( {
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
-	useEffect( () => {
-		const defaultDimRatio =
-			( isImageBackground || isVideoBackground ) && url ? 50 : 100;
-		markNextChangeAsNotPersistent();
-		setAttributes( {
-			dimRatio: 'number' === typeof dimRatio ? dimRatio : defaultDimRatio,
-		} );
-	}, [ isImageBackground, isVideoBackground, url, dimRatio ] );
-
 	const [ temporaryMinHeight, setTemporaryMinHeight ] = useState( null );
 
 	const minHeightWithUnit = minHeightUnit
@@ -781,12 +771,10 @@ export default compose( [
 	withDispatch( ( dispatch ) => {
 		const {
 			toggleSelection,
-			__unstableMarkNextChangeAsNotPersistent,
 		} = dispatch( blockEditorStore );
 
 		return {
 			toggleSelection,
-			markNextChangeAsNotPersistent: __unstableMarkNextChangeAsNotPersistent,
 		};
 	} ),
 	withColors( { overlayColor: 'background-color' } ),

diff --git a/packages/block-library/src/cover/transforms.js b/packages/block-library/src/cover/transforms.js
@@ -17,6 +17,7 @@ const transforms = {
 				createBlock(
 					'core/cover',
 					{
+						dimRatio: 50,
 						url,
 						alt,
 						align,
@@ -43,6 +44,7 @@ const transforms = {
 				createBlock(
 					'core/cover',
 					{
+						dimRatio: 50,
 						url: src,
 						align,
 						id,

diff --git a/test/integration/fixtures/blocks/core__cover.html b/test/integration/fixtures/blocks/core__cover.html
@@ -1,11 +1,13 @@
-<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","id":6,"dimRatio":40,"backgroundType":"image","isDark":false} -->
-<div class="wp-block-cover is-light">
+<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
+<div class="wp-block-cover">
     <span aria-hidden="true" class="has-background-dim-40 wp-block-cover__gradient-background has-background-dim"></span>
-    <img class="wp-block-cover__image-background wp-image-6" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/>
+    <img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/>
     <div class="wp-block-cover__inner-container">
         <!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
-        <p class="has-text-align-center has-large-font-size">Cover!</p>
-        <!-- /wp:paragraph -->
+        <p class="has-text-align-center has-large-font-size">
+                Guten Berg!
+        </p>
+    <!-- /wp:paragraph -->
     </div>
 </div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover.json b/test/integration/fixtures/blocks/core__cover.json
@@ -5,13 +5,12 @@
 		"isValid": true,
 		"attributes": {
 			"url": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
-			"id": 6,
 			"alt": "",
 			"hasParallax": false,
 			"isRepeated": false,
 			"dimRatio": 40,
 			"backgroundType": "image",
-			"isDark": false
+			"isDark": true
 		},
 		"innerBlocks": [
 			{
@@ -20,15 +19,15 @@
 				"isValid": true,
 				"attributes": {
 					"align": "center",
-					"content": "Cover!",
+					"content": "\n                Guten Berg!\n        ",
 					"dropCap": false,
 					"placeholder": "Write title…",
 					"fontSize": "large"
 				},
 				"innerBlocks": [],
-				"originalContent": "<p class=\"has-text-align-center has-large-font-size\">Cover!</p>"
+				"originalContent": "<p class=\"has-text-align-center has-large-font-size\">\n                Guten Berg!\n        </p>"
 			}
 		],
-		"originalContent": "<div class=\"wp-block-cover is-light\">\n    <span aria-hidden=\"true\" class=\"has-background-dim-40 wp-block-cover__gradient-background has-background-dim\"></span>\n    <img class=\"wp-block-cover__image-background wp-image-6\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\"/>\n    <div class=\"wp-block-cover__inner-container\">\n        \n    </div>\n</div>"
+		"originalContent": "<div class=\"wp-block-cover\">\n    <span aria-hidden=\"true\" class=\"has-background-dim-40 wp-block-cover__gradient-background has-background-dim\"></span>\n    <img class=\"wp-block-cover__image-background\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\"/>\n    <div class=\"wp-block-cover__inner-container\">\n        \n    </div>\n</div>"
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__cover.parsed.json b/test/integration/fixtures/blocks/core__cover.parsed.json
@@ -3,10 +3,7 @@
 		"blockName": "core/cover",
 		"attrs": {
 			"url": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
-			"id": 6,
-			"dimRatio": 40,
-			"backgroundType": "image",
-			"isDark": false
+			"dimRatio": 40
 		},
 		"innerBlocks": [
 			{
@@ -17,15 +14,15 @@
 					"fontSize": "large"
 				},
 				"innerBlocks": [],
-				"innerHTML": "\n        <p class=\"has-text-align-center has-large-font-size\">Cover!</p>\n        ",
+				"innerHTML": "\n        <p class=\"has-text-align-center has-large-font-size\">\n                Guten Berg!\n        </p>\n    ",
 				"innerContent": [
-					"\n        <p class=\"has-text-align-center has-large-font-size\">Cover!</p>\n        "
+					"\n        <p class=\"has-text-align-center has-large-font-size\">\n                Guten Berg!\n        </p>\n    "
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-cover is-light\">\n    <span aria-hidden=\"true\" class=\"has-background-dim-40 wp-block-cover__gradient-background has-background-dim\"></span>\n    <img class=\"wp-block-cover__image-background wp-image-6\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\"/>\n    <div class=\"wp-block-cover__inner-container\">\n        \n    </div>\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-cover\">\n    <span aria-hidden=\"true\" class=\"has-background-dim-40 wp-block-cover__gradient-background has-background-dim\"></span>\n    <img class=\"wp-block-cover__image-background\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\"/>\n    <div class=\"wp-block-cover__inner-container\">\n        \n    </div>\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-cover is-light\">\n    <span aria-hidden=\"true\" class=\"has-background-dim-40 wp-block-cover__gradient-background has-background-dim\"></span>\n    <img class=\"wp-block-cover__image-background wp-image-6\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\"/>\n    <div class=\"wp-block-cover__inner-container\">\n        ",
+			"\n<div class=\"wp-block-cover\">\n    <span aria-hidden=\"true\" class=\"has-background-dim-40 wp-block-cover__gradient-background has-background-dim\"></span>\n    <img class=\"wp-block-cover__image-background\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\"/>\n    <div class=\"wp-block-cover__inner-container\">\n        ",
 			null,
 			"\n    </div>\n</div>\n"
 		]

diff --git a/test/integration/fixtures/blocks/core__cover.serialized.html b/test/integration/fixtures/blocks/core__cover.serialized.html
@@ -1,5 +1,7 @@
-<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","id":6,"dimRatio":40,"backgroundType":"image","isDark":false} -->
-<div class="wp-block-cover is-light"><span aria-hidden="true" class="has-background-dim-40 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-6" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
-<p class="has-text-align-center has-large-font-size">Cover!</p>
+<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
+<div class="wp-block-cover"><span aria-hidden="true" class="has-background-dim-40 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size">
+                Guten Berg!
+        </p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":34,"dimRatio":50,"backgroundType":"image"} -->
+<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":34,"dimRatio":50} -->
 <div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Image</strong></p>
 <!-- /wp:paragraph --></div></div>

diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":34,"dimRatio":50,"backgroundType":"image"} -->
+<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":34,"dimRatio":50} -->
 <div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
 <!-- /wp:paragraph --></div></div>

diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":35,"dimRatio":50,"backgroundType":"image"} -->
+<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":35,"dimRatio":50} -->
 <div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
 <!-- /wp:paragraph --></div></div>

diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":35,"dimRatio":50,"backgroundType":"image","focalPoint":{"x":"0.07","y":"0.07"}} -->
+<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":35,"dimRatio":50,"focalPoint":{"x":"0.07","y":"0.07"}} -->
 <div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" style="object-position:7% 7%" data-object-fit="cover" data-object-position="7% 7%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
 <!-- /wp:paragraph --></div></div>

diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":50,"backgroundType":"image","gradient":"midnight"} -->
+<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":50,"gradient":"midnight"} -->
 <div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__gradient-background has-midnight-gradient-background has-background-dim has-background-gradient"></span><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">Cover</p>
 <!-- /wp:paragraph --></div></div>

diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html
@@ -1,18 +1,18 @@
-<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40,"backgroundType":"image"} -->
+<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
 <div class="wp-block-cover is-light"><span aria-hidden="true" class="has-background-dim-40 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">
 			Guten Berg!
 		</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
 
-<!-- wp:cover {"url":"https://example.com/some-background-image.png","id":1933,"dimRatio":0,"backgroundType":"image","focalPoint":{"x":"0.50","y":"0.40"},"minHeight":48,"minHeightUnit":"vw","align":"full"} -->
+<!-- wp:cover {"url":"https://example.com/some-background-image.png","id":1933,"dimRatio":0,"focalPoint":{"x":"0.50","y":"0.40"},"minHeight":48,"minHeightUnit":"vw","align":"full"} -->
 <div class="wp-block-cover alignfull is-light" style="min-height:48vw"><span aria-hidden="true" class="has-background-dim-0 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1933" src="https://example.com/some-background-image.png" style="object-position:50% 40%" data-object-fit="cover" data-object-position="50% 40%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph -->
 <p></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
 
-<!-- wp:cover {"url":"http://localhost:8888/wp-content/uploads/2021/02/percy.jpg","id":134,"dimRatio":50,"backgroundType":"image","contentPosition":"bottom right"} -->
+<!-- wp:cover {"url":"http://localhost:8888/wp-content/uploads/2021/02/percy.jpg","id":134,"dimRatio":50,"contentPosition":"bottom right"} -->
 <div class="wp-block-cover is-light has-custom-content-position is-position-bottom-right"><span aria-hidden="true" class="wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-134" alt="" src="http://localhost:8888/wp-content/uploads/2021/02/percy.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">test</p>
 <!-- /wp:paragraph --></div></div>

diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-7.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-7.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40,"backgroundType":"image"} -->
+<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
 <div class="wp-block-cover is-light"><span aria-hidden="true" class="has-background-dim-40 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">
 			Guten Berg!