@wordpress/block-editor 11.7.0 → 12.0.0

package/src/components/block-tools/block-contextual-toolbar.js

@@ -7,8 +7,16 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
+import {
+	ToolbarItem,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
+import { levelUp } from '@wordpress/icons';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -16,10 +24,57 @@ import { useSelect } from '@wordpress/data';
 import NavigableToolbar from '../navigable-toolbar';
 import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
+import BlockIcon from '../block-icon';
+
+const CollapseFixedToolbarButton = forwardRef( ( { onClick }, ref ) => {
+	return (
+		<ToolbarItem
+			as={ ToolbarButton }
+			className="block-editor-block-toolbar__collapse-fixed-toolbar"
+			icon={ levelUp }
+			onClick={ onClick }
+			ref={ ref }
+			label={ __( 'Show document tools' ) }
+		/>
+	);
+} );
+
+const ExpandFixedToolbarButton = forwardRef( ( { onClick, icon }, ref ) => {
+	return (
+		<ToolbarItem
+			as={ ToolbarButton }
+			className="block-editor-block-toolbar__expand-fixed-toolbar"
+			icon={ <BlockIcon icon={ icon } /> }
+			onClick={ onClick }
+			ref={ ref }
+			label={ __( 'Show block tools' ) }
+		/>
+	);
+} );
 
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
-	const { blockType, hasParents, showParentSelector } = useSelect(
-		( select ) => {
+	// When the toolbar is fixed it can be collapsed
+	const [ isCollapsed, setIsCollapsed ] = useState( false );
+	const expandFixedToolbarButtonRef = useRef();
+	const collapseFixedToolbarButtonRef = useRef();
+
+	// Don't focus the block toolbar just because it mounts
+	const initialRender = useRef( true );
+	useEffect( () => {
+		if ( initialRender.current ) {
+			initialRender.current = false;
+			return;
+		}
+		if ( isCollapsed && expandFixedToolbarButtonRef.current ) {
+			expandFixedToolbarButtonRef.current.focus();
+		}
+		if ( ! isCollapsed && collapseFixedToolbarButtonRef.current ) {
+			collapseFixedToolbarButtonRef.current.focus();
+		}
+	}, [ isCollapsed ] );
+
+	const { blockType, hasParents, showParentSelector, selectedBlockClientId } =
+		useSelect( ( select ) => {
 			const {
 				getBlockName,
 				getBlockParents,
@@ -28,16 +83,17 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			} = select( blockEditorStore );
 			const { getBlockType } = select( blocksStore );
 			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-			const parents = getBlockParents( selectedBlockClientId );
+			const _selectedBlockClientId = selectedBlockClientIds[ 0 ];
+			const parents = getBlockParents( _selectedBlockClientId );
 			const firstParentClientId = parents[ parents.length - 1 ];
 			const parentBlockName = getBlockName( firstParentClientId );
 			const parentBlockType = getBlockType( parentBlockName );
 
 			return {
+				selectedBlockClientId: _selectedBlockClientId,
 				blockType:
-					selectedBlockClientId &&
-					getBlockType( getBlockName( selectedBlockClientId ) ),
+					_selectedBlockClientId &&
+					getBlockType( getBlockName( _selectedBlockClientId ) ),
 				hasParents: parents.length,
 				showParentSelector:
 					parentBlockType &&
@@ -48,12 +104,16 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 					) &&
 					selectedBlockClientIds.length <= 1 &&
 					! __unstableGetContentLockingParent(
-						selectedBlockClientId
+						_selectedBlockClientId
 					),
 			};
-		},
-		[]
-	);
+		}, [] );
+
+	useEffect( () => {
+		setIsCollapsed( false );
+	}, [ selectedBlockClientId ] );
+
+	const isLargeViewport = useViewportMatch( 'medium' );
 
 	if ( blockType ) {
 		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
@@ -65,6 +125,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const classes = classnames( 'block-editor-block-contextual-toolbar', {
 		'has-parent': hasParents && showParentSelector,
 		'is-fixed': isFixed,
+		'is-collapsed': isCollapsed,
 	} );
 
 	return (
@@ -75,7 +136,29 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			aria-label={ __( 'Block tools' ) }
 			{ ...props }
 		>
-			<BlockToolbar hideDragHandle={ isFixed } />
+			{ isFixed && isLargeViewport && blockType && (
+				<ToolbarGroup
+					className={
+						isCollapsed
+							? 'block-editor-block-toolbar__group-expand-fixed-toolbar'
+							: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'
+					}
+				>
+					{ isCollapsed ? (
+						<ExpandFixedToolbarButton
+							onClick={ () => setIsCollapsed( false ) }
+							icon={ blockType.icon }
+							ref={ expandFixedToolbarButtonRef }
+						/>
+					) : (
+						<CollapseFixedToolbarButton
+							onClick={ () => setIsCollapsed( true ) }
+							ref={ collapseFixedToolbarButtonRef }
+						/>
+					) }
+				</ToolbarGroup>
+			) }
+			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 		</NavigableToolbar>
 	);
 }

