From 96ceed1e91e8de6452cb20642dfac3735639d13d Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Sat, 7 Dec 2024 12:29:59 +0900 Subject: [PATCH] Global Styles Preview: Don't use iframe component (#67682) Co-authored-by: t-hamano Co-authored-by: ramonjd --- .../global-styles/preview-colors.js | 6 +-- .../global-styles/preview-styles.js | 6 +-- .../global-styles/preview-typography.js | 6 +-- .../{preview-iframe.js => preview-wrapper.js} | 44 ++++--------------- .../src/components/global-styles/style.scss | 6 +-- .../global-styles/typography-example.js | 13 +++++- .../content.js | 42 +++--------------- 7 files changed, 38 insertions(+), 85 deletions(-) rename packages/edit-site/src/components/global-styles/{preview-iframe.js => preview-wrapper.js} (73%) diff --git a/packages/edit-site/src/components/global-styles/preview-colors.js b/packages/edit-site/src/components/global-styles/preview-colors.js index 8c1008330ec06..a7e6563748ca0 100644 --- 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 ( - { ) } - + ); }; diff --git a/packages/edit-site/src/components/global-styles/preview-styles.js b/packages/edit-site/src/components/global-styles/preview-styles.js index dff1ef5a6f42b..f392e99ae951e 100644 --- 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 ( - { ) } - + ); }; diff --git a/packages/edit-site/src/components/global-styles/preview-typography.js b/packages/edit-site/src/components/global-styles/preview-typography.js index 26ae13eaa0908..686ebd1e6f065 100644 --- 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 ( - { /> ) } - + ); }; diff --git a/packages/edit-site/src/components/global-styles/preview-iframe.js b/packages/edit-site/src/components/global-styles/preview-wrapper.js similarity index 73% rename from packages/edit-site/src/components/global-styles/preview-iframe.js rename to packages/edit-site/src/components/global-styles/preview-wrapper.js index e830accf6d939..b3c83bad69d84 100644 --- a/packages/edit-site/src/components/global-styles/preview-iframe.js +++ b/packages/edit-site/src/components/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,7 +27,7 @@ const THROTTLE_OPTIONS = { trailing: true, }; -export default function PreviewIframe( { +export default function PreviewWrapper( { children, label, isFocused, @@ -41,7 +35,6 @@ export default function PreviewIframe( { } ) { 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,7 +47,7 @@ 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 ) { @@ -62,7 +55,7 @@ export default function PreviewIframe( { } }, [ 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,8 +90,8 @@ export default function PreviewIframe( { { containerResizeListener } { isReady && ( - + ) } ); diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 4674b5e5fc3ca..11dbae7bc66b1 100644 --- 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 index a491ca57bf5be..9c0a4e0e1cb13 100644 --- 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, } } > 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 index 986238697f734..ce8cd32aa009c 100644 --- 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 ( - - - - - - - + + + + ); }