@wordpress/block-editor 7.0.1-next.5df0cd52b7.0 → 7.0.4

package/src/store/test/selectors.js

@@ -228,19 +228,19 @@ describe( 'selectors', () => {
 					parents: {
 						123: '',
 					},
-					cache: {
-						123: {},
+					tree: {
+						123: {
+							clientId: 123,
+							name: 'core/paragraph',
+							attributes: {},
+							innerBlocks: [],
+						},
 					},
 					controlledInnerBlocks: {},
 				},
 			};
 
-			expect( getBlock( state, 123 ) ).toEqual( {
-				clientId: 123,
-				name: 'core/paragraph',
-				attributes: {},
-				innerBlocks: [],
-			} );
+			expect( getBlock( state, 123 ) ).toBe( state.blocks.tree[ 123 ] );
 		} );
 
 		it( 'should return null if the block is not present in state', () => {
@@ -250,55 +250,19 @@ describe( 'selectors', () => {
 					attributes: {},
 					order: {},
 					parents: {},
-					cache: {},
-					controlledInnerBlocks: {},
-				},
-			};
-
-			expect( getBlock( state, 123 ) ).toBe( null );
-		} );
-
-		it( 'should include inner blocks', () => {
-			const state = {
-				blocks: {
-					byClientId: {
-						123: { clientId: 123, name: 'core/paragraph' },
-						456: { clientId: 456, name: 'core/paragraph' },
-					},
-					attributes: {
-						123: {},
-						456: {},
-					},
-					order: {
-						'': [ 123 ],
-						123: [ 456 ],
-						456: [],
-					},
-					parents: {
-						123: '',
-						456: 123,
-					},
-					cache: {
-						123: {},
-						456: {},
+					tree: {
+						123: {
+							clientId: 123,
+							name: 'core/paragraph',
+							attributes: {},
+							innerBlocks: [],
+						},
 					},
 					controlledInnerBlocks: {},
 				},
 			};
 
-			expect( getBlock( state, 123 ) ).toEqual( {
-				clientId: 123,
-				name: 'core/paragraph',
-				attributes: {},
-				innerBlocks: [
-					{
-						clientId: 456,
-						name: 'core/paragraph',
-						attributes: {},
-						innerBlocks: [],
-					},
-				],
-			} );
+			expect( getBlock( state, 123 ) ).toBe( null );
 		} );
 	} );
 
@@ -321,7 +285,23 @@ describe( 'selectors', () => {
 						123: '',
 						23: '',
 					},
-					cache: {
+					tree: {
+						'': {
+							innerBlocks: [
+								{
+									clientId: 123,
+									name: 'core/paragraph',
+									attributes: {},
+									innerBlocks: [],
+								},
+								{
+									clientId: 23,
+									name: 'core/heading',
+									attributes: {},
+									innerBlocks: [],
+								},
+							],
+						},
 						123: {},
 						23: {},
 					},
@@ -329,92 +309,9 @@ describe( 'selectors', () => {
 				},
 			};
 
-			expect( getBlocks( state ) ).toEqual( [
-				{
-					clientId: 123,
-					name: 'core/paragraph',
-					attributes: {},
-					innerBlocks: [],
-				},
-				{
-					clientId: 23,
-					name: 'core/heading',
-					attributes: {},
-					innerBlocks: [],
-				},
-			] );
-		} );
-		it( 'only returns a new value if the cache key of a direct child changes', () => {
-			const cacheRef = {};
-			const state = {
-				blocks: {
-					byClientId: {
-						23: { clientId: 23, name: 'core/heading' },
-					},
-					attributes: {
-						23: {},
-					},
-					order: {
-						'': [ 23 ],
-					},
-					parents: {
-						23: '',
-					},
-					cache: {
-						23: cacheRef,
-					},
-					controlledInnerBlocks: {},
-				},
-			};
-			const oldBlocks = getBlocks( state );
-
-			const newStateSameCache = {
-				blocks: {
-					byClientId: {
-						23: { clientId: 23, name: 'core/heading' },
-					},
-					attributes: {
-						23: {},
-					},
-					order: {
-						'': [ 23 ],
-					},
-					parents: {
-						23: '',
-					},
-					cache: {
-						23: cacheRef,
-					},
-					controlledInnerBlocks: {},
-				},
-			};
-			// Makes sure blocks are referentially equal if the cache key stays the same.
-			const newBlocks = getBlocks( newStateSameCache );
-			expect( oldBlocks ).toBe( newBlocks );
-
-			const newStateNewCache = {
-				blocks: {
-					byClientId: {
-						23: { clientId: 23, name: 'core/heading' },
-					},
-					attributes: {
-						23: {},
-					},
-					order: {
-						'': [ 23 ],
-					},
-					parents: {
-						23: '',
-					},
-					cache: {
-						23: {},
-					},
-					controlledInnerBlocks: {},
-				},
-			};
-			// Blocks are referentially different if the cache key changes.
-			const newBlocksNewCache = getBlocks( newStateNewCache );
-			expect( oldBlocks ).not.toBe( newBlocksNewCache );
+			expect( getBlocks( state ) ).toBe(
+				state.blocks.tree[ '' ].innerBlocks
+			);
 		} );
 	} );
 
