Add the option prop to show the global style in iframe

This would fix the issue added in WordPress#61217, This wanted to remove the color combination in the typography preview shown in the styles editor page
hbhalodia · May 1, 2024 · fb5c81a · fb5c81a
1 parent 38d0a43
commit fb5c81a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 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,
+	addGlobalStyles = true,
 } ) {
 	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
@@ -129,7 +130,10 @@ export default function PreviewIframe( {
 						style={ {
 							height: normalizedHeight * ratio,
 							width: '100%',
-							background: gradientValue ?? backgroundColor,
+							color: addGlobalStyles ? undefined : '#000',
+							background: addGlobalStyles
+								? gradientValue ?? backgroundColor
+								: '#fff',
 							cursor: withHoverView ? 'pointer' : undefined,
 						} }
 						initial="start"

diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -31,7 +31,10 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					<TypographyVariations title={ __( 'Presets' ) } />
+					<TypographyVariations
+						addGlobalStyles={ false }
+						title={ __( 'Presets' ) }
+					/>
 					{ ! window.__experimentalDisableFontLibrary &&
 						fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />

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
@@ -16,7 +16,11 @@ import PreviewIframe from '../preview-iframe';
 import Variation from './variation';
 import Subtitle from '../subtitle';
 
-export default function TypographyVariations( { title, gap = 2 } ) {
+export default function TypographyVariations( {
+	title,
+	gap = 2,
+	addGlobalStyles = false,
+} ) {
 	const typographyVariations = useTypographyVariations();
 
 	if ( ! typographyVariations?.length ) {
@@ -37,6 +41,7 @@ export default function TypographyVariations( { title, gap = 2 } ) {
 						<Variation key={ index } variation={ variation }>
 							{ ( isFocused ) => (
 								<PreviewIframe
+									addGlobalStyles={ addGlobalStyles }
 									label={ variation?.title }
 									isFocused={ isFocused }
 								>

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -94,6 +94,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
 				) }
 				{ typographyVariations?.length && (
 					<TypographyVariations
+						addGlobalStyles
 						title={ __( 'Typography' ) }
 						gap={ gap }
 					/>