From a3d6d9ff7423e65a398415fd447b19d77cf69385 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Thu, 6 Oct 2022 11:12:55 +1300
Subject: [PATCH] Apply negative value to margins with a calc so clamp values
 behave correctly

---
 packages/block-editor/src/hooks/margin.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js
index 229e744f70d51e..b54374295ace0c 100644
--- a/packages/block-editor/src/hooks/margin.js
+++ b/packages/block-editor/src/hooks/margin.js
@@ -190,10 +190,10 @@ export function MarginVisualizer( { clientId, attributes } ) {
 			borderRightWidth: marginRight,
 			borderBottomWidth: marginBottom,
 			borderLeftWidth: marginLeft,
-			top: marginTop !== 0 ? `-${ marginTop }` : 0,
-			right: marginRight !== 0 ? `-${ marginRight }` : 0,
-			bottom: marginBottom !== 0 ? `-${ marginBottom }` : 0,
-			left: marginLeft !== 0 ? `-${ marginLeft }` : 0,
+			top: marginTop !== 0 ? `calc(${ marginTop } * -1)` : 0,
+			right: marginRight !== 0 ? `calc(${ marginRight } * -1)` : 0,
+			bottom: marginBottom !== 0 ? `calc(${ marginBottom } * -1)` : 0,
+			left: marginLeft !== 0 ? `calc(${ marginLeft } * -1)` : 0,
 		};
 	}, [ margin ] );