@@ -963,6 +860,14 @@ describe( 'selectors', () => {
 						23: '',
 						123: '',
 					},
+					tree: {
+						23: {
+							clientId: 23,
+							name: 'core/heading',
+							attributes: {},
+							innerBlocks: [],
+						},
+					},
 				},
 				selection: {
 					selectionStart: {},
@@ -993,6 +898,14 @@ describe( 'selectors', () => {
 						123: '',
 						23: '',
 					},
+					tree: {
+						23: {
+							clientId: 23,
+							name: 'core/heading',
+							attributes: {},
+							innerBlocks: [],
+						},
+					},
 				},
 				selection: {
 					selectionStart: { clientId: 23 },
@@ -1023,8 +936,13 @@ describe( 'selectors', () => {
 						123: '',
 						23: '',
 					},
-					cache: {
-						23: {},
+					tree: {
+						23: {
+							clientId: 23,
+							name: 'core/heading',
+							attributes: {},
+							innerBlocks: [],
+						},
 					},
 					controlledInnerBlocks: {},
 				},
@@ -1034,12 +952,9 @@ describe( 'selectors', () => {
 				},
 			};
 
-			expect( getSelectedBlock( state ) ).toEqual( {
-				clientId: 23,
-				name: 'core/heading',
-				attributes: {},
-				innerBlocks: [],
-			} );
+			expect( getSelectedBlock( state ) ).toEqual(
+				getBlock( state, 23 )
+			);
 		} );
 	} );
 
