From 3957907ad3f13c9e7127d9a96f040c8376179ca7 Mon Sep 17 00:00:00 2001
From: "Michael P. Pfeiffer" <michael@cssconf.eu>
Date: Thu, 14 Mar 2019 16:14:12 -0500
Subject: [PATCH 01/13] Add image fill option to Media & Text block

---
 .../src/media-text/deprecated.js              | 193 ++++++++++++++++++
 packages/block-library/src/media-text/edit.js |  22 +-
 .../block-library/src/media-text/editor.scss  |   5 +
 .../block-library/src/media-text/index.js     |  69 ++-----
 .../src/media-text/media-container.js         |  26 ++-
 .../block-library/src/media-text/style.scss   |  11 +
 6 files changed, 271 insertions(+), 55 deletions(-)
 create mode 100644 packages/block-library/src/media-text/deprecated.js

diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
new file mode 100644
index 0000000000000..ce5056af6dd72
--- /dev/null
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -0,0 +1,193 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	InnerBlocks,
+	getColorClassName,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { DEFAULT_MEDIA_WIDTH } from './index';
+
+export default [
+	{
+		attributes: {
+			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,
+			},
+		},
+		save( { attributes } ) {
+			const {
+				backgroundColor,
+				customBackgroundColor,
+				isStackedOnMobile,
+				mediaAlt,
+				mediaPosition,
+				mediaType,
+				mediaUrl,
+				mediaWidth,
+				mediaId,
+			} = 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,
+			} );
+			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" >
+						{ ( mediaTypeRenders[ mediaType ] || noop )() }
+					</figure>
+					<div className="wp-block-media-text__content">
+						<InnerBlocks.Content />
+					</div>
+				</div>
+			);
+		},
+	},
+	{
+		attributes: {
+			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,
+			},
+		},
+		save( { attributes } ) {
+			const {
+				backgroundColor,
+				customBackgroundColor,
+				isStackedOnMobile,
+				mediaAlt,
+				mediaPosition,
+				mediaType,
+				mediaUrl,
+				mediaWidth,
+			} = attributes;
+			const mediaTypeRenders = {
+				image: () => <img src={ mediaUrl } alt={ mediaAlt } />,
+				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,
+			} );
+
+			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" >
+						{ ( mediaTypeRenders[ mediaType ] || noop )() }
+					</figure>
+					<div className="wp-block-media-text__content">
+						<InnerBlocks.Content />
+					</div>
+				</div>
+			);
+		},
+	},
+];
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 60be2bdc3c87e..fa99c5b2d2d61 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -23,6 +23,7 @@ import {
 	ToggleControl,
 	Toolbar,
 	ExternalLink,
+	FocalPointPicker,
 } from '@wordpress/components';
 /**
  * Internal dependencies
@@ -99,7 +100,7 @@ class MediaTextEdit extends Component {
 
 	renderMediaArea() {
 		const { attributes } = this.props;
-		const { mediaAlt, mediaId, mediaPosition, mediaType, mediaUrl, mediaWidth } = attributes;
+		const { mediaAlt, mediaId, mediaPosition, mediaType, mediaUrl, mediaWidth, imageFill, focalPoint } = attributes;
 
 		return (
 			<MediaContainer
@@ -107,7 +108,7 @@ class MediaTextEdit extends Component {
 				onSelectMedia={ this.onSelectMedia }
 				onWidthChange={ this.onWidthChange }
 				commitWidthChange={ this.commitWidthChange }
-				{ ...{ mediaAlt, mediaId, mediaType, mediaUrl, mediaPosition, mediaWidth } }
+				{ ...{ mediaAlt, mediaId, mediaType, mediaUrl, mediaPosition, mediaWidth, imageFill, focalPoint } }
 			/>
 		);
 	}
@@ -128,6 +129,9 @@ class MediaTextEdit extends Component {
 			mediaType,
 			mediaWidth,
 			verticalAlignment,
+			mediaUrl,
+			imageFill,
+			focalPoint,
 		} = attributes;
 		const temporaryMediaWidth = this.state.mediaWidth;
 		const classNames = classnames( className, {
@@ -136,6 +140,7 @@ class MediaTextEdit extends Component {
 			[ backgroundColor.class ]: backgroundColor.class,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+			'is-image-fill': imageFill,
 		} );
 		const widthString = `${ temporaryMediaWidth || mediaWidth }%`;
 		const style = {
@@ -173,6 +178,19 @@ class MediaTextEdit extends Component {
 						isStackedOnMobile: ! isStackedOnMobile,
 					} ) }
 				/>
+				{ mediaType === 'image' && ( <ToggleControl
+					label={ __( 'Let image fill the entire column' ) }
+					checked={ imageFill }
+					onChange={ () => setAttributes( {
+						imageFill: ! imageFill,
+					} ) }
+				/> ) }
+				{ imageFill && ( <FocalPointPicker
+					label={ __( 'Focal Point Picker' ) }
+					url={ mediaUrl }
+					value={ focalPoint }
+					onChange={ ( value ) => setAttributes( { focalPoint: value } ) }
+				/> ) }
 				{ mediaType === 'image' && ( <TextareaControl
 					label={ __( 'Alt Text (Alternative Text)' ) }
 					value={ mediaAlt }
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index 4f6b2055db6d1..3d0ad0361bd94 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -22,6 +22,11 @@
 	width: 100% !important;
 }
 
+.wp-block-media-text.is-image-fill .editor-media-container__resizer {
+	// The resizer sets an inline height but for the image fill we set it to full height.
+	height: 100% !important;
+}
+
 .wp-block-media-text .block-editor-inner-blocks {
 	word-break: break-word;
 	grid-area: media-text-content;
diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
index 9dd26fdb4b7af..02a38d52141fb 100644
--- a/packages/block-library/src/media-text/index.js
+++ b/packages/block-library/src/media-text/index.js
@@ -19,8 +19,10 @@ import { __ } from '@wordpress/i18n';
  */
 import edit from './edit';
 import icon from './icon';
