@wordpress/edit-site 4.18.0 → 5.0.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,7 +279,7 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 					<FontSizePicker
 						value={ fontSize }
 						onChange={ setFontSize }
-						fontSizes={ fontSizesWithFluidValues }
+						fontSizes={ fontSizes }
 						disableCustomFontSizes={ disableCustomFontSizes }
 						withReset={ false }
 						withSlider
@@ -339,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/ui.js

@@ -4,6 +4,7 @@
 import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
 import { getBlockTypes } from '@wordpress/blocks';
 
@@ -24,6 +25,9 @@ import ScreenHeadingColor from './screen-heading-color';
 import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
+import ScreenBorder from './screen-border';
+import StyleBook from '../style-book';
+import ScreenCSS from './screen-css';
 
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
@@ -40,7 +44,8 @@ function GlobalStylesNavigationScreen( { className, ...props } ) {
 }
 
 function ContextScreens( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+	const parentMenu =
+		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
 
 	return (
 		<>
@@ -108,6 +113,10 @@ function ContextScreens( { name } ) {
 				<ScreenButtonColor name={ name } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
+				<ScreenBorder name={ name } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } />
 			</GlobalStylesNavigationScreen>
@@ -115,9 +124,36 @@ function ContextScreens( { name } ) {
 	);
 }
 
-function GlobalStylesUI() {
-	const blocks = getBlockTypes();
+function GlobalStylesStyleBook( { onClose } ) {
+	const navigator = useNavigator();
+	const { path } = navigator.location;
+	return (
+		<StyleBook
+			isSelected={ ( blockName ) =>
+				// Match '/blocks/core%2Fbutton' and
+				// '/blocks/core%2Fbutton/typography', but not
+				// '/blocks/core%2Fbuttons'.
+				path === `/blocks/${ encodeURIComponent( blockName ) }` ||
+				path.startsWith(
+					`/blocks/${ encodeURIComponent( blockName ) }/`
+				)
+			}
+			onSelect={ ( blockName ) => {
+				// Clear navigator history by going back to the root.
+				const depth = path.match( /\//g ).length;
+				for ( let i = 0; i < depth; i++ ) {
+					navigator.goBack();
+				}
+				// Now go to the selected block.
+				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
+			} }
+			onClose={ onClose }
+		/>
+	);
+}
 
+function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
+	const blocks = getBlockTypes();
 	return (
 		<NavigatorProvider
 			className="edit-site-global-styles-sidebar__navigator-provider"
@@ -138,7 +174,7 @@ function GlobalStylesUI() {
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }
-					path={ '/blocks/' + block.name }
+					path={ '/blocks/' + encodeURIComponent( block.name ) }
 				>
 					<ScreenBlock name={ block.name } />
 				</GlobalStylesNavigationScreen>
@@ -152,6 +188,13 @@ function GlobalStylesUI() {
 					name={ block.name }
 				/>
 			) ) }
+
+			{ isStyleBookOpened && (
+				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />
+			) }
+			<GlobalStylesNavigationScreen path="/css">
+				<ScreenCSS />
+			</GlobalStylesNavigationScreen>
 		</NavigatorProvider>
 	);
 }