@wordpress/edit-site 4.16.0 → 4.17.0

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

@@ -4,73 +4,59 @@
  * ---------------------------------------------------------------
  */
 
+/**
+ * WordPress dependencies
+ */
+import { getComputedFluidTypographyValue } from '@wordpress/block-editor';
+
+/**
+ * @typedef {Object} FluidPreset
+ * @property {string|undefined}  max A maximum font size value.
+ * @property {?string|undefined} min A minimum font size value.
+ */
+
+/**
+ * @typedef {Object} Preset
+ * @property {?string|?number}               size  A default font size.
+ * @property {string}                        name  A font size name, displayed in the UI.
+ * @property {string}                        slug  A font size slug
+ * @property {boolean|FluidPreset|undefined} fluid A font size slug
+ */
+
 /**
  * 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.
+ * @param {Preset}  preset
+ * @param {Object}  typographySettings
+ * @param {boolean} typographySettings.fluid Whether fluid typography is enabled.
  *
- * @return {string} An font-size value
+ * @return {string|*} A font-size value or the value of preset.size.
  */
 export function getTypographyFontSizeValue( preset, typographySettings ) {
 	const { size: defaultSize } = preset;
 
-	if ( true !== typographySettings?.fluid ) {
+	/*
+	 * Catches falsy values and 0/'0'.
+	 * Fluid calculations cannot be performed on 0.
+	 */
+	if ( ! defaultSize || '0' === defaultSize ) {
 		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 ) {
+	if ( true !== typographySettings?.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 ) {
+	// A font size has explicitly bypassed fluid calculations.
+	if ( false === preset?.fluid ) {
 		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,
+		minimumFontSize: preset?.fluid?.min,
+		maximumFontSize: preset?.fluid?.max,
+		fontSize: defaultSize,
 	} );
 
 	if ( !! fluidFontSizeValue ) {
@@ -79,150 +65,3 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 
 	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/use-global-styles-output.js

@@ -24,6 +24,7 @@ import {
  * Internal dependencies
  */
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
+import { getTypographyFontSizeValue } from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useSetting } from './hooks';
 
@@ -276,6 +277,21 @@ export function getStylesDeclarations(
 			}
 		}
 
+		// Calculate fluid typography rules where available.
+		if ( cssProperty === 'font-size' ) {
+			/*
+			 * getTypographyFontSizeValue() will check
+			 * if fluid typography has been activated and also
+			 * whether the incoming value can be converted to a fluid value.
+			 * Values that already have a "clamp()" function will not pass the test,
+			 * and therefore the original $value will be returned.
+			 */
+			ruleValue = getTypographyFontSizeValue(
+				{ size: ruleValue },
+				tree?.settings?.typography
+			);
+		}
+
 		output.push( `${ cssProperty }: ${ ruleValue }` );
 	} );
 

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

@@ -21,6 +21,15 @@ import {
 import { chevronDown } from '@wordpress/icons';
 import { useState, useMemo } from '@wordpress/element';
 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';
+
+/**
+ * Internal dependencies
+ */
+import TemplateDetails from '../../template-details';
+import { store as editSiteStore } from '../../../store';
 
 function getBlockDisplayText( block ) {
 	if ( block ) {
@@ -52,25 +61,36 @@ function useSecondaryText() {
 	return {};
 }
 
-/**
- * @param {Object}   props                Props for the DocumentActions component.
- * @param {string}   props.entityTitle    The title to display.
- * @param {string}   props.entityLabel    A label to use for entity-related options.
- *                                        E.g. "template" would be used for "edit
- *                                        template" and "show template details".
- * @param {boolean}  props.isLoaded       Whether the data is available.
- * @param {Function} props.children       React component to use for the
- *                                        information dropdown area. Should be a
- *                                        function which accepts dropdown props.
- * @param {boolean}  props.showIconLabels Whether buttons display icons or text labels.
- */
-export default function DocumentActions( {
-	entityTitle,
-	entityLabel,
-	isLoaded,
-	children: dropdownContent,
-	showIconLabels,
-} ) {
+export default function DocumentActions() {
+	const { showIconLabels, entityTitle, template, templateType, isLoaded } =
+		useSelect( ( select ) => {
+			const { getEditedPostType, getEditedPostId } =
+				select( editSiteStore );
+			const { getEditedEntityRecord } = select( coreStore );
+			const { __experimentalGetTemplateInfo: getTemplateInfo } =
+				select( editorStore );
+			const postType = getEditedPostType();
+			const postId = getEditedPostId();
+			const record = getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+			const _isLoaded = !! postId;
+
+			return {
+				showIconLabels: select( preferencesStore ).get(
+					'core/edit-site',
+					'showIconLabels'
+				),
+				entityTitle: getTemplateInfo( record ).title,
+				isLoaded: _isLoaded,
+				template: record,
+				templateType: postType,
+			};
+		}, [] );
+	const entityLabel =
+		templateType === 'wp_template_part' ? 'template part' : 'template';
 	const { label } = useSecondaryText();
 
 	// Use internal state instead of a ref to make sure that the component
@@ -137,33 +157,34 @@ export default function DocumentActions( {
 					{ label ?? '' }
 				</Text>
 
-				{ dropdownContent && (
-					<Dropdown
-						popoverProps={ popoverProps }
-						position="bottom center"
-						renderToggle={ ( { isOpen, onToggle } ) => (
-							<Button
-								className="edit-site-document-actions__get-info"
-								icon={ chevronDown }
-								aria-expanded={ isOpen }
-								aria-haspopup="true"
-								onClick={ onToggle }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-								label={ sprintf(
-									/* translators: %s: the entity to see details about, like "template"*/
-									__( 'Show %s details' ),
-									entityLabel
-								) }
-							>
-								{ showIconLabels && __( 'Details' ) }
-							</Button>
-						) }
-						contentClassName="edit-site-document-actions__info-dropdown"
-						renderContent={ dropdownContent }
-					/>
-				) }
+				<Dropdown
+					popoverProps={ popoverProps }
+					position="bottom center"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							className="edit-site-document-actions__get-info"
+							icon={ chevronDown }
+							aria-expanded={ isOpen }
+							aria-haspopup="true"
+							onClick={ onToggle }
+							variant={ showIconLabels ? 'tertiary' : undefined }
+							label={ sprintf(
+								/* translators: %s: the entity to see details about, like "template"*/
+								__( 'Show %s details' ),
+								entityLabel
+							) }
+						>
+							{ showIconLabels && __( 'Details' ) }
+						</Button>
+					) }
+					contentClassName="edit-site-document-actions__info-dropdown"
+					renderContent={ ( { onClose } ) => (
+						<TemplateDetails
+							template={ template }
+							onClose={ onClose }
+						/>
+					) }
+				/>
 			</div>
 		</div>
 	);

package/src/components/{header → header-edit-mode}/index.js

@@ -26,8 +26,6 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -37,7 +35,6 @@ import SaveButton from '../save-button';
 import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
-import TemplateDetails from '../template-details';
 import { store as editSiteStore } from '../../store';
 
 const preventDefault = ( event ) => {
@@ -52,13 +49,10 @@ export default function Header( {
 	const inserterButton = useRef();
 	const {
 		deviceType,
-		entityTitle,
-		template,
 		templateType,
 		isInserterOpen,
 		isListViewOpen,
 		listViewShortcut,
-		isLoaded,
 		isVisualMode,
 		settings,
 		blockEditorMode,
@@ -66,28 +60,18 @@ export default function Header( {
 		const {
 			__experimentalGetPreviewDeviceType,
 			getEditedPostType,
-			getEditedPostId,
 			isInserterOpened,
 			isListViewOpened,
 			getEditorMode,
 			getSettings,
 		} = select( editSiteStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } =
-			select( editorStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 
 		const postType = getEditedPostType();
-		const postId = getEditedPostId();
-		const record = getEditedEntityRecord( 'postType', postType, postId );
-		const _isLoaded = !! postId;
 
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
-			entityTitle: getTemplateInfo( record ).title,
-			isLoaded: _isLoaded,
-			template: record,
 			templateType: postType,
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
@@ -137,16 +121,16 @@ export default function Header( {
 	const isZoomedOutView = blockEditorMode === 'zoom-out';
 
 	return (
-		<div className="edit-site-header">
+		<div className="edit-site-header-edit-mode">
 			<NavigableToolbar
-				className="edit-site-header_start"
+				className="edit-site-header-edit-mode__start"
 				aria-label={ __( 'Document tools' ) }
 			>
-				<div className="edit-site-header__toolbar">
+				<div className="edit-site-header-edit-mode__toolbar">
 					<ToolbarItem
 						ref={ inserterButton }
 						as={ Button }
-						className="edit-site-header-toolbar__inserter-toggle"
+						className="edit-site-header-edit-mode__inserter-toggle"
 						variant="primary"
 						isPressed={ isInserterOpen }
 						onMouseDown={ preventDefault }
@@ -182,7 +166,7 @@ export default function Header( {
 							/>
 							<ToolbarItem
 								as={ Button }
-								className="edit-site-header-toolbar__list-view-toggle"
+								className="edit-site-header-edit-mode__list-view-toggle"
 								disabled={ ! isVisualMode && isZoomedOutView }
 								icon={ listView }
 								isPressed={ isListViewOpen }
@@ -198,14 +182,12 @@ export default function Header( {
 							{ isZoomedOutViewExperimentEnabled && (
 								<ToolbarItem
 									as={ Button }
-									className="edit-site-header-toolbar__zoom-out-view-toggle"
 									icon={ chevronUpDown }
 									isPressed={ isZoomedOutView }
 									/* translators: button label text should, if possible, be under 16 characters. */
 									label={ __( 'Zoom-out View' ) }
 									onClick={ () => {
 										setPreviewDeviceType( 'desktop' );
-										setIsListViewOpened( false );
 										__unstableSetEditorMode(
 											isZoomedOutView
 												? 'edit'
@@ -219,38 +201,24 @@ export default function Header( {
 				</div>
 			</NavigableToolbar>
 
-			<div className="edit-site-header_center">
-				<DocumentActions
-					entityTitle={ entityTitle }
-					entityLabel={
-						templateType === 'wp_template_part'
-							? 'template part'
-							: 'template'
-					}
-					isLoaded={ isLoaded }
-					showIconLabels={ showIconLabels }
-				>
-					{ ( { onClose } ) => (
-						<TemplateDetails
-							template={ template }
-							onClose={ onClose }
-						/>
-					) }
-				</DocumentActions>
+			<div className="edit-site-header-edit-mode__center">
+				<DocumentActions />
 			</div>
 
-			<div className="edit-site-header_end">
-				<div className="edit-site-header__actions">
+			<div className="edit-site-header-edit-mode__end">
+				<div className="edit-site-header-edit-mode__actions">
 					{ ! isFocusMode && (
 						<div
 							className={ classnames(
-								'edit-site-header__actions__preview-options',
+								'edit-site-header-edit-mode__preview-options',
 								{ 'is-zoomed-out': isZoomedOutView }
 							) }
 						>
 							<PreviewOptions
 								deviceType={ deviceType }
 								setDeviceType={ setPreviewDeviceType }
+								/* translators: button label text should, if possible, be under 16 characters. */
+								viewLabel={ __( 'View' ) }
 							>
 								<MenuGroup>
 									<MenuItem