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

@@ -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( {