From 211313b911d3fab04e10e2c3930eb06e495b5b67 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 8 Sep 2021 10:16:52 +1000
Subject: [PATCH] Gap block support: force gap change to cause the block to
 re-render (fix Safari issue) (#34567)

* Gap block support: force changing gap to cause the block to be re-rendered

* Add browser sniffing to guard replaceChild behind isSafari check
---
 packages/block-editor/src/hooks/gap.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index d20b94c2b72cd6..d29a63774fbb64 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,19 @@ 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.
+		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 );
+		}
 	};
 
 	return Platform.select( {