Assembler: Unset white background (try 2) (#89381)

Automattic · Apr 10, 2024 · 8e8a98f · 8e8a98f
1 parent df5e6b8
commit 8e8a98f
Showing 1 changed file with 28 additions and 2 deletions.
diff --git a/packages/block-renderer/src/components/block-renderer-container.tsx b/packages/block-renderer/src/components/block-renderer-container.tsx
@@ -22,6 +22,12 @@ const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
 
 const { getDuotoneFilter } = unlock( blockEditorPrivateApis );
 
+const isSafari =
+	window?.navigator.userAgent &&
+	window.navigator.userAgent.includes( 'Safari' ) &&
+	! window.navigator.userAgent.includes( 'Chrome' ) &&
+	! window.navigator.userAgent.includes( 'Chromium' );
+
 interface BlockRendererContainerProps {
 	children: ReactNode;
 	styles?: RenderedStyle[];
@@ -50,11 +56,31 @@ const ScaledBlockRendererContainer = ( {
 	const { settings } = useContext( BlockRendererContext );
 	const { styles, assets, duotone } = useMemo(
 		() => ( {
-			styles: settings.styles,
+			styles: settings.styles.map( ( styles: RenderedStyle ) => {
+				if ( ! isSafari || ! styles.css || ! styles.css.includes( 'body' ) ) {
+					return styles;
+				}
+
+				// The Iframe component injects the CSS rule body{ background: white } to <head>.
+				// In Safari, this creates a specificity issue that prevents other background colors
+				// to be applied to the body.
+				// As a solution, we use regex to add !important to these background colors.
+				//
+				// TODO: Remove this workaround when https://github.com/WordPress/gutenberg/pull/60106
+				// lands in Calypso's @wordpress/block-editor, which should be 12.23.0.
+				const regex = /(body\s*{[\s\S]*?\bbackground-color\s*:\s*([^;}]+)\s*;[\s\S]*?})/g;
+				styles.css = styles.css.replace( regex, ( match, cssRule, bgColor ) => {
+					return ! bgColor.includes( '!important' )
+						? cssRule.replace( bgColor, bgColor + ' !important' )
+						: cssRule;
+				} );
+
+				return styles;
+			} ),
 			assets: settings.__unstableResolvedAssets,
 			duotone: settings.__experimentalFeatures?.color?.duotone,
 		} ),
-		[ settings ]
+		[ settings, isSafari ]
 	);
 
 	const styleAssets = useParsedAssets( assets?.styles ) as HTMLLinkElement[];