@wordpress/edit-site 5.29.0 → 5.31.0

package/src/components/global-styles/preview-iframe.js

@@ -0,0 +1,152 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__unstableIframe as Iframe,
+	__unstableEditorStyles as EditorStyles,
+	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';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalStyle, useGlobalStylesOutput } = unlock(
+	blockEditorPrivateApis
+);
+
+const normalizedWidth = 248;
+const normalizedHeight = 152;
+
+// Throttle options for useThrottle. Must be defined outside of the component,
+// so that the object reference is the same on each render.
+const THROTTLE_OPTIONS = {
+	leading: true,
+	trailing: true,
+};
+
+export default function PreviewIframe( {
+	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();
+	const [ throttledWidth, setThrottledWidthState ] = useState( width );
+	const [ ratioState, setRatioState ] = useState();
+
+	const setThrottledWidth = useThrottle(
+		setThrottledWidthState,
+		250,
+		THROTTLE_OPTIONS
+	);
+
+	// Must use useLayoutEffect to avoid a flash of the iframe 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
+	// size before the width is set.
+	useLayoutEffect( () => {
+		const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
+		const ratioDiff = newRatio - ( ratioState || 0 );
+
+		// Only update the ratio state if the difference is big enough
+		// or if the ratio state is not yet set. This is to avoid an
+		// endless loop of updates at particular viewport heights when the
+		// presence of a scrollbar causes the width to change slightly.
+		const isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;
+
+		if ( isRatioDiffBigEnough || ! ratioState ) {
+			setRatioState( newRatio );
+		}
+	}, [ throttledWidth, ratioState ] );
+
+	// Set a fallbackRatio to use before the throttled ratio has been set.
+	const fallbackRatio = width ? width / normalizedWidth : 1;
+	/*
+	 * Use the throttled ratio if it has been calculated, otherwise
+	 * use the fallback ratio. The throttled ratio is used to avoid
+	 * an endless loop of updates at particular viewport heights.
+	 * See: https://github.com/WordPress/gutenberg/issues/55112
+	 */
+	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 (
+		<>
+			<div style={ { position: 'relative' } }>
+				{ containerResizeListener }
+			</div>
+			{ isReady && (
+				<Iframe
+					className="edit-site-global-styles-preview__iframe"
+					style={ {
+						height: normalizedHeight * ratio,
+					} }
+					onMouseEnter={ () => setIsHovered( true ) }
+					onMouseLeave={ () => setIsHovered( false ) }
+					tabIndex={ -1 }
+				>
+					<EditorStyles styles={ editorStyles } />
+					<motion.div
+						style={ {
+							height: normalizedHeight * ratio,
+							width: '100%',
+							background: gradientValue ?? backgroundColor,
+							cursor: withHoverView ? 'pointer' : undefined,
+						} }
+						initial="start"
+						animate={
+							( isHovered || isFocused ) &&
+							! disableMotion &&
+							label
+								? 'hover'
+								: 'start'
+						}
+					>
+						{ []
+							.concat( children ) // This makes sure children is always an array.
+							.map( ( child, key ) => child( { ratio, key } ) ) }
+					</motion.div>
+				</Iframe>
+			) }
+		</>
+	);
+}

package/src/components/global-styles/preview-styles.js

@@ -0,0 +1,185 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { useStylesPreviewColors } from './hooks';
+import TypographyExample from './typography-example';
+import HighlightedColors from './highlighted-colors';
+import PreviewIframe from './preview-iframe';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+const firstFrameVariants = {
+	start: {
+		scale: 1,
+		opacity: 1,
+	},
+	hover: {
+		scale: 0,
+		opacity: 0,
+	},
+};
+
+const midFrameVariants = {
+	hover: {
+		opacity: 1,
+	},
+	start: {
+		opacity: 0.5,
+	},
+};
+
+const secondFrameVariants = {
+	hover: {
+		scale: 1,
+		opacity: 1,
+	},
+	start: {
+		scale: 0,
+		opacity: 0,
+	},
+};
+
+const PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {
+	const [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );
+	const [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );
+	const [ headingFontFamily = fontFamily ] = useGlobalStyle(
+		'elements.h1.typography.fontFamily'
+	);
+	const [ headingFontWeight = fontWeight ] = useGlobalStyle(
+		'elements.h1.typography.fontWeight'
+	);
+	const [ textColor = 'black' ] = useGlobalStyle( 'color.text' );
+	const [ headingColor = textColor ] = useGlobalStyle(
+		'elements.h1.color.text'
+	);
+
+	const { paletteColors } = useStylesPreviewColors();
+
+	return (
+		<PreviewIframe
+			label={ label }
+			isFocused={ isFocused }
+			withHoverView={ withHoverView }
+		>
+			{ ( { ratio, key } ) => (
+				<motion.div
+					key={ key }
+					variants={ firstFrameVariants }
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<HStack
+						spacing={ 10 * ratio }
+						justify="center"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+						} }
+					>
+						<TypographyExample
+							fontSize={ 65 * ratio }
+							variation={ variation }
+						/>
+						<VStack spacing={ 4 * ratio }>
+							<HighlightedColors
+								normalizedColorSwatchSize={ 32 }
+								ratio={ ratio }
+							/>
+						</VStack>
+					</HStack>
+				</motion.div>
+			) }
+			{ ( { key } ) => (
+				<motion.div
+					key={ key }
+					variants={ withHoverView && midFrameVariants }
+					style={ {
+						height: '100%',
+						width: '100%',
+						position: 'absolute',
+						top: 0,
+						overflow: 'hidden',
+						filter: 'blur(60px)',
+						opacity: 0.1,
+					} }
+				>
+					<HStack
+						spacing={ 0 }
+						justify="flex-start"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+						} }
+					>
+						{ paletteColors
+							.slice( 0, 4 )
+							.map( ( { color }, index ) => (
+								<div
+									key={ index }
+									style={ {
+										height: '100%',
+										background: color,
+										flexGrow: 1,
+									} }
+								/>
+							) ) }
+					</HStack>
+				</motion.div>
+			) }
+			{ ( { ratio, key } ) => (
+				<motion.div
+					key={ key }
+					variants={ secondFrameVariants }
+					style={ {
+						height: '100%',
+						width: '100%',
+						overflow: 'hidden',
+						position: 'absolute',
+						top: 0,
+					} }
+				>
+					<VStack
+						spacing={ 3 * ratio }
+						justify="center"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+							padding: 10 * ratio,
+							boxSizing: 'border-box',
+						} }
+					>
+						{ label && (
+							<div
+								style={ {
+									fontSize: 40 * ratio,
+									fontFamily: headingFontFamily,
+									color: headingColor,
+									fontWeight: headingFontWeight,
+									lineHeight: '1em',
+									textAlign: 'center',
+								} }
+							>
+								{ label }
+							</div>
+						) }
+					</VStack>
+				</motion.div>
+			) }
+		</PreviewIframe>
+	);
+};
+
+export default PreviewStyles;

