add minHeightUnit to latest core/cover deprecation (#28627)

Co-authored-by: Jon Surrell <[email protected]>
WordPress · Feb 8, 2021 · c1fcffc · c1fcffc
1 parent 9736549
commit c1fcffc
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 0 deletions.
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
@@ -8,6 +8,10 @@
 
 - Allow setting the `crossOrigin` attribute so the `useTransformImage` hook can use cross-origin sources ([#28255](https://github.com/WordPress/gutenberg/pull/28255/)).
 
+### Bug Fixes
+
+- Fix a regression where the Cover block migration would not work with custom units for `minHeight` ([#28627](https://github.com/WordPress/gutenberg/pull/28627))
+
 ## 2.27.0 (2020-12-17)
 
 ### Enhancement

diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
@@ -79,6 +79,9 @@ const deprecated = [
 			minHeight: {
 				type: 'number',
 			},
+			minHeightUnit: {
+				type: 'string',
+			},
 			gradient: {
 				type: 'string',
 			},

diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-6.html b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-6.html
@@ -12,3 +12,15 @@
 	</div>
 </div>
 <!-- /wp:cover -->
+<!-- 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"
+	style="background-image: url( https://example.com/some-background-image.png ); min-height: 48vw; background-position: 50% 40%;"
+>
+	<div class="wp-block-cover__inner-container">
+		<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:cover -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-6.json b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-6.json
@@ -29,5 +29,41 @@
             }
         ],
         "originalContent": "<div\n\tclass=\"wp-block-cover has-background-dim-40 has-background-dim\"\n\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=)\"\n>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>"
+    },
+    {
+        "clientId": "_clientId_1",
+        "name": "core/cover",
+        "isValid": true,
+        "attributes": {
+            "url": "https://example.com/some-background-image.png",
+            "id": 1933,
+            "hasParallax": false,
+            "dimRatio": 0,
+            "backgroundType": "image",
+            "focalPoint": {
+                "x": "0.50",
+                "y": "0.40"
+            },
+            "title": "",
+            "contentAlign": "center",
+            "isRepeated": false,
+            "minHeight": 48,
+            "minHeightUnit": "vw",
+            "className": "alignfull"
+        },
+        "innerBlocks": [
+            {
+                "clientId": "_clientId_0",
+                "name": "core/paragraph",
+                "isValid": true,
+                "attributes": {
+                    "content": "",
+                    "dropCap": false
+                },
+                "innerBlocks": [],
+                "originalContent": "<p></p>"
+            }
+        ],
+        "originalContent": "<div\n\tclass=\"wp-block-cover alignfull\"\n\tstyle=\"background-image: url( https://example.com/some-background-image.png ); min-height: 48vw; background-position: 50% 40%;\"\n>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>"
     }
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-6.parsed.json b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-6.parsed.json
@@ -27,6 +27,47 @@
             "\n\t</div>\n</div>\n"
         ]
     },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    },
+    {
+        "blockName": "core/cover",
+        "attrs": {
+            "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"
+        },
+        "innerBlocks": [
+            {
+                "blockName": "core/paragraph",
+                "attrs": {},
+                "innerBlocks": [],
+                "innerHTML": "\n\t\t<p></p>\n\t\t",
+                "innerContent": [
+                    "\n\t\t<p></p>\n\t\t"
+                ]
+            }
+        ],
+        "innerHTML": "\n<div\n\tclass=\"wp-block-cover alignfull\"\n\tstyle=\"background-image: url( https://example.com/some-background-image.png ); min-height: 48vw; background-position: 50% 40%;\"\n>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>\n",
+        "innerContent": [
+            "\n<div\n\tclass=\"wp-block-cover alignfull\"\n\tstyle=\"background-image: url( https://example.com/some-background-image.png ); min-height: 48vw; background-position: 50% 40%;\"\n>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t",
+            null,
+            "\n\t</div>\n</div>\n"
+        ]
+    },
     {
         "blockName": null,
         "attrs": {},

diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-6.serialized.html b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-6.serialized.html
@@ -5,3 +5,9 @@
 		</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
+
+<!-- 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","className":"alignfull"} -->
+<div class="wp-block-cover alignfull" style="min-height:48vw"><img class="wp-block-cover__image-background wp-image-1933" alt="" 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 -->