Media & Text: Turn Stack on mobile toggle on by default (WordPress#14364

)
oxyc · Sep 23, 2019 · c89e85c · c89e85c
1 parent f24262b
commit c89e85c
Show file tree

Hide file tree

Showing 35 changed files with 182 additions and 95 deletions.
diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json
@@ -41,7 +41,7 @@
 		},
 		"isStackedOnMobile": {
 			"type": "boolean",
-			"default": false
+			"default": true
 		},
 		"verticalAlignment": {
 			"type": "string"

diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
@@ -12,53 +12,122 @@ import {
 	getColorClassName,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { imageFillStyles } from './media-container';
+
 const DEFAULT_MEDIA_WIDTH = 50;
 
+const baseAttributes = {
+	align: {
+		type: 'string',
+		default: 'wide',
+	},
+	backgroundColor: {
+		type: 'string',
+	},
+	customBackgroundColor: {
+		type: 'string',
+	},
+	mediaAlt: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure img',
+		attribute: 'alt',
+		default: '',
+	},
+	mediaPosition: {
+		type: 'string',
+		default: 'left',
+	},
+	mediaId: {
+		type: 'number',
+	},
+	mediaUrl: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure video,figure img',
+		attribute: 'src',
+	},
+	mediaType: {
+		type: 'string',
+	},
+	mediaWidth: {
+		type: 'number',
+		default: 50,
+	},
+	isStackedOnMobile: {
+		type: 'boolean',
+		default: false,
+	},
+};
+
 export default [
 	{
 		attributes: {
-			align: {
-				type: 'string',
-				default: 'wide',
-			},
-			backgroundColor: {
-				type: 'string',
-			},
-			customBackgroundColor: {
+			...baseAttributes,
+			verticalAlignment: {
 				type: 'string',
 			},
-			mediaAlt: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure img',
-				attribute: 'alt',
-				default: '',
-			},
-			mediaPosition: {
-				type: 'string',
-				default: 'left',
-			},
-			mediaId: {
-				type: 'number',
-			},
-			mediaUrl: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure video,figure img',
-				attribute: 'src',
-			},
-			mediaType: {
-				type: 'string',
-			},
-			mediaWidth: {
-				type: 'number',
-				default: 50,
-			},
-			isStackedOnMobile: {
+			imageFill: {
 				type: 'boolean',
-				default: false,
 			},
+			focalPoint: {
+				type: 'object',
+			},
+		},
+		save( { attributes } ) {
+			const {
+				backgroundColor,
+				customBackgroundColor,
+				isStackedOnMobile,
+				mediaAlt,
+				mediaPosition,
+				mediaType,
+				mediaUrl,
+				mediaWidth,
+				mediaId,
+				verticalAlignment,
+				imageFill,
+				focalPoint,
+			} = attributes;
+			const mediaTypeRenders = {
+				image: () => <img src={ mediaUrl } alt={ mediaAlt } className={ ( mediaId && mediaType === 'image' ) ? `wp-image-${ mediaId }` : null } />,
+				video: () => <video controls src={ mediaUrl } />,
+			};
+			const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+			const className = classnames( {
+				'has-media-on-the-right': 'right' === mediaPosition,
+				[ backgroundClass ]: backgroundClass,
+				'is-stacked-on-mobile': isStackedOnMobile,
+				[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+				'is-image-fill': imageFill,
+			} );
+			const backgroundStyles = imageFill ? imageFillStyles( mediaUrl, focalPoint ) : {};
+
+			let gridTemplateColumns;
+			if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+				gridTemplateColumns = 'right' === mediaPosition ? `auto ${ mediaWidth }%` : `${ mediaWidth }% auto`;
+			}
+			const style = {
+				backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+				gridTemplateColumns,
+			};
+			return (
+				<div className={ className } style={ style }>
+					<figure className="wp-block-media-text__media" style={ backgroundStyles }>
+						{ ( mediaTypeRenders[ mediaType ] || noop )() }
+					</figure>
+					<div className="wp-block-media-text__content">
+						<InnerBlocks.Content />
+					</div>
+				</div>
+			);
 		},
+	},
+	{
+		attributes: baseAttributes,
 		save( { attributes } ) {
 			const {
 				backgroundColor,

diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text.html b/packages/e2e-tests/fixtures/blocks/core__media-text.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"mediaType":"image"} -->
-<div class="wp-block-media-text alignwide">
+<div class="wp-block-media-text alignwide is-stacked-on-mobile">
 	<figure class="wp-block-media-text__media">
 		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/>
 	</figure>

diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text.json b/packages/e2e-tests/fixtures/blocks/core__media-text.json
@@ -10,7 +10,7 @@
             "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
             "mediaType": "image",
             "mediaWidth": 50,
-            "isStackedOnMobile": false
+            "isStackedOnMobile": true
         },
         "innerBlocks": [
             {
@@ -27,6 +27,6 @@
                 "originalContent": "<p class=\"has-large-font-size\">My Content</p>"
             }
         ],
-        "originalContent": "<div class=\"wp-block-media-text alignwide\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</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-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\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.parsed.json b/packages/e2e-tests/fixtures/blocks/core__media-text.parsed.json
@@ -18,9 +18,9 @@
                 ]
             }
         ],
