@wordpress/edit-site 5.29.0 → 5.30.0

package/src/components/global-styles/font-library-modal/utils/index.js

@@ -121,7 +121,47 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 	}
 }
 
-export function getDisplaySrcFromFontFace( input, urlPrefix ) {
+/*
+ * Unloads the font face and remove it from the browser.
+ * It also removes it from the iframe document.
+ *
+ * Note that Font faces that were added to the set using the CSS @font-face rule
+ * remain connected to the corresponding CSS, and cannot be deleted.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/delete.
+ */
+export function unloadFontFaceInBrowser( fontFace, removeFrom = 'all' ) {
+	const unloadFontFace = ( fonts ) => {
+		fonts.forEach( ( f ) => {
+			if (
+				f.family === formatFontFaceName( fontFace.fontFamily ) &&
+				f.weight === fontFace.fontWeight &&
+				f.style === fontFace.fontStyle
+			) {
+				fonts.delete( f );
+			}
+		} );
+	};
+
+	if ( removeFrom === 'document' || removeFrom === 'all' ) {
+		unloadFontFace( document.fonts );
+	}
+
+	if ( removeFrom === 'iframe' || removeFrom === 'all' ) {
+		const iframeDocument = document.querySelector(
+			'iframe[name="editor-canvas"]'
+		).contentDocument;
+		unloadFontFace( iframeDocument.fonts );
+	}
+}
+
+/**
+ * Retrieves the display source from a font face src.
+ *
+ * @param {string|string[]} input - The font face src.
+ * @return {string|undefined} The display source or undefined if the input is invalid.
+ */
+export function getDisplaySrcFromFontFace( input ) {
 	if ( ! input ) {
 		return;
 	}
@@ -132,9 +172,9 @@ export function getDisplaySrcFromFontFace( input, urlPrefix ) {
 	} else {
 		src = input;
 	}
-	// If it is a theme font, we need to make the url absolute
-	if ( src.startsWith( 'file:.' ) && urlPrefix ) {
-		src = src.replace( 'file:.', urlPrefix );
+	// It's expected theme fonts will already be loaded in the browser.
+	if ( src.startsWith( 'file:.' ) ) {
+		return;
 	}
 	if ( ! isUrlEncoded( src ) ) {
 		src = encodeURI( src );

package/src/components/global-styles/font-library-modal/utils/preview-styles.js

@@ -117,7 +117,8 @@ export function getFamilyPreviewStyle( family ) {
 	if ( family.fontFace ) {
 		//get all the font faces with normal style
 		const normalFaces = family.fontFace.filter(
-			( face ) => face.fontStyle.toLowerCase() === 'normal'
+			( face ) =>
+				face?.fontStyle && face.fontStyle.toLowerCase() === 'normal'
 		);
 		if ( normalFaces.length > 0 ) {
 			style.fontStyle = 'normal';

package/src/components/global-styles/font-library-modal/utils/test/getDisplaySrcFromFontFace.spec.js

@@ -21,33 +21,22 @@ describe( 'getDisplaySrcFromFontFace', () => {
 		);
 	} );
 
-	it( 'makes URL absolute when it starts with file:. and urlPrefix is given', () => {
-		const input = 'file:./font1';
-		const urlPrefix = 'http://example.com';
-		expect( getDisplaySrcFromFontFace( input, urlPrefix ) ).toBe(
-			'http://example.com/font1'
-		);
-	} );
-
-	it( 'does not modify URL if it does not start with file:.', () => {
-		const input = [ 'http://some-other-place.com/font1' ];
-		const urlPrefix = 'http://example.com';
-		expect( getDisplaySrcFromFontFace( input, urlPrefix ) ).toBe(
-			'http://some-other-place.com/font1'
-		);
+	it( 'return undefined when the url starts with file:', () => {
+		const input = 'file:./theme/assets/font1.ttf';
+		expect( getDisplaySrcFromFontFace( input ) ).toBe( undefined );
 	} );
 
 	it( 'encodes the URL if it is not encoded', () => {
-		const input = 'file:./assets/font one with spaces.ttf';
+		const input = 'https://example.org/font one with spaces.ttf';
 		expect( getDisplaySrcFromFontFace( input ) ).toBe(
-			'file:./assets/font%20one%20with%20spaces.ttf'
+			'https://example.org/font%20one%20with%20spaces.ttf'
 		);
 	} );
 
 	it( 'does not encode the URL if it is already encoded', () => {
-		const input = 'file:./font%20one';
+		const input = 'https://example.org/fonts/font%20one.ttf';
 		expect( getDisplaySrcFromFontFace( input ) ).toBe(
-			'file:./font%20one'
+			'https://example.org/fonts/font%20one.ttf'
 		);
 	} );
 } );

package/src/components/global-styles/gradients-palette-panel.js

@@ -114,8 +114,8 @@ export default function GradientPalettePanel( { name } ) {
 					<Spacer margin={ 3 } />
 					<DuotonePicker
 						duotonePalette={ duotonePalette }
-						disableCustomDuotone={ true }
-						disableCustomColors={ true }
+						disableCustomDuotone
+						disableCustomColors
 						clearable={ false }
 						onChange={ noop }
 					/>

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

@@ -25,7 +25,7 @@ function ScreenHeader( { title, description, onBack } ) {
 								{ minWidth: 24, padding: 0 }
 							}
 							icon={ isRTL() ? chevronRight : chevronLeft }
-							isSmall
+							size="small"
 							aria-label={ __( 'Navigate to the previous view' ) }
 							onClick={ onBack }
 						/>

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __unstableMotion as motion } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useStylesPreviewColors } from './hooks';
+
+export default function HighlightedColors( {
+	normalizedColorSwatchSize,
+	ratio,
+} ) {
+	const { highlightedColors } = useStylesPreviewColors();
+	const scaledSwatchSize = normalizedColorSwatchSize * ratio;
+	return highlightedColors.map( ( { slug, color }, index ) => (
+		<motion.div
+			key={ slug }
+			style={ {
+				height: scaledSwatchSize,
+				width: scaledSwatchSize,
+				background: color,
+				borderRadius: scaledSwatchSize / 2,
+			} }
+			animate={ {
+				scale: 1,
+				opacity: 1,
+			} }
+			initial={ {
+				scale: 0.1,
+				opacity: 0,
+			} }
+			transition={ {
+				delay: index === 1 ? 0.2 : 0.1,
+			} }
+		/>
+	) );
+}

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

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import HighlightedColors from './highlighted-colors';
+import PreviewIframe from './preview-iframe';
+
+const firstFrameVariants = {
+	start: {
+		scale: 1,
+		opacity: 1,
+	},
+	hover: {
+		scale: 0,
+		opacity: 0,
+	},
+};
+
+const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
+	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',
+						} }
+					>
+						<HighlightedColors
+							normalizedColorSwatchSize={ 66 }
+							ratio={ ratio }
+						/>
+					</HStack>
+				</motion.div>
+			) }
+		</PreviewIframe>
+	);
+};
+
+export default StylesPreviewColors;

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

