Global Styles Preview: Don't use iframe component (#67682)

Co-authored-by: t-hamano <[email protected]> Co-authored-by: ramonjd <[email protected]>
WordPress · Dec 7, 2024 · 96ceed1 · 96ceed1
1 parent 65193ea
commit 96ceed1
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 85 deletions.
diff --git a/packages/edit-site/src/components/global-styles/preview-colors.js b/packages/edit-site/src/components/global-styles/preview-colors.js
@@ -10,7 +10,7 @@ import {
  * Internal dependencies
  */
 import PresetColors from './preset-colors';
-import PreviewIframe from './preview-iframe';
+import PreviewWrapper from './preview-wrapper';
 
 const firstFrameVariants = {
 	start: {
@@ -25,7 +25,7 @@ const firstFrameVariants = {
 
 const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 	return (
-		<PreviewIframe
+		<PreviewWrapper
 			label={ label }
 			isFocused={ isFocused }
 			withHoverView={ withHoverView }
@@ -51,7 +51,7 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 					</HStack>
 				</motion.div>
 			) }
-		</PreviewIframe>
+		</PreviewWrapper>
 	);
 };
 

diff --git a/packages/edit-site/src/components/global-styles/preview-styles.js b/packages/edit-site/src/components/global-styles/preview-styles.js
@@ -15,7 +15,7 @@ import { unlock } from '../../lock-unlock';
 import { useStylesPreviewColors } from './hooks';
 import TypographyExample from './typography-example';
 import HighlightedColors from './highlighted-colors';
-import PreviewIframe from './preview-iframe';
+import PreviewWrapper from './preview-wrapper';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
@@ -67,7 +67,7 @@ const PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {
 	const { paletteColors } = useStylesPreviewColors();
 
 	return (
-		<PreviewIframe
+		<PreviewWrapper
 			label={ label }
 			isFocused={ isFocused }
 			withHoverView={ withHoverView }
@@ -178,7 +178,7 @@ const PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {
 					</VStack>
 				</motion.div>
 			) }
-		</PreviewIframe>
+		</PreviewWrapper>
 	);
 };
 

diff --git a/packages/edit-site/src/components/global-styles/preview-typography.js b/packages/edit-site/src/components/global-styles/preview-typography.js
@@ -7,11 +7,11 @@ import { __experimentalHStack as HStack } from '@wordpress/components';
  * Internal dependencies
  */
 import TypographyExample from './typography-example';
-import PreviewIframe from './preview-iframe';
+import PreviewWrapper from './preview-wrapper';
 
 const StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {
 	return (
-		<PreviewIframe
+		<PreviewWrapper
 			label={ variation.title }
 			isFocused={ isFocused }
 			withHoverView={ withHoverView }
@@ -32,7 +32,7 @@ const StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {
 					/>
 				</HStack>
 			) }
-		</PreviewIframe>
+		</PreviewWrapper>
 	);
 };
 

diff --git a/...omponents/global-styles/preview-iframe.js → ...mponents/global-styles/preview-wrapper.js b/...omponents/global-styles/preview-iframe.js → ...mponents/global-styles/preview-wrapper.js
@@ -1,27 +1,21 @@
 /**
  * WordPress dependencies
  */
