From 793d32601834d6acf7280a61f7d060ddd3aa2429 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= <mail@sgomes.com>
Date: Wed, 4 Sep 2024 15:13:08 +0100
Subject: [PATCH] Media & Text: don't use background-image (#64981)

* media-text block: don't use background-image

* Add PR link to deprecated.js for future reference

* Fix PHP indentation

* Fix inconsistencies in some fixtures after markup changes

* Update PHP tests to match new expected render

* Add back old fixtures as new deprecated fixtures

* Improve deprecation comment wording in styles

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>

* Remove 'not contains' checks from PHP tests

* Rename new CSS class to is-image-fill-element

---------

Co-authored-by: sgomes <sergiomdgomes@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: skorasaurus <skorasaurus@git.wordpress.org>
---
 .../src/media-text/deprecated.js              | 162 +++++++++++++++++-
 packages/block-library/src/media-text/edit.js |  10 +-
 .../block-library/src/media-text/editor.scss  |   4 +-
 .../src/media-text/image-fill.js              |  11 ++
 .../block-library/src/media-text/index.php    |  96 ++++++-----
 .../src/media-text/media-container.js         |  41 +++--
 .../src/media-text/media-container.native.js  |   2 -
 packages/block-library/src/media-text/save.js |  22 +--
 .../block-library/src/media-text/style.scss   |  21 +++
 .../src/media-text/test/image-fill.js         |  19 ++
 .../src/media-text/test/media-container.js    |  24 ---
 .../blocks/render-block-media-text-test.php   |  28 ++-
 ..._media-text__deprecated-v5.serialized.html |   2 +-
 ...v7-image-fill-no-focal-point-selected.html |  13 ++
 ...v7-image-fill-no-focal-point-selected.json |  29 ++++
 ...e-fill-no-focal-point-selected.parsed.json |  29 ++++
 ...ll-no-focal-point-selected.serialized.html |   5 +
 ...-image-fill-with-focal-point-selected.html |  13 ++
 ...-image-fill-with-focal-point-selected.json |  33 ++++
 ...fill-with-focal-point-selected.parsed.json |  33 ++++
 ...-with-focal-point-selected.serialized.html |   5 +
 .../core__media-text__deprecated-v7.html      |  13 ++
 .../core__media-text__deprecated-v7.json      |  30 ++++
 ...ore__media-text__deprecated-v7.parsed.json |  29 ++++
 ..._media-text__deprecated-v7.serialized.html |   5 +
 ...t__image-fill-no-focal-point-selected.html |   9 +-
 ...t__image-fill-no-focal-point-selected.json |   5 +-
 ...e-fill-no-focal-point-selected.parsed.json |   5 +-
 ...ll-no-focal-point-selected.serialized.html |   2 +-
 ..._image-fill-with-focal-point-selected.html |   9 +-
 ..._image-fill-with-focal-point-selected.json |   5 +-
 ...fill-with-focal-point-selected.parsed.json |   5 +-
 ...-with-focal-point-selected.serialized.html |   2 +-
 33 files changed, 575 insertions(+), 146 deletions(-)
 create mode 100644 packages/block-library/src/media-text/image-fill.js
 create mode 100644 packages/block-library/src/media-text/test/image-fill.js
 delete mode 100644 packages/block-library/src/media-text/test/media-container.js
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7.html
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7.json
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html

diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index 1cd1472f876c05..54c6f863311ffe 100644
--- a/packages/block-library/src/media-text/deprecated.js
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -30,7 +30,7 @@ const v1ToV5ImageFillStyles = ( url, focalPoint ) => {
 		: {};
 };
 
