From c8024c82b178da7135ed2b7c9362f4de43e97368 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 6 Sep 2021 16:46:37 +1000
Subject: [PATCH 1/2] Gap block support: force changing gap to cause the block
 to be re-rendered

---
 packages/block-editor/src/hooks/gap.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index d20b94c2b72cd6..53f35613efb416 100644
--- a/packages/block-editor/src/hooks/gap.js
+++ b/packages/block-editor/src/hooks/gap.js
@@ -12,6 +12,7 @@ import {
 /**
  * Internal dependencies
  */
+import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 import useSetting from '../components/use-setting';
 import { SPACING_SUPPORT_KEY } from './dimensions';
 import { cleanEmptyObject } from './utils';
@@ -79,6 +80,7 @@ export function useIsGapDisabled( { name: blockName } = {} ) {
  */
 export function GapEdit( props ) {
 	const {
+		clientId,
 		attributes: { style },
 		setAttributes,
 	} = props;
@@ -93,6 +95,8 @@ export function GapEdit( props ) {
 		],
 	} );
 
+	const ref = useBlockRef( clientId );
+
 	if ( useIsGapDisabled( props ) ) {
 		return null;
 	}
@@ -109,6 +113,13 @@ export function GapEdit( props ) {
 		setAttributes( {
 			style: cleanEmptyObject( newStyle ),
 		} );
+
+		// In Safari, changing the `gap` CSS value on its own will not trigger the layout
+		// to be recalculated / re-rendered. To force the updated gap to re-render, here
+		// we replace the block's node with itself.
+		if ( ref.current ) {
+			ref.current.parentNode?.replaceChild( ref.current, ref.current );
+		}
 	};
 
 	return Platform.select( {

From 2f939fde2e82956656b6bd14a6d0d6bea91a0721 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 7 Sep 2021 15:34:13 +1000
Subject: [PATCH 2/2] Add browser sniffing to guard replaceChild behind
 isSafari check

---
 packages/block-editor/src/hooks/gap.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index 53f35613efb416..d29a63774fbb64 100644
--- a/packages/block-editor/src/hooks/gap.js
+++ b/packages/block-editor/src/hooks/gap.js
@@ -117,7 +117,13 @@ export function GapEdit( props ) {
 		// In Safari, changing the `gap` CSS value on its own will not trigger the layout
 		// to be recalculated / re-rendered. To force the updated gap to re-render, here
 		// we replace the block's node with itself.
-		if ( ref.current ) {
+		const isSafari =
+			window?.navigator.userAgent &&
+			window.navigator.userAgent.includes( 'Safari' ) &&
+			! window.navigator.userAgent.includes( 'Chrome ' ) &&
+			! window.navigator.userAgent.includes( 'Chromium ' );
+
+		if ( ref.current && isSafari ) {
 			ref.current.parentNode?.replaceChild( ref.current, ref.current );
 		}
 	};