@wordpress/edit-site 4.14.12 → 4.14.13

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

@@ -5,206 +5,336 @@ import { getTypographyFontSizeValue } from '../typography-utils';
 
 describe( 'typography utils', () => {
 	describe( 'getTypographyFontSizeValue', () => {
-		it( 'should return the expected values', () => {
-			[
-				// Default return non-fluid value.
-				{
-					preset: {
-						size: '28px',
-					},
-					typographySettings: undefined,
-					expected: '28px',
+		[
+			{
+				message: 'returns value when fluid typography is deactivated',
+				preset: {
+					size: '28px',
 				},
-				// Default return value where font size is 0.
-				{
-					preset: {
-						size: 0,
-					},
-					typographySettings: undefined,
-					expected: 0,
+				typographySettings: undefined,
+				expected: '28px',
+			},
+
+			{
+				message: 'returns value where font size is 0',
+				preset: {
+					size: 0,
 				},
-				// Default return value where font size is '0'.
-				{
-					preset: {
-						size: '0',
-					},
-					typographySettings: undefined,
-					expected: '0',
+				typographySettings: undefined,
+				expected: 0,
+			},
+
+			{
+				message: "returns value where font size is '0'",
+				preset: {
+					size: '0',
 				},
+				typographySettings: undefined,
+				expected: '0',
+			},
 
-				// Default return non-fluid value where `size` is undefined.
-				{
-					preset: {
-						size: undefined,
-					},
-					typographySettings: undefined,
-					expected: undefined,
-				},
-				// Should return non-fluid value when fluid is `false`.
-				{
-					preset: {
-						size: '28px',
-						fluid: false,
-					},
-					typographySettings: {
-						fluid: true,
-					},
-					expected: '28px',
+			{
+				message: 'returns value where `size` is `null`.',
+				preset: {
+					size: null,
 				},
-				// Should coerce integer to `px` and return fluid value.
-				{
-					preset: {
-						size: 33,
-						fluid: true,
-					},
-					typographySettings: {
-						fluid: true,
-					},
-					expected:
-						'clamp(24.75px, 1.546875rem + ((1vw - 7.68px) * 2.975), 49.5px)',
+				typographySettings: null,
+				expected: null,
+			},
+
+			{
+				message: 'returns value when fluid is `false`',
+				preset: {
+					size: '28px',
+					fluid: false,
+				},
+				typographySettings: {
+					fluid: true,
 				},
+				expected: '28px',
+			},
 
-				// Should coerce float to `px` and return fluid value.
-				{
-					preset: {
-						size: 100.23,
-						fluid: true,
-					},
-					typographySettings: {
-						fluid: true,
-					},
-					expected:
-						'clamp(75.1725px, 4.69828125rem + ((1vw - 7.68px) * 9.035), 150.345px)',
-				},
-				// Should return incoming value when already clamped.
-				{
-					preset: {
-						size: 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
-						fluid: false,
-					},
-					typographySettings: {
-						fluid: true,
-					},
-					expected:
-						'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
-				},
-				// Should return incoming value with unsupported unit.
-				{
-					preset: {
-						size: '1000%',
-						fluid: false,
-					},
-					typographySettings: {
-						fluid: true,
-					},
-					expected: '1000%',
+			{
+				message: 'returns already clamped value',
+				preset: {
+					size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+					fluid: false,
 				},
-				// Should return fluid value.
-				{
-					preset: {
-						size: '1.75rem',
-					},
-					typographySettings: {
-						fluid: true,
-					},
-					expected:
-						'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)',
+				typographySettings: {
+					fluid: true,
 				},
-				// Should return fluid value for floats with units.
-				{
-					preset: {
-						size: '100.175px',
-					},
-					typographySettings: {
-						fluid: true,
-					},
-					expected:
-						'clamp(75.13125px, 4.695703125rem + ((1vw - 7.68px) * 9.03), 150.2625px)',
-				},
-				// Should return default fluid values with empty fluid array.
-				{
-					preset: {
-						size: '28px',
-						fluid: [],
-					},
-					typographySettings: {
-						fluid: true,
-					},
-					expected:
-						'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+				expected:
+					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+			},
+
+			{
+				message: 'returns value with unsupported unit',
+				preset: {
+					size: '1000%',
+					fluid: false,
 				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected: '1000%',
+			},
 
-				// Should return default fluid values with null values.
-				{
-					preset: {
-						size: '28px',
-						fluid: null,
-					},
-					typographySettings: {
-						fluid: true,
+			{
+				message: 'returns clamp value with rem min and max units',
+				preset: {
+					size: '1.75rem',
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 0.84), 1.75rem)',
+			},
+
+			{
+				message: 'returns clamp value with eem min and max units',
+				preset: {
+					size: '1.75em',
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(1.313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)',
+			},
+
+			{
+				message: 'returns clamp value for floats',
+				preset: {
+					size: '100.175px',
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 3.01), 100.175px)',
+			},
+
+			{
+				message: 'coerces integer to `px` and returns clamp value',
+				preset: {
+					size: 33,
+					fluid: true,
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)',
+			},
+
+			{
+				message: 'coerces float to `px` and returns clamp value',
+				preset: {
+					size: 100.23,
+					fluid: true,
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 3.012), 100.23px)',
+			},
+
+			{
+				message: 'returns clamp value when `fluid` is empty array',
+				preset: {
+					size: '28px',
+					fluid: [],
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
+			},
+
+			{
+				message: 'returns clamp value when `fluid` is `null`',
+				preset: {
+					size: '28px',
+					fluid: null,
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
+			},
+
+			{
+				message:
+					'returns clamp value if min font size is greater than max',
+				preset: {
+					size: '3rem',
+					fluid: {
+						min: '5rem',
+						max: '32px',
 					},
-					expected:
-						'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
-				},
-
-				// Should return size with invalid fluid units.
-				{
-					preset: {
-						size: '10em',
-						fluid: {
-							min: '20vw',
-							max: '50%',
-						},
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(5rem, 5rem + ((1vw - 0.48rem) * -5.769), 32px)',
+			},
+
+			{
+				message: 'returns value with invalid min/max fluid units',
+				preset: {
+					size: '10em',
+					fluid: {
+						min: '20vw',
+						max: '50%',
 					},
-					typographySettings: {
-						fluid: true,
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected: '10em',
+			},
+
+			{
+				message:
+					'returns value when size is < lower bounds and no fluid min/max set',
+				preset: {
+					size: '3px',
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected: '3px',
+			},
+
+			{
+				message:
+					'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: {
+						min: '20px',
+						max: '50rem',
 					},
-					expected: '10em',
-				},
-				// Should return fluid clamp value.
-				{
-					preset: {
-						size: '28px',
-						fluid: {
-							min: '20px',
-							max: '50rem',
-						},
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
+			},
+
+			{
+				message: 'returns clamp value where no fluid max size is set',
+				preset: {
+					size: '28px',
+					fluid: {
+						min: '2.6rem',
 					},
-					typographySettings: {
-						fluid: true,
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * -1.635), 28px)',
+			},
+
+			{
+				message: 'returns clamp value where no fluid min size is set',
+				preset: {
+					size: '28px',
+					fluid: {
+						max: '80px',
 					},
-					expected:
-						'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
-				},
-				// Should return clamp value with default fluid max value.
-				{
-					preset: {
-						size: '28px',
-						fluid: {
-							min: '2.6rem',
-						},
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 7.091), 80px)',
+			},
+
+			{
+				message:
+					'should not apply lower bound test when fluid values are set',
+				preset: {
+					size: '1.5rem',
+					fluid: {
+						min: '0.5rem',
+						max: '5rem',
 					},
-					typographySettings: {
-						fluid: true,
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(0.5rem, 0.5rem + ((1vw - 0.48rem) * 8.654), 5rem)',
+			},
+
+			{
+				message:
+					'should not apply lower bound test when only fluid min is set',
+				preset: {
+					size: '20px',
+					fluid: {
+						min: '12px',
 					},
-					expected:
-						'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * 0.048), 42px)',
-				},
-				// Should return clamp value with default fluid min value.
-				{
-					preset: {
-						size: '28px',
-						fluid: {
-							max: '80px',
-						},
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)',
+			},
+
+			{
+				message:
+					'should not apply lower bound test when only fluid max is set',
+				preset: {
+					size: '0.875rem',
+					fluid: {
+						max: '20rem',
 					},
-					typographySettings: {
-						fluid: true,
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)',
+			},
+
+			{
+				message:
+					'returns clamp value when min and max font sizes are equal',
+				preset: {
+					size: '4rem',
+					fluid: {
+						min: '30px',
+						max: '30px',
 					},
-					expected:
-						'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 7.091), 80px)',
 				},
-			].forEach( ( { preset, typographySettings, expected } ) => {
+				typographySettings: {
+					fluid: true,
+				},
+				expected: 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)',
+			},
+		].forEach( ( { message, preset, typographySettings, expected } ) => {
+			it( `should ${ message }`, () => {
 				expect(
 					getTypographyFontSizeValue( preset, typographySettings )
 				).toBe( expected );

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(10.5px, 0.65625rem + ((1vw - 7.68px) * 1.262), 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/use-global-styles-output.js

@@ -845,8 +845,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 +895,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/index.js

@@ -60,8 +60,8 @@ export default function Header( {
 		listViewShortcut,
 		isLoaded,
 		isVisualMode,
-		settings,
 		blockEditorMode,
+		homeUrl,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -70,7 +70,6 @@ export default function Header( {
 			isInserterOpened,
 			isListViewOpened,
 			getEditorMode,
-			getSettings,
 		} = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } =
@@ -83,6 +82,10 @@ export default function Header( {
 		const record = getEditedEntityRecord( 'postType', postType, postId );
 		const _isLoaded = !! postId;
 
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
 			entityTitle: getTemplateInfo( record ).title,
@@ -95,8 +98,8 @@ export default function Header( {
 				'core/edit-site/toggle-list-view'
 			),
 			isVisualMode: getEditorMode() === 'visual',
-			settings: getSettings(),
 			blockEditorMode: __unstableGetEditorMode(),
+			homeUrl: getUnstableBase()?.home,
 		};
 	}, [] );
 
@@ -256,7 +259,7 @@ export default function Header( {
 							>
 								<MenuGroup>
 									<MenuItem
-										href={ settings?.siteUrl }
+										href={ homeUrl }
 										target="_blank"
 										icon={ external }
 									>