@wordpress/edit-site 5.31.0 → 5.33.0

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

@@ -15,7 +15,6 @@ import {
 	__experimentalVStack as VStack,
 	Flex,
 	Notice,
-	Spinner,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
@@ -49,6 +48,7 @@ function InstalledFonts() {
 		fontFamiliesHasChanges,
 		notice,
 		setNotice,
+		fontFamilies,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
 	const customFontFamilyId =
@@ -113,162 +113,171 @@ function InstalledFonts() {
 	return (
 		<div className="font-library-modal__tabpanel-layout">
 			{ isResolvingLibrary && (
-				<HStack align="center">
-					<Spacer />
-					<Spinner />
-					<Spacer />
-				</HStack>
+				<div className="font-library-modal__loading">
+					<ProgressBar />
+				</div>
 			) }
 
-			<NavigatorProvider
-				initialPath={ libraryFontSelected ? '/fontFamily' : '/' }
-			>
-				<NavigatorScreen path="/">
-					{ notice && (
-						<>
-							<Spacer margin={ 1 } />
-							<Notice
-								status={ notice.type }
-								onRemove={ () => setNotice( null ) }
-							>
-								{ notice.message }
-							</Notice>
-							<Spacer margin={ 1 } />
-						</>
-					) }
-					{ baseCustomFonts.length > 0 && (
-						<>
-							<Text className="font-library-modal__subtitle">
-								{ __( 'Installed Fonts' ) }
-							</Text>
-							<Spacer margin={ 2 } />
-							{ baseCustomFonts.map( ( font ) => (
-								<FontCard
-									font={ font }
-									key={ font.slug }
-									navigatorPath={ '/fontFamily' }
-									variantsText={ getFontCardVariantsText(
-										font
-									) }
-									onClick={ () => {
-										handleSetLibraryFontSelected( font );
-									} }
-								/>
-							) ) }
-							<Spacer margin={ 8 } />
-						</>
-					) }
+			{ ! isResolvingLibrary && (
+				<>
+					<NavigatorProvider
+						initialPath={
+							libraryFontSelected ? '/fontFamily' : '/'
+						}
+					>
+						<NavigatorScreen path="/">
+							{ notice && (
+								<>
+									<Spacer margin={ 1 } />
+									<Notice
+										status={ notice.type }
+										onRemove={ () => setNotice( null ) }
+									>
+										{ notice.message }
+									</Notice>
+									<Spacer margin={ 1 } />
+								</>
+							) }
+							{ baseCustomFonts.length > 0 && (
+								<>
+									<Text className="font-library-modal__subtitle">
+										{ __( 'Installed Fonts' ) }
+									</Text>
+									<Spacer margin={ 2 } />
+									{ baseCustomFonts.map( ( font ) => (
+										<FontCard
+											font={ font }
+											key={ font.slug }
+											navigatorPath={ '/fontFamily' }
+											variantsText={ getFontCardVariantsText(
+												font
+											) }
+											onClick={ () => {
+												handleSetLibraryFontSelected(
+													font
+												);
+											} }
+										/>
+									) ) }
+									<Spacer margin={ 8 } />
+								</>
+							) }
 
-					{ baseThemeFonts.length > 0 && (
-						<>
-							<Text className="font-library-modal__subtitle">
-								{ __( 'Theme Fonts' ) }
-							</Text>
-							<Spacer margin={ 2 } />
-							{ baseThemeFonts.map( ( font ) => (
-								<FontCard
-									font={ font }
-									key={ font.slug }
-									navigatorPath={ '/fontFamily' }
-									variantsText={ getFontCardVariantsText(
-										font
-									) }
+							{ baseThemeFonts.length > 0 && (
+								<>
+									<Text className="font-library-modal__subtitle">
+										{ __( 'Theme Fonts' ) }
+									</Text>
+									<Spacer margin={ 2 } />
+									{ baseThemeFonts.map( ( font ) => (
+										<FontCard
+											font={ font }
+											key={ font.slug }
+											navigatorPath={ '/fontFamily' }
+											variantsText={ getFontCardVariantsText(
+												font
+											) }
+											onClick={ () => {
+												handleSetLibraryFontSelected(
+													font
+												);
+											} }
+										/>
+									) ) }
+								</>
+							) }
+						</NavigatorScreen>
+
+						<NavigatorScreen path="/fontFamily">
+							<ConfirmDeleteDialog
+								font={ libraryFontSelected }
+								isOpen={ isConfirmDeleteOpen }
+								setIsOpen={ setIsConfirmDeleteOpen }
+								setNotice={ setNotice }
+								uninstallFontFamily={ uninstallFontFamily }
+								handleSetLibraryFontSelected={
+									handleSetLibraryFontSelected
+								}
+							/>
+
+							<Flex justify="flex-start">
+								<NavigatorToParentButton
+									icon={ chevronLeft }
+									size="small"
 									onClick={ () => {
-										handleSetLibraryFontSelected( font );
+										handleSetLibraryFontSelected( null );
 									} }
+									label={ __( 'Back' ) }
 								/>
-							) ) }
-						</>
-					) }
-					<Spacer margin={ 16 } />
-				</NavigatorScreen>
-
-				<NavigatorScreen path="/fontFamily">
-					<ConfirmDeleteDialog
-						font={ libraryFontSelected }
-						isOpen={ isConfirmDeleteOpen }
-						setIsOpen={ setIsConfirmDeleteOpen }
-						setNotice={ setNotice }
-						uninstallFontFamily={ uninstallFontFamily }
-						handleSetLibraryFontSelected={
-							handleSetLibraryFontSelected
-						}
-					/>
+								<Heading
+									level={ 2 }
+									size={ 13 }
+									className="edit-site-global-styles-header"
+								>
+									{ libraryFontSelected?.name }
+								</Heading>
+							</Flex>
+							{ notice && (
+								<>
+									<Spacer margin={ 1 } />
+									<Notice
+										status={ notice.type }
+										onRemove={ () => setNotice( null ) }
+									>
+										{ notice.message }
+									</Notice>
+									<Spacer margin={ 1 } />
+								</>
+							) }
+							<Spacer margin={ 4 } />
+							<Text>
+								{ __(
+									'Choose font variants. Keep in mind that too many variants could make your site slower.'
+								) }
+							</Text>
+							<Spacer margin={ 4 } />
+							<VStack spacing={ 0 }>
+								<Spacer margin={ 8 } />
+								{ getFontFacesToDisplay(
+									libraryFontSelected
+								).map( ( face, i ) => (
+									<LibraryFontVariant
+										font={ libraryFontSelected }
+										face={ face }
+										key={ `face${ i }` }
+									/>
+								) ) }
+							</VStack>
+						</NavigatorScreen>
+					</NavigatorProvider>
 
-					<Flex justify="flex-start">
-						<NavigatorToParentButton
-							icon={ chevronLeft }
-							size="small"
+					<HStack
+						justify="flex-end"
+						className="font-library-modal__tabpanel-layout__footer"
+					>
+						{ isInstalling && <ProgressBar /> }
+						{ shouldDisplayDeleteButton && (
+							<Button
+								isDestructive
+								variant="tertiary"
+								onClick={ handleUninstallClick }
+							>
+								{ __( 'Delete' ) }
+							</Button>
+						) }
+						<Button
+							variant="primary"
 							onClick={ () => {
-								handleSetLibraryFontSelected( null );
+								saveFontFamilies( fontFamilies );
 							} }
-							label={ __( 'Back' ) }
-						/>
-						<Heading
-							level={ 2 }
-							size={ 13 }
-							className="edit-site-global-styles-header"
+							disabled={ ! fontFamiliesHasChanges }
+							__experimentalIsFocusable
 						>
-							{ libraryFontSelected?.name }
-						</Heading>
-					</Flex>
-					{ notice && (
-						<>
-							<Spacer margin={ 1 } />
-							<Notice
-								status={ notice.type }
-								onRemove={ () => setNotice( null ) }
-							>
-								{ notice.message }
-							</Notice>
-							<Spacer margin={ 1 } />
-						</>
-					) }
-					<Spacer margin={ 4 } />
-					<Text>
-						{ __(
-							'Choose font variants. Keep in mind that too many variants could make your site slower.'
-						) }
-					</Text>
-					<Spacer margin={ 4 } />
-					<VStack spacing={ 0 }>
-						<Spacer margin={ 8 } />
-						{ getFontFacesToDisplay( libraryFontSelected ).map(
-							( face, i ) => (
-								<LibraryFontVariant
-									font={ libraryFontSelected }
-									face={ face }
-									key={ `face${ i }` }
-								/>
-							)
-						) }
-					</VStack>
-				</NavigatorScreen>
-			</NavigatorProvider>
-
-			<HStack
-				justify="flex-end"
-				className="font-library-modal__tabpanel-layout__footer"
-			>
-				{ isInstalling && <ProgressBar /> }
-				{ shouldDisplayDeleteButton && (
-					<Button
-						isDestructive
-						variant="tertiary"
-						onClick={ handleUninstallClick }
-					>
-						{ __( 'Delete' ) }
-					</Button>
-				) }
-				<Button
-					variant="primary"
-					onClick={ saveFontFamilies }
-					disabled={ ! fontFamiliesHasChanges }
-					__experimentalIsFocusable
-				>
-					{ __( 'Update' ) }
-				</Button>
-			</HStack>
+							{ __( 'Update' ) }
+						</Button>
+					</HStack>
+				</>
+			) }
 		</div>
 	);
 }

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

@@ -1,9 +1,12 @@
+// Fixed height for the modal footer.
+// Ensures that the footer is always visible when the modal content is scrollable.
+$footer-height: 70px;
+
 .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 {
-
 		@include break-medium() {
 			width: 65vw;
 		}
@@ -15,6 +18,7 @@
 
 	.components-modal__content {
 		padding-top: 0;
+		margin-bottom: $footer-height;
 	}
 
 	.font-library-modal__subtitle {
@@ -30,9 +34,22 @@
 }
 
 .font-library-modal__tabpanel-layout {
-
 	margin-top: $grid-unit-40;
 
+	.font-library-modal__loading {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		position: absolute;
+		left: 0;
+		top: 0;
+		align-items: center;
+		justify-content: center;
+		// Push down so that the progress bar is centered vertically.
+		// It should be 120px (72px modal header height + 48px tab height)
+		padding-top: $header-height + $grid-unit-15 + $grid-unit-60;
+	}
+
 	.font-library-modal__tabpanel-layout__footer {
 		border-top: 1px solid $gray-300;
 		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
@@ -40,6 +57,7 @@
 		position: absolute;
 		bottom: $grid-unit-40;
 		width: 100%;
+		height: $footer-height;
 		background-color: $white;
 	}
 }
@@ -66,19 +84,19 @@
 	.font-library-modal__font-card__count {
 		color: $gray-700;
 	}
-}
 
-.font-library-modal__font-variant_demo-image {
-	display: block;
-	height: $grid-unit-30;
-	width: auto;
-}
+	.font-library-modal__font-variant_demo-image {
+		display: block;
+		height: $grid-unit-30;
+		width: auto;
+	}
 
-.font-library-modal__font-variant_demo-text {
-	white-space: nowrap;
-	flex-shrink: 0;
-	transition: opacity 0.3s ease-in-out;
-	@include reduce-motion("transition");
+	.font-library-modal__font-variant_demo-text {
+		white-space: nowrap;
+		flex-shrink: 0;
+		transition: opacity 0.3s ease-in-out;
+		@include reduce-motion("transition");
+	}
 }
 
 .font-library-modal__font-variant {

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/highlighted-colors.js

@@ -16,7 +16,7 @@ export default function HighlightedColors( {
 	const scaledSwatchSize = normalizedColorSwatchSize * ratio;
 	return highlightedColors.map( ( { slug, color }, index ) => (
 		<motion.div
-			key={ slug }
+			key={ `${ slug }-${ index }` }
 			style={ {
 				height: scaledSwatchSize,
 				width: scaledSwatchSize,

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

@@ -65,6 +65,13 @@ export function useStylesPreviewColors() {
 	const [ headingColor = textColor ] = useGlobalStyle(
 		'elements.h1.color.text'
 	);
+	const [ linkColor = headingColor ] = useGlobalStyle(
+		'elements.link.color.text'
+	);
+
+	const [ buttonBackgroundColor = linkColor ] = useGlobalStyle(
+		'elements.button.color.background'
+	);
 	const [ coreColors ] = useGlobalSetting( 'color.palette.core' );
 	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
 	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
@@ -72,10 +79,20 @@ export function useStylesPreviewColors() {
 	const paletteColors = ( themeColors ?? [] )
 		.concat( customColors ?? [] )
 		.concat( coreColors ?? [] );
-	const highlightedColors = paletteColors
+
+	const textColorObject = paletteColors.filter(
+		( { color } ) => color === textColor
+	);
+	const buttonBackgroundColorObject = paletteColors.filter(
+		( { color } ) => color === buttonBackgroundColor
+	);
+
+	const highlightedColors = textColorObject
+		.concat( buttonBackgroundColorObject )
+		.concat( paletteColors )
 		.filter(
-			// we exclude these two colors because they are already visible in the preview.
-			( { color } ) => color !== backgroundColor && color !== headingColor
+			// we exclude these background color because it is already visible in the preview.
+			( { color } ) => color !== backgroundColor
 		)
 		.slice( 0, 2 );
 

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 image styles' ) }
+					>
+						{ __( 'Background image' ) }
+					</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 image' ) } />
+			{ 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-revisions/index.js

@@ -215,7 +215,7 @@ function ScreenRevisions() {
 					}
 				>
 					{ __(
-						'Any unsaved changes will be lost when you apply this revision.'
+						'Are you sure you want to apply this revision? Any unsaved changes will be lost.'
 					) }
 				</ConfirmDialog>
 			) }