Fix cover block content position not migrating correctly from depreca…

…ted version (#29542) * Add missing deprecation attribute for content position * Add new fixture for cover contentPosition deprecation * Update changelog
WordPress · Mar 5, 2021 · 9dfd2b3 · 9dfd2b3
1 parent f0a0056
commit 9dfd2b3
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 0 deletions.
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+- Fix a regression where the Cover block migration would not work with a non-default contentPosition ([#29542](https://github.com/WordPress/gutenberg/pull/29542))
+
 ## 2.28.0 (2021-02-01)
 
 ### New Features

diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
@@ -88,6 +88,9 @@ const deprecated = [
 			customGradient: {
 				type: 'string',
 			},
+			contentPosition: {
+				type: 'string',
+			},
 		},
 		supports: {
 			align: true,

diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-6.html b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-6.html
@@ -24,3 +24,12 @@
 	</div>
 </div>
 <!-- /wp:cover -->
+<!-- wp:cover {"url":"http://localhost:8888/wp-content/uploads/2021/02/percy.jpg","id":134,"contentPosition":"bottom right"} -->
+<div class="wp-block-cover has-background-dim has-custom-content-position is-position-bottom-right"><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>
+<!-- /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
@@ -65,5 +65,36 @@
             }
         ],
         "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>"
+    },
+    {
+        "clientId": "_clientId_2",
+        "name": "core/cover",
+        "isValid": true,
+        "attributes": {
+            "url": "http://localhost:8888/wp-content/uploads/2021/02/percy.jpg",
+            "id": 134,
+            "hasParallax": false,
+            "isRepeated": false,
+            "dimRatio": 50,
+            "backgroundType": "image",
+            "contentPosition": "bottom right"
+        },
+        "innerBlocks": [
+            {
+                "clientId": "_clientId_0",
+                "name": "core/paragraph",
+                "isValid": true,
+                "attributes": {
+                    "align": "center",
+                    "content": "test",
+                    "dropCap": false,
+                    "placeholder": "Write title…",
+                    "fontSize": "large"
+                },
+                "innerBlocks": [],
+                "originalContent": "<p class=\"has-text-align-center has-large-font-size\">test</p>"
+            }
+        ],
+        "originalContent": "<div class=\"wp-block-cover has-background-dim has-custom-content-position is-position-bottom-right\"><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\"/>\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
@@ -68,6 +68,44 @@
             "\n\t</div>\n</div>\n"
         ]
     },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    },
+    {
+        "blockName": "core/cover",
+        "attrs": {
+            "url": "http://localhost:8888/wp-content/uploads/2021/02/percy.jpg",
+            "id": 134,
+            "contentPosition": "bottom right"
+        },
+        "innerBlocks": [
+            {
+                "blockName": "core/paragraph",
+                "attrs": {
+                    "align": "center",
+                    "placeholder": "Write title…",
+                    "fontSize": "large"
+                },
+                "innerBlocks": [],
+                "innerHTML": "\n\t\t<p class=\"has-text-align-center has-large-font-size\">test</p>\n\t\t",
+                "innerContent": [
+                    "\n\t\t<p class=\"has-text-align-center has-large-font-size\">test</p>\n\t\t"
+                ]
+            }
+        ],
+        "innerHTML": "\n<div class=\"wp-block-cover has-background-dim has-custom-content-position is-position-bottom-right\"><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\"/>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>\n",
+        "innerContent": [
+            "\n<div class=\"wp-block-cover has-background-dim has-custom-content-position is-position-bottom-right\"><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\"/>\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
@@ -11,3 +11,9 @@
 <p></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
+
+<!-- wp:cover {"url":"http://localhost:8888/wp-content/uploads/2021/02/percy.jpg","id":134,"contentPosition":"bottom right"} -->
+<div class="wp-block-cover has-background-dim has-custom-content-position is-position-bottom-right"><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>
+<!-- /wp:cover -->