@wordpress/edit-site 6.4.0 → 6.6.0

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

@@ -53,14 +53,13 @@ function InstalledFonts() {
 		isInstalling,
 		saveFontFamilies,
 		getFontFacesActivated,
-		notice,
-		setNotice,
 	} = useContext( FontLibraryContext );
 
 	const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
 		'typography.fontFamilies'
 	);
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+	const [ notice, setNotice ] = useState( false );
 	const [ baseFontFamilies ] = useGlobalSetting(
 		'typography.fontFamilies',
 		undefined,
@@ -120,6 +119,26 @@ function InstalledFonts() {
 		setIsConfirmDeleteOpen( true );
 	};
 
+	const handleUpdate = async () => {
+		setNotice( null );
+		try {
+			await saveFontFamilies( fontFamilies );
+			setNotice( {
+				type: 'success',
+				message: __( 'Font family updated successfully.' ),
+			} );
+		} catch ( error ) {
+			setNotice( {
+				type: 'error',
+				message: sprintf(
+					/* translators: %s: error message */
+					__( 'There was an error updating the font family. %s' ),
+					error.message
+				),
+			} );
+		}
+	};
+
 	const getFontFacesToDisplay = ( font ) => {
 		if ( ! font ) {
 			return [];
@@ -265,6 +284,7 @@ function InstalledFonts() {
 															font
 														) }
 														onClick={ () => {
+															setNotice( null );
 															handleSetLibraryFontSelected(
 																font
 															);
@@ -305,6 +325,7 @@ function InstalledFonts() {
 															font
 														) }
 														onClick={ () => {
+															setNotice( null );
 															handleSetLibraryFontSelected(
 																font
 															);
@@ -337,6 +358,7 @@ function InstalledFonts() {
 									size="small"
 									onClick={ () => {
 										handleSetLibraryFontSelected( null );
+										setNotice( null );
 									} }
 									label={ __( 'Back' ) }
 								/>
@@ -406,9 +428,7 @@ function InstalledFonts() {
 						) }
 						<Button
 							variant="primary"
-							onClick={ () => {
-								saveFontFamilies( fontFamilies );
-							} }
+							onClick={ handleUpdate }
 							disabled={ ! fontFamiliesHasChanges }
 							accessibleWhenDisabled
 						>
@@ -446,7 +466,7 @@ function ConfirmDeleteDialog( {
 			setNotice( {
 				type: 'error',
 				message:
-					__( 'There was an error uninstalling the font family. ' ) +
+					__( 'There was an error uninstalling the font family.' ) +
 					error.message,
 			} );
 		}

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

@@ -69,6 +69,7 @@ $footer-height: 70px;
 	color: $gray-900;
 }
 
+// TODO: See if this can be removed after https://github.com/WordPress/gutenberg/issues/38730
 .font-library-modal__tabpanel-layout .components-base-control__field {
 	margin-bottom: 0;
 }
@@ -91,7 +92,7 @@ $footer-height: 70px;
 }
 
 .font-library-modal__font-card {
-	border: 1px solid $gray-200;
+	border: $border-width solid $gray-200;
 	width: 100%;
 	height: auto;
 	padding: $grid-unit-20;
@@ -194,4 +195,3 @@ button.font-library-modal__upload-area {
 		padding-left: $grid-unit-20;
 	}
 }
-

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

@@ -25,9 +25,9 @@ import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
 
 function UploadFonts() {
-	const { installFonts, notice, setNotice } =
-		useContext( FontLibraryContext );
+	const { installFonts } = useContext( FontLibraryContext );
 	const [ isUploading, setIsUploading ] = useState( false );
+	const [ notice, setNotice ] = useState( false );
 
 	const handleDropZone = ( files ) => {
 		handleFilesUpload( files );

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

@@ -25,9 +25,10 @@ import {
 	VariationsPanel,
 } from './variations/variations-panel';
 
-// Initial control values where no block style is set.
+// Initial control values.
 const BACKGROUND_BLOCK_DEFAULT_VALUES = {
 	backgroundSize: 'cover',
+	backgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.
 };
 
 function applyFallbackStyle( border ) {
@@ -84,7 +85,6 @@ const {
 	FiltersPanel: StylesFiltersPanel,
 	ImageSettingsPanel,
 	AdvancedPanel: StylesAdvancedPanel,
-	useGlobalStyleLinks,
 } = unlock( blockEditorPrivateApis );
 
 function ScreenBlock( { name, variation } ) {
@@ -104,7 +104,6 @@ function ScreenBlock( { name, variation } ) {
 	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
 	const blockType = getBlockType( name );
-	const _links = useGlobalStyleLinks();
 
 	// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
 	if (
@@ -271,7 +270,6 @@ function ScreenBlock( { name, variation } ) {
 					onChange={ setStyle }
 					settings={ settings }
 					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
-					themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 				/>
 			) }
 			{ hasTypographyPanel && (

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

@@ -34,7 +34,9 @@ function ScreenCSS() {
 					<>
 						{ description }
 						<ExternalLink
-							href="https://developer.wordpress.org/advanced-administration/wordpress/css/"
+							href={ __(
+								'https://developer.wordpress.org/advanced-administration/wordpress/css/'
+							) }
 							className="edit-site-global-styles-screen-css-help-link"
 						>
 							{ __( 'Learn more about CSS' ) }

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

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import TypographyVariations from './variations/variations-typography';
+import ScreenHeader from './header';
+import FontFamilies from './font-families';
+
+function ScreenTypeset() {
+	const fontLibraryEnabled = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().fontLibraryEnabled,
+		[]
+	);
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Typesets' ) }
+				description={ __(
+					'Fonts and typographic styling applied across the site.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen">
+				<VStack spacing={ 7 }>
+					<TypographyVariations />
+
+					{ fontLibraryEnabled && <FontFamilies /> }
+				</VStack>
+			</div>
+		</>
+	);
+}
+
+export default ScreenTypeset;

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

@@ -67,30 +67,44 @@ function ScreenTypographyElement( { element } ) {
 					>
 						<ToggleGroupControlOption
 							value="heading"
+							showTooltip
+							aria-label={ __( 'All headings' ) }
 							label={ _x( 'All', 'heading levels' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h1"
+							showTooltip
+							aria-label={ __( 'Heading 1' ) }
 							label={ __( 'H1' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h2"
+							showTooltip
+							aria-label={ __( 'Heading 2' ) }
 							label={ __( 'H2' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h3"
+							showTooltip
+							aria-label={ __( 'Heading 3' ) }
 							label={ __( 'H3' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h4"
+							showTooltip
+							aria-label={ __( 'Heading 4' ) }
 							label={ __( 'H4' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h5"
+							showTooltip
+							aria-label={ __( 'Heading 5' ) }
 							label={ __( 'H5' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h6"
+							showTooltip
+							aria-label={ __( 'Heading 6' ) }
 							label={ __( 'H6' ) }
 						/>
 					</ToggleGroupControl>

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

@@ -3,17 +3,17 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalVStack as VStack } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import TypographyElements from './typography-elements';
-import TypographyVariations from './variations/variations-typography';
-import FontFamilies from './font-families';
 import ScreenHeader from './header';
 import FontSizesCount from './font-sizes/font-sizes-count';
+import TypesetButton from './typeset-button';
+import FontFamilies from './font-families';
 
 function ScreenTypography() {
 	const fontLibraryEnabled = useSelect(
@@ -32,9 +32,9 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
+					<TypesetButton />
 					{ fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
-					<TypographyVariations title={ __( 'Presets' ) } />
 					<FontSizesCount />
 				</VStack>
 			</div>

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

@@ -11,7 +11,6 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalSpacer as Spacer,
 	__experimentalItemGroup as ItemGroup,
-	__experimentalHeading as Heading,
 	__experimentalInputControl as InputControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
@@ -224,6 +223,7 @@ export default function ShadowsEditPanel() {
 						} }
 					>
 						<InputControl
+							__next40pxDefaultSize
 							autoComplete="off"
 							label={ __( 'Name' ) }
 							placeholder={ __( 'Shadow name' ) }
@@ -395,13 +395,14 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 				);
 			} }
 			renderContent={ () => (
-				<DropdownContentWrapper paddingSize="none">
-					<div className="edit-site-global-styles__shadow-editor__dropdown-content">
-						<ShadowPopover
-							shadowObj={ shadowObj }
-							onChange={ onShadowChange }
-						/>
-					</div>
+				<DropdownContentWrapper
+					paddingSize="medium"
+					className="edit-site-global-styles__shadow-editor__dropdown-content"
+				>
+					<ShadowPopover
+						shadowObj={ shadowObj }
+						onChange={ onShadowChange }
+					/>
 				</DropdownContentWrapper>
 			) }
 		/>
@@ -421,71 +422,64 @@ function ShadowPopover( { shadowObj, onChange } ) {
 	};
 
 	return (
-		<div className="edit-site-global-styles__shadow-editor-panel">
-			<VStack spacing={ 2 }>
-				<Heading level={ 5 }>{ __( 'Shadow' ) }</Heading>
-				<div className="edit-site-global-styles__shadow-editor-color-palette">
-					<ColorPalette
-						clearable={ false }
-						enableAlpha={ enableAlpha }
-						__experimentalIsRenderedInSidebar={
-							__experimentalIsRenderedInSidebar
-						}
-						value={ shadowObj.color }
-						onChange={ ( value ) =>
-							onShadowChange( 'color', value )
-						}
-					/>
-				</div>
-				<ToggleGroupControl
-					value={ shadowObj.inset ? 'inset' : 'outset' }
-					isBlock
-					onChange={ ( value ) =>
-						onShadowChange( 'inset', value === 'inset' )
-					}
-					hideLabelFromVision
-					__next40pxDefaultSize
-				>
-					<ToggleGroupControlOption
-						value="outset"
-						label={ __( 'Outset' ) }
-					/>
-					<ToggleGroupControlOption
-						value="inset"
-						label={ __( 'Inset' ) }
-					/>
-				</ToggleGroupControl>
-				<Grid columns={ 2 } gap={ 4 }>
-					<ShadowInputControl
-						label={ __( 'X Position' ) }
-						value={ shadowObj.x }
-						hasNegativeRange
-						onChange={ ( value ) => onShadowChange( 'x', value ) }
-					/>
-					<ShadowInputControl
-						label={ __( 'Y Position' ) }
-						value={ shadowObj.y }
-						hasNegativeRange
-						onChange={ ( value ) => onShadowChange( 'y', value ) }
-					/>
-					<ShadowInputControl
-						label={ __( 'Blur' ) }
-						value={ shadowObj.blur }
-						onChange={ ( value ) =>
-							onShadowChange( 'blur', value )
-						}
-					/>
-					<ShadowInputControl
-						label={ __( 'Spread' ) }
-						value={ shadowObj.spread }
-						hasNegativeRange
-						onChange={ ( value ) =>
-							onShadowChange( 'spread', value )
-						}
-					/>
-				</Grid>
-			</VStack>
-		</div>
+		<VStack
+			spacing={ 4 }
+			className="edit-site-global-styles__shadow-editor-panel"
+		>
+			<ColorPalette
+				clearable={ false }
+				enableAlpha={ enableAlpha }
+				__experimentalIsRenderedInSidebar={
+					__experimentalIsRenderedInSidebar
+				}
+				value={ shadowObj.color }
+				onChange={ ( value ) => onShadowChange( 'color', value ) }
+			/>
+			<ToggleGroupControl
+				__nextHasNoMarginBottom
+				value={ shadowObj.inset ? 'inset' : 'outset' }
+				isBlock
+				onChange={ ( value ) =>
+					onShadowChange( 'inset', value === 'inset' )
+				}
+				hideLabelFromVision
+				__next40pxDefaultSize
+			>
+				<ToggleGroupControlOption
+					value="outset"
+					label={ __( 'Outset' ) }
+				/>
+				<ToggleGroupControlOption
+					value="inset"
+					label={ __( 'Inset' ) }
+				/>
+			</ToggleGroupControl>
+			<Grid columns={ 2 } gap={ 4 }>
+				<ShadowInputControl
+					label={ __( 'X Position' ) }
+					value={ shadowObj.x }
+					hasNegativeRange
+					onChange={ ( value ) => onShadowChange( 'x', value ) }
+				/>
+				<ShadowInputControl
+					label={ __( 'Y Position' ) }
+					value={ shadowObj.y }
+					hasNegativeRange
+					onChange={ ( value ) => onShadowChange( 'y', value ) }
+				/>
+				<ShadowInputControl
+					label={ __( 'Blur' ) }
+					value={ shadowObj.blur }
+					onChange={ ( value ) => onShadowChange( 'blur', value ) }
+				/>
+				<ShadowInputControl
+					label={ __( 'Spread' ) }
+					value={ shadowObj.spread }
+					hasNegativeRange
+					onChange={ ( value ) => onShadowChange( 'spread', value ) }
+				/>
+			</Grid>
+		</VStack>
 	);
 }
 

package/src/components/global-styles/size-control/index.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -20,9 +19,13 @@ import {
 
 const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
-function SizeControl( props ) {
+function SizeControl( {
+	// Do not allow manipulation of margin bottom
+	__nextHasNoMarginBottom,
+	...props
+} ) {
 	const { baseControlProps } = useBaseControlProps( props );
-	const { value, onChange, fallbackValue, disabled } = props;
+	const { value, onChange, fallbackValue, disabled, label } = props;
 
 	const units = useCustomUnits( {
 		availableUnits: DEFAULT_UNITS,
@@ -45,13 +48,13 @@ function SizeControl( props ) {
 	};
 
 	return (
-		<BaseControl { ...baseControlProps }>
+		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
 			<Flex>
 				<FlexItem isBlock>
 					<UnitControl
 						__next40pxDefaultSize
 						__nextHasNoMarginBottom
-						label={ __( 'Custom' ) }
+						label={ label }
 						hideLabelFromVision
 						value={ value }
 						onChange={ handleUnitControlChange }
@@ -65,7 +68,7 @@ function SizeControl( props ) {
 						<RangeControl
 							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Custom Size' ) }
+							label={ label }
 							hideLabelFromVision
 							value={ valueQuantity }
 							initialPosition={ fallbackValue }

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

@@ -135,16 +135,13 @@
 	}
 }
 
-.edit-site-global-styles__shadow-editor-panel {
+.edit-site-global-styles__shadow-editor__dropdown-content {
 	width: 280px;
-	padding: $grid-unit-20;
+}
+
+.edit-site-global-styles__shadow-editor-panel {
 	// because tooltip of the range control is too close to the edge and creates overflow
 	margin-bottom: $grid-unit-05;
-
-	& .edit-site-global-styles__shadow-editor-color-palette {
-		// color palette adds empty .components-circular-option-picker
-		margin-bottom: -1 * $grid-unit-05;
-	}
 }
 
 .edit-site-global-styles__shadow-editor__dropdown {

package/src/components/global-styles/typeset-button.js

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { isRTL, __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { useMemo, useContext } from '@wordpress/element';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import FontLibraryProvider from './font-library-modal/context';
+import { getFontFamilies } from './utils';
+import { NavigationButtonAsItem } from './navigation-button';
+import Subtitle from './subtitle';
+import { unlock } from '../../lock-unlock';
+import { filterObjectByProperties } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
+
+function TypesetButton() {
+	const { base } = useContext( GlobalStylesContext );
+	const { user: userConfig } = useContext( GlobalStylesContext );
+	const config = mergeBaseAndUserConfigs( base, userConfig );
+	const allFontFamilies = getFontFamilies( config );
+	const hasFonts =
+		allFontFamilies.filter( ( font ) => font !== null ).length > 0;
+	const variations = useSelect( ( select ) => {
+		return select(
+			coreStore
+		).__experimentalGetCurrentThemeGlobalStylesVariations();
+	}, [] );
+	const userTypographyConfig = filterObjectByProperties(
+		userConfig,
+		'typography'
+	);
+
+	const title = useMemo( () => {
+		if ( Object.keys( userTypographyConfig ).length === 0 ) {
+			return __( 'Default' );
+		}
+		const activeVariation = variations?.find( ( variation ) => {
+			return (
+				JSON.stringify(
+					filterObjectByProperties( variation, 'typography' )
+				) === JSON.stringify( userTypographyConfig )
+			);
+		} );
+		if ( activeVariation ) {
+			return activeVariation.title;
+		}
+		return allFontFamilies.map( ( font ) => font?.name ).join( ', ' );
+	}, [ allFontFamilies, userTypographyConfig, variations ] );
+
+	return (
+		hasFonts && (
+			<VStack spacing={ 2 }>
+				<HStack justify="space-between">
+					<Subtitle level={ 3 }>{ __( 'Typeset' ) }</Subtitle>
+				</HStack>
+				<ItemGroup isBordered isSeparated>
+					<NavigationButtonAsItem
+						path="/typography/typeset"
+						aria-label={ __( 'Typeset' ) }
+					>
+						<HStack direction="row">
+							<FlexItem>{ title }</FlexItem>
+							<Icon
+								icon={ isRTL() ? chevronLeft : chevronRight }
+							/>
+						</HStack>
+					</NavigationButtonAsItem>
+				</ItemGroup>
+			</VStack>
+		)
+	);
+}
+
+export default ( { ...props } ) => (
+	<FontLibraryProvider>
+		<TypesetButton { ...props } />
+	</FontLibraryProvider>
+);