@wordpress/block-editor 7.0.1 → 8.0.0

package/src/store/test/selectors.js

@@ -70,8 +70,8 @@ const {
 	__experimentalGetLastBlockAttributeChanges,
 	getLowestCommonAncestorWithSelectedBlock,
 	__experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames,
-	__experimentalGetParsedReusableBlock,
 	__experimentalGetAllowedPatterns,
+	__experimentalGetParsedPattern,
 	__experimentalGetPatternsByBlockTypes,
 	__unstableGetClientIdWithClientIdsTree,
 	__unstableGetClientIdsTree,
@@ -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: {},
 				},
@@ -3392,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 -->',
+					},
 				],
 			},
 		};
@@ -3411,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 = {
@@ -3686,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.
@@ -3725,6 +3722,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 +3741,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 +3777,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";
@@ -52,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";
@@ -62,13 +55,7 @@
 @import "./hooks/anchor.scss";
 @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 "./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';