@wordpress/block-editor 7.0.2 → 8.0.1

package/src/store/test/reducer.js

@@ -788,6 +788,28 @@ describe( 'state', () => {
 			} );
 		} );
 
+		it( 'Replacing the block with an empty list should remove it', () => {
+			const original = blocks( undefined, {
+				type: 'RESET_BLOCKS',
+				blocks: [
+					{
+						clientId: 'chicken',
+						name: 'core/test-block',
+						attributes: {},
+						innerBlocks: [],
+					},
+				],
+			} );
+			const state = blocks( original, {
+				type: 'REPLACE_BLOCKS',
+				clientIds: [ 'chicken' ],
+				blocks: [],
+			} );
+
+			expect( Object.keys( state.byClientId ) ).toHaveLength( 0 );
+			expect( state.tree[ '' ].innerBlocks ).toHaveLength( 0 );
+		} );
+
 		it( 'should replace the block and remove references to its inner blocks', () => {
 			const original = blocks( undefined, {
 				type: 'RESET_BLOCKS',
@@ -1696,60 +1718,6 @@ describe( 'state', () => {
 		} );
 
 		describe( 'blocks', () => {
-			it( 'should not reset any blocks that are not in the post', () => {
-				const actions = [
-					{
-						type: 'RESET_BLOCKS',
-						blocks: [
-							{
-								clientId: 'block1',
-								innerBlocks: [
-									{ clientId: 'block11', innerBlocks: [] },
-									{ clientId: 'block12', innerBlocks: [] },
-								],
-							},
-						],
-					},
-					{
-						type: 'RECEIVE_BLOCKS',
-						blocks: [
-							{
-								clientId: 'block2',
-								innerBlocks: [
-									{ clientId: 'block21', innerBlocks: [] },
-									{ clientId: 'block22', innerBlocks: [] },
-								],
-							},
-						],
-					},
-				];
-				const original = deepFreeze(
-					actions.reduce( blocks, undefined )
-				);
-
-				const state = blocks( original, {
-					type: 'RESET_BLOCKS',
-					blocks: [
-						{
-							clientId: 'block3',
-							innerBlocks: [
-								{ clientId: 'block31', innerBlocks: [] },
-								{ clientId: 'block32', innerBlocks: [] },
-							],
-						},
-					],
-				} );
-
-				expect( state.byClientId ).toEqual( {
-					block2: { clientId: 'block2' },
-					block21: { clientId: 'block21' },
-					block22: { clientId: 'block22' },
-					block3: { clientId: 'block3' },
-					block31: { clientId: 'block31' },
-					block32: { clientId: 'block32' },
-				} );
-			} );
-
 			describe( 'byClientId', () => {
 				it( 'should ignore updates to non-existent block', () => {
 					const original = deepFreeze(

package/src/store/test/selectors.js

@@ -70,8 +70,8 @@ const {
 	__experimentalGetLastBlockAttributeChanges,
 	getLowestCommonAncestorWithSelectedBlock,
 	__experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames,
-	__experimentalGetParsedReusableBlock,
 	__experimentalGetAllowedPatterns,
+	__experimentalGetParsedPattern,
 	__experimentalGetPatternsByBlockTypes,
 	__unstableGetClientIdWithClientIdsTree,
 	__unstableGetClientIdsTree,
@@ -3331,6 +3331,13 @@ describe( 'selectors', () => {
 						content:
 							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
 					},
+					{
+						name: 'pattern-c',
+						title: 'pattern hidden from UI',
+						inserter: false,
+						content:
+							'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
+					},
 				],
 			},
 		};
@@ -3350,6 +3357,77 @@ describe( 'selectors', () => {
 				__experimentalGetAllowedPatterns( state, 'block2' )
 			).toHaveLength( 0 );
 		} );
+		it( 'should return empty array if only patterns hidden from UI exist', () => {
+			expect(
+				__experimentalGetAllowedPatterns( {
+					blocks: { byClientId: {} },
+					blockListSettings: {},
+					settings: {
+						__experimentalBlockPatterns: [
+							{
+								name: 'pattern-c',
+								title: 'pattern hidden from UI',
+								inserter: false,
+								content:
+									'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
+							},
+						],
+					},
+				} )
+			).toHaveLength( 0 );
+		} );
+	} );
+	describe( '__experimentalGetParsedPattern', () => {
+		const state = {
+			settings: {
+				__experimentalBlockPatterns: [
+					{
+						name: 'pattern-a',
+						title: 'pattern with a',
+						content: `<!-- wp:test-block-a --><!-- /wp:test-block-a -->`,
+					},
+					{
+						name: 'pattern-hidden-from-ui',
+						title: 'pattern hidden from UI',
+						inserter: false,
+						content:
+							'<!-- wp:test-block-a --><!-- /wp:test-block-a --><!-- wp:test-block-b --><!-- /wp:test-block-b -->',
+					},
+				],
+			},
+		};
+		it( 'should return proper results when pattern does not exist', () => {
+			expect(
+				__experimentalGetParsedPattern( state, 'not there' )
+			).toBeNull();
+		} );
+		it( 'should return existing pattern properly parsed', () => {
+			const { name, blocks } = __experimentalGetParsedPattern(
+				state,
+				'pattern-a'
+			);
+			expect( name ).toEqual( 'pattern-a' );
+			expect( blocks ).toHaveLength( 1 );
+			expect( blocks[ 0 ] ).toEqual(
+				expect.objectContaining( {
+					name: 'core/test-block-a',
+				} )
+			);
+		} );
+		it( 'should return hidden from UI pattern when requested', () => {
+			const { name, blocks, inserter } = __experimentalGetParsedPattern(
+				state,
+				'pattern-hidden-from-ui'
+			);
+			expect( name ).toEqual( 'pattern-hidden-from-ui' );
+			expect( inserter ).toBeFalsy();
+			expect( blocks ).toHaveLength( 2 );
+			expect( blocks[ 0 ] ).toEqual(
+				expect.objectContaining( {
+					name: 'core/test-block-a',
+				} )
+			);
+		} );
 	} );
 	describe( '__experimentalGetPatternsByBlockTypes', () => {
 		const state = {
@@ -3625,26 +3703,6 @@ describe( 'selectors', () => {
 	} );
 } );
 
-describe( '__experimentalGetParsedReusableBlock', () => {
-	const state = {
-		settings: {
-			__experimentalReusableBlocks: [
-				{
-					id: 1,
-					content: { raw: '' },
-				},
-			],
-		},
-	};
-
-	// Regression test for https://github.com/WordPress/gutenberg/issues/26485. See https://github.com/WordPress/gutenberg/issues/26548.
-	it( "Should return an empty array if reusable block's content.raw is an empty string", () => {
-		expect( __experimentalGetParsedReusableBlock( state, 1 ) ).toEqual(
-			[]
-		);
-	} );
-} );
-
 describe( 'getInserterItems with core blocks prioritization', () => {
 	// This test is in a seperate `describe` because all other tests register
 	// some test `core` blocks and interfere with the purpose of the specific test.

package/src/style.scss

@@ -1,4 +1,5 @@
 @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";
@@ -45,7 +46,6 @@
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
-@import "./components/text-decoration-and-transform/style.scss";
 @import "./components/text-transform-control/style.scss";
 @import "./components/text-decoration-control/style.scss";
 @import "./components/tool-selector/style.scss";
@@ -55,6 +55,7 @@
 @import "./hooks/anchor.scss";
 @import "./hooks/layout.scss";
 @import "./hooks/border.scss";
+@import "./hooks/typography.scss";
 
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/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

@@ -131,6 +131,7 @@ function evalMathExpression( cssUnit ) {
 
 	return errorFound ? null : calculate( cssUnit ).toFixed( 0 ) + 'px';
 }
+
 /**
  * Convert a parsedUnit object to px value.
  *
@@ -202,11 +203,12 @@ function convertParsedUnitToPx( parsedUnit, options ) {
 
 	return null;
 }
+
 /**
  * Returns the px value of a cssUnit.
  *
  * @param {string} cssUnit
- * @param {string} options
+ * @param {Object} options
  * @return {string} returns the cssUnit value in a simple px format.
  */
 export function getPxFromCssUnit( cssUnit, options = {} ) {
@@ -228,3 +230,43 @@ export function getPxFromCssUnit( cssUnit, options = {} ) {
 
 	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,183 +1,166 @@
 /**
  * Internal dependencies
  */
-import { getPxFromCssUnit } from '../parse-css-unit-to-px';
+import {
+	default as memoizedGetPxFromCssUnit,
+	getPxFromCssUnit,
+} from '../parse-css-unit-to-px';
 
 describe( 'getPxFromCssUnit', () => {
 	// Absolute units
-	it( 'test px return px unit', () => {
-		expect( getPxFromCssUnit( '25px' ) ).toBe( '25px' );
-	} );
-
-	it( 'test numeric float return px unit', () => {
-		expect( getPxFromCssUnit( '25.5' ) ).toBe( '26px' );
-	} );
-
-	it( 'test cm return px unit', () => {
-		expect( getPxFromCssUnit( '1cm' ) ).toBe( '38px' );
-	} );
-
-	it( 'test mm return px unit', () => {
-		expect( getPxFromCssUnit( '10mm' ) ).toBe( '38px' );
-	} );
-
-	it( 'test in return px unit', () => {
-		expect( getPxFromCssUnit( '1in' ) ).toBe( '96px' );
-	} );
-
-	it( 'test pt return px unit', () => {
-		expect( getPxFromCssUnit( '12pt' ) ).toBe( '16px' );
-	} );
-
-	it( 'test pc return px unit', () => {
-		expect( getPxFromCssUnit( '1pc' ) ).toBe( '16px' );
-	} );
-
-	it( 'test Q return px unit', () => {
-		expect( getPxFromCssUnit( '40Q' ) ).toBe( '38px' ); // 40 Q should be 1 cm
-	} );
-
-	// Relative units
-	it( 'test em return px unit', () => {
-		expect( getPxFromCssUnit( '2em', { fontSize: 10 } ) ).toBe( '20px' );
-	} );
-
-	it( 'test rem return px unit', () => {
-		expect( getPxFromCssUnit( '2rem', { fontSize: 10 } ) ).toBe( '20px' );
-	} );
-
-	it( 'test vw return px unit', () => {
-		expect( getPxFromCssUnit( '20vw', { width: 100 } ) ).toBe( '20px' );
-	} );
-
-	it( 'test vh return px unit', () => {
-		expect( getPxFromCssUnit( '20vh', { height: 200 } ) ).toBe( '40px' );
-	} );
-
-	it( 'test vmin return px unit', () => {
-		expect(
-			getPxFromCssUnit( '20vmin', { height: 200, width: 100 } )
-		).toBe( '20px' );
-	} );
-
-	it( 'test vmax return px unit', () => {
-		expect(
-			getPxFromCssUnit( '20vmax', { height: 200, width: 100 } )
-		).toBe( '40px' );
-	} );
-
-	it( 'test lh return px unit', () => {
-		expect( getPxFromCssUnit( '20lh', { lineHeight: 2 } ) ).toBe( '40px' );
-	} );
-
-	it( 'test % return px unit', () => {
-		expect(
-			getPxFromCssUnit( '120%', {
-				height: 200,
-				width: 100,
-				fontSize: 10,
-				type: 'font',
-			} )
-		).toBe( '12px' );
-	} );
-
-	// Function units
-	it( 'test min() return px unit', () => {
-		expect( getPxFromCssUnit( 'min(20px, 25px)' ) ).toBe( '20px' );
-	} );
-
-	it( 'test min() function with many arguments return px unit', () => {
-		expect( getPxFromCssUnit( 'min(20px, 9px, 12pt, 25px)' ) ).toBe(
-			'9px'
+	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 )(
+			'test getPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( getPxFromCssUnit( unit ) ).toBe( expected );
+			}
 		);
-	} );
-
-	it( 'test max() return px unit', () => {
-		expect( getPxFromCssUnit( 'max(20px, 25px)' ) ).toBe( '25px' );
-	} );
-
-	it( 'test clamp() lower return px unit', () => {
-		expect( getPxFromCssUnit( 'clamp(10px, 9px, 25px)' ) ).toBe( '10px' );
-	} );
-
-	it( 'test clamp() upper return px unit', () => {
-		expect( getPxFromCssUnit( 'clamp(10px, 35px, 25px)' ) ).toBe( '25px' );
-	} );
-
-	it( 'test clamp() middle return px unit', () => {
-		expect( getPxFromCssUnit( 'clamp(10px, 15px, 25px)' ) ).toBe( '15px' );
-	} );
-
-	it( 'test nested max min function return px unit', () => {
-		expect( getPxFromCssUnit( 'min(max(20px,25px), 35px)' ) ).toBe(
-			'25px'
+		test.each( testData )(
+			'test memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit ) ).toBe( expected );
+			}
 		);
-	} );
-
-	it( 'test nested min max function return px unit', () => {
-		expect( getPxFromCssUnit( 'max(min(20px,25px), 35px)' ) ).toBe(
-			'35px'
+		test.each( testData )(
+			'test cached memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit ) ).toBe( expected );
+			}
 		);
 	} );
 
-	it( 'test calculate function return px unit', () => {
-		expect( getPxFromCssUnit( '10px + 25px' ) ).toBe( '35px' );
-	} );
-
-	it( 'test calc(10px + 25px) function return px unit', () => {
-		expect( getPxFromCssUnit( 'calc(10px + 25px)' ) ).toBe( '35px' );
-	} );
-
-	it( 'test calc( number * cssUnit ) return px unit', () => {
-		expect( getPxFromCssUnit( 'calc( 2 * 20px)' ) ).toBe( '40px' );
-	} );
-
-	it( 'test calc(25px - 10px) function return px unit', () => {
-		expect( getPxFromCssUnit( 'calc(25px - 10px)' ) ).toBe( '15px' );
-	} );
-
-	it( 'test min(10px + 25px, 55pt) function return px unit', () => {
-		expect( getPxFromCssUnit( 'min(10px + 25px, 55pt)' ) ).toBe( '35px' );
-	} );
-
-	it( 'test calc(12vw * 10px) function return px unit', () => {
-		expect( getPxFromCssUnit( 'calc(12vw * 10px)' ) ).toBe( '450px' );
-	} );
-
-	it( 'test calc(42vw / 10px) function return px unit', () => {
-		expect( getPxFromCssUnit( 'calc(45vw / 10px)' ) ).toBe( '17px' );
-	} );
-
-	it( 'test empty string', () => {
-		expect( getPxFromCssUnit( '' ) ).toBe( null );
-	} );
-
-	it( 'test undefined string', () => {
-		expect( getPxFromCssUnit( undefined ) ).toBe( null );
-	} );
-	it( 'test integer string', () => {
-		expect( getPxFromCssUnit( 123 ) ).toBe( '123px' );
-	} );
-
-	it( 'test float string', () => {
-		expect( getPxFromCssUnit( 123.456 ) ).toBe( '123px' );
-	} );
-
-	it( 'test text string', () => {
-		expect( getPxFromCssUnit( 'abc' ) ).toBe( null );
+	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' ],
+			[ '20vw', '20px' ],
+			[ '20vh', '40px' ],
+			[ '20vmin', '20px' ],
+			[ '20vmax', '40px' ],
+			[ '20lh', '40px' ],
+			[ '120%', '12px' ],
+		];
+
+		test.each( testData )(
+			'test getPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( getPxFromCssUnit( unit, settings ) ).toBe( expected );
+			}
+		);
+		test.each( testData )(
+			'test memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
+					expected
+				);
+			}
+		);
+		test.each( testData )(
+			'test cached memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
+					expected
+				);
+			}
+		);
 	} );
 
-	it( 'test not non function return null', () => {
-		expect( getPxFromCssUnit( 'abc + num' ) ).toBe( null );
-	} );
+	// Function units
 
-	it( 'test not a fishy function return null', () => {
-		expect( getPxFromCssUnit( 'console.log("howdy"); + 10px' ) ).toBe(
-			null
+	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
+		];
+
+		test.each( testData )(
+			'test getPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( getPxFromCssUnit( unit, settings ) ).toBe( expected );
+			}
+		);
+		test.each( testData )(
+			'test memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
+					expected
+				);
+			}
+		);
+		test.each( testData )(
+			'test cached memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
+					expected
+				);
+			}
 		);
 	} );
-
-	it( 'test not a typo function return null', () => {
-		expect( getPxFromCssUnit( 'calc(12vw * 10px' ) ).toBe( null );
+	// 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/transform-styles/transforms/test/wrap.js

@@ -22,7 +22,7 @@ describe( 'CSS selector wrap', () => {
 	} );
 
 	it( 'should ignore selectors', () => {
-		const callback = wrap( '.my-namespace', 'body' );
+		const callback = wrap( '.my-namespace', [ 'body' ] );
 		const input = `h1, body { color: red; }`;
 		const output = traverse( input, callback );
 

package/src/utils/transform-styles/transforms/wrap.js

@@ -3,7 +3,23 @@
  */
 const IS_ROOT_TAG = /^(body|html|:root).*$/;
 
+/**
+ * Creates a callback to modify selectors so they only apply within a certain
+ * namespace.
+ *
+ * @param {string}   namespace Namespace to prefix selectors with.
+ * @param {string[]} ignore    Selectors to not prefix.
+ *
+ * @return {(node: Object) => Object} Callback to wrap selectors.
+ */
 const wrap = ( namespace, ignore = [] ) => ( node ) => {
+	/**
+	 * Updates selector if necessary.
+	 *
+	 * @param {string} selector Selector to modify.
+	 *
+	 * @return {string} Updated selector.
+	 */
 	const updateSelector = ( selector ) => {
 		if ( ignore.includes( selector.trim() ) ) {
 			return selector;