@wordpress/edit-site 5.31.0 → 5.32.0

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

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	BackgroundPanel: StylesBackgroundPanel,
+} = unlock( blockEditorPrivateApis );
+
+export default function BackgroundPanel() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ settings ] = useGlobalSetting( '' );
+
+	return (
+		<StylesBackgroundPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+		/>
+	);
+}

package/src/components/global-styles/font-families.js

@@ -37,7 +37,7 @@ function FontFamilies() {
 				/>
 			) }
 
-			<VStack spacing={ 3 }>
+			<VStack spacing={ 2 }>
 				<HStack justify="space-between">
 					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 					<HStack justify="flex-end">

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

@@ -105,18 +105,31 @@ function FontLibraryProvider( { children } ) {
 	const [ modalTabOpen, setModalTabOpen ] = useState( false );
 	const [ libraryFontSelected, setLibraryFontSelected ] = useState( null );
 
-	const baseThemeFonts = baseFontFamilies?.theme
-		? baseFontFamilies.theme
-				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
-				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
-		: [];
-
+	// Themes Fonts are the fonts defined in the global styles (database persisted theme.json data).
 	const themeFonts = fontFamilies?.theme
 		? fontFamilies.theme
 				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
 				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
 		: [];
 
+	const themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) );
+
+	/*
+	 * Base Theme Fonts are the fonts defined in the theme.json *file*.
+	 *
+	 * Uses the fonts from global styles + the ones from the theme.json file that hasn't repeated slugs.
+	 * Avoids incosistencies with the fonts listed in the font library modal as base (unactivated).
+	 * These inconsistencies can happen when the active theme fonts in global styles aren't defined in theme.json file as when a theme style variation is applied.
+	 */
+	const baseThemeFonts = baseFontFamilies?.theme
+		? themeFonts.concat(
+				baseFontFamilies.theme
+					.filter( ( f ) => ! themeFontsSlugs.has( f.slug ) )
+					.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+					.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		  )
+		: [];
+
 	const customFonts = fontFamilies?.custom
 		? fontFamilies.custom
 				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
@@ -144,8 +157,7 @@ function FontLibraryProvider( { children } ) {
 			return;
 		}
 
-		const fonts =
-			font.source === 'theme' ? baseThemeFonts : baseCustomFonts;
+		const fonts = font.source === 'theme' ? themeFonts : baseCustomFonts;
 
 		// Tries to find the font in the installed fonts
 		const fontSelected = fonts.find( ( f ) => f.slug === font.slug );
