From 26a61aae8ae8cad04b04e9a15381c1a3a993ccbf Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Mon, 30 Apr 2018 11:26:44 +0200
Subject: [PATCH 1/5] Try fixing captions on resized images
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is an alternative, and probably better approach, than the one explored in https://github.com/WordPress/gutenberg/pull/6304.

Both branches try and fix the same issue — ensuring that the caption inside a `figure` is only ever as wide as the adjecent image. This is only ah issue when that image is resized.

This branch fixes that, in a fairly clean way. See the details in https://css-tricks.com/almanac/properties/w/width/
---
 core-blocks/image/index.js   | 11 ++++++++++-
 core-blocks/image/style.scss |  9 +++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/core-blocks/image/index.js b/core-blocks/image/index.js
index e689b31d1139a5..17efb543973cf3 100644
--- a/core-blocks/image/index.js
+++ b/core-blocks/image/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -165,6 +170,10 @@ export const settings = {
 	save( { attributes } ) {
 		const { url, alt, caption, align, href, width, height, id } = attributes;
 
+		const classes = classnames( align ? `align${ align }` : null, {
+			'is-resized': !! width || !! height,
+		} );
+
 		const image = (
 			<img
 				src={ url }
@@ -176,7 +185,7 @@ export const settings = {
 		);
 
 		return (
-			<figure className={ align ? `align${ align }` : null }>
+			<figure className={ classes }>
 				{ href ? <a href={ href }>{ image }</a> : image }
 				{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
 			</figure>
diff --git a/core-blocks/image/style.scss b/core-blocks/image/style.scss
index bd22c450854ce4..9b592c07d8c89d 100644
--- a/core-blocks/image/style.scss
+++ b/core-blocks/image/style.scss
@@ -1,5 +1,6 @@
 .wp-block-image {
 	width: fit-content;
+
 	figcaption {
 		margin-top: 0.5em;
 		color: $dark-gray-300;
@@ -13,4 +14,12 @@
 		margin-right: auto;
 		text-align: center;
 	}
+
+	&.is-resized {
+		width: min-content;
+
+		img {
+			max-width: none;
+		}
+	}
 }

From 779f43901aed9f8ff912abf9ae3539e3e9b5d008 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 1 May 2018 10:29:36 +0200
Subject: [PATCH 2/5] Add fix for Edge and IE11

---
 core-blocks/image/style.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/core-blocks/image/style.scss b/core-blocks/image/style.scss
index 9b592c07d8c89d..c19ef987703cb2 100644
--- a/core-blocks/image/style.scss
+++ b/core-blocks/image/style.scss
@@ -18,6 +18,15 @@
 	&.is-resized {
 		width: min-content;
 
+		// Emulate min-content for Edge and IE11
+		display: -ms-inline-grid;
+		-ms-grid-columns: min-content;
+
+		> :nth-child(2) {
+			-ms-grid-row: 2;
+			display: inline-block;
+		}
+
 		img {
 			max-width: none;
 		}

From 6f3107bc94c2643fd24b9716c48c7cb408c016d4 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 1 May 2018 14:34:28 +0200
Subject: [PATCH 3/5] Polish up Edge min-content trick.

---
 core-blocks/image/style.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/core-blocks/image/style.scss b/core-blocks/image/style.scss
index c19ef987703cb2..af5157ee9464ac 100644
--- a/core-blocks/image/style.scss
+++ b/core-blocks/image/style.scss
@@ -22,9 +22,8 @@
 		display: -ms-inline-grid;
 		-ms-grid-columns: min-content;
 
-		> :nth-child(2) {
+		figcaption {
 			-ms-grid-row: 2;
-			display: inline-block;
 		}
 
 		img {

From 68b40e506682d788b9dbf8008fbaeeb66b19687f Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 3 May 2018 10:35:43 +0200
Subject: [PATCH 4/5] Add deprecated version.

---
 core-blocks/image/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/core-blocks/image/index.js b/core-blocks/image/index.js
index 17efb543973cf3..ee193dfb58b434 100644
--- a/core-blocks/image/index.js
+++ b/core-blocks/image/index.js
@@ -199,6 +199,9 @@ export const settings = {
 				const { url, alt, caption, align, href, width, height } = attributes;
 				const extraImageProps = width || height ? { width, height } : {};
 				const image = <img src={ url } alt={ alt } { ...extraImageProps } />;
+				const classes = classnames( align ? `align${ align }` : null, {
+					'is-resized': !! width || !! height,
+				} );
 
 				let figureStyle = {};
 
@@ -209,7 +212,7 @@ export const settings = {
 				}
 
 				return (
-					<figure className={ align ? `align${ align }` : null } style={ figureStyle }>
+					<figure className={ classes } style={ figureStyle }>
 						{ href ? <a href={ href }>{ image }</a> : image }
 						{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
 					</figure>

From c060ca932f644481f790ac7bce491f9b34c16211 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 16 May 2018 12:30:07 +0100
Subject: [PATCH 5/5] Fix deprecated version

---
 core-blocks/image/index.js | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/core-blocks/image/index.js b/core-blocks/image/index.js
index ee193dfb58b434..a0754a7f82eaae 100644
--- a/core-blocks/image/index.js
+++ b/core-blocks/image/index.js
@@ -193,15 +193,35 @@ export const settings = {
 	},
 
 	deprecated: [
+		{
+			attributes: blockAttributes,
+			save( { attributes } ) {
+				const { url, alt, caption, align, href, width, height, id } = attributes;
+
+				const image = (
+					<img
+						src={ url }
+						alt={ alt }
+						className={ id ? `wp-image-${ id }` : null }
+						width={ width }
+						height={ height }
+					/>
+				);
+
+				return (
+					<figure className={ align ? `align${ align }` : null } >
+						{ href ? <a href={ href }>{ image }</a> : image }
+						{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+					</figure>
+				);
+			},
+		},
 		{
 			attributes: blockAttributes,
 			save( { attributes } ) {
 				const { url, alt, caption, align, href, width, height } = attributes;
 				const extraImageProps = width || height ? { width, height } : {};
 				const image = <img src={ url } alt={ alt } { ...extraImageProps } />;
-				const classes = classnames( align ? `align${ align }` : null, {
-					'is-resized': !! width || !! height,
-				} );
 
 				let figureStyle = {};
 
@@ -212,7 +232,7 @@ export const settings = {
 				}
 
 				return (
-					<figure className={ classes } style={ figureStyle }>
+					<figure className={ align ? `align${ align }` : null } style={ figureStyle }>
 						{ href ? <a href={ href }>{ image }</a> : image }
 						{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
 					</figure>