Chrome: Adding a ResponsiveImage component to wrap the featured image

components/index.js

@@ -6,6 +6,7 @@ export { default as Panel } from './panel';
 export { default as PanelHeader } from './panel/header';
 export { default as PanelBody } from './panel/body';
 export { default as Placeholder } from './placeholder';
+export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as Spinner } from './spinner';
 export { default as Toolbar } from './toolbar';
 

components/responsive-wrapper/index.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress Dependencies
+ */
+import { cloneElement, Children } from 'element';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function ResponsiveWrapper( { naturalWidth, naturalHeight, children } ) {
+	if ( Children.count( children ) !== 1 ) {
+		return null;
+	}
+	const imageStyle = {
+		paddingBottom: ( naturalHeight / naturalWidth * 100 ) + '%',
+	};
+	return (
+		<div className="components-responsive-wrapper">
+			<div style={ imageStyle } />
+			{ cloneElement( children, {
+				className: classnames( 'components-responsive-wrapper__content', children.props.className ),
+			} ) }
+		</div>
+	);
+}
+
+export default ResponsiveWrapper;

components/responsive-wrapper/style.scss

@@ -0,0 +1,14 @@
+.components-responsive-wrapper {
+	position: relative;
+	max-width: 100%;
+}
+
+.components-responsive-wrapper__content {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}

editor/sidebar/featured-image/index.js

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
  */
 import { Component } from 'element';
 import { __ } from 'i18n';
-import { Button, PanelBody, Spinner } from 'components';
+import { Button, PanelBody, Spinner, ResponsiveWrapper } from 'components';
 import { MediaUploadButton } from 'blocks';
 
 /**
@@ -50,19 +50,18 @@ class FeaturedImage extends Component {
 			return;
 		}
 		this.setState( { loading: true } );
-		const mediaIdToLoad = this.props.featuredImageId;
-		this.fetchMediaRequest = new wp.api.models.Media( { id: mediaIdToLoad } ).fetch()
+		if ( this.fetchMediaRequest ) {
+			this.fetchMediaRequest.abort();
+		}
+		this.fetchMediaRequest = new wp.api.models.Media( { id: this.props.featuredImageId } ).fetch()
 			.done( ( media ) => {
-				if ( this.props.featuredImageId !== mediaIdToLoad ) {
-					return;
-				}
 				this.setState( {
 					loading: false,
 					media,
 				} );
 			} )
-			.fail( () => {
-				if ( this.props.featuredImageId !== mediaIdToLoad ) {
+			.fail( ( xhr ) => {
+				if ( xhr.statusText === 'abort' ) {
 					return;
 				}
 				this.setState( {
@@ -80,16 +79,17 @@ class FeaturedImage extends Component {
 				<div className="editor-featured-image__content">
 					{ !! featuredImageId &&
 						<MediaUploadButton
-							buttonProps={ { className: 'button-link' } }
+							buttonProps={ { className: 'button-link editor-featured-image__preview' } }
 							onSelect={ onUpdateImage }
 							type="image"
 						>
 							{ media &&
-								<img
-									className="editor-featured-image__preview"
-									src={ media.source_url }
-									alt={ __( 'Featured image' ) }
-								/>
+								<ResponsiveWrapper
+									naturalWidth={ media.media_details.width }
+									naturalHeight={ media.media_details.height }
+								>
+									<img src={ media.source_url } alt={ __( 'Featured image' ) } />
+								</ResponsiveWrapper>
 							}
 							{ loading && <Spinner /> }
 						</MediaUploadButton>

editor/sidebar/featured-image/style.scss

@@ -22,7 +22,7 @@
 
 .editor-featured-image__preview {
 	display: block;
-	max-width: 100%;
+	width: 100%;
 }
 
 .editor-featured-image__howto {