@wordpress/edit-site 5.30.0 → 5.32.0

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

@@ -134,9 +134,9 @@ 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
+				f.family === formatFontFaceName( fontFace?.fontFamily ) &&
+				f.weight === fontFace?.fontWeight &&
+				f.style === fontFace?.fontStyle
 			) {
 				fonts.delete( f );
 			}
@@ -234,10 +234,23 @@ export function makeFontFacesFormData( font ) {
 }
 
 export async function batchInstallFontFaces( fontFamilyId, fontFacesData ) {
-	const promises = fontFacesData.map( ( faceData ) =>
-		fetchInstallFontFace( fontFamilyId, faceData )
-	);
-	const responses = await Promise.allSettled( promises );
+	const responses = [];
+
+	/*
+	 * Uses the same response format as Promise.allSettled, but executes requests in sequence to work
+	 * around a race condition that can cause an error when the fonts directory doesn't exist yet.
+	 */
+	for ( const faceData of fontFacesData ) {
+		try {
+			const response = await fetchInstallFontFace(
+				fontFamilyId,
+				faceData
+			);
+			responses.push( { status: 'fulfilled', value: response } );
+		} catch ( error ) {
+			responses.push( { status: 'rejected', reason: error } );
+		}
+	}
 
 	const results = {
 		errors: [],
@@ -259,7 +272,7 @@ export async function batchInstallFontFaces( fontFamilyId, fontFacesData ) {
 			// Handle network errors or other fetch-related errors
 			results.errors.push( {
 				data: fontFacesData[ index ],
-				message: `Fetch error: ${ result.reason.message }`,
+				message: result.reason.message,
 			} );
 		}
 	} );

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

@@ -87,6 +87,10 @@ export function formatFontFamily( input ) {
  * formatFontFaceName(", 'Open Sans', 'Helvetica Neue', sans-serif") => "Open Sans"
  */
 export function formatFontFaceName( input ) {
+	if ( ! input ) {
+		return '';
+	}
+
 	let output = input.trim();
 	if ( output.includes( ',' ) ) {
 		output = output

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

@@ -26,7 +26,7 @@ function ScreenHeader( { title, description, onBack } ) {
 							}
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							size="small"
-							aria-label={ __( 'Navigate to the previous view' ) }
+							label={ __( 'Back' ) }
 							onClick={ onBack }
 						/>
 						<Spacer>

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

@@ -9,14 +9,21 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useContext } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { getFontFamilies } from './utils';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(
+	blockEditorPrivateApis
+);
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -92,3 +99,63 @@ export function useSupportedStyles( name, element ) {
 
 	return supportedPanels;
 }
+
+export function useColorVariations() {
+	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
+		property: 'color',
+	} );
+	/*
+	 * Filter out variations with no settings or styles.
+	 */
+	return colorVariations?.length
+		? colorVariations.filter( ( variation ) => {
+				const { settings, styles, title } = variation;
+				return (
+					title === __( 'Default' ) || // Always preseve the default variation.
+					Object.keys( settings ).length > 0 ||
+					Object.keys( styles ).length > 0
+				);
+		  } )
+		: [];
+}
+
+export function useTypographyVariations() {
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( {
+			property: 'typography',
+		} );
+
+	const { base } = useContext( GlobalStylesContext );
+	/*
+	 * Filter duplicate variations based on whether the variaitons
+	 * have different heading and body font families.
+	 */
+	return typographyVariations?.length
+		? Object.values(
+				typographyVariations.reduce( ( acc, variation ) => {
+					const [ bodyFontFamily, headingFontFamily ] =
+						getFontFamilies(
+							mergeBaseAndUserConfigs( base, variation )
+						);
+
+					// Always preseve the default variation.
+					if ( variation?.title === 'Default' ) {
+						acc[
+							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
+						] = variation;
+					} else if (
+						headingFontFamily?.name &&
+						bodyFontFamily?.name &&
+						! acc[
+							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
+						]
+					) {
+						acc[
+							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
+						] = variation;
+					}
+					return acc;
+				}, {} )
+		  )
+		: [];
+}

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

