From 94906ec8d4174ed8347c0176e3643fd0f64d9e39 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Mon, 17 Jan 2022 15:26:38 +1300
Subject: [PATCH] Prototype an option of adjusting image width with gap changes
 without using a css var

---
 lib/block-supports/layout.php                 |  6 ------
 packages/block-editor/src/layouts/flex.js     |  3 ---
 packages/block-library/src/gallery/block.json |  4 +++-
 packages/block-library/src/image/block.json   |  8 +++++++-
 packages/block-library/src/image/edit.js      | 15 ++++++++++++++-
 5 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 998081b7bbbe9d..5ed5f2f16ae754 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -93,12 +93,6 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		if ( $has_block_gap_support ) {
 			$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
 			$style    .= "gap: $gap_style;";
-
-			/*
-			 * In some contexts a flex container's children may be need to recalculate their width
-			 * based on the current gap so this value is made available as a css var.
-			 */
-			$style .= "--wp--style--block-scoped-flex-gap: $gap_style;";
 		} else {
 			$style .= 'gap: 0.5em;';
 		}
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index 53d8e34dc9f535..092da1e036a10f 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -113,9 +113,6 @@ export default {
 				${ appendSelectors( selector ) } {
 					display: flex;
 					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
-					--wp--style--block-scoped-flex-gap: ${
-						hasBlockGapStylesSupport ? blockGapValue : '0.5em'
-					}; 
 					flex-wrap: ${ flexWrap };
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}
diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json
index 7f564ae3eac9ef..9e3adc70f69b95 100644
--- a/packages/block-library/src/gallery/block.json
+++ b/packages/block-library/src/gallery/block.json
@@ -102,7 +102,9 @@
 	"providesContext": {
 		"allowResize": "allowResize",
 		"imageCrop": "imageCrop",
-		"fixedHeight": "fixedHeight"
+		"fixedHeight": "fixedHeight",
+		"style": "style",
+		"columns": "columns"
 	},
 	"supports": {
 		"anchor": true,
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index 0cc46aaf311d57..7d01579bfe3d9e 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -4,7 +4,13 @@
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
-	"usesContext": [ "allowResize", "imageCrop", "fixedHeight" ],
+	"usesContext": [
+		"allowResize",
+		"imageCrop",
+		"fixedHeight",
+		"style",
+		"columns"
+	],
 	"description": "Insert an image to make a visual statement.",
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index bcef8caefe829e..c74d6cc09cdec5 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -123,6 +123,10 @@ export function ImageEdit( {
 		height,
 		sizeSlug,
 	} = attributes;
+
+	const parentGap = context?.style?.spacing?.blockGap;
+	const columns = context?.columns ? context?.columns : 3;
+
 	const [ temporaryURL, setTemporaryURL ] = useState();
 
 	const altRef = useRef();
@@ -349,8 +353,17 @@ export function ImageEdit( {
 		className: classes,
 	} );
 
+	const newWidth =
+		columns && parentGap
+			? `calc((100% / ${ columns }) - ${ parentGap })`
+			: 'initial';
 	return (
-		<figure { ...blockProps }>
+		<figure
+			{ ...blockProps }
+			style={ {
+				width: newWidth,
+			} }
+		>
 			{ ( temporaryURL || url ) && (
 				<Image
 					temporaryURL={ temporaryURL }