-import {
-	__unstableIframe as Iframe,
-	__unstableEditorStyles as EditorStyles,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { __unstableMotion as motion } from '@wordpress/components';
 import {
 	useThrottle,
 	useReducedMotion,
 	useResizeObserver,
 } from '@wordpress/compose';
-import { useLayoutEffect, useState, useMemo } from '@wordpress/element';
+import { useLayoutEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 
-const { useGlobalStyle, useGlobalStylesOutput } = unlock(
-	blockEditorPrivateApis
-);
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 const normalizedWidth = 248;
 const normalizedHeight = 152;
@@ -33,15 +27,14 @@ const THROTTLE_OPTIONS = {
 	trailing: true,
 };
 
-export default function PreviewIframe( {
+export default function PreviewWrapper( {
 	children,
 	label,
 	isFocused,
 	withHoverView,
 } ) {
 	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
-	const [ styles ] = useGlobalStylesOutput();
 	const disableMotion = useReducedMotion();
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ containerResizeListener, { width } ] = useResizeObserver();
@@ -54,15 +47,15 @@ export default function PreviewIframe( {
 		THROTTLE_OPTIONS
 	);
 
-	// Must use useLayoutEffect to avoid a flash of the iframe at the wrong
+	// Must use useLayoutEffect to avoid a flash of the container  at the wrong
 	// size before the width is set.
 	useLayoutEffect( () => {
 		if ( width ) {
 			setThrottledWidth( width );
 		}
 	}, [ width, setThrottledWidth ] );
 
-	// Must use useLayoutEffect to avoid a flash of the iframe at the wrong
+	// Must use useLayoutEffect to avoid a flash of the container at the wrong
 	// size before the width is set.
 	useLayoutEffect( () => {
 		const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
@@ -89,24 +82,6 @@ export default function PreviewIframe( {
 	 */
 	const ratio = ratioState ? ratioState : fallbackRatio;
 
-	/*
-	 * Reset leaked styles from WP common.css and remove main content layout padding and border.
-	 * Add pointer cursor to the body to indicate the iframe is interactive,
-	 * similar to Typography variation previews.
-	 */
-	const editorStyles = useMemo( () => {
-		if ( styles ) {
-			return [
-				...styles,
-				{
-					css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;cursor: pointer;}',
-					isGlobalStyles: true,
-				},
-			];
-		}
-
-		return styles;
-	}, [ styles ] );
 	const isReady = !! width;
 
 	return (
@@ -115,16 +90,15 @@ export default function PreviewIframe( {
 				{ containerResizeListener }
 			</div>
 			{ isReady && (
-				<Iframe
-					className="edit-site-global-styles-preview__iframe"
+				<div
+					className="edit-site-global-styles-preview__wrapper"
 					style={ {
 						height: normalizedHeight * ratio,
 					} }
 					onMouseEnter={ () => setIsHovered( true ) }
 					onMouseLeave={ () => setIsHovered( false ) }
 					tabIndex={ -1 }
 				>
-					<EditorStyles styles={ editorStyles } />
 					<motion.div
 						style={ {
 							height: normalizedHeight * ratio,
@@ -145,7 +119,7 @@ export default function PreviewIframe( {
 							.concat( children ) // This makes sure children is always an array.
 							.map( ( child, key ) => child( { ratio, key } ) ) }
 					</motion.div>
-				</Iframe>
+				</div>
 			) }
 		</>
 	);

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -6,7 +6,7 @@
 	cursor: pointer;
 }
 
-.edit-site-global-styles-preview__iframe {
+.edit-site-global-styles-preview__wrapper {
 	max-width: 100%;
 	display: block;
 	width: 100%;
@@ -230,10 +230,6 @@
 	// The &#{&} is a workaround for the specificity of the Card component.
 	&#{&},
 	&#{&} .edit-site-global-styles-screen-root__active-style-tile-preview {
-		box-shadow: none;
 		border-radius: $radius-small;
-		.block-editor-iframe__container {
-			border: 1px solid $gray-200;
-		}
 	}
 }
diff --git a/packages/edit-site/src/components/global-styles/typography-example.js b/packages/edit-site/src/components/global-styles/typography-example.js
@@ -14,7 +14,9 @@ import { unlock } from '../../lock-unlock';
 import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
 import { getFontFamilies } from './utils';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { useGlobalStyle, GlobalStylesContext } = unlock(
+	blockEditorPrivateApis
+);
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 export default function PreviewTypography( { fontSize, variation } ) {
@@ -23,6 +25,9 @@ export default function PreviewTypography( { fontSize, variation } ) {
 	if ( variation ) {
 		config = mergeBaseAndUserConfigs( base, variation );
 	}
+
+	const [ textColor ] = useGlobalStyle( 'color.text' );
+
 	const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );
 	const bodyPreviewStyle = bodyFontFamilies
 		? getFamilyPreviewStyle( bodyFontFamilies )
@@ -31,6 +36,11 @@ export default function PreviewTypography( { fontSize, variation } ) {
 		? getFamilyPreviewStyle( headingFontFamilies )
 		: {};
 
+	if ( textColor ) {
+		bodyPreviewStyle.color = textColor;
+		headingPreviewStyle.color = textColor;
+	}
+
 	if ( fontSize ) {
 		bodyPreviewStyle.fontSize = fontSize;
 		headingPreviewStyle.fontSize = fontSize;
@@ -52,6 +62,7 @@ export default function PreviewTypography( { fontSize, variation } ) {
 			} }
 			style={ {
 				textAlign: 'center',
+				lineHeight: 1,
 			} }
 		>
 			<span style={ headingPreviewStyle }>

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/content.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/content.js
@@ -2,54 +2,26 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 import { __experimentalVStack as VStack } from '@wordpress/components';
-import { BlockEditorProvider } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import StyleVariationsContainer from '../global-styles/style-variations-container';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
 import ColorVariations from '../global-styles/variations/variations-color';
 import TypographyVariations from '../global-styles/variations/variations-typography';
 
-const noop = () => {};
-
 export default function SidebarNavigationScreenGlobalStylesContent() {
-	const { storedSettings } = useSelect( ( select ) => {
-		const { getSettings } = unlock( select( editSiteStore ) );
-
-		return {
-			storedSettings: getSettings(),
-		};
-	}, [] );
-
 	const gap = 3;
 
-	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
-	// loaded. This is necessary because the Iframe component waits until
-	// the block editor store's `__internalIsInitialized` is true before
-	// rendering the iframe. Without this, the iframe previews will not render
-	// in mobile viewport sizes, where the editor canvas is hidden.
 	return (
-		<BlockEditorProvider
-			settings={ storedSettings }
-			onChange={ noop }
-			onInput={ noop }
+		<VStack
+			spacing={ 10 }
+			className="edit-site-global-styles-variation-container"
 		>
-			<VStack
-				spacing={ 10 }
-				className="edit-site-global-styles-variation-container"
-			>
-				<StyleVariationsContainer gap={ gap } />
-				<ColorVariations title={ __( 'Palettes' ) } gap={ gap } />
-				<TypographyVariations
-					title={ __( 'Typography' ) }
-					gap={ gap }
-				/>
-			</VStack>
-		</BlockEditorProvider>
+			<StyleVariationsContainer gap={ gap } />
+			<ColorVariations title={ __( 'Palettes' ) } gap={ gap } />
+			<TypographyVariations title={ __( 'Typography' ) } gap={ gap } />
+		</VStack>
 	);
 }