-const v6ImageFillStyles = ( url, focalPoint ) => {
+const v6ToV7ImageFillStyles = ( url, focalPoint ) => {
 	return url
 		? {
 				backgroundImage: `url(${ url })`,
@@ -198,6 +198,20 @@ const v6Attributes = {
 	},
 };
 
+const v7Attributes = {
+	...v6Attributes,
+	align: {
+		type: 'string',
+		// v7 changed the default for the `align` attribute.
+		default: 'none',
+	},
+	// New attribute.
+	useFeaturedImage: {
+		type: 'boolean',
+		default: false,
+	},
+};
+
 const v4ToV5Supports = {
 	anchor: true,
 	align: [ 'wide', 'full' ],
@@ -237,6 +251,148 @@ const v6Supports = {
 	},
 };
 
+const v7Supports = {
+	...v6Supports,
+	__experimentalBorder: {
+		color: true,
+		radius: true,
+		style: true,
+		width: true,
+		__experimentalDefaultControls: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+		},
+	},
+	color: {
+		gradients: true,
+		heading: true,
+		link: true,
+		__experimentalDefaultControls: {
+			background: true,
+			text: true,
+		},
+	},
+	interactivity: {
+		clientNavigation: true,
+	},
+};
+
+// Version with 'none' as the default alignment.
+// See: https://github.com/WordPress/gutenberg/pull/64981
+const v7 = {
+	attributes: v7Attributes,
+	supports: v7Supports,
+	usesContext: [ 'postId', 'postType' ],
+	save( { attributes } ) {
+		const {
+			isStackedOnMobile,
+			mediaAlt,
+			mediaPosition,
+			mediaType,
+			mediaUrl,
+			mediaWidth,
+			mediaId,
+			verticalAlignment,
+			imageFill,
+			focalPoint,
+			linkClass,
+			href,
+			linkTarget,
+			rel,
+		} = attributes;
+		const mediaSizeSlug =
+			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+		const newRel = ! rel ? undefined : rel;
+
+		const imageClasses = clsx( {
+			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
+			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
+		} );
+
+		let image = mediaUrl ? (
+			<img
+				src={ mediaUrl }
+				alt={ mediaAlt }
+				className={ imageClasses || null }
+			/>
+		) : null;
+
+		if ( href ) {
+			image = (
+				<a
+					className={ linkClass }
+					href={ href }
+					target={ linkTarget }
+					rel={ newRel }
+				>
+					{ image }
+				</a>
+			);
+		}
+
+		const mediaTypeRenders = {
+			image: () => image,
+			video: () => <video controls src={ mediaUrl } />,
+		};
+		const className = clsx( {
+			'has-media-on-the-right': 'right' === mediaPosition,
+			'is-stacked-on-mobile': isStackedOnMobile,
+			[ `is-vertically-aligned-${ verticalAlignment }` ]:
+				verticalAlignment,
+			'is-image-fill': imageFill,
+		} );
+		const backgroundStyles = imageFill
+			? v6ToV7ImageFillStyles( mediaUrl, focalPoint )
+			: {};
+
+		let gridTemplateColumns;
+		if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+			gridTemplateColumns =
+				'right' === mediaPosition
+					? `auto ${ mediaWidth }%`
+					: `${ mediaWidth }% auto`;
+		}
+		const style = {
+			gridTemplateColumns,
+		};
+
+		if ( 'right' === mediaPosition ) {
+			return (
+				<div { ...useBlockProps.save( { className, style } ) }>
+					<div
+						{ ...useInnerBlocksProps.save( {
+							className: 'wp-block-media-text__content',
+						} ) }
+					/>
+					<figure
+						className="wp-block-media-text__media"
+						style={ backgroundStyles }
+					>
+						{ ( mediaTypeRenders[ mediaType ] || noop )() }
+					</figure>
+				</div>
+			);
+		}
+		return (
+			<div { ...useBlockProps.save( { className, style } ) }>
+				<figure
+					className="wp-block-media-text__media"
+					style={ backgroundStyles }
+				>
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-media-text__content',
+					} ) }
+				/>
+			</div>
+		);
+	},
+};
+
 // Version with wide as the default alignment.
 // See: https://github.com/WordPress/gutenberg/pull/48404
 const v6 = {
@@ -301,7 +457,7 @@ const v6 = {
 			'is-image-fill': imageFill,
 		} );
 		const backgroundStyles = imageFill
-			? v6ImageFillStyles( mediaUrl, focalPoint )
+			? v6ToV7ImageFillStyles( mediaUrl, focalPoint )
 			: {};
 
 		let gridTemplateColumns;
@@ -902,4 +1058,4 @@ const v1 = {
 	},
 };
 
