@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.1.0

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

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import {
+	registerBlockType,
+	unregisterBlockType,
+	privateApis as blocksPrivateApis,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -29,9 +33,15 @@ import {
 	hasSelectedStyleState,
 	isSelectedBlockStyleStateShownOnCanvas,
 	shouldRenderBlockListView,
+	getStyleOverrides,
+	canHostEditableRoot,
 } from '../private-selectors';
 import { getBlockEditingMode } from '../selectors';
 import { deviceTypeKey } from '../private-keys';
+import reducer from '../reducer';
+import { unlock } from '../../lock-unlock';
+
+const { editableRootKey } = unlock( blocksPrivateApis );
 
 describe( 'private selectors', () => {
 	describe( 'isBlockInterfaceHidden', () => {
@@ -1349,6 +1359,27 @@ describe( 'private selectors', () => {
 		} );
 	} );
 
+	describe( 'getStyleOverrides', () => {
+		it( 'sorts overrides by the order of the blocks they belong to', () => {
+			const state = {
+				blocks: {
+					order: new Map( [ [ '', [ 'block-1', 'block-2' ] ] ] ),
+				},
+				styleOverrides: new Map( [
+					[ 'override-2', { clientId: 'block-2', css: '.b{}' } ],
+					[ 'override-1', { clientId: 'block-1', css: '.a{}' } ],
+					[ 'override-global', { css: '.global{}' } ],
+				] ),
+			};
+
+			expect( getStyleOverrides( state ) ).toEqual( [
+				[ 'override-global', { css: '.global{}' } ],
+				[ 'override-1', { clientId: 'block-1', css: '.a{}' } ],
+				[ 'override-2', { clientId: 'block-2', css: '.b{}' } ],
+			] );
+		} );
+	} );
+
 	describe( 'getBlockStyles', () => {
 		it( 'should return an empty object when no client IDs are provided', () => {
 			const state = {
@@ -1882,6 +1913,79 @@ describe( 'private selectors', () => {
 			expect( isBlockHiddenAnywhere( state, 'block-1' ) ).toBe( false );
 		} );
 
+		it( 'should ignore viewport visibility for unavailable breakpoints', () => {
+			const state = {
+				settings: {
+					__experimentalFeatures: {
+						viewport: {
+							mobile: '480px',
+						},
+					},
+				},
+				blocks: {
+					byClientId: new Map( [
+						[
+							'block-1',
+							{ name: 'core/test-block-with-visibility' },
+						],
+					] ),
+					attributes: new Map( [
+						[
+							'block-1',
+							{
+								metadata: {
+									blockVisibility: {
+										viewport: {
+											tablet: false,
+										},
+									},
+								},
+							},
+						],
+					] ),
+				},
+			};
+
+			expect( isBlockHiddenAnywhere( state, 'block-1' ) ).toBe( false );
+		} );
+
+		it( 'should use tablet visibility for a single tablet breakpoint', () => {
+			const state = {
+				settings: {
+					__experimentalFeatures: {
+						viewport: {
+							tablet: '64rem',
+						},
+					},
+				},
+				blocks: {
+					byClientId: new Map( [
+						[
+							'block-1',
+							{ name: 'core/test-block-with-visibility' },
+						],
+					] ),
+					attributes: new Map( [
+						[
+							'block-1',
+							{
+								metadata: {
+									blockVisibility: {
+										viewport: {
+											mobile: false,
+											tablet: false,
+										},
+									},
+								},
+							},
+						],
+					] ),
+				},
+			};
+
+			expect( isBlockHiddenAnywhere( state, 'block-1' ) ).toBe( true );
+		} );
+
 		it( 'should handle non-existent block gracefully', () => {
 			const state = {
 				blocks: {
@@ -1976,6 +2080,44 @@ describe( 'private selectors', () => {
 				isBlockHiddenAtViewport( state, 'block-1', 'Tablet' )
 			).toBe( false );
 		} );
+
+		it( 'ignores viewport visibility for unavailable breakpoints', () => {
+			const state = {
+				settings: {
+					__experimentalFeatures: {
+						viewport: {
+							mobile: '480px',
+						},
+					},
+				},
+				blocks: {
+					byClientId: new Map( [
+						[
+							'block-1',
+							{ name: 'core/test-block-with-visibility' },
+						],
+					] ),
+					attributes: new Map( [
+						[
+							'block-1',
+							{
+								metadata: {
+									blockVisibility: {
+										viewport: {
+											tablet: false,
+										},
+									},
+								},
+							},
+						],
+					] ),
+				},
+			};
+
+			expect(
+				isBlockHiddenAtViewport( state, 'block-1', 'Tablet' )
+			).toBe( false );
+		} );
 	} );
 
 	describe( 'isBlockHiddenAnywhere in different devices', () => {
@@ -2417,4 +2559,132 @@ describe( 'private selectors', () => {
 			);
 		} );
 	} );
+
+	describe( 'canHostEditableRoot', () => {
+		beforeEach( () => {
+			registerBlockType( 'core/test-editable-root', {
+				apiVersion: 3,
+				save: () => null,
+				category: 'text',
+				title: 'Editable root',
+				[ editableRootKey ]: true,
+			} );
+			registerBlockType( 'core/test-plain', {
+				apiVersion: 3,
+				save: () => null,
+				category: 'text',
+				title: 'Plain',
+			} );
+		} );
+
+		afterEach( () => {
+			unregisterBlockType( 'core/test-editable-root' );
+			unregisterBlockType( 'core/test-plain' );
+		} );
+
+		const createState = () => ( {
+			blocks: {
+				byClientId: new Map( [
+					[ 'a', { name: 'core/test-editable-root' } ],
+					[ 'b', { name: 'core/test-editable-root' } ],
+				] ),
+				attributes: new Map( [
+					[ 'a', { content: 'a' } ],
+					[ 'b', { content: 'b' } ],
+				] ),
+				order: new Map( [
+					[ '', [ 'a', 'b' ] ],
+					[ 'a', [] ],
+					[ 'b', [] ],
+				] ),
+				parents: new Map( [
+					[ 'a', '' ],
+					[ 'b', '' ],
+				] ),
+				blockEditingModes: new Map(),
+			},
+			derivedBlockEditingModes: new Map(),
+			blocksMode: {},
+		} );
+
+		it( 'should return true for a block supporting editableRoot with editable siblings', () => {
+			expect( canHostEditableRoot( createState(), 'a' ) ).toBe( true );
+		} );
+
+		it( 'should return false for a lone block', () => {
+			const state = createState();
+			state.blocks.order = new Map( [
+				[ '', [ 'a' ] ],
+				[ 'a', [] ],
+			] );
+
+			expect( canHostEditableRoot( state, 'a' ) ).toBe( false );
+		} );
+
+		it( 'should return false when a sibling is not editable', () => {
+			const state = createState();
+			state.derivedBlockEditingModes = new Map( [ [ 'b', 'disabled' ] ] );
+
+			expect( canHostEditableRoot( state, 'a' ) ).toBe( false );
+		} );
+
+		// The sibling scan is O(siblings) and runs in every rich text instance.
+		it( 'should not recompute when only block attributes change', () => {
+			const state = createState();
+			expect( canHostEditableRoot( state, 'a' ) ).toBe( true );
+
+			// Change the uncached result without touching a dependant.
+			state.blocks.byClientId.set( 'a', { name: 'core/test-plain' } );
+
+			const nextState = {
+				...state,
+				blocks: {
+					...state.blocks,
+					attributes: new Map( [
+						[ 'a', { content: 'typed' } ],
+						[ 'b', { content: 'b' } ],
+					] ),
+				},
+			};
+
+			expect( canHostEditableRoot( nextState, 'a' ) ).toBe( true );
+
+			nextState.blocks.byClientId = new Map( state.blocks.byClientId );
+			expect( canHostEditableRoot( nextState, 'a' ) ).toBe( false );
+		} );
+
+		// 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: 'core/test-editable-root',
+				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 assertions below passing vacuously.
+			expect( next.blocks.attributes ).not.toBe(
+				state.blocks.attributes
+			);
+
+			const before = canHostEditableRoot.getDependants( state );
+			const after = canHostEditableRoot.getDependants( next );
+
+			expect( after ).toHaveLength( before.length );
+			after.forEach( ( dependant, index ) => {
+				expect( dependant ).toBe( before[ index ] );
+			} );
+		} );
+	} );
 } );

package/src/style.scss

@@ -35,9 +35,11 @@
 @use "./components/fit-text-size-warning/style.scss" as *;
 @use "./components/font-appearance-control/style.scss" as *;
 @use "./components/global-styles/style.scss" as *;
+@use "./components/global-styles/inheritance/style.scss" as *;
 @use "./components/grid/style.scss" as *;
 @use "./components/height-control/style.scss" as *;
 @use "./components/iframe/style.scss" as *;
+@use "./components/image-editor/style.scss" as *;
 @use "./components/inserter-list-item/style.scss" as *;
 @use "./components/inspector-controls/styles.scss" as *;
 @use "./components/inspector-controls-tabs/style.scss" as *;

package/src/utils/block-bindings.ts

@@ -1,8 +1,58 @@
 type Binding = { source?: string };
 type Bindings = Record< string, Binding >;
+type BlockBindingsSource = { usesContext?: readonly string[] };
 
 const DEFAULT_ATTRIBUTE = '__default';
 const PATTERN_OVERRIDES_SOURCE = 'core/pattern-overrides';
+const EMPTY_CONTEXT: Record< string, unknown > = {};
+
+/**
+ * Assembles the context made available to a block's bindings sources: the
+ * entries of the surrounding block context declared by the block type's
+ * `usesContext`, plus the entries declared by the given sources' `usesContext`.
+ *
+ * Only entries present in the surrounding block context are copied — a
+ * declared key with no provider never becomes an own (undefined-valued) key
+ * of the result, so `key in context` checks stay meaningful.
+ *
+ * @param blockContext         The surrounding block context.
+ * @param blockTypeUsesContext The block type's declared context needs.
+ * @param sources              Block-bindings sources whose declared context to add.
+ *
+ * @return The context for resolving the block's bindings.
+ */
+export function getBlockBindingsContext(
+	blockContext: Record< string, unknown >,
+	blockTypeUsesContext: readonly string[] | undefined,
+	sources: readonly ( BlockBindingsSource | undefined )[] | undefined
+): Record< string, unknown > {
+	let context: Record< string, unknown > | undefined;
+	if ( blockTypeUsesContext ) {
+		for ( const [ key, value ] of Object.entries( blockContext ) ) {
+			if ( blockTypeUsesContext.includes( key ) ) {
+				if ( context === undefined ) {
+					context = {};
+				}
+				context[ key ] = value;
+			}
+		}
+	}
+	if ( sources ) {
+		for ( const source of sources ) {
+			source?.usesContext?.forEach( ( key ) => {
+				if ( key in blockContext ) {
+					if ( context === undefined ) {
+						context = {};
+					}
+					context[ key ] = blockContext[ key ];
+				}
+			} );
+		}
+	}
+	// A stable empty object avoids re-renders for consumers that compare the
+	// context by reference.
+	return context ?? EMPTY_CONTEXT;
+}
 
 /**
  * Checks if the block has the `__default` binding for pattern overrides.

package/src/utils/dom.ts

@@ -31,6 +31,39 @@ export function isInsideRootBlock( blockElement: Element, element: Element ) {
 	return parentBlock === blockElement;
 }
 
+/**
+ * Returns the editable element containing the selection, if the selection is
+ * fully contained within one. The root element (an editable wrapper) does not
+ * count as a containing editable element.
+ *
+ * @param selection The selection.
+ * @param root      The editable wrapper element.
+ *
+ * @return The editable element containing the selection.
+ */
+export function getSelectionEditableElement(
+	selection: Selection,
+	root: Element
+) {
+	const { anchorNode, focusNode } = selection;
+
+	if ( ! anchorNode || ! focusNode ) {
+		return;
+	}
+
+	const element =
+		anchorNode.nodeType === anchorNode.ELEMENT_NODE
+			? ( anchorNode as Element )
+			: anchorNode.parentElement;
+	const editable = element?.closest( '[contenteditable="true"]' );
+
+	if ( ! editable || editable === root || ! editable.contains( focusNode ) ) {
+		return;
+	}
+
+	return editable;
+}
+
 /**
  * Finds the block client ID given any DOM node inside the block.
  *

package/src/utils/native-undo.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Elements whose content the browser's own undo acts on (a dialog input, an
+ * HTML editing field, a search field), registered through `useNativeUndo`.
+ * The editor history must not act on events originating within them.
+ */
+const nativeUndoNodes = new WeakSet();
+
+/**
+ * Returns a ref that marks an element (and its descendants) as relying on
+ * the browser's own undo, so the editor history leaves the undo and redo
+ * shortcuts alone within it.
+ *
+ * @return {Function} Ref callback.
+ */
+export function useNativeUndo() {
+	return useRefEffect( ( node ) => {
+		nativeUndoNodes.add( node );
+		return () => {
+			nativeUndoNodes.delete( node );
+		};
+	}, [] );
+}
+
+/**
+ * Returns true when the event originates from an element registered through
+ * `useNativeUndo`.
+ *
+ * Events coming from the editor canvas are re-dispatched on the iframe
+ * element, so the real target is resolved through the frame's focused
+ * element.
+ *
+ * @param {KeyboardEvent} event Keyboard event.
+ *
+ * @return {boolean} Whether the element relies on the browser's own undo.
+ */
+export function usesNativeUndo( event ) {
+	let { target } = event;
+
+	if ( target?.nodeName === 'IFRAME' ) {
+		target = target.contentDocument?.activeElement;
+	}
+
+	while ( target ) {
+		if ( nativeUndoNodes.has( target ) ) {
+			return true;
+		}
+		target = target.parentElement;
+	}
+
+	return false;
+}

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

@@ -0,0 +1,181 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getBlockBindingsContext,
+	hasPatternOverridesDefaultBinding,
+	replacePatternOverridesDefaultBinding,
+} from '../block-bindings';
+
+describe( 'hasPatternOverridesDefaultBinding', () => {
+	it( 'returns true when the `__default` binding targets pattern overrides', () => {
+		expect(
+			hasPatternOverridesDefaultBinding( {
+				__default: { source: 'core/pattern-overrides' },
+			} )
+		).toBe( true );
+	} );
+
+	it( 'returns false when there is no `__default` binding', () => {
+		expect(
+			hasPatternOverridesDefaultBinding( {
+				content: { source: 'core/pattern-overrides' },
+			} )
+		).toBe( false );
+	} );
+
+	it( 'returns false when the `__default` binding targets another source', () => {
+		expect(
+			hasPatternOverridesDefaultBinding( {
+				__default: { source: 'core/post-meta' },
+			} )
+		).toBe( false );
+	} );
+
+	it( 'returns false for undefined bindings', () => {
+		expect( hasPatternOverridesDefaultBinding( undefined ) ).toBe( false );
+	} );
+} );
+
+describe( 'replacePatternOverridesDefaultBinding', () => {
+	it( 'expands `__default` to a binding for each supported attribute', () => {
+		const result = replacePatternOverridesDefaultBinding(
+			{ __default: { source: 'core/pattern-overrides' } },
+			[ 'content', 'url', 'alt' ]
+		);
+
+		expect( result ).toEqual( {
+			content: { source: 'core/pattern-overrides' },
+			url: { source: 'core/pattern-overrides' },
+			alt: { source: 'core/pattern-overrides' },
+		} );
+	} );
+
+	it( 'retains explicit non-pattern-override bindings while expanding `__default`', () => {
+		const result = replacePatternOverridesDefaultBinding(
+			{
+				__default: { source: 'core/pattern-overrides' },
+				url: { source: 'core/post-meta', args: { key: 'my_url' } },
+			},
+			[ 'content', 'url' ]
+		);
+
+		expect( result ).toEqual( {
+			content: { source: 'core/pattern-overrides' },
+			url: { source: 'core/post-meta', args: { key: 'my_url' } },
+		} );
+	} );
+
+	it( 'returns the bindings untouched when there is no `__default` pattern-override binding', () => {
+		const bindings = { content: { source: 'core/pattern-overrides' } };
+
+		expect(
+			replacePatternOverridesDefaultBinding( bindings, [ 'content' ] )
+		).toBe( bindings );
+	} );
+
+	// Regression guard: the `__default` expansion only iterates the block
+	// type's supported *attributes*, so it can never synthesize an
+	// `innerBlocks` binding. Existing `__default` pattern-override blocks
+	// must not implicitly gain an inner-block binding.
+	it( 'never synthesizes an `innerBlocks` binding when expanding `__default`', () => {
+		// A realistic set of supported *attribute* names — `innerBlocks` is not
+		// an attribute and is therefore never present here.
+		const supportedAttributes = [ 'content', 'url', 'alt', 'title' ];
+
+		const result = replacePatternOverridesDefaultBinding(
+			{ __default: { source: 'core/pattern-overrides' } },
+			supportedAttributes
+		);
+
+		// Every produced binding key corresponds to a supported attribute…
+		expect( Object.keys( result ) ).toEqual( supportedAttributes );
+		// …and `innerBlocks` is never among them.
+		expect( result ).not.toHaveProperty( 'innerBlocks' );
+	} );
+
+	it( 'does not add an `innerBlocks` binding even when supportedAttributes is empty', () => {
+		const result = replacePatternOverridesDefaultBinding(
+			{ __default: { source: 'core/pattern-overrides' } },
+			[]
+		);
+
+		expect( result ).toEqual( {} );
+		expect( result ).not.toHaveProperty( 'innerBlocks' );
+	} );
+} );
+
+describe( 'getBlockBindingsContext', () => {
+	const blockContext = {
+		postId: 1,
+		postType: 'post',
+		'pattern/overrides': { content: 'x' },
+	};
+
+	it( 'copies the block-type-declared entries present in the block context', () => {
+		expect(
+			getBlockBindingsContext(
+				blockContext,
+				[ 'postId', 'postType' ],
+				undefined
+			)
+		).toEqual( { postId: 1, postType: 'post' } );
+	} );
+
+	it( 'omits block-type-declared keys absent from the block context', () => {
+		const result = getBlockBindingsContext(
+			blockContext,
+			[ 'postId', 'core/missing' ],
+			undefined
+		);
+
+		expect( result ).toEqual( { postId: 1 } );
+		// The declared-but-unprovided key must not become an own
+		// (undefined-valued) key, so `key in context` checks stay meaningful.
+		expect( result ).not.toHaveProperty( 'core/missing' );
+	} );
+
+	it( 'adds source-declared entries present in the block context', () => {
+		expect(
+			getBlockBindingsContext(
+				blockContext,
+				[ 'postId' ],
+				[
+					{ usesContext: [ 'pattern/overrides' ] },
+					{ usesContext: [ 'postType' ] },
+				]
+			)
+		).toEqual( {
+			postId: 1,
+			postType: 'post',
+			'pattern/overrides': { content: 'x' },
+		} );
+	} );
+
+	it( 'omits source-declared keys absent from the block context', () => {
+		const result = getBlockBindingsContext( blockContext, undefined, [
+			{ usesContext: [ 'core/missing' ] },
+		] );
+
+		expect( result ).toEqual( {} );
+		expect( result ).not.toHaveProperty( 'core/missing' );
+	} );
+
+	it( 'ignores unregistered (undefined) sources and sources without usesContext', () => {
+		expect(
+			getBlockBindingsContext( blockContext, undefined, [
+				undefined,
+				{},
+				{ usesContext: [ 'postId' ] },
+			] )
+		).toEqual( { postId: 1 } );
+	} );
+
+	it( 'returns a stable empty object when nothing is declared', () => {
+		const first = getBlockBindingsContext( blockContext, undefined, [] );
+		const second = getBlockBindingsContext( blockContext, [], undefined );
+
+		expect( first ).toEqual( {} );
+		expect( second ).toBe( first );
+	} );
+} );