-        "innerHTML": "\n<div class=\"wp-block-media-text alignwide\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</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-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\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\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+            "\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
             null,
             "\n\t</div>\n</div>\n"
         ]

diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text.serialized.html b/packages/e2e-tests/fixtures/blocks/core__media-text.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"mediaType":"image"} -->
-<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/></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/fixtures/blocks/core__media-text__image-alt-no-align.html b/packages/e2e-tests/fixtures/blocks/core__media-text__image-alt-no-align.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"align":"none","mediaType":"image"} -->
-<div class="wp-block-media-text">
+<div class="wp-block-media-text is-stacked-on-mobile">
 	<figure class="wp-block-media-text__media">
 		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="my alt"/>
 	</figure>

diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__image-alt-no-align.json b/packages/e2e-tests/fixtures/blocks/core__media-text__image-alt-no-align.json
@@ -10,7 +10,7 @@
             "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
             "mediaType": "image",
             "mediaWidth": 50,
-            "isStackedOnMobile": false
+            "isStackedOnMobile": true
         },
         "innerBlocks": [
             {
@@ -27,6 +27,6 @@
                 "originalContent": "<p class=\"has-large-font-size\">Content</p>"
             }
         ],
-        "originalContent": "<div class=\"wp-block-media-text\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"my alt\"/>\n\t</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 is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"my alt\"/>\n\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__image-alt-no-align.parsed.json b/packages/e2e-tests/fixtures/blocks/core__media-text__image-alt-no-align.parsed.json
@@ -19,9 +19,9 @@
                 ]
             }
         ],
-        "innerHTML": "\n<div class=\"wp-block-media-text\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"my alt\"/>\n\t</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 is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"my alt\"/>\n\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\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"my alt\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+            "\n<div class=\"wp-block-media-text is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"my alt\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
             null,
             "\n\t</div>\n</div>\n"
         ]

diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__image-alt-no-align.serialized.html b/packages/e2e-tests/fixtures/blocks/core__media-text__image-alt-no-align.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"align":"none","mediaType":"image"} -->
-<div class="wp-block-media-text"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="my alt"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="my alt"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">Content</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"mediaType":"image","imageFill":true} -->
-<div class="wp-block-media-text alignwide is-image-fill">
+<div class="wp-block-media-text alignwide is-image-fill is-stacked-on-mobile">
 	<figure class="wp-block-media-text__media"
 		style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%">
 		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k="
@@ -10,4 +10,4 @@
 		<!-- /wp:paragraph -->
 	</div>
 </div>
-<!-- /wp:media-text -->
+<!-- /wp:media-text -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json
@@ -10,7 +10,7 @@
             "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
             "mediaType": "image",
             "mediaWidth": 50,
-            "isStackedOnMobile": false,
+            "isStackedOnMobile": true,
             "imageFill": true
         },
         "innerBlocks": [
@@ -28,6 +28,6 @@
                 "originalContent": "<p class=\"has-large-font-size\">My Content</p>"
             }
         ],
-        "originalContent": "<div class=\"wp-block-media-text alignwide is-image-fill\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></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-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>"
     }
 ]
diff --git a/...2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json b/...2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
@@ -19,11 +19,20 @@
                 ]
             }
         ],
-        "innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></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-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></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-image-fill\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+            "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></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/...ests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html b/...ests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"mediaType":"image","imageFill":true} -->
-<div class="wp-block-media-text alignwide is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%"><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"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%"><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 -->