@wordpress/edit-site 4.10.0 → 4.12.1-next.d6164808d3.0

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

@@ -4,7 +4,7 @@
 import { getPresetVariableFromValue, getValueFromVariable } from '../utils';
 
 describe( 'editor utils', () => {
-	const styles = {
+	const themeJson = {
 		version: 1,
 		settings: {
 			color: {
@@ -57,7 +57,7 @@ describe( 'editor utils', () => {
 		describe( 'when a provided global style (e.g. fontFamily, color,etc.) does not exist', () => {
 			it( 'returns the originally provided value', () => {
 				const actual = getPresetVariableFromValue(
-					styles.settings,
+					themeJson.settings,
 					context,
 					'fakePropertyName',
 					value
@@ -69,7 +69,7 @@ describe( 'editor utils', () => {
 		describe( 'when a global style is cleared by the user', () => {
 			it( 'returns an undefined preset variable', () => {
 				const actual = getPresetVariableFromValue(
-					styles.settings,
+					themeJson.settings,
 					context,
 					propertyName,
 					undefined
@@ -83,7 +83,7 @@ describe( 'editor utils', () => {
 				it( 'returns the originally provided value', () => {
 					const customValue = '#6e4545';
 					const actual = getPresetVariableFromValue(
-						styles.settings,
+						themeJson.settings,
 						context,
 						propertyName,
 						customValue
@@ -95,7 +95,7 @@ describe( 'editor utils', () => {
 			describe( 'and it is a preset value', () => {
 				it( 'returns the preset variable', () => {
 					const actual = getPresetVariableFromValue(
-						styles.settings,
+						themeJson.settings,
 						context,
 						propertyName,
 						value
@@ -110,7 +110,7 @@ describe( 'editor utils', () => {
 		describe( 'when provided an invalid variable', () => {
 			it( 'returns the originally provided value', () => {
 				const actual = getValueFromVariable(
-					styles.settings,
+					themeJson,
 					'root',
 					undefined
 				);
@@ -122,7 +122,7 @@ describe( 'editor utils', () => {
 		describe( 'when provided a preset variable', () => {
 			it( 'retrieves the correct preset value', () => {
 				const actual = getValueFromVariable(
-					styles.settings,
+					themeJson,
 					'root',
 					'var:preset|color|primary'
 				);
@@ -134,7 +134,7 @@ describe( 'editor utils', () => {
 		describe( 'when provided a custom variable', () => {
 			it( 'retrieves the correct custom value', () => {
 				const actual = getValueFromVariable(
-					styles.settings,
+					themeJson,
 					'root',
 					'var(--wp--custom--color--secondary)'
 				);
@@ -142,5 +142,65 @@ describe( 'editor utils', () => {
 				expect( actual ).toBe( '#a65555' );
 			} );
 		} );
+
+		describe( 'when provided a dynamic reference', () => {
+			it( 'retrieves the referenced value', () => {
+				const stylesWithRefs = {
+					...themeJson,
+					styles: {
+						color: {
+							background: {
+								ref: 'styles.color.text',
+							},
+							text: 'purple-rain',
+						},
+					},
+				};
+				const actual = getValueFromVariable( stylesWithRefs, 'root', {
+					ref: 'styles.color.text',
+				} );
+
+				expect( actual ).toBe( stylesWithRefs.styles.color.text );
+			} );
+
+			it( 'returns the originally provided value where value is dynamic reference and reference does not exist', () => {
+				const stylesWithRefs = {
+					...themeJson,
+					styles: {
+						color: {
+							text: {
+								ref: 'styles.background.text',
+							},
+						},
+					},
+				};
+				const actual = getValueFromVariable( stylesWithRefs, 'root', {
+					ref: 'styles.color.text',
+				} );
+
+				expect( actual ).toBe( stylesWithRefs.styles.color.text );
+			} );
+
+			it( 'returns the originally provided value where value is dynamic reference', () => {
+				const stylesWithRefs = {
+					...themeJson,
+					styles: {
+						color: {
+							background: {
+								ref: 'styles.color.text',
+							},
+							text: {
+								ref: 'styles.background.text',
+							},
+						},
+					},
+				};
+				const actual = getValueFromVariable( stylesWithRefs, 'root', {
+					ref: 'styles.color.text',
+				} );
+
+				expect( actual ).toBe( stylesWithRefs.styles.color.text );
+			} );
+		} );
 	} );
 } );

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

@@ -10,9 +10,12 @@ import {
 import {
 	PanelBody,
 	FontSizePicker,
-	__experimentalSpacer as Spacer,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalGrid as Grid,
 } from '@wordpress/components';
-
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -59,9 +62,14 @@ function useHasLetterSpacingControl( name ) {
 }
 
 export default function TypographyPanel( { name, element } ) {
+	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
 	const supports = getSupportedGlobalStylesPanels( name );
-	const prefix =
-		element === 'text' || ! element ? '' : `elements.${ element }.`;
+	let prefix = '';
+	if ( element === 'heading' ) {
+		prefix = `elements.${ selectedLevel }.`;
+	} else if ( element && element !== 'text' ) {
+		prefix = `elements.${ element }.`;
+	}
 	const [ fontSizes ] = useSetting( 'typography.fontSizes', name );
 	const disableCustomFontSizes = ! useSetting(
 		'typography.customFontSize',
@@ -78,6 +86,12 @@ export default function TypographyPanel( { name, element } ) {
 	const hasAppearanceControl = useHasAppearanceControl( name );
 	const hasLetterSpacingControl = useHasLetterSpacingControl( name );
 
+	/* Disable font size controls when the option to style all headings is selected. */
+	let hasFontSizeEnabled = supports.includes( 'fontSize' );
+	if ( element === 'heading' && selectedLevel === 'heading' ) {
+		hasFontSizeEnabled = false;
+	}
+
 	const [ fontFamily, setFontFamily ] = useStyle(
 		prefix + 'typography.fontFamily',
 		name
@@ -130,54 +144,111 @@ export default function TypographyPanel( { name, element } ) {
 			>
 				Aa
 			</div>
-
-			{ supports.includes( 'fontFamily' ) && (
-				<FontFamilyControl
-					fontFamilies={ fontFamilies }
-					value={ fontFamily }
-					onChange={ setFontFamily }
-				/>
-			) }
-			{ supports.includes( 'fontSize' ) && (
-				<FontSizePicker
-					value={ fontSize }
-					onChange={ setFontSize }
-					fontSizes={ fontSizes }
-					disableCustomFontSizes={ disableCustomFontSizes }
-				/>
-			) }
-			{ hasLineHeightEnabled && (
-				<Spacer marginBottom={ 6 }>
+			<Grid columns={ 2 } rowGap={ 16 } columnGap={ 8 }>
+				{ element === 'heading' && (
+					<div className="edit-site-typography-panel__full-width-control">
+						<ToggleGroupControl
+							label={ __( 'Select heading level' ) }
+							hideLabelFromVision
+							value={ selectedLevel }
+							onChange={ setCurrentTab }
+							isBlock
+							size="__unstable-large"
+							__nextHasNoMarginBottom
+						>
+							<ToggleGroupControlOption
+								value="heading"
+								/* translators: 'All' refers to selecting all heading levels 
+							and applying the same style to h1-h6. */
+								label={ __( 'All' ) }
+							/>
+							<ToggleGroupControlOption
+								value="h1"
+								label={ __( 'H1' ) }
+							/>
+							<ToggleGroupControlOption
+								value="h2"
+								label={ __( 'H2' ) }
+							/>
+							<ToggleGroupControlOption
+								value="h3"
+								label={ __( 'H3' ) }
+							/>
+							<ToggleGroupControlOption
+								value="h4"
+								label={ __( 'H4' ) }
+							/>
+							<ToggleGroupControlOption
+								value="h5"
+								label={ __( 'H5' ) }
+							/>
+							<ToggleGroupControlOption
+								value="h6"
+								label={ __( 'H6' ) }
+							/>
+						</ToggleGroupControl>
+					</div>
+				) }
+				{ supports.includes( 'fontFamily' ) && (
+					<div className="edit-site-typography-panel__full-width-control">
+						<FontFamilyControl
+							fontFamilies={ fontFamilies }
+							value={ fontFamily }
+							onChange={ setFontFamily }
+							size="__unstable-large"
+							__nextHasNoMarginBottom
+						/>
+					</div>
+				) }
+				{ hasFontSizeEnabled && (
+					<div className="edit-site-typography-panel__full-width-control">
+						<FontSizePicker
+							value={ fontSize }
+							onChange={ setFontSize }
+							fontSizes={ fontSizes }
+							disableCustomFontSizes={ disableCustomFontSizes }
+							size="__unstable-large"
+							__nextHasNoMarginBottom
+						/>
+					</div>
+				) }
+				{ hasAppearanceControl && (
+					<FontAppearanceControl
+						value={ {
+							fontStyle,
+							fontWeight,
+						} }
+						onChange={ ( {
+							fontStyle: newFontStyle,
+							fontWeight: newFontWeight,
+						} ) => {
+							setFontStyle( newFontStyle );
+							setFontWeight( newFontWeight );
+						} }
+						hasFontStyles={ hasFontStyles }
+						hasFontWeights={ hasFontWeights }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				) }
+				{ hasLineHeightEnabled && (
 					<LineHeightControl
-						__nextHasNoMarginBottom={ true }
+						__nextHasNoMarginBottom
+						__unstableInputWidth="auto"
 						value={ lineHeight }
 						onChange={ setLineHeight }
+						size="__unstable-large"
+					/>
+				) }
+				{ hasLetterSpacingControl && (
+					<LetterSpacingControl
+						value={ letterSpacing }
+						onChange={ setLetterSpacing }
+						size="__unstable-large"
+						__unstableInputWidth="auto"
 					/>
-				</Spacer>
-			) }
-			{ hasAppearanceControl && (
-				<FontAppearanceControl
-					value={ {
-						fontStyle,
-						fontWeight,
-					} }
-					onChange={ ( {
-						fontStyle: newFontStyle,
-						fontWeight: newFontWeight,
-					} ) => {
-						setFontStyle( newFontStyle );
-						setFontWeight( newFontWeight );
-					} }
-					hasFontStyles={ hasFontStyles }
-					hasFontWeights={ hasFontWeights }
-				/>
-			) }
-			{ hasLetterSpacingControl && (
-				<LetterSpacingControl
-					value={ letterSpacing }
-					onChange={ setLetterSpacing }
-				/>
-			) }
+				) }
+			</Grid>
 		</PanelBody>
 	);
 }

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

@@ -0,0 +1,228 @@
+/**
+ * The fluid utilities must match the backend equivalent.
+ * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php
+ * ---------------------------------------------------------------
+ */
+
+/**
+ * Returns a font-size value based on a given font-size preset.
+ * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
+ *
+ * @param {Object}           preset
+ * @param {string}           preset.size              A default font size.
+ * @param {string}           preset.name              A font size name, displayed in the UI.
+ * @param {string}           preset.slug              A font size slug.
+ * @param {Object}           preset.fluid
+ * @param {string|undefined} preset.fluid.max         A maximum font size value.
+ * @param {string|undefined} preset.fluid.min         A minimum font size value.
+ * @param {Object}           typographySettings
+ * @param {boolean}          typographySettings.fluid Whether fluid typography is enabled.
+ *
+ * @return {string} An font-size value
+ */
+export function getTypographyFontSizeValue( preset, typographySettings ) {
+	const { size: defaultSize } = preset;
+
+	if ( true !== typographySettings?.fluid ) {
+		return defaultSize;
+	}
+
+	// Defaults.
+	const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
+	const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
+	const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
+	const DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;
+	const DEFAULT_SCALE_FACTOR = 1;
+
+	// Font sizes.
+	// A font size has explicitly bypassed fluid calculations.
+	if ( false === preset?.fluid ) {
+		return defaultSize;
+	}
+
+	const fluidFontSizeSettings = preset?.fluid || {};
+
+	// Try to grab explicit min and max fluid font sizes.
+	let minimumFontSizeRaw = fluidFontSizeSettings?.min;
+	let maximumFontSizeRaw = fluidFontSizeSettings?.max;
+	const preferredSize = getTypographyValueAndUnit( defaultSize );
+
+	// Protect against unsupported units.
+	if ( ! preferredSize?.unit ) {
+		return defaultSize;
+	}
+
+	// If no fluid min or max font sizes are available, create some using min/max font size factors.
+	if ( ! minimumFontSizeRaw ) {
+		minimumFontSizeRaw =
+			preferredSize.value * DEFAULT_MINIMUM_FONT_SIZE_FACTOR +
+			preferredSize.unit;
+	}
+
+	if ( ! maximumFontSizeRaw ) {
+		maximumFontSizeRaw =
+			preferredSize.value * DEFAULT_MAXIMUM_FONT_SIZE_FACTOR +
+			preferredSize.unit;
+	}
+
+	const fluidFontSizeValue = getComputedFluidTypographyValue( {
+		maximumViewPortWidth: DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
+		minimumViewPortWidth: DEFAULT_MINIMUM_VIEWPORT_WIDTH,
+		maximumFontSize: maximumFontSizeRaw,
+		minimumFontSize: minimumFontSizeRaw,
+		scaleFactor: DEFAULT_SCALE_FACTOR,
+	} );
+
+	if ( !! fluidFontSizeValue ) {
+		return fluidFontSizeValue;
+	}
+
+	return defaultSize;
+}
+
+/**
+ * Internal implementation of clamp() based on available min/max viewport width, and min/max font sizes.
+ *
+ * @param {Object} args
+ * @param {string} args.maximumViewPortWidth Maximum size up to which type will have fluidity.
+ * @param {string} args.minimumViewPortWidth Minimum viewport size from which type will have fluidity.
+ * @param {string} args.maximumFontSize      Maximum font size for any clamp() calculation.
+ * @param {string} args.minimumFontSize      Minimum font size for any clamp() calculation.
+ * @param {number} args.scaleFactor          A scale factor to determine how fast a font scales within boundaries.
+ *
+ * @return {string|null} A font-size value using clamp().
+ */
+export function getComputedFluidTypographyValue( {
+	maximumViewPortWidth,
+	minimumViewPortWidth,
+	maximumFontSize,
+	minimumFontSize,
+	scaleFactor,
+} ) {
+	// Grab the minimum font size and normalize it in order to use the value for calculations.
+	const minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );
+
+	// We get a 'preferred' unit to keep units consistent when calculating,
+	// otherwise the result will not be accurate.
+	const fontSizeUnit = minimumFontSizeParsed?.unit || 'rem';
+
+	// Grab the maximum font size and normalize it in order to use the value for calculations.
+	const maximumFontSizeParsed = getTypographyValueAndUnit( maximumFontSize, {
+		coerceTo: fontSizeUnit,
+	} );
+
+	// Protect against unsupported units.
+	if ( ! minimumFontSizeParsed || ! maximumFontSizeParsed ) {
+		return null;
+	}
+
+	// Use rem for accessible fluid target font scaling.
+	const minimumFontSizeRem = getTypographyValueAndUnit( minimumFontSize, {
+		coerceTo: 'rem',
+	} );
+
+	// Viewport widths defined for fluid typography. Normalize units
+	const maximumViewPortWidthParsed = getTypographyValueAndUnit(
+		maximumViewPortWidth,
+		{ coerceTo: fontSizeUnit }
+	);
+	const minumumViewPortWidthParsed = getTypographyValueAndUnit(
+		minimumViewPortWidth,
+		{ coerceTo: fontSizeUnit }
+	);
+
+	// Protect against unsupported units.
+	if (
+		! maximumViewPortWidthParsed ||
+		! minumumViewPortWidthParsed ||
+		! minimumFontSizeRem
+	) {
+		return null;
+	}
+
+	// Build CSS rule.
+	// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
+	const minViewPortWidthOffsetValue = roundToPrecision(
+		minumumViewPortWidthParsed.value / 100,
+		3
+	);
+
+	const viewPortWidthOffset = minViewPortWidthOffsetValue + fontSizeUnit;
+	let linearFactor =
+		100 *
+		( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) /
+			( maximumViewPortWidthParsed.value -
+				minumumViewPortWidthParsed.value ) );
+	linearFactor = roundToPrecision( linearFactor, 3 ) || 1;
+	const linearFactorScaled = linearFactor * scaleFactor;
+	const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;
+
+	return `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
+}
+
+/**
+ *
+ * @param {string}           rawValue Raw size value from theme.json.
+ * @param {Object|undefined} options  Calculation options.
+ *
+ * @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties.
+ */
+export function getTypographyValueAndUnit( rawValue, options = {} ) {
+	if ( ! rawValue ) {
+		return null;
+	}
+
+	const { coerceTo, rootSizeValue, acceptableUnits } = {
+		coerceTo: '',
+		// Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
+		rootSizeValue: 16,
+		acceptableUnits: [ 'rem', 'px', 'em' ],
+		...options,
+	};
+
+	const acceptableUnitsGroup = acceptableUnits?.join( '|' );
+	const regexUnits = new RegExp(
+		`^(\\d*\\.?\\d+)(${ acceptableUnitsGroup }){1,1}$`
+	);
+
+	const matches = rawValue.match( regexUnits );
+
+	// We need a number value and a unit.
+	if ( ! matches || matches.length < 3 ) {
+		return null;
+	}
+
+	let [ , value, unit ] = matches;
+
+	let returnValue = parseFloat( value );
+
+	if ( 'px' === coerceTo && ( 'em' === unit || 'rem' === unit ) ) {
+		returnValue = returnValue * rootSizeValue;
+		unit = coerceTo;
+	}
+
+	if ( 'px' === unit && ( 'em' === coerceTo || 'rem' === coerceTo ) ) {
+		returnValue = returnValue / rootSizeValue;
+		unit = coerceTo;
+	}
+
+	return {
+		value: returnValue,
+		unit,
+	};
+}
+
+/**
+ * Returns a value rounded to defined precision.
+ * Returns `undefined` if the value is not a valid finite number.
+ *
+ * @param {number} value  Raw value.
+ * @param {number} digits The number of digits to appear after the decimal point
+ *
+ * @return {number|undefined} Value rounded to standard precision.
+ */
+export function roundToPrecision( value, digits = 3 ) {
+	return Number.isFinite( value )
+		? parseFloat( value.toFixed( digits ) )
+		: undefined;
+}

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

@@ -20,6 +20,7 @@ import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
+import ScreenHeadingColor from './screen-heading-color';
 import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
@@ -59,6 +60,12 @@ function ContextScreens( { name } ) {
 				<ScreenTypographyElement name={ name } element="link" />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/heading' }
+			>
+				<ScreenTypographyElement name={ name } element="heading" />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/typography/button' }
 			>
@@ -89,6 +96,12 @@ function ContextScreens( { name } ) {
 				<ScreenLinkColor name={ name } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/heading' }
+			>
+				<ScreenHeadingColor name={ name } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/button' }
 			>