Fix: media text vertical align fixture and block transforms structure. (

#14790)
WordPress · Apr 3, 2019 · fc20eea · fc20eea
1 parent ec5ed13
commit fc20eea
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 12 deletions.
diff --git a/packages/e2e-tests/fixtures/block-transforms.js b/packages/e2e-tests/fixtures/block-transforms.js
@@ -45,6 +45,12 @@ export const EXPECTED_TRANSFORMS = {
 			'Video',
 		],
 	},
+	'core__media-text__vertical-align-bottom': {
+		originalBlock: 'Media & Text',
+		availableTransforms: [
+			'Image',
+		],
+	},
 	'core__media-text__video': {
 		originalBlock: 'Media & Text',
 		availableTransforms: [

diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.html b/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.html
@@ -1,12 +1,12 @@
-<!-- wp:media-text {"mediaId":11,"mediaType":"image","verticalAlignment":"bottom"} -->
+<!-- wp:media-text {"mediaType":"image","verticalAlignment":"bottom"} -->
 <div class="wp-block-media-text alignwide is-vertically-aligned-bottom">
 	<figure class="wp-block-media-text__media"><img
-			src="http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg" alt="My alt text"
-			class="wp-image-11" /></figure>
+			src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"
+			/></figure>
 	<div class="wp-block-media-text__content">
 		<!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 		<p class="has-large-font-size">My content</p>
 		<!-- /wp:paragraph -->
 	</div>
 </div>
-<!-- /wp:media-text -->
+<!-- /wp:media-text -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.json b/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.json
@@ -7,8 +7,7 @@
             "align": "wide",
             "mediaAlt": "My alt text",
             "mediaPosition": "left",
-            "mediaId": 11,
-            "mediaUrl": "http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg",
+            "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
             "mediaType": "image",
             "mediaWidth": 50,
             "isStackedOnMobile": false,
@@ -29,6 +28,6 @@
                 "originalContent": "<p class=\"has-large-font-size\">My content</p>"
             }
         ],
-        "originalContent": "<div class=\"wp-block-media-text alignwide is-vertically-aligned-bottom\">\n\t<figure class=\"wp-block-media-text__media\"><img\n\t\t\tsrc=\"http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg\" alt=\"My alt text\"\n\t\t\tclass=\"wp-image-11\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>"
+        "originalContent": "<div class=\"wp-block-media-text alignwide is-vertically-aligned-bottom\">\n\t<figure class=\"wp-block-media-text__media\"><img\n\t\t\tsrc=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"My alt text\"\n\t\t\t/></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>"
     }
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.parsed.json b/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.parsed.json
@@ -2,7 +2,6 @@
     {
         "blockName": "core/media-text",
         "attrs": {
-            "mediaId": 11,
             "mediaType": "image",
             "verticalAlignment": "bottom"
         },
@@ -20,11 +19,20 @@
                 ]
             }
         ],
-        "innerHTML": "\n<div class=\"wp-block-media-text alignwide is-vertically-aligned-bottom\">\n\t<figure class=\"wp-block-media-text__media\"><img\n\t\t\tsrc=\"http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg\" alt=\"My alt text\"\n\t\t\tclass=\"wp-image-11\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+        "innerHTML": "\n<div class=\"wp-block-media-text alignwide is-vertically-aligned-bottom\">\n\t<figure class=\"wp-block-media-text__media\"><img\n\t\t\tsrc=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"My alt text\"\n\t\t\t/></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
         "innerContent": [
-            "\n<div class=\"wp-block-media-text alignwide is-vertically-aligned-bottom\">\n\t<figure class=\"wp-block-media-text__media\"><img\n\t\t\tsrc=\"http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg\" alt=\"My alt text\"\n\t\t\tclass=\"wp-image-11\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+            "\n<div class=\"wp-block-media-text alignwide is-vertically-aligned-bottom\">\n\t<figure class=\"wp-block-media-text__media\"><img\n\t\t\tsrc=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"My alt text\"\n\t\t\t/></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
             null,
             "\n\t</div>\n</div>\n"
         ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
     }
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.serialized.html b/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:media-text {"mediaId":11,"mediaType":"image","verticalAlignment":"bottom"} -->
-<div class="wp-block-media-text alignwide is-vertically-aligned-bottom"><figure class="wp-block-media-text__media"><img src="http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg" alt="My alt text" class="wp-image-11"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<!-- wp:media-text {"mediaType":"image","verticalAlignment":"bottom"} -->
+<div class="wp-block-media-text alignwide is-vertically-aligned-bottom"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My content</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->
diff --git a/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap b/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap
@@ -328,6 +328,12 @@ exports[`Block transforms correctly transform block Media & Text in fixture core
 <!-- /wp:video -->"
 `;
 
+exports[`Block transforms correctly transform block Media & Text in fixture core__media-text__vertical-align-bottom into the Image block 1`] = `
+"<!-- wp:image -->
+<figure class=\\"wp-block-image\\"><img src=\\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\\" alt=\\"My alt text\\"/></figure>
+<!-- /wp:image -->"
+`;
+
 exports[`Block transforms correctly transform block Media & Text in fixture core__media-text__video into the Video block 1`] = `
 "<!-- wp:video -->
 <figure class=\\"wp-block-video\\"><video controls src=\\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\\"></video></figure>