@@ -0,0 +1,153 @@
+/**
+ * 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={ {
+						width: '100%',
+						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 PreviewTypography from './preview-typography';
+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',
+						} }
+					>
+						<PreviewTypography
+							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/preview-typography.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { __unstableMotion as motion } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
+import { unlock } from '../../lock-unlock';
+import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
+import { getFontFamilies } from './utils';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+
+export default function PreviewTypography( { fontSize, variation } ) {
+	const { base } = useContext( GlobalStylesContext );
+	let config = base;
+	if ( variation ) {
+		config = mergeBaseAndUserConfigs( base, variation );
+	}
+	const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );
+	const bodyPreviewStyle = bodyFontFamilies
+		? getFamilyPreviewStyle( bodyFontFamilies )
+		: {};
+	const headingPreviewStyle = headingFontFamilies
+		? getFamilyPreviewStyle( headingFontFamilies )
+		: {};
+
+	if ( fontSize ) {
+		bodyPreviewStyle.fontSize = fontSize;
+		headingPreviewStyle.fontSize = fontSize;
+	}
+
+	return (
+		<motion.div
+			className="edit-site-global-styles_preview-typography"
+			animate={ {
+				scale: 1,
+				opacity: 1,
+			} }
+			initial={ {
+				scale: 0.1,
+				opacity: 0,
+			} }
+			transition={ {
+				delay: 0.3,
+				type: 'tween',
+			} }
+		>
+			<span style={ headingPreviewStyle }>
+				{ _x( 'A', 'Uppercase letter A' ) }
+			</span>
+			<span style={ bodyPreviewStyle }>
+				{ _x( 'a', 'Lowercase letter A' ) }
+			</span>
+		</motion.div>
+	);
+}

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,8 @@ 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';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 const {
 	useGlobalStyle,
@@ -29,6 +31,12 @@ function ScreenColors() {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 
+	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
+		property: 'color',
+		filter: ( variation ) =>
+			variation?.settings?.color &&
+			Object.keys( variation?.settings?.color ).length,
+	} );
 	return (
 		<>
 			<ScreenHeader
@@ -38,7 +46,11 @@ function ScreenColors() {
 				) }
 			/>
 			<div className="edit-site-global-styles-screen-colors">
-				<VStack spacing={ 10 }>
+				<VStack spacing={ 3 }>
+					{ !! colorVariations.length && (
+						<ColorVariations variations={ colorVariations } />
+					) }
+
 					<Palette />
 
 					<StylesColorPanel