@wordpress/edit-site 6.1.0 → 6.3.0

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

@@ -5,11 +5,9 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
 	Button,
 } from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { settings } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -51,30 +49,41 @@ function FontFamilies() {
 			) }
 
 			<VStack spacing={ 2 }>
-				<HStack justify="space-between">
-					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-					<Button
-						onClick={ () => setModalTabOpen( 'installed-fonts' ) }
-						label={ __( 'Manage fonts' ) }
-						icon={ settings }
-						size="small"
-					/>
-				</HStack>
+				<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 				{ hasFonts ? (
-					<ItemGroup isBordered isSeparated>
-						{ customFonts.map( ( font ) => (
-							<FontFamilyItem key={ font.slug } font={ font } />
-						) ) }
-						{ themeFonts.map( ( font ) => (
-							<FontFamilyItem key={ font.slug } font={ font } />
-						) ) }
-					</ItemGroup>
+					<>
+						<ItemGroup isBordered isSeparated>
+							{ customFonts.map( ( font ) => (
+								<FontFamilyItem
+									key={ font.slug }
+									font={ font }
+								/>
+							) ) }
+							{ themeFonts.map( ( font ) => (
+								<FontFamilyItem
+									key={ font.slug }
+									font={ font }
+								/>
+							) ) }
+						</ItemGroup>
+						<Button
+							className="edit-site-global-styles-font-families__manage-fonts"
+							variant="secondary"
+							__next40pxDefaultSize
+							onClick={ () =>
+								setModalTabOpen( 'installed-fonts' )
+							}
+						>
+							{ __( 'Manage fonts' ) }
+						</Button>
+					</>
 				) : (
 					<>
 						{ __( 'No fonts installed.' ) }
 						<Button
 							className="edit-site-global-styles-font-families__add-fonts"
 							variant="secondary"
+							__next40pxDefaultSize
 							onClick={ () => setModalTabOpen( 'upload-fonts' ) }
 						>
 							{ __( 'Add fonts' ) }

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

@@ -451,13 +451,13 @@ function FontLibraryProvider( { children } ) {
 		);
 
 		if ( isFaceActivated ) {
+			unloadFontFaceInBrowser( face, 'all' );
+		} else {
 			loadFontFaceInBrowser(
 				face,
 				getDisplaySrcFromFontFace( face?.src ),
 				'all'
 			);
-		} else {
-			unloadFontFaceInBrowser( face, 'all' );
 		}
 	};
 

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

@@ -28,7 +28,7 @@ import {
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import { moreVertical, chevronLeft } from '@wordpress/icons';
+import { moreVertical, chevronLeft, chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -429,7 +429,7 @@ function FontCollection( { slug } ) {
 					{ selectedFont && (
 						<Flex
 							justify="flex-end"
-							className="font-library-modal__tabpanel-layout__footer"
+							className="font-library-modal__footer"
 						>
 							<Button
 								variant="primary"
@@ -438,7 +438,7 @@ function FontCollection( { slug } ) {
 								disabled={
 									fontsToInstall.length === 0 || isInstalling
 								}
-								__experimentalIsFocusable
+								accessibleWhenDisabled
 							>
 								{ __( 'Install' ) }
 							</Button>
@@ -446,32 +446,26 @@ function FontCollection( { slug } ) {
 					) }
 
 					{ ! selectedFont && (
-						<Flex
+						<HStack
+							spacing={ 4 }
 							justify="center"
-							className="font-library-modal__tabpanel-layout__footer"
+							className="font-library-modal__footer"
 						>
-							<Button
-								label={ __( 'First page' ) }
-								size="compact"
-								onClick={ () => setPage( 1 ) }
-								disabled={ page === 1 }
-								__experimentalIsFocusable
-							>
-								<span>«</span>
-							</Button>
 							<Button
 								label={ __( 'Previous page' ) }
 								size="compact"
 								onClick={ () => setPage( page - 1 ) }
 								disabled={ page === 1 }
-								__experimentalIsFocusable
-							>
-								<span>‹</span>
-							</Button>
+								showTooltip
+								accessibleWhenDisabled
+								icon={ chevronLeft }
+								tooltipPosition="top"
+							/>
 							<HStack
 								justify="flex-start"
 								expanded={ false }
 								spacing={ 2 }
+								className="font-library-modal__page-selection"
 							>
 								{ createInterpolateElement(
 									sprintf(
@@ -514,20 +508,11 @@ function FontCollection( { slug } ) {
 								size="compact"
 								onClick={ () => setPage( page + 1 ) }
 								disabled={ page === totalPages }
-								__experimentalIsFocusable
-							>
-								<span>›</span>
-							</Button>
-							<Button
-								label={ __( 'Last page' ) }
-								size="compact"
-								onClick={ () => setPage( totalPages ) }
-								disabled={ page === totalPages }
-								__experimentalIsFocusable
-							>
-								<span>»</span>
-							</Button>
-						</Flex>
+								accessibleWhenDisabled
+								icon={ chevronRight }
+								tooltipPosition="top"
+							/>
+						</HStack>
 					) }
 				</>
 			) }

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

@@ -311,7 +311,7 @@ function InstalledFonts() {
 
 					<HStack
 						justify="flex-end"
-						className="font-library-modal__tabpanel-layout__footer"
+						className="font-library-modal__footer"
 					>
 						{ isInstalling && <ProgressBar /> }
 						{ shouldDisplayDeleteButton && (
@@ -329,7 +329,7 @@ function InstalledFonts() {
 								saveFontFamilies( fontFamilies );
 							} }
 							disabled={ ! fontFamiliesHasChanges }
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 						>
 							{ __( 'Update' ) }
 						</Button>

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

@@ -49,17 +49,24 @@ $footer-height: 70px;
 		// 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};
-		padding: $grid-unit-20 $grid-unit-40;
-		position: absolute;
-		bottom: $grid-unit-40;
-		width: 100%;
-		height: $footer-height;
-		background-color: $white;
-	}
+.font-library-modal__footer {
+	border-top: 1px solid $gray-300;
+	margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
+	padding: $grid-unit-20 $grid-unit-40;
+	position: absolute;
+	bottom: $grid-unit-40;
+	width: 100%;
+	height: $footer-height;
+	background-color: $white;
+}
+
+.font-library-modal__page-selection {
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+	color: $gray-900;
 }
 
 .font-library-modal__tabpanel-layout .components-base-control__field {

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

@@ -9,12 +9,10 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
@@ -111,42 +109,3 @@ 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',
-		} );
-	/*
-	 * Filter out variations with no settings or styles.
-	 */
-	return typographyVariations?.length
-		? typographyVariations.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
-				);
-		  } )
-		: [];
-}

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import TypographyExample from './typography-example';
+import PreviewIframe from './preview-iframe';
+
+const StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {
+	return (
+		<PreviewIframe
+			label={ variation.title }
+			isFocused={ isFocused }
+			withHoverView={ withHoverView }
+		>
+			{ ( { ratio, key } ) => (
+				<HStack
+					key={ key }
+					spacing={ 10 * ratio }
+					justify="center"
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<TypographyExample
+						variation={ variation }
+						fontSize={ 85 * ratio }
+					/>
+				</HStack>
+			) }
+		</PreviewIframe>
+	);
+};
+
+export default StylesPreviewTypography;

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

@@ -25,6 +25,11 @@ import {
 	VariationsPanel,
 } from './variations/variations-panel';
 
+// Initial control values where no block style is set.
+const BACKGROUND_BLOCK_DEFAULT_VALUES = {
+	backgroundSize: 'cover',
+};
+
 function applyFallbackStyle( border ) {
 	if ( ! border ) {
 		return border;
@@ -70,6 +75,8 @@ const {
 	useHasFiltersPanel,
 	useHasImageSettingsPanel,
 	useGlobalStyle,
+	useHasBackgroundPanel,
+	BackgroundPanel: StylesBackgroundPanel,
 	BorderPanel: StylesBorderPanel,
 	ColorPanel: StylesColorPanel,
 	TypographyPanel: StylesTypographyPanel,
@@ -121,6 +128,7 @@ function ScreenBlock( { name, variation } ) {
 	}
 
 	const blockVariations = useBlockVariations( name );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
@@ -296,6 +304,20 @@ function ScreenBlock( { name, variation } ) {
 				/>
 			) }
 
+			{ hasBackgroundPanel && (
+				<StylesBackgroundPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
+					defaultControls={
+						blockType?.supports?.background
+							?.__experimentalDefaultControls
+					}
+				/>
+			) }
+
 			{ canEditCSS && (
 				<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>
 					<p>

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

@@ -23,7 +23,11 @@ function ScreenLayout() {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	/*
+	 * Use the raw settings to determine if the background panel should be displayed,
+	 * as the background panel is not dependent on the block element settings.
+	 */
+	const hasBackgroundPanel = useHasBackgroundPanel( rawSettings );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />

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

@@ -163,7 +163,7 @@ function RevisionsButtons( {
 					>
 						<Button
 							className="edit-site-global-styles-screen-revisions__revision-button"
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 							disabled={ isSelected }
 							onClick={ () => {
 								onChange( revision );

package/src/components/global-styles/shadows-edit-panel.js

@@ -371,8 +371,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 						'edit-site-global-styles__shadow-editor__remove-button',
 						{ 'is-open': isOpen }
 					),
-					ariaLabel: __( 'Remove shadow' ),
-					tooltip: __( 'Remove shadow' ),
+					label: __( 'Remove shadow' ),
 				};
 
 				return (

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

@@ -13,7 +13,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import PreviewStyles from './preview-styles';
 import Variation from './variations/variation';
-import { isVariationWithSingleProperty } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { isVariationWithProperties } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
@@ -33,11 +33,14 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 		).__experimentalGetCurrentThemeGlobalStylesVariations();
 	}, [] );
 
-	// Filter out variations that are of single property type, i.e. color or typography variations.
-	const multiplePropertyVariations = variations?.filter( ( variation ) => {
+	// Filter out variations that are color or typography variations.
+	const fullStyleVariations = variations?.filter( ( variation ) => {
 		return (
-			! isVariationWithSingleProperty( variation, 'color' ) &&
-			! isVariationWithSingleProperty( variation, 'typography' )
+			! isVariationWithProperties( variation, [ 'color' ] ) &&
+			! isVariationWithProperties( variation, [
+				'typography',
+				'spacing',
+			] )
 		);
 	} );
 
@@ -48,7 +51,7 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 				settings: {},
 				styles: {},
 			},
-			...( multiplePropertyVariations ?? [] ),
+			...( fullStyleVariations ?? [] ),
 		];
 		return [
 			...withEmptyVariation.map( ( variation ) => {
@@ -105,7 +108,7 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 				};
 			} ),
 		];
-	}, [ multiplePropertyVariations, userStyles?.blocks, userStyles?.css ] );
+	}, [ fullStyleVariations, userStyles?.blocks, userStyles?.css ] );
 
 	return (
 		<Grid

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

@@ -41,7 +41,8 @@
 	color: $gray-700;
 }
 
-.edit-site-global-styles-font-families__add-fonts {
+.edit-site-global-styles-font-families__add-fonts,
+.edit-site-global-styles-font-families__manage-fonts {
 	justify-content: center;
 }
 

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

@@ -31,9 +31,6 @@ function ElementItem( { parentMenu, element, label } ) {
 	const [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );
 	const [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );
 	const [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );
-	const [ letterSpacing ] = useGlobalStyle(
-		prefix + 'typography.letterSpacing'
-	);
 	const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );
 	const [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
@@ -62,7 +59,6 @@ function ElementItem( { parentMenu, element, label } ) {
 						color,
 						fontStyle,
 						fontWeight,
-						letterSpacing,
 						...extraStyles,
 					} }
 				>

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

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import { Tooltip } from '@wordpress/components';
 import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
@@ -15,7 +16,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-import { filterObjectByProperty } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { filterObjectByProperties } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../../lock-unlock';
 
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
@@ -23,14 +24,20 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
 
-export default function Variation( { variation, children, isPill, property } ) {
+export default function Variation( {
+	variation,
+	children,
+	isPill,
+	properties,
+	showTooltip,
+} ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 
 	const context = useMemo( () => {
 		let merged = mergeBaseAndUserConfigs( base, variation );
-		if ( property ) {
-			merged = filterObjectByProperty( merged, property );
+		if ( properties ) {
+			merged = filterObjectByProperties( merged, properties );
 		}
 		return {
 			user: variation,
@@ -38,7 +45,7 @@ export default function Variation( { variation, children, isPill, property } ) {
 			merged,
 			setUserConfig: () => {},
 		};
-	}, [ variation, base, property ] );
+	}, [ variation, base, properties ] );
 
 	const selectVariation = () => setUserConfig( variation );
 
@@ -64,30 +71,38 @@ export default function Variation( { variation, children, isPill, property } ) {
 		);
 	}
 
-	return (
-		<GlobalStylesContext.Provider value={ context }>
+	const content = (
+		<div
+			className={ clsx( '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={ clsx( '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 ) }
+				className={ clsx(
+					'edit-site-global-styles-variations_item-preview',
+					{ 'is-pill': isPill }
+				) }
 			>
-				<div
-					className={ clsx(
-						'edit-site-global-styles-variations_item-preview',
-						{ 'is-pill': isPill }
-					) }
-				>
-					{ children( isFocused ) }
-				</div>
+				{ children( isFocused ) }
 			</div>
+		</div>
+	);
+
+	return (
+		<GlobalStylesContext.Provider value={ context }>
+			{ showTooltip ? (
+				<Tooltip text={ variation?.title }>{ content }</Tooltip>
+			) : (
+				content
+			) }
 		</GlobalStylesContext.Provider>
 	);
 }

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

@@ -10,12 +10,14 @@ import {
  * Internal dependencies
  */
 import StylesPreviewColors from '../preview-colors';
-import { useColorVariations } from '../hooks';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import Subtitle from '../subtitle';
 import Variation from './variation';
 
 export default function ColorVariations( { title, gap = 2 } ) {
-	const colorVariations = useColorVariations();
+	const propertiesToFilter = [ 'color' ];
+	const colorVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
 
 	// Return null if there is only one variation (the default).
 	if ( colorVariations?.length <= 1 ) {
@@ -31,7 +33,8 @@ export default function ColorVariations( { title, gap = 2 } ) {
 						key={ index }
 						variation={ variation }
 						isPill
-						property="color"
+						properties={ propertiesToFilter }
+						showTooltip
 					>
 						{ () => <StylesPreviewColors /> }
 					</Variation>