@wordpress/edit-site 4.17.0 → 4.19.0

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

@@ -7,7 +7,7 @@ describe( 'typography utils', () => {
 	describe( 'getTypographyFontSizeValue', () => {
 		[
 			{
-				message: 'Default return non-fluid value.',
+				message: 'returns value when fluid typography is deactivated',
 				preset: {
 					size: '28px',
 				},
@@ -16,7 +16,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'Default return value where font size is 0.',
+				message: 'returns value where font size is 0',
 				preset: {
 					size: 0,
 				},
@@ -25,7 +25,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: "Default return value where font size is '0'.",
+				message: "returns value where font size is '0'",
 				preset: {
 					size: '0',
 				},
@@ -34,17 +34,16 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message:
-					'Default return non-fluid value where `size` is undefined.',
+				message: 'returns value where `size` is `null`.',
 				preset: {
-					size: undefined,
+					size: null,
 				},
-				typographySettings: undefined,
-				expected: undefined,
+				typographySettings: null,
+				expected: null,
 			},
 
 			{
-				message: 'return non-fluid value when fluid is `false`.',
+				message: 'returns value when fluid is `false`',
 				preset: {
 					size: '28px',
 					fluid: false,
@@ -56,84 +55,94 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message:
-					'Should coerce integer to `px` and return fluid value.',
+				message: 'returns already clamped value',
 				preset: {
-					size: 33,
-					fluid: true,
+					size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+					fluid: false,
 				},
 				typographySettings: {
 					fluid: true,
 				},
 				expected:
-					'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 2.975), 49.5px)',
+					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
 			},
 
 			{
-				message: 'coerce float to `px` and return fluid value.',
+				message: 'returns value with unsupported unit',
 				preset: {
-					size: 100.23,
+					size: '1000%',
+					fluid: false,
+				},
+				typographySettings: {
 					fluid: true,
 				},
+				expected: '1000%',
+			},
+
+			{
+				message: 'returns clamp value with rem min and max units',
+				preset: {
+					size: '1.75rem',
+				},
 				typographySettings: {
 					fluid: true,
 				},
 				expected:
-					'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 9.035), 150.345px)',
+					'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 0.84), 1.75rem)',
 			},
 
 			{
-				message: 'return incoming value when already clamped.',
+				message: 'returns clamp value with eem min and max units',
 				preset: {
-					size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
-					fluid: false,
+					size: '1.75em',
 				},
 				typographySettings: {
 					fluid: true,
 				},
 				expected:
-					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+					'clamp(1.313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)',
 			},
 
 			{
-				message: 'return incoming value with unsupported unit.',
+				message: 'returns clamp value for floats',
 				preset: {
-					size: '1000%',
-					fluid: false,
+					size: '100.175px',
 				},
 				typographySettings: {
 					fluid: true,
 				},
-				expected: '1000%',
+				expected:
+					'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 3.01), 100.175px)',
 			},
 
 			{
-				message: 'return fluid value.',
+				message: 'coerces integer to `px` and returns clamp value',
 				preset: {
-					size: '1.75rem',
+					size: 33,
+					fluid: true,
 				},
 				typographySettings: {
 					fluid: true,
 				},
 				expected:
-					'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 2.523), 2.625rem)',
+					'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)',
 			},
 
 			{
-				message: 'return fluid value for floats with units.',
+				message: 'coerces float to `px` and returns clamp value',
 				preset: {
-					size: '100.175px',
+					size: 100.23,
+					fluid: true,
 				},
 				typographySettings: {
 					fluid: true,
 				},
 				expected:
-					'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 9.03), 150.263px)',
+					'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 3.012), 100.23px)',
 			},
 
 			{
-				message:
-					'Should return default fluid values with empty fluid array.',
+				message: 'returns clamp value when `fluid` is empty array',
 				preset: {
 					size: '28px',
 					fluid: [],
@@ -142,11 +151,11 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
 			},
 
 			{
-				message: 'return default fluid values with null value.',
+				message: 'returns clamp value when `fluid` is `null`',
 				preset: {
 					size: '28px',
 					fluid: null,
@@ -155,12 +164,12 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
 			},
 
 			{
 				message:
-					'return clamped value if min font size is greater than max.',
+					'returns clamp value if min font size is greater than max',
 				preset: {
 					size: '3rem',
 					fluid: {
@@ -176,7 +185,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'return size with invalid fluid units.',
+				message: 'returns value with invalid min/max fluid units',
 				preset: {
 					size: '10em',
 					fluid: {
@@ -192,20 +201,30 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'return clamped using font size where no min is given and size is less than default min size.',
+					'returns value when size is < lower bounds and no fluid min/max set',
 				preset: {
 					size: '3px',
 				},
 				typographySettings: {
 					fluid: true,
 				},
-				expected:
-					'clamp(3px, 0.188rem + ((1vw - 7.68px) * 0.18), 4.5px)',
+				expected: '3px',
 			},
 
 			{
 				message:
-					'return fluid clamp value with different min max units.',
+					'returns value when size is equal to lower bounds and no fluid min/max set',
+				preset: {
+					size: '14px',
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected: '14px',
+			},
+
+			{
+				message: 'returns clamp value with different min max units',
 				preset: {
 					size: '28px',
 					fluid: {
@@ -219,10 +238,9 @@ describe( 'typography utils', () => {
 				expected:
 					'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
 			},
-			//
+
 			{
-				message:
-					' Should return clamp value with default fluid max value.',
+				message: 'returns clamp value where no fluid max size is set',
 				preset: {
 					size: '28px',
 					fluid: {
@@ -233,12 +251,11 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * 0.048), 42px)',
+					'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * -1.635), 28px)',
 			},
 
 			{
-				message:
-					'Should return clamp value with default fluid min value.',
+				message: 'returns clamp value where no fluid min size is set',
 				preset: {
 					size: '28px',
 					fluid: {
@@ -253,90 +270,57 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'adjust computed min in px to min limit.',
-				preset: {
-					size: '14px',
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.841), 21px)',
-			},
-
-			{
-				message: 'adjust computed min in rem to min limit.',
-				preset: {
-					size: '1.1rem',
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 1.49), 1.65rem)',
-			},
-
-			{
-				message: 'adjust computed min in em to min limit.',
-				preset: {
-					size: '1.1em',
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(0.875em, 0.875rem + ((1vw - 0.48em) * 1.49), 1.65em)',
-			},
-
-			{
-				message: 'adjust fluid min value in px to min limit',
+				message:
+					'should not apply lower bound test when fluid values are set',
 				preset: {
-					size: '20px',
+					size: '1.5rem',
 					fluid: {
-						min: '12px',
+						min: '0.5rem',
+						max: '5rem',
 					},
 				},
 				typographySettings: {
 					fluid: true,
 				},
 				expected:
-					'clamp(14px, 0.875rem + ((1vw - 7.68px) * 1.923), 30px)',
+					'clamp(0.5rem, 0.5rem + ((1vw - 0.48rem) * 8.654), 5rem)',
 			},
 
 			{
-				message: 'adjust fluid min value in rem to min limit.',
+				message:
+					'should not apply lower bound test when only fluid min is set',
 				preset: {
-					size: '1.5rem',
+					size: '20px',
 					fluid: {
-						min: '0.5rem',
+						min: '12px',
 					},
 				},
 				typographySettings: {
 					fluid: true,
 				},
 				expected:
-					'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 2.644), 2.25rem)',
+					'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)',
 			},
 
 			{
-				message: 'adjust fluid min value but honor max value.',
+				message:
+					'should not apply lower bound test when only fluid max is set',
 				preset: {
-					size: '1.5rem',
+					size: '0.875rem',
 					fluid: {
-						min: '0.5rem',
-						max: '5rem',
+						max: '20rem',
 					},
 				},
 				typographySettings: {
 					fluid: true,
 				},
 				expected:
-					'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 7.933), 5rem)',
+					'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)',
 			},
 
 			{
 				message:
-					'return a fluid font size a min and max font sizes are equal.',
+					'returns clamp value when min and max font sizes are equal',
 				preset: {
 					size: '4rem',
 					fluid: {

package/src/components/global-styles/test/use-global-styles-output.js

@@ -711,7 +711,7 @@ describe( 'global styles renderer', () => {
 			},
 			typography: {
 				fontFamily: 'sans-serif',
-				fontSize: '14px',
+				fontSize: '15px',
 			},
 		};
 
@@ -725,7 +725,7 @@ describe( 'global styles renderer', () => {
 				'--wp--style--root--padding-left: 33px',
 				'background-color: var(--wp--preset--color--light-green-cyan)',
 				'font-family: sans-serif',
-				'font-size: 14px',
+				'font-size: 15px',
 			] );
 		} );
 
@@ -739,7 +739,7 @@ describe( 'global styles renderer', () => {
 				'padding-bottom: 33px',
 				'padding-left: 33px',
 				'font-family: sans-serif',
-				'font-size: 14px',
+				'font-size: 15px',
 			] );
 		} );
 
@@ -757,7 +757,7 @@ describe( 'global styles renderer', () => {
 				'padding-bottom: 33px',
 				'padding-left: 33px',
 				'font-family: sans-serif',
-				'font-size: 14px',
+				'font-size: 15px',
 			] );
 		} );
 
@@ -782,7 +782,7 @@ describe( 'global styles renderer', () => {
 				'padding-bottom: 33px',
 				'padding-left: 33px',
 				'font-family: sans-serif',
-				'font-size: clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.841), 21px)',
+				'font-size: clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px)',
 			] );
 		} );
 
@@ -807,7 +807,7 @@ describe( 'global styles renderer', () => {
 				'padding-bottom: 33px',
 				'padding-left: 33px',
 				'font-family: sans-serif',
-				'font-size: 14px',
+				'font-size: 15px',
 			] );
 		} );
 	} );

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

@@ -7,6 +7,7 @@ import {
 	__experimentalFontAppearanceControl as FontAppearanceControl,
 	__experimentalLetterSpacingControl as LetterSpacingControl,
 	__experimentalTextTransformControl as TextTransformControl,
+	__experimentalTextDecorationControl as TextDecorationControl,
 } from '@wordpress/block-editor';
 import {
 	FontSizePicker,
@@ -19,7 +20,6 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
-import { getTypographyFontSizeValue } from './typography-utils';
 
 export function useHasTypographyPanel( name ) {
 	const hasFontFamily = useHasFontFamilyControl( name );
@@ -102,6 +102,13 @@ function useHasTextTransformControl( name, element ) {
 	return supports.includes( 'textTransform' );
 }
 
+function useHasTextDecorationControl( name, element ) {
+	// This is an exception for link elements.
+	// We shouldn't allow other blocks or elements to set textDecoration
+	// because this will be inherited by their children.
+	return ! name && element === 'link';
+}
+
 function useStyleWithReset( path, blockName ) {
 	const [ style, setStyle ] = useStyle( path, blockName );
 	const [ userStyle ] = useStyle( path, blockName, 'user' );
@@ -110,6 +117,26 @@ function useStyleWithReset( path, blockName ) {
 	return [ style, setStyle, hasStyle, resetStyle ];
 }
 
+function useFontSizeWithReset( path, blockName ) {
+	const [ fontSize, setStyleCallback ] = useStyle( path, blockName );
+	const [ userStyle ] = useStyle( path, blockName, 'user' );
+	const hasFontSize = () => !! userStyle;
+	const resetFontSize = () => setStyleCallback( undefined );
+	const setFontSize = ( newValue, metadata ) => {
+		if ( !! metadata?.slug ) {
+			newValue = `var:preset|font-size|${ metadata?.slug }`;
+		}
+		setStyleCallback( newValue );
+	};
+
+	return {
+		fontSize,
+		setFontSize,
+		hasFontSize,
+		resetFontSize,
+	};
+}
+
 function useFontAppearance( prefix, name ) {
 	const [ fontStyle, setFontStyle ] = useStyle(
 		prefix + 'typography.fontStyle',
@@ -152,19 +179,8 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 	} else if ( element && element !== 'text' ) {
 		prefix = `elements.${ element }.`;
 	}
-	const [ fluidTypography ] = useSetting( 'typography.fluid', name );
 	const [ fontSizes ] = useSetting( 'typography.fontSizes', name );
 
-	// Convert static font size values to fluid font sizes if fluidTypography is activated.
-	const fontSizesWithFluidValues = fontSizes.map( ( font ) => {
-		if ( !! fluidTypography ) {
-			font.size = getTypographyFontSizeValue( font, {
-				fluid: fluidTypography,
-			} );
-		}
-		return font;
-	} );
-
 	const disableCustomFontSizes = ! useSetting(
 		'typography.customFontSize',
 		name
@@ -182,6 +198,10 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 	const appearanceControlLabel = useAppearanceControlLabel( name );
 	const hasLetterSpacingControl = useHasLetterSpacingControl( name, element );
 	const hasTextTransformControl = useHasTextTransformControl( name, element );
+	const hasTextDecorationControl = useHasTextDecorationControl(
+		name,
+		element
+	);
 
 	/* Disable font size controls when the option to style all headings is selected. */
 	let hasFontSizeEnabled = supports.includes( 'fontSize' );
@@ -191,8 +211,8 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 
 	const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =
 		useStyleWithReset( prefix + 'typography.fontFamily', name );
-	const [ fontSize, setFontSize, hasFontSize, resetFontSize ] =
-		useStyleWithReset( prefix + 'typography.fontSize', name );
+	const { fontSize, setFontSize, hasFontSize, resetFontSize } =
+		useFontSizeWithReset( prefix + 'typography.fontSize', name );
 	const {
 		fontStyle,
 		setFontStyle,
@@ -215,6 +235,12 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 		hasTextTransform,
 		resetTextTransform,
 	] = useStyleWithReset( prefix + 'typography.textTransform', name );
+	const [
+		textDecoration,
+		setTextDecoration,
+		hasTextDecoration,
+		resetTextDecoration,
+	] = useStyleWithReset( prefix + 'typography.textDecoration', name );
 
 	const resetAll = () => {
 		resetFontFamily();
@@ -253,9 +279,10 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 					<FontSizePicker
 						value={ fontSize }
 						onChange={ setFontSize }
-						fontSizes={ fontSizesWithFluidValues }
+						fontSizes={ fontSizes }
 						disableCustomFontSizes={ disableCustomFontSizes }
 						withReset={ false }
+						withSlider
 						size="__unstable-large"
 						__nextHasNoMarginBottom
 					/>
@@ -338,6 +365,22 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasTextDecorationControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Text decoration' ) }
+					hasValue={ hasTextDecoration }
+					onDeselect={ resetTextDecoration }
+					isShownByDefault
+				>
+					<TextDecorationControl
+						value={ textDecoration }
+						onChange={ setTextDecoration }
+						size="__unstable-large"
+						__unstableInputWidth="auto"
+					/>
+				</ToolsPanelItem>
+			) }
 		</ToolsPanel>
 	);
 }

package/src/components/global-styles/use-global-styles-output.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty, kebabCase, pickBy, reduce, set } from 'lodash';
+import { get, isEmpty, kebabCase, pickBy, set } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -61,8 +61,7 @@ function compileStyleValue( uncompiledValue ) {
  * @return {Array<Object>} An array of style declarations.
  */
 function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
-	return reduce(
-		PRESET_METADATA,
+	return PRESET_METADATA.reduce(
 		( declarations, { path, valueKey, valueFunc, cssVarInfix } ) => {
 			const presetByOrigin = get( blockPresets, path, [] );
 			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
@@ -102,8 +101,7 @@ function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
  * @return {string} CSS declarations for the preset classes.
  */
 function getPresetsClasses( blockSelector, blockPresets = {} ) {
-	return reduce(
-		PRESET_METADATA,
+	return PRESET_METADATA.reduce(
 		( declarations, { path, cssVarInfix, classes } ) => {
 			if ( ! classes ) {
 				return declarations;
@@ -193,9 +191,11 @@ export function getStylesDeclarations(
 	tree = {}
 ) {
 	const isRoot = ROOT_BLOCK_SELECTOR === selector;
-	const output = reduce(
-		STYLE_PROPERTY,
-		( declarations, { value, properties, useEngine, rootOnly }, key ) => {
+	const output = Object.entries( STYLE_PROPERTY ).reduce(
+		(
+			declarations,
+			[ key, { value, properties, useEngine, rootOnly } ]
+		) => {
 			if ( rootOnly && ! isRoot ) {
 				return declarations;
 			}
@@ -453,6 +453,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 			[
 				'border',
 				'color',
+				'dimensions',
 				'spacing',
 				'typography',
 				'filter',
@@ -845,8 +846,44 @@ export const getBlockSelectors = ( blockTypes ) => {
 	return result;
 };
 
+/**
+ * If there is a separator block whose color is defined in theme.json via background,
+ * update the separator color to the same value by using border color.
+ *
+ * @param {Object} config Theme.json configuration file object.
+ * @return {Object} configTheme.json configuration file object updated.
+ */
+function updateConfigWithSeparator( config ) {
+	const needsSeparatorStyleUpdate =
+		config.styles?.blocks[ 'core/separator' ] &&
+		config.styles?.blocks[ 'core/separator' ].color?.background &&
+		! config.styles?.blocks[ 'core/separator' ].color?.text &&
+		! config.styles?.blocks[ 'core/separator' ].border?.color;
+	if ( needsSeparatorStyleUpdate ) {
+		return {
+			...config,
+			styles: {
+				...config.styles,
+				blocks: {
+					...config.styles.blocks,
+					'core/separator': {
+						...config.styles.blocks[ 'core/separator' ],
+						color: {
+							...config.styles.blocks[ 'core/separator' ].color,
+							text: config.styles?.blocks[ 'core/separator' ]
+								.color.background,
+						},
+					},
+				},
+			},
+		};
+	}
+	return config;
+}
+
 export function useGlobalStylesOutput() {
-	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	let { merged: mergedConfig } = useContext( GlobalStylesContext );
+
 	const [ blockGap ] = useSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGap !== null;
 	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
@@ -859,7 +896,7 @@ export function useGlobalStylesOutput() {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
 			return [];
 		}
-
+		mergedConfig = updateConfigWithSeparator( mergedConfig );
 		const blockSelectors = getBlockSelectors( getBlockTypes() );
 		const customProperties = toCustomProperties(
 			mergedConfig,

package/src/components/header-edit-mode/document-actions/index.js

@@ -24,6 +24,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -147,7 +148,7 @@ export default function DocumentActions() {
 							entityLabel
 						) }
 					</VisuallyHidden>
-					{ entityTitle }
+					{ decodeEntities( entityTitle ) }
 				</Text>
 
 				<Text