@wordpress/block-editor 12.16.0 → 12.16.1-next.79a6196f.0

package/src/utils/parse-css-unit-to-px.js

@@ -1,329 +0,0 @@
-/**
- * Converts string to object { value, unit }.
- *
- * @param {string} cssUnit
- * @return {Object} parsedUnit
- */
-function parseUnit( cssUnit ) {
-	const match = cssUnit
-		?.trim()
-		.match(
-			/^(0?[-.]?\d*\.?\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/
-		);
-	if ( ! isNaN( cssUnit ) && ! isNaN( parseFloat( cssUnit ) ) ) {
-		return { value: parseFloat( cssUnit ), unit: 'px' };
-	}
-	return match
-		? { value: parseFloat( match[ 1 ] ) || match[ 1 ], unit: match[ 2 ] }
-		: { value: cssUnit, unit: undefined };
-}
-/**
- * Evaluate a math expression.
- *
- * @param {string} expression
- * @return {number} evaluated expression.
- */
-function calculate( expression ) {
-	try {
-		return Function( `'use strict'; return (${ expression })` )();
-	} catch ( err ) {
-		return null;
-	}
-}
-
-/**
- * Calculates the css function value for the supported css functions such as max, min, clamp and calc.
- *
- * @param {string} functionUnitValue string should be in a particular format (for example min(12px,12px) ) no nested loops.
- * @param {Object} options
- * @return {string} unit containing the unit in PX.
- */
-function getFunctionUnitValue( functionUnitValue, options ) {
-	const functionUnit = functionUnitValue.split( /[(),]/g ).filter( Boolean );
-
-	const units = functionUnit
-		.slice( 1 )
-		.map( ( unit ) => parseUnit( getPxFromCssUnit( unit, options ) ).value )
-		.filter( Boolean );
-
-	switch ( functionUnit[ 0 ] ) {
-		case 'min':
-			return Math.min( ...units ) + 'px';
-		case 'max':
-			return Math.max( ...units ) + 'px';
-		case 'clamp':
-			if ( units.length !== 3 ) {
-				return null;
-			}
-			if ( units[ 1 ] < units[ 0 ] ) {
-				return units[ 0 ] + 'px';
-			}
-			if ( units[ 1 ] > units[ 2 ] ) {
-				return units[ 2 ] + 'px';
-			}
-			return units[ 1 ] + 'px';
-		case 'calc':
-			return units[ 0 ] + 'px';
-	}
-}
-
-/**
- * Take a css function such as min, max, calc, clamp and returns parsedUnit
- *
- * How this works for the nested function is that it first replaces the inner function call.
- * Then it tackles the outer onces.
- * So for example: min( max(25px, 35px), 40px )
- * in the first pass we would replace max(25px, 35px) with 35px.
- * then we would try to evaluate min( 35px, 40px )
- * and then finally return 35px.
- *
- * @param {string} cssUnit
- * @return {Object} parsedUnit object.
- */
-function parseUnitFunction( cssUnit ) {
-	while ( true ) {
-		const currentCssUnit = cssUnit;
-		const regExp = /(max|min|calc|clamp)\(([^()]*)\)/g;
-		const matches = regExp.exec( cssUnit ) || [];
-		if ( matches[ 0 ] ) {
-			const functionUnitValue = getFunctionUnitValue( matches[ 0 ] );
-			cssUnit = cssUnit.replace( matches[ 0 ], functionUnitValue );
-		}
-
-		// If the unit hasn't been modified or we have a single value break free.
-		if ( cssUnit === currentCssUnit || parseFloat( cssUnit ) ) {
-			break;
-		}
-	}
-
-	return parseUnit( cssUnit );
-}
-/**
- * Return true if we think this is a math expression.
- *
- * @param {string} cssUnit the cssUnit value being evaluted.
- * @return {boolean} Whether the cssUnit is a math expression.
- */
-function isMathExpression( cssUnit ) {
-	for ( let i = 0; i < cssUnit.length; i++ ) {
-		if ( [ '+', '-', '/', '*' ].includes( cssUnit[ i ] ) ) {
-			return true;
-		}
-	}
-	return false;
-}
-/**
- * Evaluates the math expression and return a px value.
- *
- * @param {string} cssUnit the cssUnit value being evaluted.
- * @return {string} return a converfted value to px.
- */
-function evalMathExpression( cssUnit ) {
-	let errorFound = false;
-	// Convert every part of the expression to px values.
-	// The following regex matches numbers that have a following unit
-	// E.g. 5.25rem, 1vw
-	const cssUnitsBits = cssUnit.match( /\d+\.?\d*[a-zA-Z]+|\.\d+[a-zA-Z]+/g );
-	if ( cssUnitsBits ) {
-		for ( const unit of cssUnitsBits ) {
-			// Standardize the unit to px and extract the value.
-			const parsedUnit = parseUnit( getPxFromCssUnit( unit ) );
-			if ( ! parseFloat( parsedUnit.value ) ) {
-				errorFound = true;
-				// End early since we are dealing with a null value.
-				break;
-			}
-			cssUnit = cssUnit.replace( unit, parsedUnit.value );
-		}
-	} else {
-		errorFound = true;
-	}
-
-	// For mixed math expressions wrapped within CSS expressions
-	const expressionsMatches = cssUnit.match( /(max|min|clamp)/g );
-	if ( ! errorFound && expressionsMatches ) {
-		const values = cssUnit.split( ',' );
-		for ( const currentValue of values ) {
-			// Check for nested calc() and remove them to calculate the value.
-			const rawCurrentValue = currentValue.replace( /\s|calc/g, '' );
-
-			if ( isMathExpression( rawCurrentValue ) ) {
-				const calculatedExpression = calculate( rawCurrentValue );
-
-				if ( calculatedExpression ) {
-					const calculatedValue =
-						calculatedExpression.toFixed( 0 ) + 'px';
-					cssUnit = cssUnit.replace( currentValue, calculatedValue );
-				}
-			}
-		}
-		const parsedValue = parseUnitFunction( cssUnit );
-		return ! parsedValue ? null : parsedValue.value + parsedValue.unit;
-	}
-
-	if ( errorFound ) {
-		return null;
-	}
-
-	const calculatedResult = calculate( cssUnit );
-	return calculatedResult ? calculatedResult.toFixed( 0 ) + 'px' : null;
-}
-
-/**
- * Convert a parsedUnit object to px value.
- *
- * @param {Object} parsedUnit
- * @param {Object} options
- * @return {string} or {null} returns the converted with in a px value format.
- */
-function convertParsedUnitToPx( parsedUnit, options ) {
-	const PIXELS_PER_INCH = 96;
-	const ONE_PERCENT = 0.01;
-
-	const defaultProperties = {
-		fontSize: 16,
-		lineHeight: 16,
-		width: 375,
-		height: 812,
-		type: 'font',
-	};
-
-	const setOptions = Object.assign( {}, defaultProperties, options );
-
-	const relativeUnits = {
-		em: setOptions.fontSize,
-		rem: setOptions.fontSize,
-		vh: setOptions.height * ONE_PERCENT,
-		vw: setOptions.width * ONE_PERCENT,
-		vmin:
-			( setOptions.width < setOptions.height
-				? setOptions.width
-				: setOptions.height ) * ONE_PERCENT,
-		vmax:
-			( setOptions.width > setOptions.height
-				? setOptions.width
-				: setOptions.height ) * ONE_PERCENT,
-		'%':
-			( setOptions.type === 'font'
-				? setOptions.fontSize
-				: setOptions.width ) * ONE_PERCENT,
-		ch: 8, // The advance measure (width) of the glyph "0" of the element's font. Approximate
-		ex: 7.15625, // X-height of the element's font. Approximate.
-		lh: setOptions.lineHeight,
-	};
-	relativeUnits.svw = relativeUnits.vmin;
-	relativeUnits.lvw = relativeUnits.vmax;
-	relativeUnits.dvw = relativeUnits.vw;
-	relativeUnits.svh = relativeUnits.vmin;
-	relativeUnits.lvh = relativeUnits.vmax;
-	relativeUnits.dvh = relativeUnits.vh;
-	relativeUnits.vi = relativeUnits.vh;
-	relativeUnits.svi = relativeUnits.vmin;
-	relativeUnits.lvi = relativeUnits.vmax;
-	relativeUnits.dvi = relativeUnits.vw;
-	relativeUnits.vb = relativeUnits.vh;
-	relativeUnits.svb = relativeUnits.vmin;
-	relativeUnits.lvb = relativeUnits.vmax;
-	relativeUnits.dvb = relativeUnits.vh;
-	relativeUnits.svmin = relativeUnits.vmin;
-	relativeUnits.lvmin = relativeUnits.vmin;
-	relativeUnits.dvmin = relativeUnits.vmin;
-	relativeUnits.svmax = relativeUnits.vmax;
-	relativeUnits.lvmax = relativeUnits.vmax;
-	relativeUnits.dvmax = relativeUnits.vmax;
-
-	const absoluteUnits = {
-		in: PIXELS_PER_INCH,
-		cm: PIXELS_PER_INCH / 2.54,
-		mm: PIXELS_PER_INCH / 25.4,
-		pt: PIXELS_PER_INCH / 72,
-		pc: PIXELS_PER_INCH / 6,
-		px: 1,
-		Q: PIXELS_PER_INCH / 2.54 / 40,
-	};
-
-	if ( relativeUnits[ parsedUnit.unit ] ) {
-		return (
-			( relativeUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(
-				0
-			) + 'px'
-		);
-	}
-
-	if ( absoluteUnits[ parsedUnit.unit ] ) {
-		return (
-			( absoluteUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(
-				0
-			) + 'px'
-		);
-	}
-
-	return null;
-}
-
-/**
- * Returns the px value of a cssUnit.
- *
- * @param {string} cssUnit
- * @param {Object} options
- * @return {string} returns the cssUnit value in a simple px format.
- */
-export function getPxFromCssUnit( cssUnit, options = {} ) {
-	if ( Number.isFinite( cssUnit ) ) {
-		return cssUnit.toFixed( 0 ) + 'px';
-	}
-	if ( cssUnit === undefined ) {
-		return null;
-	}
-	let parsedUnit = parseUnit( cssUnit );
-
-	if ( ! parsedUnit.unit ) {
-		parsedUnit = parseUnitFunction( cssUnit );
-	}
-
-	if ( isMathExpression( cssUnit ) && ! parsedUnit.unit ) {
-		return evalMathExpression( cssUnit );
-	}
-
-	return convertParsedUnitToPx( parsedUnit, options );
-}
-
-// Use simple cache.
-const cache = {};
-/**
- * Returns the px value of a cssUnit. The memoized version of getPxFromCssUnit;
- *
- * @param {string} cssUnit
- * @param {Object} options
- * @return {string} returns the cssUnit value in a simple px format.
- */
-function memoizedGetPxFromCssUnit( cssUnit, options = {} ) {
-	const hash = cssUnit + hashOptions( options );
-
-	if ( ! cache[ hash ] ) {
-		cache[ hash ] = getPxFromCssUnit( cssUnit, options );
-	}
-	return cache[ hash ];
-}
-
-function hashOptions( options ) {
-	let hash = '';
-	if ( options.hasOwnProperty( 'fontSize' ) ) {
-		hash = ':' + options.width;
-	}
-	if ( options.hasOwnProperty( 'lineHeight' ) ) {
-		hash = ':' + options.lineHeight;
-	}
-	if ( options.hasOwnProperty( 'width' ) ) {
-		hash = ':' + options.width;
-	}
-	if ( options.hasOwnProperty( 'height' ) ) {
-		hash = ':' + options.height;
-	}
-	if ( options.hasOwnProperty( 'type' ) ) {
-		hash = ':' + options.type;
-	}
-	return hash;
-}
-
-export default memoizedGetPxFromCssUnit;

package/src/utils/test/parse-css-unit-to-px.js

@@ -1,172 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	default as memoizedGetPxFromCssUnit,
-	getPxFromCssUnit,
-} from '../parse-css-unit-to-px';
-
-describe( 'getPxFromCssUnit', () => {
-	// Absolute units.
-	describe( 'absolute unites should return px values', () => {
-		const testData = [
-			[ '25px', '25px' ],
-			[ '25.5', '26px' ],
-			[ '1cm', '38px' ],
-			[ '10mm', '38px' ],
-			[ '1in', '96px' ],
-			[ '12pt', '16px' ],
-			[ '1pc', '16px' ],
-			[ '40Q', '38px' ], // 40 Q should be 1 cm.
-		];
-
-		test.each( testData )( 'getPxFromCssUnit( %s )', ( unit, expected ) => {
-			expect( getPxFromCssUnit( unit ) ).toBe( expected );
-		} );
-		test.each( testData )(
-			'memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit ) ).toBe( expected );
-			}
-		);
-		test.each( testData )(
-			'cached memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit ) ).toBe( expected );
-			}
-		);
-	} );
-
-	describe( 'relative unites should return px values', () => {
-		const settings = {
-			fontSize: 10,
-			width: 100,
-			height: 200,
-			lineHeight: 2,
-			type: 'font',
-		};
-
-		const testData = [
-			[ '2em', '20px' ],
-			[ '2rem', '20px' ],
-			[ '1.125rem', '11px' ],
-			[ '20vw', '20px' ],
-			[ '20vh', '40px' ],
-			[ '20vmin', '20px' ],
-			[ '20vmax', '40px' ],
-			[ '20lh', '40px' ],
-			[ '120%', '12px' ],
-		];
-
-		test.each( testData )( 'getPxFromCssUnit( %s )', ( unit, expected ) => {
-			expect( getPxFromCssUnit( unit, settings ) ).toBe( expected );
-		} );
-		test.each( testData )(
-			'memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
-					expected
-				);
-			}
-		);
-		test.each( testData )(
-			'cached memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
-					expected
-				);
-			}
-		);
-	} );
-
-	// Function units.
-
-	describe( 'function unites should return px values', () => {
-		const settings = {
-			fontSize: 10,
-			width: 100,
-			height: 200,
-			lineHeight: 2,
-			type: 'font',
-		};
-
-		const testData = [
-			[ 'min(20px, 25px)', '20px' ],
-			[ 'min(20px, 9px, 12pt, 25px)', '9px' ],
-			[ 'max(20px, 25px)', '25px' ],
-			[ 'clamp(10px, 9px, 25px)', '10px' ],
-			[ 'clamp(10px, 35px, 25px)', '25px' ],
-			[ 'clamp(10px, 15px, 25px)', '15px' ],
-			[ 'min(max(20px,25px), 35px)', '25px' ],
-			[ 'max(min(20px,25px), 35px)', '35px' ],
-			[ '10px + 25px', '35px' ],
-			[ 'calc(10px + 25px)', '35px' ],
-			[ 'calc( 2 * 20px)', '40px' ],
-			[ 'calc(25px - 10px)', '15px' ],
-			[ 'min(10px + 25px, 55pt)', '35px' ],
-			[ 'calc(12vw * 10px)', '450px' ],
-			[ 'calc(45vw / 10px)', '17px' ],
-			[ '', null ],
-			[ undefined, null ],
-			[ 123, '123px' ],
-			[ 123.456, '123px' ],
-			[ 'abc', null ],
-			[ 'console.log("howdy"); + 10px', null ],
-			[ 'calc(12vw * 10px', null ], // Missing closing bracket.
-			[ 'calc( 1em + 0.875rem )', '30px' ], // Decimals
-			[
-				'clamp(1.8rem, 1.8rem + ((1vw / 0.48rem + 1rem) * 2.885), 3rem)',
-				'48px',
-			],
-			[
-				'clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)',
-				'80px',
-			],
-			[
-				'clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)',
-				'42px',
-			],
-			[ 'var:preset|font-size|medium', null ],
-		];
-
-		test.each( testData )( 'getPxFromCssUnit( %s )', ( unit, expected ) => {
-			expect( getPxFromCssUnit( unit, settings ) ).toBe( expected );
-		} );
-		test.each( testData )(
-			'memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
-					expected
-				);
-			}
-		);
-		test.each( testData )(
-			'cached memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
-					expected
-				);
-			}
-		);
-	} );
-	// Skip this test it might be useful in dev.
-	it.skip( 'test performance of memoizedGetPxFromCssUnit function', () => {
-		const start = Date.now();
-		let i = 0;
-		const intervals = 1000;
-		while ( i < intervals ) {
-			getPxFromCssUnit( 'max(25px, 35px)', { width: 200 } );
-			i++;
-		}
-		const rawDuration = Date.now() - start;
-
-		const startM = Date.now();
-		i = 0;
-		// The memoized Version should be at 10X better then the non default one.
-		while ( i < intervals * 10 ) {
-			memoizedGetPxFromCssUnit( 'max(25px, 35px)', { width: 201 } );
-			i++;
-		}
-		expect( rawDuration > Date.now() - startM ).toBe( true );
-	} );
-} );

