@wordpress/block-editor 12.17.0 → 12.18.0

package/src/store/test/selectors.js

@@ -65,14 +65,10 @@ const {
 	__experimentalGetLastBlockAttributeChanges,
 	getLowestCommonAncestorWithSelectedBlock,
 	__experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames,
-	__experimentalGetAllowedPatterns,
-	__experimentalGetParsedPattern,
-	getPatternsByBlockTypes,
 	__unstableGetClientIdWithClientIdsTree,
 	__unstableGetClientIdsTree,
-	__experimentalGetPatternTransformItems,
 	wasBlockJustInserted,
-	__experimentalGetGlobalBlocksByName,
+	getBlocksByName,
 	getBlockEditingMode,
 } = selectors;
 
@@ -975,7 +971,7 @@ describe( 'selectors', () => {
 		} );
 	} );
 
-	describe( '__experimentalGetGlobalBlocksByName', () => {
+	describe( 'getBlocksByName', () => {
 		const state = {
 			blocks: {
 				byClientId: new Map(
@@ -1017,31 +1013,25 @@ describe( 'selectors', () => {
 		};
 
 		it( 'should return the clientIds of blocks of a given type', () => {
-			expect(
-				__experimentalGetGlobalBlocksByName( state, 'core/heading' )
-			).toStrictEqual( [ '123' ] );
+			expect( getBlocksByName( state, 'core/heading' ) ).toStrictEqual( [
+				'123',
+			] );
 		} );
 
 		it( 'should return the clientIds of blocks of a given type even if blocks are nested', () => {
-			expect(
-				__experimentalGetGlobalBlocksByName( state, 'core/paragraph' )
-			).toStrictEqual( [ '456', '1415', '1213' ] );
+			expect( getBlocksByName( state, 'core/paragraph' ) ).toStrictEqual(
+				[ '456', '1415', '1213' ]
+			);
 		} );
 
 		it( 'Should return empty array if no blocks match. The empty array should be the same reference', () => {
-			const result = __experimentalGetGlobalBlocksByName(
-				state,
-				'test/missing'
+			const result = getBlocksByName( state, 'test/missing' );
+			expect( getBlocksByName( state, 'test/missing' ) ).toStrictEqual(
+				[]
+			);
+			expect( getBlocksByName( state, 'test/missing2' ) === result ).toBe(
+				true
 			);
-			expect(
-				__experimentalGetGlobalBlocksByName( state, 'test/missing' )
-			).toStrictEqual( [] );
-			expect(
-				__experimentalGetGlobalBlocksByName(
-					state,
-					'test/missing2'
-				) === result
-			).toBe( true );
 		} );
 	} );
 
@@ -4205,382 +4195,6 @@ describe( 'selectors', () => {
 		} );
 	} );
 
-	describe( '__experimentalGetAllowedPatterns', () => {
-		const state = {
-			blocks: {
-				byClientId: new Map(
-					Object.entries( {
-						block1: { name: 'core/test-block-a' },
-						block2: { name: 'core/test-block-b' },
-					} )
-				),
-				attributes: new Map(
-					Object.entries( {
-						block1: {},
-						block2: {},
-					} )
-				),
-				parents: new Map(
-					Object.entries( {
-						block1: '',
-						block2: '',
-					} )
-				),
-			},
-			blockListSettings: {
-				block1: {
-					allowedBlocks: [ 'core/test-block-b' ],
-				},
-				block2: {
-					allowedBlocks: [],
-				},
-			},
-			settings: {
-				__experimentalBlockPatterns: [
-					{
-						name: 'pattern-a',
-						title: 'pattern with a',
-						content: `<!-- wp:test-block-a --><!-- /wp:test-block-a -->`,
-					},
-					{
-						name: 'pattern-b',
-						title: 'pattern with b',
-						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 -->',
-					},
-				],
-			},
-			blockEditingModes: new Map(),
-		};
-
-		it( 'should return all patterns for root level', () => {
-			expect(
-				__experimentalGetAllowedPatterns( state, null )
-			).toHaveLength( 2 );
-		} );
-
-		it( 'should return patterns that consists of blocks allowed for the specified client ID', () => {
-			expect(
-				__experimentalGetAllowedPatterns( state, 'block1' )
-			).toHaveLength( 1 );
-
-			expect(
-				__experimentalGetAllowedPatterns( state, 'block2' )
-			).toHaveLength( 0 );
-		} );
-		it( 'should return empty array if only patterns hidden from UI exist', () => {
-			expect(
-				__experimentalGetAllowedPatterns( {
-					blocks: { byClientId: new Map() },
-					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( 'getPatternsByBlockTypes', () => {
-		const state = {
-			blocks: {
-				byClientId: new Map(
-					Object.entries( {
-						block1: { name: 'core/test-block-a' },
-					} )
-				),
-				parents: new Map(),
-			},
-			blockListSettings: {
-				block1: {
-					allowedBlocks: [ 'core/test-block-b' ],
-				},
-			},
-			settings: {
-				__experimentalBlockPatterns: [
-					{
-						name: 'pattern-a',
-						blockTypes: [ 'test/block-a' ],
-						title: 'pattern a',
-						content:
-							'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
-					},
-					{
-						name: 'pattern-b',
-						blockTypes: [ 'test/block-b' ],
-						title: 'pattern b',
-						content:
-							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
-					},
-					{
-						title: 'pattern c',
-						blockTypes: [ 'test/block-a' ],
-						content:
-							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
-					},
-				],
-			},
-			blockEditingModes: new Map(),
-		};
-		it( 'should return empty array if no block name is provided', () => {
-			expect( getPatternsByBlockTypes( state ) ).toEqual( [] );
-		} );
-		it( 'should return empty array if no match is found', () => {
-			const patterns = getPatternsByBlockTypes(
-				state,
-				'test/block-not-exists'
-			);
-			expect( patterns ).toEqual( [] );
-		} );
-		it( 'should return the same empty array in both empty array cases', () => {
-			const patterns1 = getPatternsByBlockTypes( state );
-			const patterns2 = getPatternsByBlockTypes(
-				state,
-				'test/block-not-exists'
-			);
-			expect( patterns1 ).toBe( patterns2 );
-		} );
-		it( 'should return proper results when there are matched block patterns', () => {
-			const patterns = getPatternsByBlockTypes( state, 'test/block-a' );
-			expect( patterns ).toHaveLength( 2 );
-			expect( patterns ).toEqual(
-				expect.arrayContaining( [
-					expect.objectContaining( { title: 'pattern a' } ),
-					expect.objectContaining( { title: 'pattern c' } ),
-				] )
-			);
-		} );
-		it( 'should return proper result with matched patterns and allowed blocks from rootClientId', () => {
-			const patterns = getPatternsByBlockTypes(
-				state,
-				'test/block-a',
-				'block1'
-			);
-			expect( patterns ).toHaveLength( 1 );
-			expect( patterns[ 0 ] ).toEqual(
-				expect.objectContaining( { title: 'pattern c' } )
-			);
-		} );
-	} );
-	describe( '__experimentalGetPatternTransformItems', () => {
-		const state = {
-			blocks: {
-				byClientId: new Map(
-					Object.entries( {
-						block1: { name: 'core/test-block-a' },
-						block2: { name: 'core/test-block-b' },
-					} )
-				),
-				parents: new Map(),
-				controlledInnerBlocks: { 'block2-clientId': true },
-			},
-			blockListSettings: {
-				block1: {
-					allowedBlocks: [ 'core/test-block-b' ],
-				},
-			},
-			settings: {
-				__experimentalBlockPatterns: [
-					{
-						name: 'pattern-a',
-						blockTypes: [ 'test/block-a' ],
-						title: 'pattern a',
-						content:
-							'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
-					},
-					{
-						name: 'pattern-b',
-						blockTypes: [ 'test/block-b' ],
-						title: 'pattern b',
-						content:
-							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
-					},
-					{
-						name: 'pattern-c',
-						title: 'pattern c',
-						blockTypes: [ 'test/block-a' ],
-						content:
-							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
-					},
-					{
-						name: 'pattern-mix',
-						title: 'pattern mix',
-						blockTypes: [
-							'core/test-block-a',
-							'core/test-block-b',
-						],
-						content:
-							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
-					},
-				],
-			},
-			blockEditingModes: new Map(),
-		};
-		describe( 'should return empty array', () => {
-			it( 'when no blocks are selected', () => {
-				expect(
-					__experimentalGetPatternTransformItems( state )
-				).toEqual( [] );
-			} );
-			it( 'when a selected block has inner blocks', () => {
-				const blocks = [
-					{ name: 'core/test-block-a', innerBlocks: [] },
-					{
-						name: 'core/test-block-b',
-						innerBlocks: [ { name: 'some inner block' } ],
-					},
-				];
-				expect(
-					__experimentalGetPatternTransformItems( state, blocks )
-				).toEqual( [] );
-			} );
-			it( 'when a selected block has controlled inner blocks', () => {
-				const blocks = [
-					{ name: 'core/test-block-a', innerBlocks: [] },
-					{
-						name: 'core/test-block-b',
-						clientId: 'block2-clientId',
-						innerBlocks: [],
-					},
-				];
-				expect(
-					__experimentalGetPatternTransformItems( state, blocks )
-				).toEqual( [] );
-			} );
-			it( 'when no patterns are available based on the selected blocks', () => {
-				const blocks = [
-					{ name: 'block-with-no-patterns', innerBlocks: [] },
-				];
-				expect(
-					__experimentalGetPatternTransformItems( state, blocks )
-				).toEqual( [] );
-			} );
-		} );
-		describe( 'should return proper results', () => {
-			it( 'when a single block is selected', () => {
-				const blocks = [
-					{ name: 'core/test-block-b', innerBlocks: [] },
-				];
-				const patterns = __experimentalGetPatternTransformItems(
-					state,
-					blocks
-				);
-				expect( patterns ).toHaveLength( 1 );
-				expect( patterns[ 0 ] ).toEqual(
-					expect.objectContaining( {
-						name: 'pattern-mix',
-					} )
-				);
-			} );
-			it( 'when different multiple blocks are selected', () => {
-				const blocks = [
-					{ name: 'core/test-block-b', innerBlocks: [] },
-					{ name: 'test/block-b', innerBlocks: [] },
-					{ name: 'some other block', innerBlocks: [] },
-				];
-				const patterns = __experimentalGetPatternTransformItems(
-					state,
-					blocks
-				);
-				expect( patterns ).toHaveLength( 2 );
-				expect( patterns ).toEqual(
-					expect.arrayContaining( [
-						expect.objectContaining( {
-							name: 'pattern-mix',
-						} ),
-						expect.objectContaining( {
-							name: 'pattern-b',
-						} ),
-					] )
-				);
-			} );
-			it( 'when multiple blocks are selected containing multiple times the same block', () => {
-				const blocks = [
-					{ name: 'core/test-block-b', innerBlocks: [] },
-					{ name: 'some other block', innerBlocks: [] },
-					{ name: 'core/test-block-a', innerBlocks: [] },
-					{ name: 'core/test-block-b', innerBlocks: [] },
-				];
-				const patterns = __experimentalGetPatternTransformItems(
-					state,
-					blocks
-				);
-				expect( patterns ).toHaveLength( 1 );
-				expect( patterns[ 0 ] ).toEqual(
-					expect.objectContaining( {
-						name: 'pattern-mix',
-					} )
-				);
-			} );
-		} );
-	} );
-
 	describe( 'wasBlockJustInserted', () => {
 		it( 'should return true if the client id passed to wasBlockJustInserted is found within the state', () => {
 			const expectedClientId = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f';

package/src/store/utils.js

@@ -1,36 +1,3 @@
-/**
- * Internal dependencies
- */
-import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
-
-const EMPTY_ARRAY = [];
-
-export function getUserPatterns( state ) {
-	const userPatterns =
-		state?.settings?.__experimentalReusableBlocks ?? EMPTY_ARRAY;
-	const userPatternCategories =
-		state?.settings?.__experimentalUserPatternCategories ?? [];
-	const categories = new Map();
-	userPatternCategories.forEach( ( userCategory ) =>
-		categories.set( userCategory.id, userCategory )
-	);
-	return userPatterns.map( ( userPattern ) => {
-		return {
-			name: `core/block/${ userPattern.id }`,
-			id: userPattern.id,
-			type: INSERTER_PATTERN_TYPES.user,
-			title: userPattern.title.raw,
-			categories: userPattern.wp_pattern_category.map( ( catId ) =>
-				categories && categories.get( catId )
-					? categories.get( catId ).slug
-					: catId
-			),
-			content: userPattern.content.raw,
-			syncStatus: userPattern.wp_pattern_sync_status,
-		};
-	} );
-}
-
 export const checkAllowList = ( list, item, defaultResult = null ) => {
 	if ( typeof list === 'boolean' ) {
 		return list;
@@ -72,3 +39,13 @@ export const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
 
 	return true;
 };
+
+export const getAllPatternsDependants = ( state ) => {
+	return [
+		state.settings.__experimentalBlockPatterns,
+		state.settings.__experimentalUserPatternCategories,
+		state.settings.__experimentalReusableBlocks,
+		state.settings.__experimentalFetchBlockPatterns,
+		state.blockPatterns,
+	];
+};

package/src/style.scss

@@ -24,7 +24,6 @@
 @import "./components/block-variation-transforms/style.scss";
 @import "./components/border-radius-control/style.scss";
 @import "./components/colors-gradients/style.scss";
-@import "./components/contrast-checker/style.scss";
 @import "./components/date-format-picker/style.scss";
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";

package/src/utils/index.js

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

package/src/utils/math.js

@@ -106,3 +106,15 @@ export function isPointContainedByRect( point, rect ) {
 		rect.bottom >= point.y
 	);
 }
+
+/**
+ * Is the point within the top and bottom boundaries of the rectangle.
+ *
+ * @param {WPPoint} point The point.
+ * @param {DOMRect} rect  The rectangle.
+ *
+ * @return {boolean} True if the point is within top and bottom of rectangle, false otherwise.
+ */
+export function isPointWithinTopAndBottomBoundariesOfRect( point, rect ) {
+	return rect.top <= point.y && rect.bottom >= point.y;
+}

package/src/utils/object.js

@@ -49,3 +49,19 @@ export const getValueFromObjectPath = ( object, path, defaultValue ) => {
 	} );
 	return value ?? defaultValue;
 };
+
+/**
+ * Helper util to filter out objects with duplicate values for a given property.
+ *
+ * @param {Object[]} array    Array of objects to filter.
+ * @param {string}   property Property to filter unique values by.
+ *
+ * @return {Object[]} Array of objects with unique values for the specified property.
+ */
+export function uniqByProperty( array, property ) {
+	const seen = new Set();
+	return array.filter( ( item ) => {
+		const value = item[ property ];
+		return seen.has( value ) ? false : seen.add( value );
+	} );
+}

package/src/utils/transform-styles/index.js

@@ -5,6 +5,52 @@ import postcss, { CssSyntaxError } from 'postcss';
 import wrap from 'postcss-prefixwrap';
 import rebaseUrl from 'postcss-urlrebase';
 
+const transformStylesCache = new WeakMap();
+
+function transformStyle(
+	{ css, ignoredSelectors = [], baseURL },
+	wrapperSelector = ''
+) {
+	// When there is no wrapper selector or base URL, there is no need
+	// to transform the CSS. This is most cases because in the default
+	// iframed editor, no wrapping is needed, and not many styles
+	// provide a base URL.
+	if ( ! wrapperSelector && ! baseURL ) {
+		return css;
+	}
+
+	try {
+		return postcss(
+			[
+				wrapperSelector &&
+					wrap( wrapperSelector, {
+						ignoredSelectors: [
+							...ignoredSelectors,
+							wrapperSelector,
+						],
+					} ),
+				baseURL && rebaseUrl( { rootUrl: baseURL } ),
+			].filter( Boolean )
+		).process( css, {} ).css; // use sync PostCSS API
+	} catch ( error ) {
+		if ( error instanceof CssSyntaxError ) {
+			// eslint-disable-next-line no-console
+			console.warn(
+				'wp.blockEditor.transformStyles Failed to transform CSS.',
+				error.message + '\n' + error.showSourceCode( false )
+			);
+		} else {
+			// eslint-disable-next-line no-console
+			console.warn(
+				'wp.blockEditor.transformStyles Failed to transform CSS.',
+				error
+			);
+		}
+
+		return null;
+	}
+}
+
 /**
  * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
  *
@@ -18,45 +64,14 @@ import rebaseUrl from 'postcss-urlrebase';
  * @return {Array} converted rules.
  */
 const transformStyles = ( styles, wrapperSelector = '' ) => {
-	return styles.map( ( { css, ignoredSelectors = [], baseURL } ) => {
-		// When there is no wrapper selector or base URL, there is no need
-		// to transform the CSS. This is most cases because in the default
-		// iframed editor, no wrapping is needed, and not many styles
-		// provide a base URL.
-		if ( ! wrapperSelector && ! baseURL ) {
-			return css;
+	return styles.map( ( style ) => {
+		if ( transformStylesCache.has( style ) ) {
+			return transformStylesCache.get( style );
 		}
 
-		try {
-			return postcss(
-				[
-					wrapperSelector &&
-						wrap( wrapperSelector, {
-							ignoredSelectors: [
-								...ignoredSelectors,
-								wrapperSelector,
-							],
-						} ),
-					baseURL && rebaseUrl( { rootUrl: baseURL } ),
-				].filter( Boolean )
-			).process( css, {} ).css; // use sync PostCSS API
-		} catch ( error ) {
-			if ( error instanceof CssSyntaxError ) {
-				// eslint-disable-next-line no-console
-				console.warn(
-					'wp.blockEditor.transformStyles Failed to transform CSS.',
-					error.message + '\n' + error.showSourceCode( false )
-				);
-			} else {
-				// eslint-disable-next-line no-console
-				console.warn(
-					'wp.blockEditor.transformStyles Failed to transform CSS.',
-					error
-				);
-			}
-
-			return null;
-		}
+		const transformedStyle = transformStyle( style, wrapperSelector );
+		transformStylesCache.set( style, transformedStyle );
+		return transformedStyle;
 	} );
 };