@wordpress/block-editor 16.1.0 → 16.2.0

package/src/store/test/private-selectors.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import {
 	registerBlockType,
 	unregisterBlockType,
 	privateApis as blocksPrivateApis,
 } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import {
 	isBlockInterfaceHidden,
 	getLastInsertedBlocksClientIds,
@@ -28,6 +21,7 @@ import {
 	isBlockHiddenAtViewport,
 	getViewportModalClientIds,
 	isSectionBlock,
+	isSyncedBlock,
 	getParentSectionBlock,
 	getSelectedBlockStyleState,
 	hasSelectedStyleState,
@@ -650,10 +644,6 @@ describe( 'private selectors', () => {
 				[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', {} ],
 			] ),
 		};
-		getEnabledClientIdsTree.registry = {
-			select: jest.fn( () => ( {} ) ),
-		};
-
 		it( 'should return tree containing only clientId and innerBlocks', () => {
 			const state = {
 				...baseState,
@@ -944,12 +934,6 @@ describe( 'private selectors', () => {
 			unregisterBlockType( TEST_STRUCTURE_BLOCK );
 		} );
 
-		beforeEach( () => {
-			getListViewClientIdsTree.registry = {
-				select: jest.fn( () => ( {} ) ),
-			};
-		} );
-
 		it( 'includes disabled outside-section context while preserving the edited section', () => {
 			const state = createBaseState();
 
@@ -1193,6 +1177,111 @@ describe( 'private selectors', () => {
 				},
 			] );
 		} );
+
+		it( 'returns the same tree when section-only state changes outside of a content-only section edit', () => {
+			const state = {
+				...createBaseState(),
+				editedContentOnlySection: undefined,
+				derivedBlockEditingModes: new Map(),
+			};
+			const tree = getListViewClientIdsTree( state );
+
+			// None of this is read unless a content-only section is edited.
+			const nextState = {
+				...state,
+				blocks: {
+					...state.blocks,
+					byClientId: new Map( state.blocks.byClientId ),
+					attributes: new Map( state.blocks.attributes ),
+				},
+				blockListSettings: new Map( [
+					[ 'header', { templateLock: 'contentOnly' } ],
+				] ),
+				settings: { ...state.settings },
+			};
+
+			expect( getListViewClientIdsTree( nextState ) ).toBe( tree );
+		} );
+
+		it( 'rebuilds the tree when a pattern name changes while a content-only section is edited', () => {
+			const state = createBaseState();
+
+			// `other-structure` is hidden while `other-pattern` is a section.
+			expect( getListViewClientIdsTree( state ) ).toEqual( [
+				{ clientId: 'header', innerBlocks: [] },
+				{
+					clientId: 'edited-pattern',
+					innerBlocks: [
+						{ clientId: 'edited-content', innerBlocks: [] },
+					],
+				},
+				{
+					clientId: 'other-pattern',
+					innerBlocks: [
+						{ clientId: 'other-content', innerBlocks: [] },
+					],
+				},
+			] );
+
+			const nextState = {
+				...state,
+				blocks: {
+					...state.blocks,
+					attributes: new Map( state.blocks.attributes ).set(
+						'other-pattern',
+						{ metadata: {} }
+					),
+				},
+			};
+
+			// It is no longer a section, so its structural child is shown.
+			expect( getListViewClientIdsTree( nextState ) ).toEqual( [
+				{ clientId: 'header', innerBlocks: [] },
+				{
+					clientId: 'edited-pattern',
+					innerBlocks: [
+						{ clientId: 'edited-content', innerBlocks: [] },
+					],
+				},
+				{
+					clientId: 'other-pattern',
+					innerBlocks: [
+						{ clientId: 'other-content', innerBlocks: [] },
+						{ clientId: 'other-structure', innerBlocks: [] },
+					],
+				},
+			] );
+		} );
+
+		// The memoization above is only reachable if the reducer preserves
+		// these references through a keystroke.
+		it( 'should keep its dependants referentially stable while typing', () => {
+			const block = ( clientId ) => ( {
+				clientId,
+				name: TEST_CONTENT_BLOCK,
+				attributes: { content: clientId },
+				innerBlocks: [],
+			} );
+			const state = reducer( reducer( undefined, { type: '@@init' } ), {
+				type: 'RESET_BLOCKS',
+				blocks: [ block( 'a' ), block( 'b' ) ],
+			} );
+
+			const next = reducer( state, {
+				type: 'UPDATE_BLOCK_ATTRIBUTES',
+				clientIds: [ 'a' ],
+				attributes: { content: 'typed' },
+			} );
+
+			// Guards against the assertion below passing vacuously.
+			expect( next.blocks.attributes ).not.toBe(
+				state.blocks.attributes
+			);
+
+			expect( getListViewClientIdsTree( next ) ).toBe(
+				getListViewClientIdsTree( state )
+			);
+		} );
 	} );
 
 	describe( 'getEnabledBlockParents', () => {
@@ -2417,6 +2506,55 @@ describe( 'private selectors', () => {
 		} );
 	} );
 
+	describe( 'isSyncedBlock', () => {
+		const createState = ( { blockName, patternName } = {} ) => ( {
+			blocks: {
+				byClientId: new Map( [ [ 'block-1', { name: blockName } ] ] ),
+				attributes: new Map( [
+					[
+						'block-1',
+						patternName ? { metadata: { patternName } } : {},
+					],
+				] ),
+				parents: new Map( [ [ 'block-1', '' ] ] ),
+			},
+		} );
+
+		it( 'returns true for synced patterns', () => {
+			const state = createState( { blockName: 'core/block' } );
+			expect( isSyncedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns true for template parts', () => {
+			const state = createState( { blockName: 'core/template-part' } );
+			expect( isSyncedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns false for blocks that are neither', () => {
+			const state = createState( { blockName: 'core/group' } );
+			expect( isSyncedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+
+		it( 'returns false for a synced block that is displayed as a pattern', () => {
+			const state = createState( {
+				blockName: 'core/template-part',
+				patternName: 'my-pattern',
+			} );
+			expect( isSyncedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+
+		it( 'returns true for a synced block whose pattern is being edited', () => {
+			const state = {
+				...createState( {
+					blockName: 'core/template-part',
+					patternName: 'my-pattern',
+				} ),
+				editedContentOnlySection: 'block-1',
+			};
+			expect( isSyncedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+	} );
+
 	describe( 'getParentSectionBlock', () => {
 		it( 'returns undefined when there are no parent section blocks', () => {
 			const state = {

package/src/store/test/reducer.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import deepFreeze from 'deep-freeze';
-
-/**
- * WordPress dependencies
- */
 import {
 	registerBlockType,
 	unregisterBlockType,
@@ -13,10 +6,6 @@ import {
 	privateApis,
 } from '@wordpress/blocks';
 import { combineReducers } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import {
 	hasSameKeys,
 	isUpdatingSameBlockAttribute,
@@ -6108,6 +6097,36 @@ describe( 'state', () => {
 			expect( state ).toBeUndefined();
 		} );
 
+		it( 'keeps the selected state for selection changes within the same block', () => {
+			const originalState = {
+				clientId: 'client-1',
+				value: { viewport: 'default', pseudo: ':hover' },
+			};
+			const state = selectedBlockStyleState( originalState, {
+				type: 'SELECTION_CHANGE',
+				start: { clientId: 'client-1' },
+				end: { clientId: 'client-1' },
+			} );
+
+			expect( state ).toBe( originalState );
+		} );
+
+		it( 'clears the selected state for selection changes across multiple blocks', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'default', pseudo: ':hover' },
+				},
+				{
+					type: 'SELECTION_CHANGE',
+					start: { clientId: 'client-1' },
+					end: { clientId: 'client-2' },
+				}
+			);
+
+			expect( state ).toBeUndefined();
+		} );
+
 		it( 'keeps the selected state when selection resets to the same block', () => {
 			const originalState = {
 				clientId: 'client-1',

package/src/store/test/registry-selectors.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import { select, dispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store } from '../';
 
 describe( 'selectors', () => {

package/src/store/test/selectors.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	registerBlockType,
 	unregisterBlockType,
@@ -13,10 +10,6 @@ import {
 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 '../';
 import { lock } from '../../lock-unlock';
@@ -1945,6 +1938,17 @@ describe( 'selectors', () => {
 
 			expect( isBlockSelected( state, '23' ) ).toBe( false );
 		} );
+
+		it( 'should return false if there is no client ID', () => {
+			const state = {
+				selection: {
+					selectionStart: {},
+					selectionEnd: {},
+				},
+			};
+
+			expect( isBlockSelected( state, undefined ) ).toBe( false );
+		} );
 	} );
 
 	describe( 'hasSelectedInnerBlock', () => {
@@ -2049,6 +2053,138 @@ describe( 'selectors', () => {
 			};
 			expect( hasSelectedInnerBlock( state, '3' ) ).toBe( false );
 		} );
+
+		it( 'should return true for a deep check if the selected block is a descendant of the given ClientId', () => {
+			const state = {
+				selection: {
+					selectionStart: { clientId: '3' },
+					selectionEnd: { clientId: '3' },
+				},
+				blocks: {
+					order: new Map(
+						Object.entries( {
+							1: [ '2' ],
+							2: [ '3' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							2: '1',
+							3: '2',
+						} )
+					),
+				},
+			};
+
+			expect( hasSelectedInnerBlock( state, '1', true ) ).toBe( true );
+			expect( hasSelectedInnerBlock( state, '2', true ) ).toBe( true );
+			// Without a deep check only the direct parent matches.
+			expect( hasSelectedInnerBlock( state, '1' ) ).toBe( false );
+			expect( hasSelectedInnerBlock( state, '2' ) ).toBe( true );
+		} );
+
+		it( 'should return false for a deep check if the given ClientId is the selected block itself', () => {
+			const state = {
+				selection: {
+					selectionStart: { clientId: '3' },
+					selectionEnd: { clientId: '3' },
+				},
+				blocks: {
+					order: new Map(
+						Object.entries( {
+							1: [ '2' ],
+							2: [ '3' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							2: '1',
+							3: '2',
+						} )
+					),
+				},
+			};
+
+			expect( hasSelectedInnerBlock( state, '3', true ) ).toBe( false );
+		} );
+
+		it( 'should return true for a deep check if a multi selection contains a descendant of the block with the given ClientId', () => {
+			const state = {
+				selection: {
+					selectionStart: { clientId: '2' },
+					selectionEnd: { clientId: '3' },
+				},
+				blocks: {
+					order: new Map(
+						Object.entries( {
+							'': [ '1' ],
+							1: [ '2', '3' ],
+							3: [ '4' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '',
+							2: '1',
+							3: '1',
+							4: '3',
+						} )
+					),
+				},
+			};
+
+			expect( hasSelectedInnerBlock( state, '1', true ) ).toBe( true );
+			// '3' is selected, and it is not its own ancestor.
+			expect( hasSelectedInnerBlock( state, '3', true ) ).toBe( false );
+			expect( hasSelectedInnerBlock( state, '4', true ) ).toBe( false );
+		} );
+
+		it( 'should return an up to date deep check after the selection moves to another branch', () => {
+			// The same blocks throughout, so only the selection changes.
+			const blocks = {
+				order: new Map(
+					Object.entries( {
+						'': [ '1', '4' ],
+						1: [ '2' ],
+						4: [ '5' ],
+					} )
+				),
+				parents: new Map(
+					Object.entries( {
+						1: '',
+						2: '1',
+						4: '',
+						5: '4',
+					} )
+				),
+			};
+
+			const state = {
+				blocks,
+				selection: {
+					selectionStart: { clientId: '2' },
+					selectionEnd: { clientId: '2' },
+				},
+			};
+
+			expect( hasSelectedInnerBlock( state, '1', true ) ).toBe( true );
+			expect( hasSelectedInnerBlock( state, '4', true ) ).toBe( false );
+
+			const nextState = {
+				blocks,
+				selection: {
+					selectionStart: { clientId: '5' },
+					selectionEnd: { clientId: '5' },
+				},
+			};
+
+			expect( hasSelectedInnerBlock( nextState, '1', true ) ).toBe(
+				false
+			);
+			expect( hasSelectedInnerBlock( nextState, '4', true ) ).toBe(
+				true
+			);
+		} );
 	} );
 
 	describe( 'isBlockWithinSelection', () => {

package/src/store/utils.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { parse } from '@wordpress/blocks';
 import { parse as grammarParse } from '@wordpress/block-serialization-default-parser';
-
-/**
- * Internal dependencies
- */
 import {
 	selectBlockPatternsKey,
 	userPatternCategoriesSelectKey,

package/src/utils/fit-text-frontend.ts

@@ -3,15 +3,7 @@
  * Automatically detects and initializes fit text on blocks with the has-fit-text class.
  * Supports both initial page load and Interactivity API client-side navigation.
  */
-
-/**
- * WordPress dependencies
- */
 import { store, getElement, getContext } from '@wordpress/interactivity';
-
-/**
- * Internal dependencies
- */
 import { optimizeFitText } from './fit-text-utils';
 
 interface FitTextContext {

package/src/utils/format-font-style.ts

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import type { FormattedFont } from './types';
 
 /**

package/src/utils/format-font-weight.ts

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import type { FormattedFont } from './types';
 
 /**

package/src/utils/get-font-styles-and-weights.ts

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { _x, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { formatFontStyle } from './format-font-style';
 import { formatFontWeight } from './format-font-weight';
 import type {

package/src/utils/group-blocks.js

@@ -0,0 +1,36 @@
+import {
+	findTransform,
+	getBlockTransforms,
+	switchToBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Wraps the given blocks in the grouping block. Unlike a plain
+ * `switchToBlockType` call, the blocks' own transforms to the grouping block
+ * type are never used: the Group action is a structural wrap, while a
+ * block's own transform changes what the block is (a quote's transform to
+ * group dissolves the quote into its inner blocks).
+ *
+ * @param {WPBlock[]} blocks            Blocks to group.
+ * @param {string}    groupingBlockName Name of the grouping block.
+ *
+ * @return {?WPBlock[]} The grouped blocks, or null.
+ */
+export function groupBlocks( blocks, groupingBlockName ) {
+	const groupingBlockTransform = findTransform(
+		getBlockTransforms( 'from', groupingBlockName ),
+		( transform ) =>
+			transform.type === 'block' &&
+			transform.isMultiBlock &&
+			transform.blocks.includes( '*' )
+	);
+
+	if ( groupingBlockTransform?.__experimentalConvert ) {
+		const result = groupingBlockTransform.__experimentalConvert( blocks );
+		return Array.isArray( result ) ? result : [ result ];
+	}
+
+	// A grouping block without a wildcard transform. Fall back to regular
+	// block conversion.
+	return switchToBlockType( blocks, groupingBlockName );
+}

package/src/utils/native-undo.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useRefEffect } from '@wordpress/compose';
 
 /**

package/src/utils/pasting.ts

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { getFilesFromDataTransfer } from '@wordpress/dom';
 
 /**

package/src/utils/selection.ts

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { RichTextData } from '@wordpress/rich-text';
 
 /**

package/src/utils/sibling-block-attributes.js

@@ -0,0 +1,30 @@
+import { getBlockAttributesNamesByRole } from '@wordpress/blocks';
+
+/**
+ * Returns the attributes a newly created block inherits from an adjacent
+ * block of the same type: everything except the adjacent block's content
+ * (attributes with the `content` role) and its metadata.
+ * A styled sibling thus yields an equally styled, empty new block.
+ *
+ * @param {string}  blockName  The block name.
+ * @param {?Object} attributes The adjacent block's attributes.
+ *
+ * @return {Object} The attributes for the new block.
+ */
+export function getSiblingBlockAttributes( blockName, attributes ) {
+	if ( ! attributes ) {
+		return {};
+	}
+
+	const excluded = new Set(
+		getBlockAttributesNamesByRole( blockName, 'content' )
+	);
+	// The metadata attribute has no declared definition to carry a role. Its
+	// contents (bindings, custom name, bookkeeping) must not be duplicated.
+	excluded.add( 'metadata' );
+	return Object.fromEntries(
+		Object.entries( attributes ).filter(
+			( [ key ] ) => ! excluded.has( key )
+		)
+	);
+}

package/src/utils/test/block-bindings.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	getBlockBindingsContext,
 	hasPatternOverridesDefaultBinding,

package/src/utils/test/color-values.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	extractPresetSlug,
 	encodeColorValueWithPalette,

package/src/utils/test/format-font-style.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { formatFontStyle } from '../format-font-style';
 
 describe( 'formatFontStyle', () => {

package/src/utils/test/format-font-weight.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { formatFontWeight } from '../format-font-weight';
 
 describe( 'formatFontWeight', () => {

package/src/utils/test/get-font-styles-and-weights.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getFontStylesAndWeights } from '../get-font-styles-and-weights';
 
 describe( 'getFontStylesAndWeights', () => {

package/src/utils/test/math.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getDistanceFromPointToEdge, getDistanceToNearestEdge } from '../math';
 
 describe( 'getDistanceFromPointToEdge', () => {

package/src/utils/test/object.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { setImmutably } from '../object';
 
 describe( 'setImmutably', () => {

package/src/utils/test/pasting.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { shouldDismissPastedFiles } from '../pasting';
 
 const mocks = {

package/src/utils/test/selection.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	retrieveSelectedAttribute,
 	START_OF_SELECTED_AREA,