+import deprecated from './deprecated';
+import { imageFillStyles } from './media-container';
 
-const DEFAULT_MEDIA_WIDTH = 50;
+export const DEFAULT_MEDIA_WIDTH = 50;
 
 export const name = 'core/media-text';
 
@@ -51,9 +53,6 @@ const blockAttributes = {
 	},
 	mediaUrl: {
 		type: 'string',
-		source: 'attribute',
-		selector: 'figure video,figure img',
-		attribute: 'src',
 	},
 	mediaType: {
 		type: 'string',
@@ -69,6 +68,13 @@ const blockAttributes = {
 	verticalAlignment: {
 		type: 'string',
 	},
+	imageFill: {
+		type: 'boolean',
+		default: false,
+	},
+	focalPoint: {
+		type: 'object',
+	},
 };
 
 export const settings = {
@@ -160,9 +166,14 @@ export const settings = {
 			mediaWidth,
 			mediaId,
 			verticalAlignment,
+			imageFill,
+			focalPoint,
 		} = attributes;
+		const imageFillStyle = imageFillStyles( mediaUrl, focalPoint );
 		const mediaTypeRenders = {
-			image: () => <img src={ mediaUrl } alt={ mediaAlt } className={ ( mediaId && mediaType === 'image' ) ? `wp-image-${ mediaId }` : null } />,
+			image: () => imageFill ?
+				<div style={ imageFillStyle } ></div> :
+				<img src={ mediaUrl } alt={ mediaAlt } className={ ( mediaId && mediaType === 'image' ) ? `wp-image-${ mediaId }` : null } />,
 			video: () => <video controls src={ mediaUrl } />,
 		};
 		const backgroundClass = getColorClassName( 'background-color', backgroundColor );
@@ -171,6 +182,7 @@ export const settings = {
 			[ backgroundClass ]: backgroundClass,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+			'is-image-fill': imageFill,
 		} );
 
 		let gridTemplateColumns;
@@ -193,50 +205,5 @@ export const settings = {
 		);
 	},
 
-	deprecated: [
-		{
-			attributes: blockAttributes,
-			save( { attributes } ) {
-				const {
-					backgroundColor,
-					customBackgroundColor,
-					isStackedOnMobile,
-					mediaAlt,
-					mediaPosition,
-					mediaType,
-					mediaUrl,
-					mediaWidth,
-				} = attributes;
-				const mediaTypeRenders = {
-					image: () => <img src={ mediaUrl } alt={ mediaAlt } />,
-					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,
-				} );
-
-				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" >
-							{ ( mediaTypeRenders[ mediaType ] || noop )() }
-						</figure>
-						<div className="wp-block-media-text__content">
-							<InnerBlocks.Content />
-						</div>
-					</div>
-				);
-			},
-		},
-	],
+	deprecated,
 };
diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
index a255e37dc6538..7c198d005565d 100644
--- a/packages/block-library/src/media-text/media-container.js
+++ b/packages/block-library/src/media-text/media-container.js
@@ -21,6 +21,15 @@ import icon from './media-container-icon';
  */
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 
+export function imageFillStyles( url, focalPoint ) {
+	return url ?
+		{
+			backgroundImage: `url(${ url })`,
+			backgroundPosition: focalPoint ? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%` : `initial`,
+		} :
+		{};
+}
+
 class MediaContainer extends Component {
 	renderToolbarEditButton() {
 		const { mediaId, onSelectMedia } = this.props;
@@ -57,6 +66,19 @@ class MediaContainer extends Component {
 		);
 	}
 
+	renderImageFill() {
+		const { mediaUrl, className, focalPoint } = this.props;
+		const style = imageFillStyles( mediaUrl, focalPoint );
+		return (
+			<Fragment>
+				{ this.renderToolbarEditButton() }
+				<figure className={ className }>
+					<div style={ style } ></div>
+				</figure>
+			</Fragment>
+		);
+	}
+
 	renderVideo() {
 		const { mediaUrl, className } = this.props;
 		return (
@@ -86,7 +108,7 @@ class MediaContainer extends Component {
 	}
 
 	render() {
-		const { mediaPosition, mediaUrl, mediaType, mediaWidth, commitWidthChange, onWidthChange } = this.props;
+		const { mediaPosition, mediaUrl, mediaType, mediaWidth, imageFill, commitWidthChange, onWidthChange } = this.props;
 		if ( mediaType && mediaUrl ) {
 			const onResize = ( event, direction, elt ) => {
 				onWidthChange( parseInt( elt.style.width ) );
@@ -102,7 +124,7 @@ class MediaContainer extends Component {
 			let mediaElement = null;
 			switch ( mediaType ) {
 				case 'image':
-					mediaElement = this.renderImage();
+					mediaElement = imageFill ? this.renderImageFill() : this.renderImage();
 					break;
 				case 'video':
 					mediaElement = this.renderVideo();
diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index dc1a045c93bb1..5770f4d058055 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -41,6 +41,17 @@
 	vertical-align: middle;
 }
 
+.wp-block-media-text figure > div {
+	width: 100%;
+	height: 100%;
+	min-height: 250px;
+	background-size: cover;
+}
+
+.wp-block-media-text.is-image-fill .wp-block-media-text__media {
+	height: 100%;
+}
+
 /*
 * Here we here not able to use a mobile first CSS approach.
 * Custom widths are set using inline styles, and on mobile,

From d92767067c54cb73ec0cb7c0afe39e8168d476e5 Mon Sep 17 00:00:00 2001
From: "Michael P. Pfeiffer" <michael@cssconf.eu>
Date: Wed, 20 Mar 2019 23:47:09 -0500
Subject: [PATCH 02/13] Update label copy

---
 packages/block-library/src/media-text/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index fa99c5b2d2d61..5096e17ab0922 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -179,7 +179,7 @@ class MediaTextEdit extends Component {
 					} ) }
 				/>
 				{ mediaType === 'image' && ( <ToggleControl
-					label={ __( 'Let image fill the entire column' ) }
+					label={ __( 'Crop image to fill entire column' ) }
 					checked={ imageFill }
 					onChange={ () => setAttributes( {
 						imageFill: ! imageFill,

From a8221bdebc893b18401258ad11568e73680b5cf3 Mon Sep 17 00:00:00 2001
From: "Michael P. Pfeiffer" <michael@cssconf.eu>
Date: Fri, 29 Mar 2019 08:35:54 -0500
Subject: [PATCH 03/13] Move imageFillStyles inline

---
 packages/block-library/src/media-text/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
index 02a38d52141fb..3f387f58b31d9 100644
--- a/packages/block-library/src/media-text/index.js
+++ b/packages/block-library/src/media-text/index.js
@@ -169,10 +169,9 @@ export const settings = {
 			imageFill,
 			focalPoint,
 		} = attributes;
-		const imageFillStyle = imageFillStyles( mediaUrl, focalPoint );
 		const mediaTypeRenders = {
 			image: () => imageFill ?
-				<div style={ imageFillStyle } ></div> :
+				<div style={ imageFillStyles( mediaUrl, focalPoint ) } ></div> :
 				<img src={ mediaUrl } alt={ mediaAlt } className={ ( mediaId && mediaType === 'image' ) ? `wp-image-${ mediaId }` : null } />,
 			video: () => <video controls src={ mediaUrl } />,
 		};

From 7ebbe4b6808e22ea2ec544a73187c43a828e7299 Mon Sep 17 00:00:00 2001
From: "Michael P. Pfeiffer" <michael@cssconf.eu>
Date: Fri, 29 Mar 2019 09:25:07 -0500
Subject: [PATCH 04/13] Use identical semantic structure for both image and
 imageFill

---
 .../block-library/src/media-text/index.js     |  7 +++---
 .../src/media-text/media-container.js         | 22 +++++--------------
 .../block-library/src/media-text/style.scss   |  7 +++---
 3 files changed, 11 insertions(+), 25 deletions(-)

diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
index 3f387f58b31d9..6b4c9449f4c74 100644
--- a/packages/block-library/src/media-text/index.js
+++ b/packages/block-library/src/media-text/index.js
@@ -170,9 +170,7 @@ export const settings = {
 			focalPoint,
 		} = attributes;
 		const mediaTypeRenders = {
-			image: () => imageFill ?
-				<div style={ imageFillStyles( mediaUrl, focalPoint ) } ></div> :
-				<img src={ mediaUrl } alt={ mediaAlt } className={ ( mediaId && mediaType === 'image' ) ? `wp-image-${ mediaId }` : null } />,
+			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 );
@@ -183,6 +181,7 @@ export const settings = {
 			[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 			'is-image-fill': imageFill,
 		} );
+		const backgroundStyles = imageFill ? imageFillStyles( mediaUrl, focalPoint ) : {};
 
 		let gridTemplateColumns;
 		if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
@@ -194,7 +193,7 @@ export const settings = {
 		};
 		return (
 			<div className={ className } style={ style }>
-				<figure className="wp-block-media-text__media" >
+				<figure className="wp-block-media-text__media" style={ backgroundStyles }>
 					{ ( mediaTypeRenders[ mediaType ] || noop )() }
 				</figure>
 				<div className="wp-block-media-text__content">
diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
index 7c198d005565d..706ed12b010d0 100644
--- a/packages/block-library/src/media-text/media-container.js
+++ b/packages/block-library/src/media-text/media-container.js
@@ -55,30 +55,18 @@ class MediaContainer extends Component {
 	}
 
 	renderImage() {
-		const { mediaAlt, mediaUrl, className } = this.props;
+		const { mediaAlt, mediaUrl, className, imageFill, focalPoint } = this.props;
+		const backgroundStyles = imageFill ? imageFillStyles( mediaUrl, focalPoint ) : {};
 		return (
 			<Fragment>
 				{ this.renderToolbarEditButton() }
-				<figure className={ className }>
+				<figure className={ className } style={ backgroundStyles }>
 					<img src={ mediaUrl } alt={ mediaAlt } />
 				</figure>
 			</Fragment>
 		);
 	}
 
-	renderImageFill() {
-		const { mediaUrl, className, focalPoint } = this.props;
-		const style = imageFillStyles( mediaUrl, focalPoint );
-		return (
-			<Fragment>
-				{ this.renderToolbarEditButton() }
-				<figure className={ className }>
-					<div style={ style } ></div>
-				</figure>
-			</Fragment>
-		);
-	}
-
 	renderVideo() {
 		const { mediaUrl, className } = this.props;
 		return (
@@ -108,7 +96,7 @@ class MediaContainer extends Component {
 	}
 
 	render() {
-		const { mediaPosition, mediaUrl, mediaType, mediaWidth, imageFill, commitWidthChange, onWidthChange } = this.props;
+		const { mediaPosition, mediaUrl, mediaType, mediaWidth, commitWidthChange, onWidthChange } = this.props;
 		if ( mediaType && mediaUrl ) {
 			const onResize = ( event, direction, elt ) => {
 				onWidthChange( parseInt( elt.style.width ) );
@@ -124,7 +112,7 @@ class MediaContainer extends Component {
 			let mediaElement = null;
 			switch ( mediaType ) {
 				case 'image':
-					mediaElement = imageFill ? this.renderImageFill() : this.renderImage();
+					mediaElement = this.renderImage();
 					break;
 				case 'video':
 					mediaElement = this.renderVideo();
diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index 5770f4d058055..fad04395e0953 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -41,15 +41,14 @@
 	vertical-align: middle;
 }
 
-.wp-block-media-text figure > div {
-	width: 100%;
+.wp-block-media-text.is-image-fill figure {
 	height: 100%;
 	min-height: 250px;
 	background-size: cover;
 }
 
-.wp-block-media-text.is-image-fill .wp-block-media-text__media {
-	height: 100%;
+.wp-block-media-text.is-image-fill figure > img {
+	display: none;
 }
 
 /*

From f9eec3dfc653aa669cb784cb27f3d4af4fcf9b62 Mon Sep 17 00:00:00 2001
From: "Michael P. Pfeiffer" <michael@cssconf.eu>
Date: Fri, 29 Mar 2019 09:34:36 -0500
Subject: [PATCH 05/13] Reset attributes on onSelectMedia

---
 packages/block-library/src/media-text/edit.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 5096e17ab0922..21acecd13b812 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -78,6 +78,8 @@ class MediaTextEdit extends Component {
 			mediaId: media.id,
 			mediaType,
 			mediaUrl: src || media.url,
+			imageFill: false,
+			focalPoint: {},
 		} );
 	}
 

From 8636fea6adb15f9ddc7ff831194219a4ae9611e3 Mon Sep 17 00:00:00 2001
From: "Michael P. Pfeiffer" <michael@cssconf.eu>
Date: Mon, 1 Apr 2019 08:58:07 -0500
Subject: [PATCH 06/13] Ensure attributes are reset properly

---
 packages/block-library/src/media-text/edit.js  | 2 +-
 packages/block-library/src/media-text/index.js | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 21acecd13b812..31400f1cad65c 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -79,7 +79,7 @@ class MediaTextEdit extends Component {
 			mediaType,
 			mediaUrl: src || media.url,
 			imageFill: false,
-			focalPoint: {},
+			focalPoint: undefined,
 		} );
 	}
 
diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
index 6b4c9449f4c74..486168543464a 100644
--- a/packages/block-library/src/media-text/index.js
+++ b/packages/block-library/src/media-text/index.js
@@ -53,6 +53,9 @@ const blockAttributes = {
 	},
 	mediaUrl: {
 		type: 'string',
+		source: 'attribute',
+		selector: 'figure video,figure img',
+		attribute: 'src',
 	},
 	mediaType: {
 		type: 'string',

From c115077724e8130dd1f74d5165ae17d7e2d179cf Mon Sep 17 00:00:00 2001
From: "Michael P. Pfeiffer" <michael@cssconf.eu>
Date: Mon, 1 Apr 2019 13:05:40 -0500
Subject: [PATCH 07/13] Remove default for imageFill to prevent tests failing

---
 packages/block-library/src/media-text/edit.js  | 2 +-
 packages/block-library/src/media-text/index.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 31400f1cad65c..48e18f2a30f02 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -78,7 +78,7 @@ class MediaTextEdit extends Component {
 			mediaId: media.id,
 			mediaType,
 			mediaUrl: src || media.url,
-			imageFill: false,
+			imageFill: undefined,
 			focalPoint: undefined,
 		} );
 	}
diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
index 486168543464a..3f5988887cc18 100644
--- a/packages/block-library/src/media-text/index.js
+++ b/packages/block-library/src/media-text/index.js
@@ -73,7 +73,6 @@ const blockAttributes = {
 	},
 	imageFill: {
 		type: 'boolean',
-		default: false,
 	},
 	focalPoint: {
 		type: 'object',

From 384ac1619291016f8a3d7d1a7f929b4aab57778c Mon Sep 17 00:00:00 2001
From: "Michael P. Pfeiffer" <michael@cssconf.eu>
Date: Mon, 1 Apr 2019 13:21:15 -0500
Subject: [PATCH 08/13] Add fixtures for image fill tests with/without focal
 point selected

---
 ...t__image-fill-no-focal-point-selected.html | 13 +++++++
 ...t__image-fill-no-focal-point-selected.json | 34 +++++++++++++++++
 ...e-fill-no-focal-point-selected.parsed.json | 30 +++++++++++++++
 ...ll-no-focal-point-selected.serialized.html |  5 +++
 ..._image-fill-with-focal-point-selected.html | 13 +++++++
 ..._image-fill-with-focal-point-selected.json | 38 +++++++++++++++++++
 ...fill-with-focal-point-selected.parsed.json | 34 +++++++++++++++++
 ...-with-focal-point-selected.serialized.html |  5 +++
 8 files changed, 172 insertions(+)
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html

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
new file mode 100644
index 0000000000000..f1b236726f5b2
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html
@@ -0,0 +1,13 @@
+<!-- wp:media-text {"mediaId":11,"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(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:initial">
+		<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"} -->
+		<p class="has-large-font-size">My Content</p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:media-text -->
\ No newline at end of file
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
new file mode 100644
index 0000000000000..73bf0a77737a6
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json
@@ -0,0 +1,34 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/media-text",
+        "isValid": true,
+        "attributes": {
+            "align": "wide",
+            "mediaAlt": "My alt text",
+            "mediaPosition": "left",
+            "mediaId": 11,
+            "mediaUrl": "http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg",
+            "mediaType": "image",
+            "mediaWidth": 50,
+            "isStackedOnMobile": false,
+            "imageFill": true
+        },
+        "innerBlocks": [
+            {
+                "clientId": "_clientId_0",
+                "name": "core/paragraph",
+                "isValid": true,
+                "attributes": {
+                    "content": "My Content",
+                    "dropCap": false,
+                    "placeholder": "Content…",
+                    "fontSize": "large"
+                },
+                "innerBlocks": [],
+                "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(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:initial\">\n\t\t<img src=\"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>"
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
new file mode 100644
index 0000000000000..4a720325aadce
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
@@ -0,0 +1,30 @@
+[
+    {
+        "blockName": "core/media-text",
+        "attrs": {
+            "mediaId": 11,
+            "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\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:initial\">\n\t\t<img src=\"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",
+        "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(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:initial\">\n\t\t<img src=\"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",
+            null,
+            "\n\t</div>\n</div>\n"
+        ]
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
new file mode 100644
index 0000000000000..44f85d244b605
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"mediaId":11,"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(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:initial"><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"} -->
+<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-fill-with-focal-point-selected.html b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
new file mode 100644
index 0000000000000..30ac0d6a1596d
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
@@ -0,0 +1,13 @@
+<!-- wp:media-text {"mediaId":11,"mediaType":"image","imageFill":true,"focalPoint":{"x":0.8470588235294118,"y":0.8470588235294118}} -->
+<div class="wp-block-media-text alignwide is-image-fill">
+	<figure class="wp-block-media-text__media"
+		style="background-image:url(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:84.70588235294117% 84.70588235294117%">
+		<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"} -->
+		<p class="has-large-font-size">My Content</p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:media-text -->
\ No newline at end of file
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
new file mode 100644
index 0000000000000..59fa2ba6d5102
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
@@ -0,0 +1,38 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/media-text",
+        "isValid": true,
+        "attributes": {
+            "align": "wide",
+            "mediaAlt": "My alt text",
+            "mediaPosition": "left",
+            "mediaId": 11,
+            "mediaUrl": "http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg",
+            "mediaType": "image",
+            "mediaWidth": 50,
+            "isStackedOnMobile": false,
+            "imageFill": true,
+            "focalPoint": {
+                "x": 0.8470588235294118,
+                "y": 0.8470588235294118
+            }
+        },
+        "innerBlocks": [
+            {
+                "clientId": "_clientId_0",
+                "name": "core/paragraph",
+                "isValid": true,
+                "attributes": {
+                    "content": "My Content",
+                    "dropCap": false,
+                    "placeholder": "Content…",
+                    "fontSize": "large"
+                },
+                "innerBlocks": [],
+                "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(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:84.70588235294117% 84.70588235294117%\">\n\t\t<img src=\"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>"
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
new file mode 100644
index 0000000000000..d708591ce490a
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
@@ -0,0 +1,34 @@
+[
+    {
+        "blockName": "core/media-text",
+        "attrs": {
+            "mediaId": 11,
+            "mediaType": "image",
+            "imageFill": true,
+            "focalPoint": {
+                "x": 0.8470588235294118,
+                "y": 0.8470588235294118
+            }
+        },
+        "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\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:84.70588235294117% 84.70588235294117%\">\n\t\t<img src=\"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",
+        "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(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:84.70588235294117% 84.70588235294117%\">\n\t\t<img src=\"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",
+            null,
+            "\n\t</div>\n</div>\n"
+        ]
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
new file mode 100644
index 0000000000000..a6c7bd44626bf
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"mediaId":11,"mediaType":"image","imageFill":true,"focalPoint":{"x":0.8470588235294118,"y":0.8470588235294118}} -->
+<div class="wp-block-media-text alignwide is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:84.70588235294117% 84.70588235294117%"><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"} -->
+<p class="has-large-font-size">My Content</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->

From 242498eae33bf3d12fe8bd72d0c21e12bf232d24 Mon Sep 17 00:00:00 2001
From: "Michael P. Pfeiffer" <michael@cssconf.eu>
Date: Mon, 1 Apr 2019 14:29:22 -0500
Subject: [PATCH 09/13]  Visually hide the image but make it accessible to
 assistive technologies

---
 packages/block-library/src/media-text/style.scss | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index fad04395e0953..87bd547bb548d 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -48,7 +48,15 @@
 }
 
 .wp-block-media-text.is-image-fill figure > img {
-	display: none;
+	// The image is visually hidden but accessible to assistive technologies.
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
 }
 
 /*

From e8e03b355694b8789acada872f026cb3a12c0900 Mon Sep 17 00:00:00 2001
From: "Michael P. Pfeiffer" <michael@cssconf.eu>
Date: Tue, 2 Apr 2019 19:07:14 -0500
Subject: [PATCH 10/13] Remove unnecessary deprecation

---
 .../src/media-text/deprecated.js              | 86 -------------------
 1 file changed, 86 deletions(-)

diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index ce5056af6dd72..ab36e6859b3e8 100644
--- a/packages/block-library/src/media-text/deprecated.js
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -18,92 +18,6 @@ import {
 import { DEFAULT_MEDIA_WIDTH } from './index';
 
 export default [
-	{
-		attributes: {
-			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,
-			},
-		},
-		save( { attributes } ) {
-			const {
-				backgroundColor,
-				customBackgroundColor,
-				isStackedOnMobile,
-				mediaAlt,
-				mediaPosition,
-				mediaType,
-				mediaUrl,
-				mediaWidth,
-				mediaId,
-			} = 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,
-			} );
-			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" >
-						{ ( mediaTypeRenders[ mediaType ] || noop )() }
-					</figure>
-					<div className="wp-block-media-text__content">
-						<InnerBlocks.Content />
-					</div>
-				</div>
-			);
-		},
-	},
 	{
 		attributes: {
 			align: {

From 4aea210c19526e56fb0611f9ed7d3eb91498c220 Mon Sep 17 00:00:00 2001
From: "Michael P. Pfeiffer" <michael@cssconf.eu>
Date: Tue, 2 Apr 2019 19:16:05 -0500
Subject: [PATCH 11/13] Update changelog

---
 packages/block-library/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 1c06e0d53e943..6f07f8c0a5cb0 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Add `wide` and `full` alignments to Categories block ([#14533](https://github.com/WordPress/gutenberg/pull/14533)).
 - Add all alignment options to RSS block ([#14533](https://github.com/WordPress/gutenberg/pull/14533)).
 - Add all alignment options to Search block ([#14533](https://github.com/WordPress/gutenberg/pull/14533)).
+- Add image fill option and focal point picker to Media & Text block ([#14445](https://github.com/WordPress/gutenberg/pull/14445)).
 
 ### Bug Fixes
 

From b382d741978e437c6bb58265c83fa290293bdfbd Mon Sep 17 00:00:00 2001
From: "Michael P. Pfeiffer" <michael@cssconf.eu>
Date: Wed, 3 Apr 2019 11:01:53 -0500
Subject: [PATCH 12/13] Change default background-position to 50%/50% and
 update fixtures

---
 .../block-library/src/media-text/media-container.js  |  2 +-
 packages/e2e-tests/fixtures/block-transforms.js      | 12 ++++++++++++
 ...dia-text__image-fill-no-focal-point-selected.html |  8 ++++----
 ...dia-text__image-fill-no-focal-point-selected.json |  5 ++---
 ...t__image-fill-no-focal-point-selected.parsed.json |  5 ++---
 ...mage-fill-no-focal-point-selected.serialized.html |  4 ++--
 ...a-text__image-fill-with-focal-point-selected.html |  8 ++++----
 ...a-text__image-fill-with-focal-point-selected.json |  5 ++---
 ..._image-fill-with-focal-point-selected.parsed.json |  5 ++---
 ...ge-fill-with-focal-point-selected.serialized.html |  4 ++--
 10 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
index 706ed12b010d0..e32ebb47da6d0 100644
--- a/packages/block-library/src/media-text/media-container.js
+++ b/packages/block-library/src/media-text/media-container.js
@@ -25,7 +25,7 @@ export function imageFillStyles( url, focalPoint ) {
 	return url ?
 		{
 			backgroundImage: `url(${ url })`,
-			backgroundPosition: focalPoint ? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%` : `initial`,
+			backgroundPosition: focalPoint ? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%` : `50% 50%`,
 		} :
 		{};
 }
diff --git a/packages/e2e-tests/fixtures/block-transforms.js b/packages/e2e-tests/fixtures/block-transforms.js
index 9fa130856191b..b1b8949b851ae 100644
--- a/packages/e2e-tests/fixtures/block-transforms.js
+++ b/packages/e2e-tests/fixtures/block-transforms.js
@@ -33,6 +33,18 @@ export const EXPECTED_TRANSFORMS = {
 			'Image',
 		],
 	},
+	'core__media-text__image-fill-no-focal-point-selected': {
+		originalBlock: 'Media & Text',
+		availableTransforms: [
+			'Image',
+		],
+	},
+	'core__media-text__image-fill-with-focal-point-selected': {
+		originalBlock: 'Media & Text',
+		availableTransforms: [
+			'Image',
+		],
+	},
 	'core__media-text__is-stacked-on-mobile': {
 		originalBlock: 'Media & Text',
 		availableTransforms: [
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
index f1b236726f5b2..522f8357196ee 100644
--- 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,9 +1,9 @@
-<!-- wp:media-text {"mediaId":11,"mediaType":"image","imageFill":true} -->
+<!-- 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(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:initial">
-		<img src="http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg" alt="My alt text"
-			class="wp-image-11" /></figure>
+		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>
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
index 73bf0a77737a6..07c3223bccc66 100644
--- 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
@@ -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-image-fill\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:initial\">\n\t\t<img src=\"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-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>"
     }
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
index 4a720325aadce..06a38674bdf5c 100644
--- a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
@@ -2,7 +2,6 @@
     {
         "blockName": "core/media-text",
         "attrs": {
-            "mediaId": 11,
             "mediaType": "image",
             "imageFill": true
         },
@@ -20,9 +19,9 @@
                 ]
             }
         ],
-        "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(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:initial\">\n\t\t<img src=\"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-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",
         "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(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:initial\">\n\t\t<img src=\"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-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",
             null,
             "\n\t</div>\n</div>\n"
         ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
index 44f85d244b605..2ea0866acf4f7 100644
--- a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:media-text {"mediaId":11,"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(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:initial"><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","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"} -->
 <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-fill-with-focal-point-selected.html b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
index 30ac0d6a1596d..6e0db986db19e 100644
--- a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
@@ -1,9 +1,9 @@
-<!-- wp:media-text {"mediaId":11,"mediaType":"image","imageFill":true,"focalPoint":{"x":0.8470588235294118,"y":0.8470588235294118}} -->
+<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":0.8470588235294118,"y":0.8470588235294118}} -->
 <div class="wp-block-media-text alignwide is-image-fill">
 	<figure class="wp-block-media-text__media"
-		style="background-image:url(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:84.70588235294117% 84.70588235294117%">
-		<img src="http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg" alt="My alt text"
-			class="wp-image-11" /></figure>
+		style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84.70588235294117% 84.70588235294117%">
+		<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>
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
index 59fa2ba6d5102..7c0429e419d49 100644
--- a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.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,
@@ -33,6 +32,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(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:84.70588235294117% 84.70588235294117%\">\n\t\t<img src=\"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-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:84.70588235294117% 84.70588235294117%\">\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/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
index d708591ce490a..322fdd36315c3 100644
--- a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
@@ -2,7 +2,6 @@
     {
         "blockName": "core/media-text",
         "attrs": {
-            "mediaId": 11,
             "mediaType": "image",
             "imageFill": true,
             "focalPoint": {
@@ -24,9 +23,9 @@
                 ]
             }
         ],
-        "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(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:84.70588235294117% 84.70588235294117%\">\n\t\t<img src=\"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-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:84.70588235294117% 84.70588235294117%\">\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(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:84.70588235294117% 84.70588235294117%\">\n\t\t<img src=\"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-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:84.70588235294117% 84.70588235294117%\">\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/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
index a6c7bd44626bf..b1d9259ea2d46 100644
--- a/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:media-text {"mediaId":11,"mediaType":"image","imageFill":true,"focalPoint":{"x":0.8470588235294118,"y":0.8470588235294118}} -->
-<div class="wp-block-media-text alignwide is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg);background-position:84.70588235294117% 84.70588235294117%"><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","imageFill":true,"focalPoint":{"x":0.8470588235294118,"y":0.8470588235294118}} -->
+<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:84.70588235294117% 84.70588235294117%"><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 -->

From 6c4a3883122807a7437ede7184caa1bed8069b05 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Wed, 3 Apr 2019 17:12:32 +0100
Subject: [PATCH 13/13] Updated the transforms snapshot.

---
 .../__snapshots__/block-transforms.test.js.snap      | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap b/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap
index a6738f734bb85..ce9dfc0be7e55 100644
--- a/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap
+++ b/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap
@@ -316,6 +316,18 @@ exports[`Block transforms correctly transform block Media & Text in fixture core
 <!-- /wp:image -->"
 `;
 
+exports[`Block transforms correctly transform block Media & Text in fixture core__media-text__image-fill-no-focal-point-selected 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__image-fill-with-focal-point-selected 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__is-stacked-on-mobile 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>