@@ -2560,7 +2475,11 @@ describe( 'selectors', () => {
 					attributes: {},
 					order: {},
 					parents: {},
-					cache: {},
+					tree: {
+						'': {
+							innerBlocks: [],
+						},
+					},
 				},
 				settings: {
 					__experimentalReusableBlocks: [
@@ -2636,9 +2555,19 @@ describe( 'selectors', () => {
 						block3: '',
 						block4: '',
 					},
-					cache: {
-						block3: {},
-						block4: {},
+					tree: {
+						block3: {
+							clientId: 'block3',
+							name: 'core/test-block-a',
+							attributes: {},
+							innerBlocks: [],
+						},
+						block4: {
+							clientId: 'block4',
+							name: 'core/test-block-a',
+							attributes: {},
+							innerBlocks: [],
+						},
 					},
 					controlledInnerBlocks: {},
 				},
@@ -2726,8 +2655,13 @@ describe( 'selectors', () => {
 					order: {
 						'': [ 'block1' ],
 					},
-					cache: {
-						block1: {},
+					tree: {
+						block1: {
+							clientId: 'block1',
+							name: 'core/test-block-b',
+							attributes: {},
+							innerBlocks: [],
+						},
 					},
 					controlledInnerBlocks: {},
 				},
@@ -2929,8 +2863,13 @@ describe( 'selectors', () => {
 					order: {
 						'': [ 'block1' ],
 					},
-					cache: {
-						block1: {},
+					tree: {
+						block1: {
+							clientId: 'block1',
+							name: 'core/with-tranforms-c',
+							attributes: {},
+							innerBlocks: [],
+						},
 					},
 					controlledInnerBlocks: {},
 				},
@@ -3725,6 +3664,13 @@ describe( 'getInserterItems with core blocks prioritization', () => {
 			title: 'Another Plugin Block B',
 			icon: 'test',
 		} );
+		registerBlockType( 'plugin/block-c-with-variations', {
+			save() {},
+			category: 'text',
+			title: 'Plugin Block C with variations',
+			icon: 'test',
+			variations: [ { name: 'variation-a' }, { name: 'variation-b' } ],
+		} );
 		registerBlockType( 'core/block', {
 			save() {},
 			category: 'text',
@@ -3737,13 +3683,23 @@ describe( 'getInserterItems with core blocks prioritization', () => {
 			icon: 'test',
 			keywords: [ 'testing' ],
 		} );
+		registerBlockType( 'core/test-block-with-variations', {
+			save() {},
+			category: 'text',
+			title: 'Core Block C with variations',
+			icon: 'test',
+			keywords: [ 'testing' ],
+			variations: [ { name: 'variation-a' }, { name: 'variation-b' } ],
+		} );
 	} );
 	afterEach( () => {
 		[
 			'plugin/block-a',
 			'another-plugin/block-b',
+			'plugin/block-c-with-variations',
 			'core/block',
 			'core/test-block-a',
+			'core/test-block-with-variations',
 		].forEach( unregisterBlockType );
 	} );
 	it( 'should prioritize core blocks by sorting them at the top of the returned list', () => {
@@ -3763,10 +3719,16 @@ describe( 'getInserterItems with core blocks prioritization', () => {
 		const expectedResult = [
 			'core/block',
 			'core/test-block-a',
+			'core/test-block-with-variations',
+			'core/test-block-with-variations/variation-a',
+			'core/test-block-with-variations/variation-b',
 			'plugin/block-a',
 			'another-plugin/block-b',
+			'plugin/block-c-with-variations',
+			'plugin/block-c-with-variations/variation-a',
+			'plugin/block-c-with-variations/variation-b',
 		];
-		expect( items.map( ( { name } ) => name ) ).toEqual( expectedResult );
+		expect( items.map( ( { id } ) => id ) ).toEqual( expectedResult );
 	} );
 } );
 

package/src/style.scss

@@ -1,11 +1,5 @@
-// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#start-resizable-editor-section {
-	display: none;
-}
-
-// Only add styles for components that are used inside the editing canvas here:
-
 @import "./autocompleters/style.scss";
+@import "./components/block-alignment-control/style.scss";
 @import "./components/block-alignment-matrix-control/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";
@@ -63,13 +57,6 @@
 @import "./hooks/layout.scss";
 @import "./hooks/border.scss";
 
-// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#end-resizable-editor-section {
-	display: none;
-}
-
-// Styles for components that are used outside of the editing canvas go here:
-
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/style.scss";
 @import "./components/preview-options/style.scss";

package/src/utils/index.js

@@ -1,3 +1,4 @@
 export { default as transformStyles } from './transform-styles';
 export * from './theme';
 export * from './block-variation-transforms';
+export { default as getPxFromCssUnit } from './parse-css-unit-to-px';

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

@@ -0,0 +1,272 @@
+/**
+ * Converts string to object { value, unit }.
+ *
+ * @param {string} cssUnit
+ * @return {Object} parsedUnit
+ */
+function parseUnit( cssUnit ) {
+	const match = cssUnit
+		?.trim()
+		.match(
+			/^(0?[-.]?\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 ) {
+	return Function( `'use strict'; return (${ expression })` )();
+}
+
+/**
+ * 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.
+	const cssUnitsBits = cssUnit.split( /[+-/*/]/g ).filter( Boolean );
+	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 );
+	}
+
+	return errorFound ? null : calculate( cssUnit ).toFixed( 0 ) + 'px';
+}
+
+/**
+ * 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,
+	};
+
+	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, options );
+	}
+
+	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;