-export default [ v6, v5, v4, v3, v2, v1 ];
+export default [ v7, v6, v5, v4, v3, v2, v1 ];
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 2c020506dc889c..a946a499b26f21 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -213,11 +213,11 @@ function MediaTextEdit( {
 		[ isSelected, mediaId ]
 	);
 
-	const refMediaContainer = useRef();
+	const refMedia = useRef();
 	const imperativeFocalPointPreview = ( value ) => {
-		const { style } = refMediaContainer.current.resizable;
+		const { style } = refMedia.current;
 		const { x, y } = value;
-		style.backgroundPosition = `${ x * 100 }% ${ y * 100 }%`;
+		style.objectPosition = `${ x * 100 }% ${ y * 100 }%`;
 	};
 
 	const [ temporaryMediaWidth, setTemporaryMediaWidth ] = useState( null );
@@ -243,7 +243,7 @@ function MediaTextEdit( {
 		'is-selected': isSelected,
 		'is-stacked-on-mobile': isStackedOnMobile,
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
-		'is-image-fill': imageFill,
+		'is-image-fill-element': imageFill,
 	} );
 	const widthString = `${ temporaryMediaWidth || mediaWidth }%`;
 	const gridTemplateColumns =
@@ -480,7 +480,7 @@ function MediaTextEdit( {
 					onSelectMedia={ onSelectMedia }
 					onWidthChange={ onWidthChange }
 					commitWidthChange={ commitWidthChange }
-					ref={ refMediaContainer }
+					refMedia={ refMedia }
 					enableResize={ blockEditingMode === 'default' }
 					toggleUseFeaturedImage={ toggleUseFeaturedImage }
 					{ ...{
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index b417fb951e99d0..639ceaed8ea99c 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -27,7 +27,9 @@
 }
 
 .wp-block-media-text.is-image-fill .editor-media-container__resizer,
-.wp-block-media-text.is-image-fill .components-placeholder.has-illustration {
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration,
+.wp-block-media-text.is-image-fill-element .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill-element .components-placeholder.has-illustration {
 	// The resizer sets an inline height but for the image fill we set it to full height.
 	height: 100% !important;
 }
diff --git a/packages/block-library/src/media-text/image-fill.js b/packages/block-library/src/media-text/image-fill.js
new file mode 100644
index 00000000000000..c277c49b5c310b
--- /dev/null
+++ b/packages/block-library/src/media-text/image-fill.js
@@ -0,0 +1,11 @@
+export function imageFillStyles( url, focalPoint ) {
+	return url
+		? {
+				objectPosition: focalPoint
+					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
+							focalPoint.y * 100
+					  ) }%`
+					: `50% 50%`,
+		  }
+		: {};
+}
diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php
index 87be164a04bb99..b65137b150ba53 100644
--- a/packages/block-library/src/media-text/index.php
+++ b/packages/block-library/src/media-text/index.php
@@ -29,15 +29,32 @@ function render_block_core_media_text( $attributes, $content ) {
 		return $content;
 	}
 
+	$has_media_on_right = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition'];
+	$image_fill         = isset( $attributes['imageFill'] ) && $attributes['imageFill'];
+	$focal_point        = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%';
+	$unique_id          = 'wp-block-media-text__media-' . wp_unique_id();
+
+	$block_tag_processor = new WP_HTML_Tag_Processor( $content );
+	$block_query         = array(
+		'tag_name'   => 'div',
+		'class_name' => 'wp-block-media-text',
+	);
+
+	while ( $block_tag_processor->next_tag( $block_query ) ) {
+		if ( $image_fill ) {
+			// The markup below does not work with the deprecated `is-image-fill` class.
+			$block_tag_processor->remove_class( 'is-image-fill' );
+			$block_tag_processor->add_class( 'is-image-fill-element' );
+		}
+	}
+
+	$content = $block_tag_processor->get_updated_html();
+
 	$media_tag_processor   = new WP_HTML_Tag_Processor( $content );
 	$wrapping_figure_query = array(
 		'tag_name'   => 'figure',
 		'class_name' => 'wp-block-media-text__media',
 	);
-	$has_media_on_right    = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition'];
-	$image_fill            = isset( $attributes['imageFill'] ) && $attributes['imageFill'];
-	$focal_point           = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%';
-	$unique_id             = 'wp-block-media-text__media-' . wp_unique_id();
 
 	if ( $has_media_on_right ) {
 		// Loop through all the figure tags and set a bookmark on the last figure tag.
@@ -46,59 +63,52 @@ function render_block_core_media_text( $attributes, $content ) {
 		}
 		if ( $media_tag_processor->has_bookmark( 'last_figure' ) ) {
 			$media_tag_processor->seek( 'last_figure' );
-			if ( $image_fill ) {
-				$media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
-			} else {
-				// Insert a unique ID to identify the figure tag.
-				$media_tag_processor->set_attribute( 'id', $unique_id );
-			}
+			// Insert a unique ID to identify the figure tag.
+			$media_tag_processor->set_attribute( 'id', $unique_id );
 		}
 	} else {
 		if ( $media_tag_processor->next_tag( $wrapping_figure_query ) ) {
-			if ( $image_fill ) {
-				$media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
-			} else {
-				// Insert a unique ID to identify the figure tag.
-				$media_tag_processor->set_attribute( 'id', $unique_id );
-			}
+			// Insert a unique ID to identify the figure tag.
+			$media_tag_processor->set_attribute( 'id', $unique_id );
 		}
 	}
 
 	$content = $media_tag_processor->get_updated_html();
 
-	// If the image is not set to fill, add the image tag inside the figure tag,
-	// and update the image attributes in order to display the featured image.
-	if ( ! $image_fill ) {
-		$media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full';
-		$image_tag       = '<img class="wp-block-media-text__featured_image">';
-		$content         = preg_replace(
-			'/(<figure\s+id="' . preg_quote( $unique_id, '/' ) . '"\s+class="wp-block-media-text__media"\s*>)/',
-			'$1' . $image_tag,
-			$content
-		);
+	// Add the image tag inside the figure tag, and update the image attributes
+	// in order to display the featured image.
+	$media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full';
+	$image_tag       = '<img class="wp-block-media-text__featured_image">';
+	$content         = preg_replace(
+		'/(<figure\s+id="' . preg_quote( $unique_id, '/' ) . '"\s+class="wp-block-media-text__media"\s*>)/',
+		'$1' . $image_tag,
+		$content
+	);
 
-		$image_tag_processor = new WP_HTML_Tag_Processor( $content );
+	$image_tag_processor = new WP_HTML_Tag_Processor( $content );
+	if ( $image_tag_processor->next_tag(
+		array(
+			'tag_name' => 'figure',
+			'id'       => $unique_id,
+		)
+	) ) {
+		// The ID is only used to ensure that the correct figure tag is selected,
+		// and can now be removed.
+		$image_tag_processor->remove_attribute( 'id' );
 		if ( $image_tag_processor->next_tag(
 			array(
-				'tag_name' => 'figure',
-				'id'       => $unique_id,
+				'tag_name'   => 'img',
+				'class_name' => 'wp-block-media-text__featured_image',
 			)
 		) ) {
-			// The ID is only used to ensure that the correct figure tag is selected,
-			// and can now be removed.
-			$image_tag_processor->remove_attribute( 'id' );
-			if ( $image_tag_processor->next_tag(
-				array(
-					'tag_name'   => 'img',
-					'class_name' => 'wp-block-media-text__featured_image',
-				)
-			) ) {
-				$image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) );
-				$image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
-				$image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) );
-
-				$content = $image_tag_processor->get_updated_html();
+			$image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) );
+			$image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
+			$image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) );
+			if ( $image_fill ) {
+				$image_tag_processor->set_attribute( 'style', 'object-position:' . $focal_point . ';' );
 			}
+
+			$content = $image_tag_processor->get_updated_html();
 		}
 	}
 
diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
index 986ecad6cc7e69..735aaf73b88aae 100644
--- a/packages/block-library/src/media-text/media-container.js
+++ b/packages/block-library/src/media-text/media-container.js
@@ -22,25 +22,17 @@ import { isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
 import { media as icon } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { imageFillStyles } from './image-fill';
+
 /**
  * Constants
  */
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 const noop = () => {};
 
-export function imageFillStyles( url, focalPoint ) {
-	return url
-		? {
-				backgroundImage: `url(${ url })`,
-				backgroundPosition: focalPoint
-					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
-							focalPoint.y * 100
-					  ) }%`
-					: `50% 50%`,
-		  }
-		: {};
-}
-
 const ResizableBoxContainer = forwardRef(
 	( { isSelected, isStackedOnMobile, ...props }, ref ) => {
 		const isMobile = useViewportMatch( 'small', '<' );
@@ -129,6 +121,7 @@ function MediaContainer( props, ref ) {
 		useFeaturedImage,
 		featuredImageURL,
 		featuredImageAlt,
+		refMedia,
 	} = props;
 
 	const isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl );
@@ -151,7 +144,7 @@ function MediaContainer( props, ref ) {
 			left: enableResize && mediaPosition === 'right',
 		};
 
-		const backgroundStyles =
+		const positionStyles =
 			mediaType === 'image' && imageFill
 				? imageFillStyles( mediaUrl || featuredImageURL, focalPoint )
 				: {};
@@ -159,11 +152,23 @@ function MediaContainer( props, ref ) {
 		const mediaTypeRenderers = {
 			image: () =>
 				useFeaturedImage && featuredImageURL ? (
-					<img src={ featuredImageURL } alt={ featuredImageAlt } />
+					<img
+						ref={ refMedia }
+						src={ featuredImageURL }
+						alt={ featuredImageAlt }
+						style={ positionStyles }
+					/>
 				) : (
-					mediaUrl && <img src={ mediaUrl } alt={ mediaAlt } />
+					mediaUrl && (
+						<img
+							ref={ refMedia }
+							src={ mediaUrl }
+							alt={ mediaAlt }
+							style={ positionStyles }
+						/>
+					)
 				),
-			video: () => <video controls src={ mediaUrl } />,
+			video: () => <video controls ref={ refMedia } src={ mediaUrl } />,
 		};
 
 		return (
@@ -174,7 +179,6 @@ function MediaContainer( props, ref ) {
 					'editor-media-container__resizer',
 					{ 'is-transient': isTemporaryMedia }
 				) }
-				style={ backgroundStyles }
 				size={ { width: mediaWidth + '%' } }
 				minWidth="10%"
 				maxWidth="100%"
@@ -203,6 +207,7 @@ function MediaContainer( props, ref ) {
 				{ ! featuredImageURL && useFeaturedImage && (
 					<Placeholder
 						className="wp-block-media-text--placeholder-image"
+						style={ positionStyles }
 						withIllustration
 					/>
 				) }
diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js
index eaee027c061856..3bf4fbf25d8f2a 100644
--- a/packages/block-library/src/media-text/media-container.native.js
+++ b/packages/block-library/src/media-text/media-container.native.js
@@ -44,8 +44,6 @@ const ICON_TYPE = {
 	RETRY: 'retry',
 };
 
-export { imageFillStyles } from './media-container.js';
-
 class MediaContainer extends Component {
 	constructor() {
 		super( ...arguments );
diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js
index 5bf9517adae669..3e660d94e789ee 100644
--- a/packages/block-library/src/media-text/save.js
+++ b/packages/block-library/src/media-text/save.js
@@ -11,7 +11,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { imageFillStyles } from './media-container';
+import { imageFillStyles } from './image-fill';
 import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
 
 const DEFAULT_MEDIA_WIDTH = 50;
@@ -42,11 +42,16 @@ export default function save( { attributes } ) {
 		[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 	} );
 
+	const positionStyles = imageFill
+		? imageFillStyles( mediaUrl, focalPoint )
+		: {};
+
 	let image = mediaUrl ? (
 		<img
 			src={ mediaUrl }
 			alt={ mediaAlt }
 			className={ imageClasses || null }
+			style={ positionStyles }
 		/>
 	) : null;
 
@@ -71,11 +76,8 @@ export default function save( { attributes } ) {
 		'has-media-on-the-right': 'right' === mediaPosition,
 		'is-stacked-on-mobile': isStackedOnMobile,
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
-		'is-image-fill': imageFill,
+		'is-image-fill-element': imageFill,
 	} );
-	const backgroundStyles = imageFill
-		? imageFillStyles( mediaUrl, focalPoint )
-		: {};
 
 	let gridTemplateColumns;
 	if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
@@ -96,10 +98,7 @@ export default function save( { attributes } ) {
 						className: 'wp-block-media-text__content',
 					} ) }
 				/>
-				<figure
-					className="wp-block-media-text__media"
-					style={ backgroundStyles }
-				>
+				<figure className="wp-block-media-text__media">
 					{ ( mediaTypeRenders[ mediaType ] || noop )() }
 				</figure>
 			</div>
@@ -107,10 +106,7 @@ export default function save( { attributes } ) {
 	}
 	return (
 		<div { ...useBlockProps.save( { className, style } ) }>
-			<figure
-				className="wp-block-media-text__media"
-				style={ backgroundStyles }
-			>
+			<figure className="wp-block-media-text__media">
 				{ ( mediaTypeRenders[ mediaType ] || noop )() }
 			</figure>
 			<div
diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index de020611b36ced..0f7a34f05548c0 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -80,6 +80,7 @@
 	vertical-align: middle;
 }
 
+/* `is-image-fill` is deprecated and the styles are kept for backwards compatibility. */
 .wp-block-media-text.is-image-fill > .wp-block-media-text__media {
 	height: 100%;
 	min-height: 250px;
@@ -102,6 +103,26 @@
 	clip: rect(0, 0, 0, 0);
 	border: 0;
 }
+
+/* Image fill for versions 8 and onwards */
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
+	position: relative;
+	height: 100%;
+	min-height: 250px;
+}
+
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a {
+	display: block;
+	height: 100%;
+}
+
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
 /*
 * Here we here not able to use a mobile first CSS approach.
 * Custom widths are set using inline styles, and on mobile,
diff --git a/packages/block-library/src/media-text/test/image-fill.js b/packages/block-library/src/media-text/test/image-fill.js
new file mode 100644
index 00000000000000..4862fcbfb02453
--- /dev/null
+++ b/packages/block-library/src/media-text/test/image-fill.js
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import { imageFillStyles } from '../image-fill';
+
+describe( 'imageFillStyles()', () => {
+	it( 'should return centered object position', () => {
+		const { objectPosition } = imageFillStyles( 'image.jpg' );
+		expect( objectPosition ).toBe( '50% 50%' );
+	} );
+
+	it( 'should return custom object position', () => {
+		const { objectPosition } = imageFillStyles( 'image.jpg', {
+			x: 0.56,
+			y: 0.57,
+		} );
+		expect( objectPosition ).toBe( '56% 57%' );
+	} );
+} );
diff --git a/packages/block-library/src/media-text/test/media-container.js b/packages/block-library/src/media-text/test/media-container.js
deleted file mode 100644
index 582ec2be8d5ad8..00000000000000
--- a/packages/block-library/src/media-text/test/media-container.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Internal dependencies
- */
-import { imageFillStyles } from '../media-container';
-
-describe( 'imageFillStyles()', () => {
-	it( 'should return image url', () => {
-		const { backgroundImage } = imageFillStyles( 'image.jpg' );
-		expect( backgroundImage ).toBe( 'url(image.jpg)' );
-	} );
-
-	it( 'should return centered background position', () => {
-		const { backgroundPosition } = imageFillStyles( 'image.jpg' );
-		expect( backgroundPosition ).toBe( '50% 50%' );
-	} );
-
-	it( 'should return custom background position', () => {
-		const { backgroundPosition } = imageFillStyles( 'image.jpg', {
-			x: 0.56,
-			y: 0.57,
-		} );
-		expect( backgroundPosition ).toBe( '56% 57%' );
-	} );
-} );
diff --git a/phpunit/blocks/render-block-media-text-test.php b/phpunit/blocks/render-block-media-text-test.php
index 94c184408c89fb..f5b67f0a8dc9b7 100644
--- a/phpunit/blocks/render-block-media-text-test.php
+++ b/phpunit/blocks/render-block-media-text-test.php
@@ -81,15 +81,14 @@ public function test_render_block_core_media_text_featured_image() {
 		$rendered   = gutenberg_render_block_core_media_text( $attributes, $content );
 		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
 
-		// Assert that the rendered block contains the featured image as the background-image url,
-		// and not the image element, when image fill is true.
+		// Assert that the rendered block contains the featured image as an image element,
+		// when image fill is true.
 		$attributes = array(
 			'useFeaturedImage' => true,
 			'imageFill'        => true,
 		);
 		$rendered   = gutenberg_render_block_core_media_text( $attributes, $content );
-		$this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered );
-		$this->assertStringNotContainsString( '<img', $rendered );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
 	}
 
 	/**
@@ -107,15 +106,14 @@ public function test_render_block_core_media_text_featured_image_nested() {
 		$rendered   = gutenberg_render_block_core_media_text( $attributes, $content );
 		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
 
-		// Assert that the rendered block contains the featured image as the background-image url,
-		// and not the image element, when image fill is true.
+		// Assert that the rendered block contains the featured image as an image element,
+		// when image fill is true.
 		$attributes = array(
 			'useFeaturedImage' => true,
 			'imageFill'        => true,
 		);
 		$rendered   = gutenberg_render_block_core_media_text( $attributes, $content );
-		$this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered );
-		$this->assertStringNotContainsString( '<img', $rendered );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
 	}
 
 	/**
@@ -134,16 +132,15 @@ public function test_render_block_core_media_text_featured_image_media_on_right(
 		$rendered   = gutenberg_render_block_core_media_text( $attributes, $content );
 		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
 
-		// Assert that the rendered block contains the featured image as the background-image url,
-		// and not the image element, when image fill is true and the media is on the right.
+		// Assert that the rendered block contains the featured image as an image element,
+		// when image fill is true and the media is on the right.
 		$attributes = array(
 			'useFeaturedImage' => true,
 			'mediaPosition'    => 'right',
 			'imageFill'        => true,
 		);
 		$rendered   = gutenberg_render_block_core_media_text( $attributes, $content );
-		$this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered );
-		$this->assertStringNotContainsString( '<img', $rendered );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
 	}
 
 	/**
@@ -164,8 +161,8 @@ public function test_render_block_core_media_text_featured_image_media_on_right_
 		$rendered = gutenberg_render_block_core_media_text( $attributes, $content );
 		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
 
-		// Assert that the rendered block contains the featured image as the background-image url,
-		// and not the image element, when image fill is true and the media is on the right.
+		// Assert that the rendered block contains the featured image as an image element,
+		// when image fill is true and the media is on the right.
 		$attributes = array(
 			'useFeaturedImage' => true,
 			'mediaPosition'    => 'right',
@@ -173,7 +170,6 @@ public function test_render_block_core_media_text_featured_image_media_on_right_
 		);
 
 		$rendered = gutenberg_render_block_core_media_text( $attributes, $content );
-		$this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered );
-		$this->assertStringNotContainsString( '<img', $rendered );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
 	}
 }
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html
index 7d7a76c730b273..8c88b8b67795d7 100644
--- a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":"0.56","y":"0.57"}} -->
-<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:56% 57%"><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…"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:56% 57%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} -->
 <p>My Content</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html
new file mode 100644
index 00000000000000..22a2a3e18f74f6
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html
@@ -0,0 +1,13 @@
+<!-- wp:media-text {"mediaType":"image","imageFill":true} -->
+<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="
+			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/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json
new file mode 100644
index 00000000000000..bf195f6fa1c953
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json
@@ -0,0 +1,29 @@
+[
+	{
+		"name": "core/media-text",
+		"isValid": true,
+		"attributes": {
+			"align": "wide",
+			"mediaAlt": "My alt text",
+			"mediaPosition": "left",
+			"mediaType": "image",
+			"mediaWidth": 50,
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
+			"imageFill": true
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "My Content",
+					"dropCap": false,
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json
new file mode 100644
index 00000000000000..2e878c98a18a89
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json
@@ -0,0 +1,29 @@
+[
+	{
+		"blockName": "core/media-text",
+		"attrs": {
+			"mediaType": "image",
+			"imageFill": true
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t",
+				"innerContent": [
+					"\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t"
+				]
+			}
+		],
+		"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 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"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html
new file mode 100644
index 00000000000000..b9d5e14f90277c
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></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/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html
new file mode 100644
index 00000000000000..47a0f0c126fa70
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html
@@ -0,0 +1,13 @@
+<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
+<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:84% 84%">
+		<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/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json
new file mode 100644
index 00000000000000..986e049099541f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json
@@ -0,0 +1,33 @@
+[
+	{
+		"name": "core/media-text",
+		"isValid": true,
+		"attributes": {
+			"align": "wide",
+			"mediaAlt": "My alt text",
+			"mediaPosition": "left",
+			"mediaType": "image",
+			"mediaWidth": 50,
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
+			"imageFill": true,
+			"focalPoint": {
+				"x": 0.84,
+				"y": 0.84
+			}
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "My Content",
+					"dropCap": false,
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json
new file mode 100644
index 00000000000000..175fbad27927b7
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json
@@ -0,0 +1,33 @@
+[
+	{
+		"blockName": "core/media-text",
+		"attrs": {
+			"mediaType": "image",
+			"imageFill": true,
+			"focalPoint": {
+				"x": 0.84,
+				"y": 0.84
+			}
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t",
+				"innerContent": [
+					"\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t"
+				]
+			}
+		],
+		"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:84% 84%\">\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 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:84% 84%\">\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"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html
new file mode 100644
index 00000000000000..4b001f4f27c8ad
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:84% 84%"/></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/test/integration/fixtures/blocks/core__media-text__deprecated-v7.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.html
new file mode 100644
index 00000000000000..92b4b4d2754133
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.html
@@ -0,0 +1,13 @@
+<!-- wp:media-text {"mediaType":"image","imageFill":true} -->
+<div class="wp-block-media-text 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="
+			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/test/integration/fixtures/blocks/core__media-text__deprecated-v7.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.json
new file mode 100644
index 00000000000000..a6f0dff927874d
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.json
@@ -0,0 +1,30 @@
+[
+	{
+		"name": "core/media-text",
+		"isValid": true,
+		"attributes": {
+			"align": "none",
+			"mediaAlt": "My alt text",
+			"mediaPosition": "left",
+			"mediaType": "image",
+			"mediaWidth": 50,
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
+			"imageFill": true,
+			"useFeaturedImage": false
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "My Content",
+					"dropCap": false,
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json
new file mode 100644
index 00000000000000..49b392d4231384
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json
@@ -0,0 +1,29 @@
+[
+	{
+		"blockName": "core/media-text",
+		"attrs": {
+			"mediaType": "image",
+			"imageFill": true
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t",
+				"innerContent": [
+					"\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-media-text 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 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"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html
new file mode 100644
index 00000000000000..b44ebe1c4ee896
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"mediaType":"image","imageFill":true} -->
+<div class="wp-block-media-text is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></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/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html
index 22a2a3e18f74f6..30667e0dd24dc5 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html
@@ -1,9 +1,8 @@
-<!-- wp:media-text {"mediaType":"image","imageFill":true} -->
-<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%">
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true} -->
+<div class="wp-block-media-text alignwide is-image-fill-element 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 text" /></figure>
+			alt="My alt text" style="object-position:50% 50%"/></figure>
 	<div class="wp-block-media-text__content">
 		<!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 		<p class="has-large-font-size">My Content</p>
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json
index bf195f6fa1c953..bb57f08ad5cfa7 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json
@@ -6,11 +6,12 @@
 			"align": "wide",
 			"mediaAlt": "My alt text",
 			"mediaPosition": "left",
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 			"mediaType": "image",
 			"mediaWidth": 50,
 			"isStackedOnMobile": true,
-			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
-			"imageFill": true
+			"imageFill": true,
+			"useFeaturedImage": false
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
index 2e878c98a18a89..674b3724af8e88 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
@@ -2,6 +2,7 @@
 	{
 		"blockName": "core/media-text",
 		"attrs": {
+			"align": "wide",
 			"mediaType": "image",
 			"imageFill": true
 		},
@@ -19,9 +20,9 @@
 				]
 			}
 		],
-		"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",
+		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill-element 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=\"\n\t\t\talt=\"My alt text\" style=\"object-position:50% 50%\"/></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 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<div class=\"wp-block-media-text alignwide is-image-fill-element 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=\"\n\t\t\talt=\"My alt text\" style=\"object-position:50% 50%\"/></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
index 40382e884f618e..b9d5e14f90277c 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true} -->
-<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"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></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/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
index 47a0f0c126fa70..60e2cc7be572d4 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
@@ -1,9 +1,8 @@
-<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
-<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:84% 84%">
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
+<div class="wp-block-media-text alignwide is-image-fill-element 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 text" /></figure>
+			alt="My alt text" style="object-position:84% 84%" /></figure>
 	<div class="wp-block-media-text__content">
 		<!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 		<p class="has-large-font-size">My Content</p>
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
index 986e049099541f..0de71c867457ef 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
@@ -6,15 +6,16 @@
 			"align": "wide",
 			"mediaAlt": "My alt text",
 			"mediaPosition": "left",
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 			"mediaType": "image",
 			"mediaWidth": 50,
 			"isStackedOnMobile": true,
-			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 			"imageFill": true,
 			"focalPoint": {
 				"x": 0.84,
 				"y": 0.84
-			}
+			},
+			"useFeaturedImage": false
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
index 175fbad27927b7..92bd57443a1c34 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
@@ -2,6 +2,7 @@
 	{
 		"blockName": "core/media-text",
 		"attrs": {
+			"align": "wide",
 			"mediaType": "image",
 			"imageFill": true,
 			"focalPoint": {
@@ -23,9 +24,9 @@
 				]
 			}
 		],
-		"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:84% 84%\">\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-element 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=\"\n\t\t\talt=\"My alt text\" style=\"object-position:84% 84%\" /></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 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:84% 84%\">\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-element 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=\"\n\t\t\talt=\"My alt text\" style=\"object-position:84% 84%\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
index 9445d0ad259b22..4b001f4f27c8ad 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
-<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:84% 84%"><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-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:84% 84%"/></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 -->