package/src/components/global-styles/screen-block-list.js

@@ -26,7 +26,7 @@ import { speak } from '@wordpress/a11y';
 /**
  * Internal dependencies
  */
-import { useBlockVariations } from './variations-panel';
+import { useBlockVariations } from './variations/variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import { unlock } from '../../lock-unlock';

package/src/components/global-styles/screen-block.js

@@ -20,7 +20,10 @@ import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
 import { unlock } from '../../lock-unlock';
 import Subtitle from './subtitle';
-import { useBlockVariations, VariationsPanel } from './variations-panel';
+import {
+	useBlockVariations,
+	VariationsPanel,
+} from './variations/variations-panel';
 
 function applyFallbackStyle( border ) {
 	if ( ! border ) {

package/src/components/global-styles/screen-colors.js

@@ -11,6 +11,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import Palette from './palette';
 import { unlock } from '../../lock-unlock';
+import ColorVariations from './variations/variations-color';
 
 const {
 	useGlobalStyle,
@@ -38,9 +39,9 @@ function ScreenColors() {
 				) }
 			/>
 			<div className="edit-site-global-styles-screen-colors">
-				<VStack spacing={ 10 }>
+				<VStack spacing={ 6 }>
+					<ColorVariations />
 					<Palette />
-
 					<StylesColorPanel
 						inheritedValue={ inheritedStyle }
 						value={ style }

package/src/components/global-styles/screen-revisions/index.js

@@ -73,7 +73,11 @@ function ScreenRevisions() {
 
 	const onCloseRevisions = () => {
 		goTo( '/' ); // Return to global styles main panel.
-		setEditorCanvasContainerView( undefined );
+		const canvasContainerView =
+			editorCanvasContainerView === 'global-styles-revisions:style-book'
+				? 'style-book'
+				: undefined;
+		setEditorCanvasContainerView( canvasContainerView );
 	};
 
 	const restoreRevision = ( revision ) => {
@@ -99,7 +103,6 @@ function ScreenRevisions() {
 			! editorCanvasContainerView.startsWith( 'global-styles-revisions' )
 		) {
 			goTo( '/' ); // Return to global styles main panel.
-			setEditorCanvasContainerView( editorCanvasContainerView );
 		}
 	}, [ editorCanvasContainerView ] );
 

package/src/components/global-styles/screen-root.js

@@ -24,7 +24,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
 import RootMenu from './root-menu';
-import StylesPreview from './preview';
+import PreviewStyles from './preview-styles';
 import { unlock } from '../../lock-unlock';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
@@ -58,7 +58,7 @@ function ScreenRoot() {
 				<VStack spacing={ 4 }>
 					<Card>
 						<CardMedia>
-							<StylesPreview />
+							<PreviewStyles />
 						</CardMedia>
 					</Card>
 					{ hasVariations && (

package/src/components/global-styles/screen-typography.js

@@ -9,7 +9,8 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import TypographyElements from './typogrphy-elements';
+import TypographyElements from './typography-elements';
+import TypographyVariations from './variations/variations-typography';
 import FontFamilies from './font-families';
 import ScreenHeader from './header';
 
@@ -30,7 +31,12 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen-typography">
 				<VStack spacing={ 6 }>
-					{ fontLibraryEnabled && <FontFamilies /> }
+					<TypographyVariations />
+					{ ! window.__experimentalDisableFontLibrary && (
+						<VStack spacing={ 3 }>
+							{ fontLibraryEnabled && <FontFamilies /> }
+						</VStack>
+					) }
 					<TypographyElements />
 				</VStack>
 			</div>

package/src/components/global-styles/style-variations-container.js

@@ -1,104 +1,17 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useMemo, useContext, useState } from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
+import { useMemo } from '@wordpress/element';
 import { __experimentalGrid as Grid } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
-import StylesPreview from './preview';
-import { unlock } from '../../lock-unlock';
-
-const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
-	blockEditorPrivateApis
-);
-
-function Variation( { variation } ) {
-	const [ isFocused, setIsFocused ] = useState( false );
-	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
-	const context = useMemo( () => {
-		return {
-			user: {
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-			},
-			base,
-			merged: mergeBaseAndUserConfigs( base, variation ),
-			setUserConfig: () => {},
-		};
-	}, [ variation, base ] );
-
-	const selectVariation = () => {
-		setUserConfig( () => {
-			return {
-				settings: variation.settings,
-				styles: variation.styles,
-			};
-		} );
-	};
-
-	const selectOnEnter = ( event ) => {
-		if ( event.keyCode === ENTER ) {
-			event.preventDefault();
-			selectVariation();
-		}
-	};
-
-	const isActive = useMemo( () => {
-		return areGlobalStyleConfigsEqual( user, variation );
-	}, [ user, variation ] );
-
-	let label = variation?.title;
-	if ( variation?.description ) {
-		label = sprintf(
-			/* translators: %1$s: variation title. %2$s variation description. */
-			__( '%1$s (%2$s)' ),
-			variation?.title,
-			variation?.description
-		);
-	}
-
-	return (
-		<GlobalStylesContext.Provider value={ context }>
-			<div
-				className={ classnames(
-					'edit-site-global-styles-variations_item',
-					{
-						'is-active': isActive,
-					}
-				) }
-				role="button"
-				onClick={ selectVariation }
-				onKeyDown={ selectOnEnter }
-				tabIndex="0"
-				aria-label={ label }
-				aria-current={ isActive }
-				onFocus={ () => setIsFocused( true ) }
-				onBlur={ () => setIsFocused( false ) }
-			>
-				<div className="edit-site-global-styles-variations_item-preview">
-					<StylesPreview
-						label={ variation?.title }
-						isFocused={ isFocused }
-						withHoverView
-					/>
-				</div>
-			</div>
-		</GlobalStylesContext.Provider>
-	);
-}
+import PreviewStyles from './preview-styles';
+import Variation from './variations/variation';
 
 export default function StyleVariationsContainer() {
 	const variations = useSelect( ( select ) => {
@@ -128,7 +41,16 @@ export default function StyleVariationsContainer() {
 			className="edit-site-global-styles-style-variations-container"
 		>
 			{ withEmptyVariation.map( ( variation, index ) => (
-				<Variation key={ index } variation={ variation } />
+				<Variation key={ index } variation={ variation }>
+					{ ( isFocused ) => (
+						<PreviewStyles
+							label={ variation?.title }
+							withHoverView
+							isFocused={ isFocused }
+							variation={ variation }
+						/>
+					) }
+				</Variation>
 			) ) }
 		</Grid>
 	);

package/src/components/global-styles/style.scss

@@ -7,8 +7,10 @@
 }
 
 .edit-site-global-styles-preview__iframe {
-	max-width: 100%;
+	border-radius: $radius-block-ui;
 	display: block;
+	max-width: 100%;
+	width: 100%;
 }
 
 .edit-site-typography-preview {
@@ -91,40 +93,6 @@
 	margin: 0;
 }
 
-.edit-site-global-styles-variations_item {
-	box-sizing: border-box;
-	// To round the outline in Windows 10 high contrast mode.
-	border-radius: $radius-block-ui;
-
-	.edit-site-global-styles-variations_item-preview {
-		padding: $border-width * 2;
-		border-radius: $radius-block-ui;
-		box-shadow: 0 0 0 $border-width $gray-200;
-		// Shown in Windows 10 high contrast mode.
-		outline: 1px solid transparent;
-	}
-
-	&.is-active .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width $gray-900;
-		// Shown in Windows 10 high contrast mode.
-		outline-width: 3px;
-	}
-
-	&:hover .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-	}
-
-	&:focus .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	&:focus-visible {
-		// Shown in Windows 10 high contrast mode.
-		outline: 3px solid transparent;
-		outline-offset: 0;
-	}
-}
-
 .edit-site-global-styles-icon-with-current-color {
 	fill: currentColor;
 }
@@ -199,3 +167,4 @@
 .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
 	fill: currentColor;
 }
+

package/src/components/global-styles/{typogrphy-elements.js → typography-elements.js}

@@ -35,6 +35,7 @@ function ElementItem( { parentMenu, element, label } ) {
 		prefix + 'typography.letterSpacing'
 	);
 	const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );
+	const [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
 	const [ color ] = useGlobalStyle( prefix + 'color.text' );
 
@@ -54,7 +55,10 @@ function ElementItem( { parentMenu, element, label } ) {
 					className="edit-site-global-styles-screen-typography__indicator"
 					style={ {
 						fontFamily: fontFamily ?? 'serif',
-						background: gradientValue ?? backgroundColor,
+						background:
+							gradientValue ??
+							backgroundColor ??
+							fallbackBackgroundColor,
 						color,
 						fontStyle,
 						fontWeight,