@wordpress/block-editor 12.22.0 → 12.23.0

package/src/store/test/selectors.js

@@ -8,11 +8,13 @@ import {
 } from '@wordpress/blocks';
 import { RawHTML } from '@wordpress/element';
 import { symbol } from '@wordpress/icons';
+import { select, dispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import * as selectors from '../selectors';
+import { store } from '../';
 
 const {
 	getBlockName,
@@ -55,7 +57,6 @@ const {
 	isSelectionEnabled,
 	canInsertBlockType,
 	canInsertBlocks,
-	getInserterItems,
 	getBlockTransformItems,
 	isValidTemplate,
 	getTemplate,
@@ -3286,41 +3287,26 @@ describe( 'selectors', () => {
 	} );
 
 	describe( 'getInserterItems', () => {
-		it( 'should properly list block type and reusable block items', () => {
-			const state = {
-				blocks: {
-					byClientId: new Map(),
-					attributes: new Map(),
-					order: new Map(),
-					parents: new Map(),
-					tree: new Map(
-						Object.entries( {
-							'': {
-								innerBlocks: [],
-							},
-						} )
-					),
-				},
-				settings: {
-					__experimentalReusableBlocks: [
-						{
-							id: 1,
-							isTemporary: false,
-							clientId: 'block1',
-							title: { raw: 'Reusable Block 1' },
-							content: { raw: '<!-- /wp:test-block-a -->' },
-						},
-					],
-				},
-				// Intentionally include a test case which considers
-				// `insertUsage` as not present within preferences.
-				//
-				// See: https://github.com/WordPress/gutenberg/issues/14580
-				preferences: {},
-				blockListSettings: {},
-				blockEditingModes: new Map(),
-			};
-			const items = getInserterItems( state );
+		afterAll( async () => {
+			await dispatch( store ).updateSettings( {
+				__experimentalReusableBlocks: [],
+			} );
+			await dispatch( store ).resetBlocks( [] );
+		} );
+
+		it( 'should properly list block type and reusable block items', async () => {
+			await dispatch( store ).updateSettings( {
+				__experimentalReusableBlocks: [
+					{
+						id: 1,
+						isTemporary: false,
+						clientId: 'block1',
+						title: { raw: 'Reusable Block 1' },
+						content: { raw: '<!-- /wp:test-block-a -->' },
+					},
+				],
+			} );
+			const items = select( store ).getInserterItems();
 			const testBlockAItem = items.find(
 				( item ) => item.id === 'core/test-block-a'
 			);
@@ -3361,93 +3347,48 @@ describe( 'selectors', () => {
 			} );
 		} );
 
-		it( 'should correctly cache the return values', () => {
-			const state = {
-				blocks: {
-					byClientId: new Map(
-						Object.entries( {
-							block3: { name: 'core/test-block-a' },
-							block4: { name: 'core/test-block-a' },
-						} )
-					),
-					attributes: new Map(
-						Object.entries( {
-							block3: {},
-							block4: {},
-						} )
-					),
-					order: new Map(
-						Object.entries( {
-							'': [ 'block3', 'block4' ],
-						} )
-					),
-					parents: new Map(
-						Object.entries( {
-							block3: '',
-							block4: '',
-						} )
-					),
-					tree: new Map(
-						Object.entries( {
-							block3: {
-								clientId: 'block3',
-								name: 'core/test-block-a',
-								attributes: {},
-								innerBlocks: [],
-							},
-							block4: {
-								clientId: 'block4',
-								name: 'core/test-block-a',
-								attributes: {},
-								innerBlocks: [],
-							},
-						} )
-					),
-					controlledInnerBlocks: {},
-				},
-				settings: {
-					__experimentalReusableBlocks: [
-						{
-							id: 1,
-							isTemporary: false,
-							clientId: 'block1',
-							title: { raw: 'Reusable Block 1' },
-							content: { raw: '<!-- /wp:test-block-a -->' },
-						},
-						{
-							id: 2,
-							isTemporary: false,
-							clientId: 'block2',
-							title: { raw: 'Reusable Block 2' },
-							content: { raw: '<!-- /wp:test-block-b -->' },
-						},
-					],
-				},
-				preferences: {
-					insertUsage: {},
-				},
-				blockListSettings: {
-					block3: {},
-					block4: {},
-				},
-				blockEditingModes: new Map(),
-			};
-
-			const stateSecondBlockRestricted = {
-				...state,
-				blockListSettings: {
-					...state.blockListSettings,
-					block4: {
-						allowedBlocks: [ 'core/test-block-b' ],
+		it( 'should correctly cache the return values', async () => {
+			await dispatch( store ).updateSettings( {
+				__experimentalReusableBlocks: [
+					{
+						id: 1,
+						isTemporary: false,
+						clientId: 'block1',
+						title: { raw: 'Reusable Block 1' },
+						content: { raw: '<!-- /wp:test-block-a -->' },
+					},
+					{
+						id: 2,
+						isTemporary: false,
+						clientId: 'block2',
+						title: { raw: 'Reusable Block 2' },
+						content: { raw: '<!-- /wp:test-block-b -->' },
 					},
+				],
+			} );
+			await dispatch( store ).resetBlocks( [
+				{
+					clientId: 'block3',
+					name: 'core/test-block-a',
+					innerBlocks: [],
 				},
-			};
+				{
+					clientId: 'block4',
+					name: 'core/test-block-a',
+					innerBlocks: [],
+				},
+			] );
+			await dispatch( store ).updateBlockListSettings( 'block3', {} );
+			await dispatch( store ).updateBlockListSettings( 'block4', {} );
 
-			const firstBlockFirstCall = getInserterItems( state, 'block3' );
-			const firstBlockSecondCall = getInserterItems(
-				stateSecondBlockRestricted,
-				'block3'
-			);
+			const firstBlockFirstCall =
+				select( store ).getInserterItems( 'block3' );
+			await dispatch( store ).updateBlockListSettings( 'block4', {
+				allowedBlocks: [ 'core/test-block-b' ],
+			} );
+			const firstBlockSecondCall =
+				select( store ).getInserterItems( 'block3' );
+			await dispatch( store ).updateBlockListSettings( 'block4', {} );
 			expect( firstBlockFirstCall ).toBe( firstBlockSecondCall );
 			expect( firstBlockFirstCall.map( ( item ) => item.id ) ).toEqual( [
 				'core/test-block-a',
@@ -3459,11 +3400,14 @@ describe( 'selectors', () => {
 				'core/block/2',
 			] );
 
-			const secondBlockFirstCall = getInserterItems( state, 'block4' );
-			const secondBlockSecondCall = getInserterItems(
-				stateSecondBlockRestricted,
-				'block4'
-			);
+			const secondBlockFirstCall =
+				select( store ).getInserterItems( 'block4' );
+			await dispatch( store ).updateBlockListSettings( 'block4', {
+				allowedBlocks: [ 'core/test-block-b' ],
+			} );
+			const secondBlockSecondCall =
+				select( store ).getInserterItems( 'block4' );
+			await dispatch( store ).updateBlockListSettings( 'block4', {} );
 			expect( secondBlockFirstCall ).not.toBe( secondBlockSecondCall );
 			expect( secondBlockFirstCall.map( ( item ) => item.id ) ).toEqual( [
 				'core/test-block-a',
@@ -3479,77 +3423,37 @@ describe( 'selectors', () => {
 			);
 		} );
 
-		it( 'should set isDisabled when a block with `multiple: false` has been used', () => {
-			const state = {
-				blocks: {
-					byClientId: new Map(
-						Object.entries( {
-							block1: {
-								clientId: 'block1',
-								name: 'core/test-block-b',
-							},
-						} )
-					),
-					attributes: new Map(
-						Object.entries( {
-							block1: { attribute: {} },
-						} )
-					),
-					order: new Map(
-						Object.entries( {
-							'': [ 'block1' ],
-						} )
-					),
-					tree: new Map(
-						Object.entries( {
-							block1: {
-								clientId: 'block1',
-								name: 'core/test-block-b',
-								attributes: {},
-								innerBlocks: [],
-							},
-						} )
-					),
-					controlledInnerBlocks: {},
-					parents: new Map(),
-				},
-				preferences: {
-					insertUsage: {},
+		it( 'should set isDisabled when a block with `multiple: false` has been used', async () => {
+			await dispatch( store ).resetBlocks( [
+				{
+					clientId: 'block1',
+					name: 'core/test-block-b',
+					innerBlocks: [],
 				},
-				blockListSettings: {},
-				settings: {},
-				blockEditingModes: new Map(),
-			};
-			const items = getInserterItems( state );
+			] );
+			const items = select( store ).getInserterItems();
 			const testBlockBItem = items.find(
 				( item ) => item.id === 'core/test-block-b'
 			);
 			expect( testBlockBItem.isDisabled ).toBe( true );
 		} );
 
-		it( 'should set a frecency', () => {
-			const state = {
-				blocks: {
-					byClientId: new Map(),
-					attributes: new Map(),
-					order: new Map(),
-					parents: new Map(),
-					cache: {},
-				},
-				preferences: {
-					insertUsage: {
-						'core/test-block-b': { count: 10, time: 1000 },
+		it( 'should set a frecency', async () => {
+			for ( let i = 0; i < 10; i++ ) {
+				await dispatch( store ).insertBlocks( [
+					{
+						clientId: 'block1',
+						name: 'core/test-block-b',
+						innerBlocks: [],
 					},
-				},
-				blockListSettings: {},
-				settings: {},
-				blockEditingModes: new Map(),
-			};
-			const items = getInserterItems( state );
+				] );
+			}
+
+			const items = select( store ).getInserterItems();
 			const reusableBlock2Item = items.find(
 				( item ) => item.id === 'core/test-block-b'
 			);
-			expect( reusableBlock2Item.frecency ).toBe( 2.5 );
+			expect( reusableBlock2Item.frecency ).toBe( 40 );
 		} );
 	} );
 
@@ -4304,20 +4208,7 @@ describe( 'getInserterItems with core blocks prioritization', () => {
 		].forEach( unregisterBlockType );
 	} );
 	it( 'should prioritize core blocks by sorting them at the top of the returned list', () => {
-		const state = {
-			blocks: {
-				byClientId: new Map(),
-				attributes: new Map(),
-				order: new Map(),
-				parents: new Map(),
-				cache: {},
-			},
-			settings: {},
-			preferences: {},
-			blockListSettings: {},
-			blockEditingModes: new Map(),
-		};
-		const items = getInserterItems( state );
+		const items = select( store ).getInserterItems();
 		const expectedResult = [
 			'core/block',
 			'core/test-block-a',

package/src/store/utils.js

@@ -2,6 +2,8 @@
  * Internal dependencies
  */
 import { selectBlockPatternsKey } from './private-keys';
+import { unlock } from '../lock-unlock';
+import { STORE_NAME } from './constants';
 
 export const checkAllowList = ( list, item, defaultResult = null ) => {
 	if ( typeof list === 'boolean' ) {
@@ -52,5 +54,16 @@ export const getAllPatternsDependants = ( select ) => ( state ) => {
 		state.settings.__experimentalReusableBlocks,
 		state.settings[ selectBlockPatternsKey ]?.( select ),
 		state.blockPatterns,
+		unlock( select( STORE_NAME ) ).getReusableBlocks(),
 	];
 };
+
+export function getInsertBlockTypeDependants( state, rootClientId ) {
+	return [
+		state.blockListSettings[ rootClientId ],
+		state.blocks.byClientId.get( rootClientId ),
+		state.settings.allowedBlockTypes,
+		state.settings.templateLock,
+		state.blockEditingModes,
+	];
+}

package/src/style.scss

@@ -47,9 +47,7 @@
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";
-@import "./hooks/anchor.scss";
 @import "./hooks/block-hooks.scss";
-@import "./hooks/background.scss";
 @import "./hooks/border.scss";
 @import "./hooks/color.scss";
 @import "./hooks/dimensions.scss";

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

@@ -19,6 +19,7 @@ function transformStyle(
 		return css;
 	}
 
+	const postcssFriendlyCSS = css.replace( ':where(body)', 'body' );
 	try {
 		return postcss(
 			[
@@ -31,7 +32,7 @@ function transformStyle(
 					} ),
 				baseURL && rebaseUrl( { rootUrl: baseURL } ),
 			].filter( Boolean )
-		).process( css, {} ).css; // use sync PostCSS API
+		).process( postcssFriendlyCSS, {} ).css; // use sync PostCSS API
 	} catch ( error ) {
 		if ( error instanceof CssSyntaxError ) {
 			// eslint-disable-next-line no-console

package/src/hooks/anchor.scss

@@ -1,4 +0,0 @@
-.html-anchor-control .components-external-link {
-	display: inline-block;
-	margin-top: $grid-unit-10;
-}

package/src/hooks/background.scss

@@ -1,75 +0,0 @@
-.block-editor-hooks__background__inspector-media-replace-container {
-	position: relative;
-	// Since there is no option to skip rendering the drag'n'drop icon in drop
-	// zone, we hide it for now.
-	.components-drop-zone__content-icon {
-		display: none;
-	}
-
-	button.components-button {
-		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-300;
-		width: 100%;
-		display: block;
-		height: $grid-unit-50;
-
-		&:hover {
-			color: var(--wp-admin-theme-color);
-		}
-
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-	}
-
-	.block-editor-hooks__background__inspector-media-replace-title {
-		word-break: break-all;
-		// The Button component is white-space: nowrap, and that won't work with line-clamp.
-		white-space: normal;
-
-		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
-		text-align: start;
-		text-align-last: center;
-	}
-
-	.components-dropdown {
-		display: block;
-	}
-}
-
-.block-editor-hooks__background__inspector-image-indicator-wrapper {
-	background: #fff linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); // Show a diagonal line (crossed out) for empty background image.
-	border-radius: $radius-round !important; // Override the default border-radius inherited from FlexItem.
-	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
-	display: block;
-	width: 20px;
-	height: 20px;
-	flex: none;
-
-	&.has-image {
-		background: #fff; // No diagonal line for non-empty background image. A background color is in use to account for partially transparent images.
-	}
-}
-
-.block-editor-hooks__background__inspector-image-indicator {
-	background-size: cover;
-	border-radius: $radius-round;
-	width: 20px;
-	height: 20px;
-	display: block;
-	position: relative;
-}
-
-.block-editor-hooks__background__inspector-image-indicator::after {
-	content: "";
-	position: absolute;
-	top: -1px;
-	left: -1px;
-	bottom: -1px;
-	right: -1px;
-	border-radius: $radius-round;
-	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
-	// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
-	border: 1px solid transparent;
-	box-sizing: inherit;
-}