package/src/components/block-tools/selected-block-popover.js

@@ -10,7 +10,6 @@ import { useRef, useEffect } from '@wordpress/element';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -22,26 +21,20 @@ import BlockPopover from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import Inserter from '../inserter';
 import { unlock } from '../../lock-unlock';
+import { privateApis } from '../../private-apis';
 
 function selector( select ) {
 	const {
 		__unstableGetEditorMode,
-		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
-		isBlockInterfaceHidden,
-		getSettings,
 		getLastMultiSelectedBlockClientId,
 	} = unlock( select( blockEditorStore ) );
 
 	return {
 		editorMode: __unstableGetEditorMode(),
 		hasMultiSelection: hasMultiSelection(),
-		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
-		isBlockInterfaceHidden: isBlockInterfaceHidden(),
-		hasFixedToolbar: getSettings().hasFixedToolbar,
-		isDistractionFree: getSettings().isDistractionFree,
 		lastClientId: hasMultiSelection()
 			? getLastMultiSelectedBlockClientId()
 			: null,
@@ -52,21 +45,16 @@ function SelectedBlockPopover( {
 	clientId,
 	rootClientId,
 	isEmptyDefaultBlock,
-	showContents, // we may need to mount an empty popover because we reuse
 	capturingClientId,
 	__unstablePopoverSlot,
 	__unstableContentRef,
 } ) {
-	const {
-		editorMode,
-		hasMultiSelection,
-		isMultiSelecting,
-		isTyping,
-		isBlockInterfaceHidden,
-		hasFixedToolbar,
-		isDistractionFree,
-		lastClientId,
-	} = useSelect( selector, [] );
+	const { editorMode, hasMultiSelection, isTyping, lastClientId } = useSelect(
+		selector,
+		[]
+	);
+
+	const { useShouldContextualToolbarShow } = unlock( privateApis );
 	const isInsertionPointVisible = useSelect(
 		( select ) => {
 			const {
@@ -85,8 +73,10 @@ function SelectedBlockPopover( {
 		},
 		[ clientId ]
 	);
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const isToolbarForced = useRef( false );
+	const { shouldShowContextualToolbar, canFocusHiddenToolbar } =
+		useShouldContextualToolbarShow( clientId );
+
 	const { stopTyping } = useDispatch( blockEditorStore );
 
 	const showEmptyBlockSideInserter =
@@ -94,20 +84,6 @@ function SelectedBlockPopover( {
 	const shouldShowBreadcrumb =
 		! hasMultiSelection &&
 		( editorMode === 'navigation' || editorMode === 'zoom-out' );
-	const shouldShowContextualToolbar =
-		editorMode === 'edit' &&
-		! hasFixedToolbar &&
-		isLargeViewport &&
-		! isMultiSelecting &&
-		! showEmptyBlockSideInserter &&
-		! isTyping &&
-		! isBlockInterfaceHidden;
-	const canFocusHiddenToolbar =
-		editorMode === 'edit' &&
-		! shouldShowContextualToolbar &&
-		! hasFixedToolbar &&
-		! isDistractionFree &&
-		! isEmptyDefaultBlock;
 
 	useShortcut(
 		'core/block-editor/focus-toolbar',
@@ -179,7 +155,7 @@ function SelectedBlockPopover( {
 				resize={ false }
 				{ ...popoverProps }
 			>
-				{ shouldShowContextualToolbar && showContents && (
+				{ shouldShowContextualToolbar && (
 					<BlockContextualToolbar
 						// If the toolbar is being shown because of being forced
 						// it should focus the toolbar right after the mount.
@@ -215,8 +191,6 @@ function wrapperSelector( select ) {
 		getBlockRootClientId,
 		getBlock,
 		getBlockParents,
-		getSettings,
-		isNavigationMode: _isNavigationMode,
 		__experimentalGetBlockListSettingsForBlocks,
 	} = select( blockEditorStore );
 
@@ -242,14 +216,10 @@ function wrapperSelector( select ) {
 				?.__experimentalCaptureToolbars
 	);
 
-	const settings = getSettings();
-
 	return {
 		clientId,
 		rootClientId: getBlockRootClientId( clientId ),
 		name,
-		isDistractionFree: settings.isDistractionFree,
-		isNavigationMode: _isNavigationMode(),
 		isEmptyDefaultBlock:
 			name && isUnmodifiedDefaultBlock( { name, attributes } ),
 		capturingClientId,
@@ -272,8 +242,6 @@ export default function WrappedBlockPopover( {
 		name,
 		isEmptyDefaultBlock,
 		capturingClientId,
-		isDistractionFree,
-		isNavigationMode,
 	} = selected;
 
 	if ( ! name ) {
@@ -285,7 +253,6 @@ export default function WrappedBlockPopover( {
 			clientId={ clientId }
 			rootClientId={ rootClientId }
 			isEmptyDefaultBlock={ isEmptyDefaultBlock }
-			showContents={ ! isDistractionFree || isNavigationMode }
 			capturingClientId={ capturingClientId }
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }

package/src/components/block-tools/style.scss

@@ -89,6 +89,9 @@
  * Block Toolbar when contextual.
  */
 
+// Base left position for the toolbar when fixed.
+@include editor-left(".block-editor-block-contextual-toolbar.is-fixed");
+
 .block-editor-block-contextual-toolbar {
 	// Block UI appearance.
 	display: inline-flex;
@@ -104,11 +107,9 @@
 	&.is-fixed {
 		position: sticky;
 		top: 0;
-		width: 100%;
 		z-index: z-index(".block-editor-block-popover");
-		// Fill up when empty
-		min-height: $block-toolbar-height;
 		display: block;
+		width: 100%;
 
 		border: none;
 		border-bottom: $border-width solid $gray-200;
@@ -119,6 +120,159 @@
 			border-right-color: $gray-200;
 		}
 	}
+
+	// on desktop and tablet viewports the toolbar is fixed
+	// on top of interface header
+
+	@include break-medium() {
+		&.is-fixed {
+
+			// leave room for block inserter
+			margin-left: $grid-unit-80;
+			// position on top of interface header
+			position: fixed;
+			top: $admin-bar-height + $grid-unit;
+			// Don't fill up when empty
+			min-height: initial;
+			// remove the border
+			border-bottom: none;
+			// has to be flex for collapse button to fit
+			display: flex;
+
+			&.is-collapsed {
+				width: initial;
+				margin-left: $grid-unit-80 * 3 + $grid-unit-30;
+			}
+
+			.is-fullscreen-mode & {
+				// leave room for block inserter
+				margin-left: $grid-unit-80 + $grid-unit-70;
+				top: $grid-unit;
+				&.is-collapsed {
+					width: initial;
+					margin-left: $grid-unit-80 * 4 + $grid-unit-30;
+				}
+			}
+
+			& > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
+				border: none;
+
+				// Add a border as separator in the block toolbar.
+				&::after {
+					content: "";
+					width: $border-width;
+					height: 24px;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-bottom: $grid-unit + $grid-unit-05;
+					background-color: $gray-300;
+					position: absolute;
+					left: 44px;
+					top: -1px;
+				}
+			}
+
+			& > .block-editor-block-toolbar__group-expand-fixed-toolbar {
+				border: none;
+
+				// Add a border as separator in the block toolbar.
+				&::before {
+					content: "";
+					width: $border-width;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-bottom: $grid-unit + $grid-unit-05;
+					background-color: $gray-300;
+					position: relative;
+					left: -12px; //the padding of buttons
+					height: 24px;
+				}
+			}
+
+			.show-icon-labels & {
+
+				margin-left: $grid-unit-80;
+
+				&.is-collapsed {
+					margin-left: $grid-unit-80 * 6;
+				}
+
+				.is-fullscreen-mode & {
+					margin-left: $grid-unit-80 + $grid-unit-80;
+					&.is-collapsed {
+						margin-left: $grid-unit-80 * 7;
+					}
+				}
+
+
+				.block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
+					left: 0;
+				}
+
+				.block-editor-block-toolbar__block-controls .block-editor-block-mover {
+					border-left: none;
+					&::before {
+						content: "";
+						width: $border-width;
+						margin-top: $grid-unit + $grid-unit-05;
+						margin-bottom: $grid-unit + $grid-unit-05;
+						background-color: $gray-300;
+						position: relative;
+					}
+				}
+			}
+		}
+
+		&.is-fixed .block-editor-block-parent-selector {
+			.block-editor-block-parent-selector__button {
+				position: relative;
+				top: -1px;
+				border: 0;
+				padding-right: 6px;
+				padding-left: 6px;
+				&::after {
+					content: "\00B7";
+					font-size: 16px;
+					line-height: $grid-unit-40 + $grid-unit-10;
+					position: absolute;
+					left: $grid-unit-40 + $grid-unit-15 + 2px;
+					bottom: $grid-unit-05;
+				}
+			}
+		}
+
+		&:not(.is-fixed) .block-editor-block-parent-selector {
+			position: absolute;
+			top: -$border-width;
+			left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
+
+			.show-icon-labels & {
+				position: relative;
+				left: auto;
+				top: auto;
+				margin-top: -$border-width;
+				margin-left: -$border-width;
+				margin-bottom: -$border-width;
+			}
+		}
+	}
+
+	// on tablet vewports the toolbar is fixed
+	// on top of interface header and covers the whole header
+	// except for the inserter on the left
+	@include break-medium() {
+		&.is-fixed {
+			width: 100%;
+		}
+	}
+
+	// on desktop viewports the toolbar is fixed
+	// on top of interface header and leaves room
+	// for the block inserter the publish button
+	@include break-large() {
+		&.is-fixed {
+			width: initial;
+		}
+	}
+
 }
 
 /**

package/src/components/caption/index.native.js

@@ -44,7 +44,6 @@ const Caption = ( {
 			onChange={ onChange }
 			placeholder={ placeholder }
 			placeholderTextColor={ placeholderTextColor }
-			rootTagsToEliminate={ [ 'p' ] }
 			style={ style }
 			tagName="p"
 			textAlign="center"

package/src/components/date-format-picker/index.js

@@ -142,7 +142,7 @@ function NonDefaultControls( { format, onChange } ) {
 							Link: (
 								<ExternalLink
 									href={ __(
-										'https://wordpress.org/support/article/formatting-date-and-time/'
+										'https://wordpress.org/documentation/article/customize-date-and-time-format/'
 									) }
 								/>
 							),

package/src/components/editor-styles/index.js

@@ -68,29 +68,33 @@ function useDarkThemeBodyClassName( styles ) {
 }
 
 export default function EditorStyles( { styles } ) {
+	const stylesArray = useMemo(
+		() => Object.values( styles ?? [] ),
+		[ styles ]
+	);
 	const transformedStyles = useMemo(
 		() =>
 			transformStyles(
-				styles.filter( ( style ) => style?.css ),
+				stylesArray.filter( ( style ) => style?.css ),
 				EDITOR_STYLES_SELECTOR
 			),
-		[ styles ]
+		[ stylesArray ]
 	);
 
 	const transformedSvgs = useMemo(
 		() =>
-			styles
+			stylesArray
 				.filter( ( style ) => style.__unstableType === 'svgs' )
 				.map( ( style ) => style.assets )
 				.join( '' ),
-		[ styles ]
+		[ stylesArray ]
 	);
 
 	return (
 		<>
 			{ /* Use an empty style element to have a document reference,
 			     but this could be any element. */ }
-			<style ref={ useDarkThemeBodyClassName( styles ) } />
+			<style ref={ useDarkThemeBodyClassName( stylesArray ) } />
 			{ transformedStyles.map( ( css, index ) => (
 				<style key={ index }>{ css }</style>
 			) ) }

package/src/components/font-sizes/fluid-utils.js

@@ -6,18 +6,17 @@
 
 // Defaults.
 const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
-const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
+const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '320px';
 const DEFAULT_SCALE_FACTOR = 1;
-const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
+const DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN = 0.25;
+const DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX = 0.75;
 const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
 
 /**
  * Computes a fluid font-size value that uses clamp(). A minimum and maximum
  * font size OR a single font size can be specified.
  *
- * If a single font size is specified, it is scaled up and down by
- * minimumFontSizeFactor and maximumFontSizeFactor to arrive at the minimum and
- * maximum sizes.
+ * If a single font size is specified, it is scaled up and down using a logarithmic scale.
  *
  * @example
  * ```js
@@ -33,14 +32,13 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
  * ```
  *
  * @param {Object}        args
- * @param {?string}       args.minimumViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
- * @param {?string}       args.maximumViewPortWidth  Maximum size up to which type will have fluidity. Optional if fontSize is specified.
- * @param {string|number} [args.fontSize]            Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
- * @param {?string}       args.maximumFontSize       Maximum font size for any clamp() calculation. Optional.
- * @param {?string}       args.minimumFontSize       Minimum font size for any clamp() calculation. Optional.
- * @param {?number}       args.scaleFactor           A scale factor to determine how fast a font scales within boundaries. Optional.
- * @param {?number}       args.minimumFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
- * @param {?string}       args.minimumFontSizeLimit  The smallest a calculated font size may be. Optional.
+ * @param {?string}       args.minimumViewPortWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
+ * @param {?string}       args.maximumViewPortWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified.
+ * @param {string|number} [args.fontSize]           Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
+ * @param {?string}       args.maximumFontSize      Maximum font size for any clamp() calculation. Optional.
+ * @param {?string}       args.minimumFontSize      Minimum font size for any clamp() calculation. Optional.
+ * @param {?number}       args.scaleFactor          A scale factor to determine how fast a font scales within boundaries. Optional.
+ * @param {?string}       args.minimumFontSizeLimit The smallest a calculated font size may be. Optional.
  *
  * @return {string|null} A font-size value using clamp().
  */
@@ -51,7 +49,6 @@ export function getComputedFluidTypographyValue( {
 	minimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
 	maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
 	scaleFactor = DEFAULT_SCALE_FACTOR,
-	minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,
 	minimumFontSizeLimit,
 } ) {
 	// Validate incoming settings and set defaults.
@@ -106,6 +103,26 @@ export function getComputedFluidTypographyValue( {
 		 * the given font size multiplied by the min font size scale factor.
 		 */
 		if ( ! minimumFontSize ) {
+			const fontSizeValueInPx =
+				fontSizeParsed.unit === 'px'
+					? fontSizeParsed.value
+					: fontSizeParsed.value * 16;
+
+			/*
+			 * The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,
+			 * that is, how quickly the size factor reaches 0 given increasing font size values.
+			 * For a - b * log2(), lower values of b will make the curve move towards the minimum faster.
+			 * The scale factor is constrained between min and max values.
+			 */
+			const minimumFontSizeFactor = Math.min(
+				Math.max(
+					1 - 0.075 * Math.log2( fontSizeValueInPx ),
+					DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN
+				),
+				DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX
+			);
+
+			// Calculates the minimum font size.
 			const calculatedMinimumFontSize = roundToPrecision(
 				fontSizeParsed.value * minimumFontSizeFactor,
 				3

package/src/components/font-sizes/test/fluid-utils.js

@@ -24,7 +24,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			maximumFontSize: '45px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(20px, 1.25rem + ((1vw - 7.68px) * 3.005), 45px)'
+			'clamp(20px, 1.25rem + ((1vw - 3.2px) * 1.953), 45px)'
 		);
 	} );
 
@@ -33,7 +33,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)'
 		);
 	} );
 
@@ -42,7 +42,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)'
 		);
 	} );
 
@@ -53,7 +53,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			maximumViewPortWidth: '1000px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 5px) * 1.5), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 5px) * 2.208), 30px)'
 		);
 	} );
 
@@ -63,18 +63,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			scaleFactor: '2',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 1.803), 30px)'
-		);
-	} );
-
-	it( 'should return a fluid font size when given a min and max font size factor', () => {
-		const fluidTypographyValues = getComputedFluidTypographyValue( {
-			fontSize: '30px',
-			minimumFontSizeFactor: '0.5',
-			maximumFontSizeFactor: '2',
-		} );
-		expect( fluidTypographyValues ).toBe(
-			'clamp(15px, 0.938rem + ((1vw - 7.68px) * 1.803), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.725), 30px)'
 		);
 	} );