Don't apply the background and text colors to typography previews

WordPress · Jun 5, 2024 · b1267b3 · b1267b3
1 parent 06198d1
commit b1267b3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/edit-site/src/components/global-styles/preview-iframe.js b/packages/edit-site/src/components/global-styles/preview-iframe.js
@@ -38,6 +38,7 @@ export default function PreviewIframe( {
 	label,
 	isFocused,
 	withHoverView,
+	previewStyles,
 } ) {
 	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
@@ -109,6 +110,15 @@ export default function PreviewIframe( {
 	}, [ styles ] );
 	const isReady = !! width;
 
+	const calculatedStyles = {
+		height: normalizedHeight * ratio,
+		width: '100%',
+		background: gradientValue ?? backgroundColor,
+		cursor: withHoverView ? 'pointer' : undefined,
+		// Override these styles with the previewStyles prop.
+		...previewStyles,
+	};
+
 	return (
 		<>
 			<div style={ { position: 'relative' } }>
@@ -126,12 +136,7 @@ export default function PreviewIframe( {
 				>
 					<EditorStyles styles={ editorStyles } />
 					<motion.div
-						style={ {
-							height: normalizedHeight * ratio,
-							width: '100%',
-							background: gradientValue ?? backgroundColor,
-							cursor: withHoverView ? 'pointer' : undefined,
-						} }
+						style={ calculatedStyles }
 						initial="start"
 						animate={
 							( isHovered || isFocused ) &&

diff --git a/packages/edit-site/src/components/global-styles/variations/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
@@ -40,6 +40,10 @@ export default function TypographyVariations( { title, gap = 2 } ) {
 								<PreviewIframe
 									label={ variation?.title }
 									isFocused={ isFocused }
+									previewStyles={ {
+										background: '#ffffff',
+										color: '#000000',
+									} }
 								>
 									{ ( { ratio, key } ) => (
 										<HStack