package/src/utils/use-should-contextual-toolbar-show.js

@@ -1,85 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-import { useViewportMatch } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../store';
-import { unlock } from '../lock-unlock';
-
-/**
- * Returns true if the contextual block toolbar should show, or false if it should be hidden.
- *
- * @return {boolean} Whether the block toolbar is hidden.
- */
-export function useShouldContextualToolbarShow() {
-	const isLargeViewport = useViewportMatch( 'medium' );
-
-	const {
-		shouldShowContextualToolbar,
-		canFocusHiddenToolbar,
-		fixedToolbarCanBeFocused,
-	} = useSelect(
-		( select ) => {
-			const {
-				__unstableGetEditorMode,
-				isMultiSelecting,
-				isTyping,
-				isBlockInterfaceHidden,
-				getBlock,
-				getSettings,
-				isNavigationMode,
-				getSelectedBlockClientId,
-				getFirstMultiSelectedBlockClientId,
-			} = unlock( select( blockEditorStore ) );
-
-			const isEditMode = __unstableGetEditorMode() === 'edit';
-			const hasFixedToolbar = getSettings().hasFixedToolbar;
-			const isDistractionFree = getSettings().isDistractionFree;
-			const selectedBlockId =
-				getFirstMultiSelectedBlockClientId() ||
-				getSelectedBlockClientId();
-			const hasSelectedBlockId = !! selectedBlockId;
-			const isEmptyDefaultBlock = isUnmodifiedDefaultBlock(
-				getBlock( selectedBlockId ) || {}
-			);
-
-			const _shouldShowContextualToolbar =
-				isEditMode &&
-				! hasFixedToolbar &&
-				( ! isDistractionFree || isNavigationMode() ) &&
-				isLargeViewport &&
-				! isMultiSelecting() &&
-				! isTyping() &&
-				hasSelectedBlockId &&
-				! isEmptyDefaultBlock &&
-				! isBlockInterfaceHidden();
-
-			const _canFocusHiddenToolbar =
-				isEditMode &&
-				hasSelectedBlockId &&
-				! _shouldShowContextualToolbar &&
-				! hasFixedToolbar &&
-				! isDistractionFree &&
-				! isEmptyDefaultBlock;
-
-			return {
-				shouldShowContextualToolbar: _shouldShowContextualToolbar,
-				canFocusHiddenToolbar: _canFocusHiddenToolbar,
-				fixedToolbarCanBeFocused:
-					( hasFixedToolbar || ! isLargeViewport ) && selectedBlockId,
-			};
-		},
-		[ isLargeViewport ]
-	);
-
-	return {
-		shouldShowContextualToolbar,
-		canFocusHiddenToolbar,
-		fixedToolbarCanBeFocused,
-	};
-}