@@ -269,11 +281,13 @@ function FontLibraryProvider( { children } ) {
 					sucessfullyInstalledFontFaces?.length > 0 ||
 					alreadyInstalledFontFaces?.length > 0
 				) {
-					fontFamilyToInstall.fontFace = [
+					// Use font data from REST API not from client to ensure
+					// correct font information is used.
+					installedFontFamily.fontFace = [
 						...sucessfullyInstalledFontFaces,
-						...alreadyInstalledFontFaces,
 					];
-					fontFamiliesToActivate.push( fontFamilyToInstall );
+
+					fontFamiliesToActivate.push( installedFontFamily );
 				}
 
 				// If it's a system font but was installed successfully, activate it.
@@ -390,14 +404,29 @@ function FontLibraryProvider( { children } ) {
 	};
 
 	const activateCustomFontFamilies = ( fontsToAdd ) => {
-		// Merge the existing custom fonts with the new fonts.
+		// Removes the id from the families and faces to avoid saving that to global styles post content.
+		const fontsToActivate = fontsToAdd.map(
+			( { id: _familyDbId, fontFace, ...font } ) => ( {
+				...font,
+				...( fontFace && fontFace.length > 0
+					? {
+							fontFace: fontFace.map(
+								( { id: _faceDbId, ...face } ) => face
+							),
+					  }
+					: {} ),
+			} )
+		);
+
 		// Activate the fonts by set the new custom fonts array.
 		setFontFamilies( {
 			...fontFamilies,
-			custom: mergeFontFamilies( fontFamilies?.custom, fontsToAdd ),
+			// Merge the existing custom fonts with the new fonts.
+			custom: mergeFontFamilies( fontFamilies?.custom, fontsToActivate ),
 		} );
+
 		// Add custom fonts to the browser.
-		fontsToAdd.forEach( ( font ) => {
+		fontsToActivate.forEach( ( font ) => {
 			if ( font.fontFace ) {
 				font.fontFace.forEach( ( face ) => {
 					// Load font faces just in the iframe because they already are in the document.

package/src/components/global-styles/font-library-modal/style.scss

@@ -1,5 +1,5 @@
 .font-library-modal {
-	// @todo: If a new prop is added to the Modal component that constrains
+	// @todo If a new prop is added to the Modal component that constrains
 	// the content width, we should use that prop instead of this style.
 	// see https://github.com/WordPress/gutenberg/issues/54471.
 	&.font-library-modal {

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

@@ -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: [],

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/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

@@ -35,12 +35,12 @@ function ScreenColors() {
 			<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={ 6 }>
-					<ColorVariations />
+			<div className="edit-site-global-styles-screen">
+				<VStack spacing={ 7 }>
+					<ColorVariations title={ __( 'Presets' ) } />
 					<Palette />
 					<StylesColorPanel
 						inheritedValue={ inheritedStyle }

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

@@ -26,17 +26,14 @@ function ScreenTypography() {
 			<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 />
-					{ ! 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,9 +7,9 @@
 }
 
 .edit-site-global-styles-preview__iframe {
-	border-radius: $radius-block-ui;
-	display: block;
+	border-radius: $radius-block-ui + 1px; // Visually resembles the $radius-block-ui.
 	max-width: 100%;
+	display: block;
 	width: 100%;
 }
 
@@ -29,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 {
@@ -52,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 {
@@ -115,6 +116,7 @@
 	flex: 1 1 auto;
 	display: flex;
 	flex-direction: column;
+	margin: $grid-unit-20;
 
 	.components-v-stack {
 		flex: 1 1 auto;

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/variations/style.scss

@@ -5,34 +5,49 @@
 	cursor: pointer;
 
 	.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;
+		position: relative;
+		// Add the same transition that block style variations and other buttons have.
+		transition: box-shadow 0.1s linear;
+		@include reduce-motion("transition");
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: -$border-width;
+			left: -$border-width;
+			bottom: -$border-width;
+			right: -$border-width;
+			// Visually resembles the $radius-block-ui.
+			border-radius: $radius-block-ui + $border-width;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+			// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
+			border: $border-width solid transparent;
+			box-sizing: inherit;
+			// Add the same transition that block style variations and other buttons have.
+			transition: box-shadow 0.1s linear;
+			@include reduce-motion("transition");
+		}
 
 		.edit-site-global-styles-color-variations & {
 			padding: $grid-unit-10;
 		}
 	}
 
-	&.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);
+	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview::after {
+		box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.4);
 	}
 
-	&: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 {
+	&.is-active .edit-site-global-styles-variations_item-preview,
+	&:focus-visible .edit-site-global-styles-variations_item-preview {
+		box-shadow: inset 0 0 0 $border-width $white, 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
 		// Shown in Windows 10 high contrast mode.
-		outline: 3px solid transparent;
-		outline-offset: 0;
+		outline-width: 3px;
+
+		&::after {
+			box-shadow: inset 0 0 0 1px $white;
+		}
 	}
 }

package/src/components/global-styles/variations/variations-color.js

@@ -12,8 +12,9 @@ import {
 import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
 import { useColorVariations } from '../hooks';
+import Subtitle from '../subtitle';
 
-export default function ColorVariations() {
+export default function ColorVariations( { title, gap = 2 } ) {
 	const colorVariations = useColorVariations();
 
 	if ( ! colorVariations?.length ) {
@@ -22,7 +23,8 @@ export default function ColorVariations() {
 
 	return (
 		<VStack spacing={ 3 }>
-			<Grid columns={ 3 }>
+			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
+			<Grid columns={ 3 } gap={ gap }>
 				{ colorVariations.map( ( variation, index ) => (
 					<Variation key={ index } variation={ variation }>
 						{ () => <StylesPreviewColors /> }

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

@@ -14,8 +14,9 @@ import { useTypographyVariations } from '../hooks';
 import TypographyExample from '../typography-example';
 import PreviewIframe from '../preview-iframe';
 import Variation from './variation';
+import Subtitle from '../subtitle';
 
-export default function TypographyVariations() {
+export default function TypographyVariations( { title, gap = 2 } ) {
 	const typographyVariations = useTypographyVariations();
 
 	if ( ! typographyVariations?.length ) {
@@ -24,8 +25,10 @@ export default function TypographyVariations() {
 
 	return (
 		<VStack spacing={ 3 }>
+			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
 			<Grid
 				columns={ 3 }
+				gap={ gap }
 				className="edit-site-global-styles-style-variations-container"
 			>
 				{ typographyVariations &&