@@ -87,7 +87,9 @@ function Palette( { name } ) {
 									</ColorIndicatorWrapper>
 								) ) }
 						</ZStack>
-						<FlexItem>{ paletteButtonText }</FlexItem>
+						<FlexItem className="edit-site-global-styles-screen-colors__palette-count">
+							{ paletteButtonText }
+						</FlexItem>
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>

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

@@ -40,7 +40,7 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 					} }
 				>
 					<HStack
-						spacing={ 10 * ratio }
+						spacing={ 5 * ratio }
 						justify="center"
 						style={ {
 							height: '100%',
@@ -48,7 +48,7 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 						} }
 					>
 						<HighlightedColors
-							normalizedColorSwatchSize={ 66 }
+							normalizedColorSwatchSize={ 56 }
 							ratio={ ratio }
 						/>
 					</HStack>

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

@@ -118,7 +118,6 @@ export default function PreviewIframe( {
 				<Iframe
 					className="edit-site-global-styles-preview__iframe"
 					style={ {
-						width: '100%',
 						height: normalizedHeight * ratio,
 					} }
 					onMouseEnter={ () => setIsHovered( true ) }

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

@@ -13,7 +13,7 @@ import {
  */
 import { unlock } from '../../lock-unlock';
 import { useStylesPreviewColors } from './hooks';
-import PreviewTypography from './preview-typography';
+import TypographyExample from './typography-example';
 import HighlightedColors from './highlighted-colors';
 import PreviewIframe from './preview-iframe';
 
@@ -89,7 +89,7 @@ const PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {
 							overflow: 'hidden',
 						} }
 					>
-						<PreviewTypography
+						<TypographyExample
 							fontSize={ 65 * ratio }
 							variation={ variation }
 						/>

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, color, layout } from '@wordpress/icons';
+import { typography, color, layout, image } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -18,6 +18,7 @@ const {
 	useHasColorPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
+	useHasBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
 function RootMenu() {
@@ -27,6 +28,7 @@ function RootMenu() {
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 
 	return (
 		<>
@@ -58,6 +60,15 @@ function RootMenu() {
 						{ __( 'Layout' ) }
 					</NavigationButtonAsItem>
 				) }
+				{ hasBackgroundPanel && (
+					<NavigationButtonAsItem
+						icon={ image }
+						path="/background"
+						aria-label={ __( 'Background styles' ) }
+					>
+						{ __( 'Background' ) }
+					</NavigationButtonAsItem>
+				) }
 			</ItemGroup>
 		</>
 	);

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

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import BackgroundPanel from './background-panel';
+import ScreenHeader from './header';
+import { unlock } from '../../lock-unlock';
+
+const { useHasBackgroundPanel, useGlobalSetting } = unlock(
+	blockEditorPrivateApis
+);
+
+function ScreenBackground() {
+	const [ settings ] = useGlobalSetting( '' );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	return (
+		<>
+			<ScreenHeader title={ __( 'Background' ) } />
+			{ hasBackgroundPanel && <BackgroundPanel /> }
+		</>
+	);
+}
+
+export default ScreenBackground;

package/src/components/global-styles/screen-color-palette.js

@@ -25,8 +25,8 @@ function ScreenColorPalette( { name } ) {
 			/>
 			<Tabs>
 				<Tabs.TabList>
-					<Tabs.Tab tabId="solid">Solid</Tabs.Tab>
-					<Tabs.Tab tabId="gradient">Gradient</Tabs.Tab>
+					<Tabs.Tab tabId="solid">{ __( 'Solid' ) }</Tabs.Tab>
+					<Tabs.Tab tabId="gradient">{ __( 'Gradient' ) }</Tabs.Tab>
 				</Tabs.TabList>
 				<Tabs.TabPanel tabId="solid" focusable={ false }>
 					<ColorPalettePanel name={ name } />

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

@@ -12,7 +12,6 @@ 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,
@@ -31,28 +30,18 @@ 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
 				title={ __( 'Colors' ) }
 				description={ __(
-					'Manage palettes and the default color of different global elements on the site.'
+					'Palette colors and the application of those colors on site elements.'
 				) }
 			/>
-			<div className="edit-site-global-styles-screen-colors">
-				<VStack spacing={ 3 }>
-					{ !! colorVariations.length && (
-						<ColorVariations variations={ colorVariations } />
-					) }
-
+			<div className="edit-site-global-styles-screen">
+				<VStack spacing={ 7 }>
+					<ColorVariations title={ __( 'Presets' ) } />
 					<Palette />
-
 					<StylesColorPanel
 						inheritedValue={ inheritedStyle }
 						value={ style }

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

@@ -3,9 +3,7 @@
  */
 import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useEffect, useRef } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useZoomOut } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -14,43 +12,13 @@ import ScreenHeader from './header';
 import StyleVariationsContainer from './style-variations-container';
 
 function ScreenStyleVariations() {
-	const { mode } = useSelect( ( select ) => {
-		return {
-			mode: select( blockEditorStore ).__unstableGetEditorMode(),
-		};
-	}, [] );
-
-	const shouldRevertInitialMode = useRef( null );
-	useEffect( () => {
-		// ignore changes to zoom-out mode as we explictily change to it on mount.
-		if ( mode !== 'zoom-out' ) {
-			shouldRevertInitialMode.current = false;
-		}
-	}, [ mode ] );
-
-	// Intentionality left without any dependency.
-	// This effect should only run the first time the component is rendered.
-	// The effect opens the zoom-out view if it is not open before when applying a style variation.
-	useEffect( () => {
-		if ( mode !== 'zoom-out' ) {
-			__unstableSetEditorMode( 'zoom-out' );
-			shouldRevertInitialMode.current = true;
-			return () => {
-				// if there were not mode changes revert to the initial mode when unmounting.
-				if ( shouldRevertInitialMode.current ) {
-					__unstableSetEditorMode( mode );
-				}
-			};
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	// Move to zoom out mode when this component is mounted
+	// and back to the previous mode when unmounted.
+	useZoomOut();
 
 	return (
 		<>
 			<ScreenHeader
-				back="/"
 				title={ __( 'Browse styles' ) }
 				description={ __(
 					'Choose a variation to change the look of the site.'

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

@@ -13,7 +13,6 @@ import TypographyElements from './typography-elements';
 import TypographyVariations from './variations/variations-typography';
 import FontFamilies from './font-families';
 import ScreenHeader from './header';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 function ScreenTypography() {
 	const fontLibraryEnabled = useSelect(
@@ -21,33 +20,20 @@ function ScreenTypography() {
 			select( editorStore ).getEditorSettings().fontLibraryEnabled,
 		[]
 	);
-	const typographyVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( {
-			property: 'typography',
-			filter: ( variation ) =>
-				variation?.settings?.typography?.fontFamilies &&
-				Object.keys( variation?.settings?.typography?.fontFamilies )
-					.length,
-		} );
 
 	return (
 		<>
 			<ScreenHeader
 				title={ __( 'Typography' ) }
 				description={ __(
-					'Manage the typography settings for different elements.'
+					'Typography styles and the application of those styles on site elements.'
 				) }
 			/>
-			<div className="edit-site-global-styles-screen-typography">
-				<VStack spacing={ 6 }>
-					{ !! typographyVariations.length && (
-						<TypographyVariations />
-					) }
-					{ ! window.__experimentalDisableFontLibrary && (
-						<VStack spacing={ 3 }>
-							{ fontLibraryEnabled && <FontFamilies /> }
-						</VStack>
-					) }
+			<div className="edit-site-global-styles-screen">
+				<VStack spacing={ 7 }>
+					<TypographyVariations title={ __( 'Presets' ) } />
+					{ ! window.__experimentalDisableFontLibrary &&
+						fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
 				</VStack>
 			</div>

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

@@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n';
 import PreviewStyles from './preview-styles';
 import Variation from './variations/variation';
 
-export default function StyleVariationsContainer() {
+export default function StyleVariationsContainer( { gap = 2 } ) {
 	const variations = useSelect( ( select ) => {
 		return select(
 			coreStore
@@ -39,6 +39,7 @@ export default function StyleVariationsContainer() {
 		<Grid
 			columns={ 2 }
 			className="edit-site-global-styles-style-variations-container"
+			gap={ gap }
 		>
 			{ withEmptyVariation.map( ( variation, index ) => (
 				<Variation key={ index } variation={ variation }>

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

@@ -7,8 +7,10 @@
 }
 
 .edit-site-global-styles-preview__iframe {
+	border-radius: $radius-block-ui + 1px; // Visually resembles the $radius-block-ui.
 	max-width: 100%;
 	display: block;
+	width: 100%;
 }
 
 .edit-site-typography-preview {
@@ -27,9 +29,8 @@
 	max-width: 100%;
 }
 
-.edit-site-global-styles-screen-typography,
-.edit-site-global-styles-screen-css {
-	margin: $grid-unit-20;
+.edit-site-global-styles-screen {
+	margin: $grid-unit-15 $grid-unit-20 $grid-unit-20;
 }
 
 .edit-site-global-styles-screen-typography__indicator {
@@ -50,14 +51,16 @@
 	justify-content: center;
 }
 
-.edit-site-global-styles-screen-colors {
-	margin: $grid-unit-20;
+.edit-site-global-styles-screen .color-block-support-panel {
+	padding-left: 0;
+	padding-right: 0;
+	padding-top: 0;
+	border-top: none;
+	row-gap: calc(#{$grid-unit-05} * 3);
+}
 
-	.color-block-support-panel {
-		padding-left: 0;
-		padding-right: 0;
-		border-top: none;
-	}
+.edit-site-global-styles-screen-colors__palette-count {
+	color: $gray-700;
 }
 
 .edit-site-global-styles-header__description {
@@ -113,6 +116,7 @@
 	flex: 1 1 auto;
 	display: flex;
 	flex-direction: column;
+	margin: $grid-unit-20;
 
 	.components-v-stack {
 		flex: 1 1 auto;
@@ -165,3 +169,4 @@
 .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
 	fill: currentColor;
 }
+

package/src/components/global-styles/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,

package/src/components/global-styles/{preview-typography.js → typography-example.js}

@@ -37,7 +37,6 @@ export default function PreviewTypography( { fontSize, variation } ) {
 
 	return (
 		<motion.div
-			className="edit-site-global-styles_preview-typography"
 			animate={ {
 				scale: 1,
 				opacity: 1,
@@ -50,6 +49,9 @@ export default function PreviewTypography( { fontSize, variation } ) {
 				delay: 0.3,
 				type: 'tween',
 			} }
+			style={ {
+				textAlign: 'center',
+			} }
 		>
 			<span style={ headingPreviewStyle }>
 				{ _x( 'A', 'Uppercase letter A' ) }

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

@@ -27,6 +27,7 @@ export default function TypographyPreview( { name, element, headingLevel } ) {
 		prefix + 'color.background',
 		name
 	);
+	const [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
 	const [ fontSize ] = useGlobalStyle( prefix + 'typography.fontSize', name );
 	const [ fontStyle ] = useGlobalStyle(
@@ -53,7 +54,8 @@ export default function TypographyPreview( { name, element, headingLevel } ) {
 			className="edit-site-typography-preview"
 			style={ {
 				fontFamily: fontFamily ?? 'serif',
-				background: gradientValue ?? backgroundColor,
+				background:
+					gradientValue ?? backgroundColor ?? fallbackBackgroundColor,
 				color,
 				fontSize,
 				fontStyle,

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

@@ -40,6 +40,7 @@ import ScreenStyleVariations from './screen-style-variations';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import ScreenRevisions from './screen-revisions';
+import ScreenBackground from './screen-background';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -344,6 +345,10 @@ function GlobalStylesUI() {
 				<ScreenRevisions />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ '/background' }>
+				<ScreenBackground />
+			</GlobalStylesNavigationScreen>
+
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }

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

@@ -12,7 +12,7 @@ export function getVariationClassName( variation ) {
 }
 
 function getFontFamilyFromSetting( fontFamilies, setting ) {
-	if ( ! setting ) {
+	if ( ! Array.isArray( fontFamilies ) || ! setting ) {
 		return null;
 	}