@wordpress/edit-site 6.3.0 → 6.5.0

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,16 +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(
@@ -31,10 +32,10 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					{ ! window.__experimentalDisableFontLibrary &&
-						fontLibraryEnabled && <FontFamilies /> }
+					<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,
@@ -395,13 +394,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 +421,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

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	BaseControl,
+	RangeControl,
+	Flex,
+	FlexItem,
+	useBaseControlProps,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalUnitControl as UnitControl,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
+
+function SizeControl( props ) {
+	const { baseControlProps } = useBaseControlProps( props );
+	const { value, onChange, fallbackValue, disabled } = props;
+
+	const units = useCustomUnits( {
+		availableUnits: DEFAULT_UNITS,
+	} );
+
+	const [ valueQuantity, valueUnit = 'px' ] =
+		parseQuantityAndUnitFromRawValue( value, units );
+
+	const isValueUnitRelative =
+		!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );
+
+	// Receives the new value from the UnitControl component as a string containing the value and unit.
+	const handleUnitControlChange = ( newValue ) => {
+		onChange( newValue );
+	};
+
+	// Receives the new value from the RangeControl component as a number.
+	const handleRangeControlChange = ( newValue ) => {
+		onChange?.( newValue + valueUnit );
+	};
+
+	return (
+		<BaseControl { ...baseControlProps }>
+			<Flex>
+				<FlexItem isBlock>
+					<UnitControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Custom' ) }
+						hideLabelFromVision
+						value={ value }
+						onChange={ handleUnitControlChange }
+						units={ units }
+						min={ 0 }
+						disabled={ disabled }
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<Spacer marginX={ 2 } marginBottom={ 0 }>
+						<RangeControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Custom Size' ) }
+							hideLabelFromVision
+							value={ valueQuantity }
+							initialPosition={ fallbackValue }
+							withInputField={ false }
+							onChange={ handleRangeControlChange }
+							min={ 0 }
+							max={ isValueUnitRelative ? 10 : 100 }
+							step={ isValueUnitRelative ? 0.1 : 1 }
+							disabled={ disabled }
+						/>
+					</Spacer>
+				</FlexItem>
+			</Flex>
+		</BaseControl>
+	);
+}
+
+export default SizeControl;

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

@@ -110,6 +110,10 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 		];
 	}, [ fullStyleVariations, userStyles?.blocks, userStyles?.css ] );
 
+	if ( ! fullStyleVariations || fullStyleVariations?.length < 1 ) {
+		return null;
+	}
+
 	return (
 		<Grid
 			columns={ 2 }

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

@@ -23,6 +23,17 @@
 	overflow: hidden;
 }
 
+.edit-site-font-size__item {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	line-break: anywhere;
+}
+
+.edit-site-font-size__item-value {
+	color: $gray-700;
+}
+
 .edit-site-global-styles-screen {
 	margin: $grid-unit-15 $grid-unit-20 $grid-unit-20;
 }
@@ -41,7 +52,6 @@
 	color: $gray-700;
 }
 
-.edit-site-global-styles-font-families__add-fonts,
 .edit-site-global-styles-font-families__manage-fonts {
 	justify-content: center;
 }
@@ -102,13 +112,13 @@
 .edit-site-global-styles__block-preview-panel {
 	position: relative;
 	width: 100%;
-	overflow: auto;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-block-ui;
+	overflow: hidden;
 }
 
 .edit-site-global-styles__shadow-preview-panel {
-	height: 150px;
+	height: $grid-unit-60 * 3;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-block-ui;
 	overflow: auto;
@@ -125,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>
+);

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

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontLibraryProvider, {
+	FontLibraryContext,
+} from './font-library-modal/context';
+import FontLibraryModal from './font-library-modal';
+import FontFamilyItem from './font-family-item';
+import Subtitle from './subtitle';
+import { getFontFamilies } from './utils';
+import { unlock } from '../../lock-unlock';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
+
+function Typesets() {
+	const { modalTabOpen, setModalTabOpen } = useContext( FontLibraryContext );
+	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;
+
+	return (
+		hasFonts && (
+			<>
+				{ !! modalTabOpen && (
+					<FontLibraryModal
+						onRequestClose={ () => setModalTabOpen( null ) }
+						defaultTabId={ modalTabOpen }
+					/>
+				) }
+
+				<VStack spacing={ 2 }>
+					<HStack justify="space-between">
+						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+					</HStack>
+					<ItemGroup isBordered isSeparated>
+						{ allFontFamilies.map(
+							( font ) =>
+								font && (
+									<FontFamilyItem
+										key={ font.slug }
+										font={ font }
+									/>
+								)
+						) }
+					</ItemGroup>
+				</VStack>
+			</>
+		)
+	);
+}
+
+export default ( { ...props } ) => (
+	<FontLibraryProvider>
+		<Typesets { ...props } />
+	</FontLibraryProvider>
+);

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

@@ -32,7 +32,10 @@ import {
 } from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
+import ScreenTypeset from './screen-typeset';
 import ScreenTypographyElement from './screen-typography-element';
+import FontSize from './font-sizes/font-size';
+import FontSizes from './font-sizes/font-sizes';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';
@@ -313,6 +316,18 @@ function GlobalStylesUI() {
 				<ScreenTypography />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path="/typography/font-sizes/">
+				<FontSizes />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/font-sizes/:origin/:slug">
+				<FontSize />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/typeset">
+				<ScreenTypeset />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path="/typography/text">
 				<ScreenTypographyElement element="text" />
 			</GlobalStylesNavigationScreen>

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

@@ -52,7 +52,19 @@ function getFontFamilyFromSetting( fontFamilies, setting ) {
 }
 
 export function getFontFamilies( themeJson ) {
-	const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme.
+	const themeFontFamilies =
+		themeJson?.settings?.typography?.fontFamilies?.theme;
+	const customFontFamilies =
+		themeJson?.settings?.typography?.fontFamilies?.custom;
+
+	let fontFamilies = [];
+	if ( themeFontFamilies && customFontFamilies ) {
+		fontFamilies = [ ...themeFontFamilies, ...customFontFamilies ];
+	} else if ( themeFontFamilies ) {
+		fontFamilies = themeFontFamilies;
+	} else if ( customFontFamilies ) {
+		fontFamilies = customFontFamilies;
+	}
 	const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;
 	const bodyFontFamily = getFontFamilyFromSetting(
 		fontFamilies,

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

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import {
-	__experimentalVStack as VStack,
 	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 /**