@wordpress/block-editor 15.22.1 → 16.0.0

package/src/store/test/reducer.js

@@ -43,6 +43,7 @@ import {
 	withDerivedBlockEditingModes,
 	viewportModalClientIds,
 	selectedBlockStyleState,
+	styleStateViewport,
 } from '../reducer';
 import { getBlockOrder, getBlocks } from '../selectors';
 import { unlock } from '../../lock-unlock';
@@ -834,7 +835,7 @@ describe( 'state', () => {
 				blocks: [
 					{
 						clientId: 'ribs',
-						name: 'core/freeform',
+						name: 'core/registered-block',
 						innerBlocks: [],
 					},
 				],
@@ -880,7 +881,7 @@ describe( 'state', () => {
 				blocks: [
 					{
 						clientId: 'wings',
-						name: 'core/freeform',
+						name: 'core/registered-block',
 						innerBlocks: [],
 					},
 				],
@@ -888,7 +889,7 @@ describe( 'state', () => {
 
 			expect( state.byClientId.size ).toBe( 1 );
 			expect( state.byClientId.get( 'wings' ).name ).toBe(
-				'core/freeform'
+				'core/registered-block'
 			);
 			expect( state.byClientId.get( 'wings' ).clientId ).toBe( 'wings' );
 			expect( Object.fromEntries( state.order ) ).toEqual( {
@@ -903,7 +904,7 @@ describe( 'state', () => {
 			);
 			expect( state.tree.get( 'wings' ) ).toEqual( {
 				clientId: 'wings',
-				name: 'core/freeform',
+				name: 'core/registered-block',
 				innerBlocks: [],
 			} );
 		} );
@@ -955,7 +956,7 @@ describe( 'state', () => {
 				blocks: [
 					{
 						clientId: 'wings',
-						name: 'core/freeform',
+						name: 'core/registered-block',
 						innerBlocks: [],
 					},
 				],
@@ -974,7 +975,7 @@ describe( 'state', () => {
 			);
 			expect( state.tree.get( 'wings' ) ).toEqual( {
 				clientId: 'wings',
-				name: 'core/freeform',
+				name: 'core/registered-block',
 				innerBlocks: [],
 			} );
 		} );
@@ -1037,7 +1038,7 @@ describe( 'state', () => {
 				blocks: [
 					{
 						clientId: 'chicken',
-						name: 'core/freeform',
+						name: 'core/registered-block',
 						innerBlocks: [],
 					},
 				],
@@ -1048,7 +1049,7 @@ describe( 'state', () => {
 				'core/test-block'
 			);
 			expect( replacedState.byClientId.get( 'chicken' ).name ).toBe(
-				'core/freeform'
+				'core/registered-block'
 			);
 			expect( replacedState.byClientId.get( 'chicken' ).clientId ).toBe(
 				'chicken'
@@ -1072,7 +1073,7 @@ describe( 'state', () => {
 			] );
 			const replacementNestedBlock = {
 				clientId: 'chicken',
-				name: 'core/freeform',
+				name: 'core/registered-block',
 				attributes: {},
 				innerBlocks: [],
 			};
@@ -1098,7 +1099,7 @@ describe( 'state', () => {
 				'core/test-block'
 			);
 			expect( replacedNestedState.byClientId.get( 'chicken' ).name ).toBe(
-				'core/freeform'
+				'core/registered-block'
 			);
 		} );
 
@@ -1603,7 +1604,7 @@ describe( 'state', () => {
 				blocks: [
 					{
 						clientId: 'persimmon',
-						name: 'core/freeform',
+						name: 'core/registered-block',
 						innerBlocks: [],
 					},
 				],
@@ -5948,7 +5949,6 @@ describe( 'state', () => {
 				clientId: 'client-1',
 				showStateOnCanvas: true,
 				value: {
-					viewport: 'default',
 					pseudo: ':hover',
 				},
 			} );
@@ -5994,7 +5994,6 @@ describe( 'state', () => {
 				clientId: 'client-2',
 				showStateOnCanvas: true,
 				value: {
-					viewport: 'default',
 					pseudo: ':focus',
 				},
 			} );
@@ -6275,6 +6274,35 @@ describe( 'state', () => {
 		} );
 	} );
 
+	describe( 'styleStateViewport', () => {
+		it( 'defaults to "default"', () => {
+			expect( styleStateViewport( undefined, {} ) ).toBe( 'default' );
+		} );
+
+		it( 'stores the selected viewport', () => {
+			expect(
+				styleStateViewport( 'default', {
+					type: 'SET_STYLE_STATE_VIEWPORT',
+					viewport: '@tablet',
+				} )
+			).toBe( '@tablet' );
+		} );
+
+		it( 'falls back to "default" when no viewport is provided', () => {
+			expect(
+				styleStateViewport( '@tablet', {
+					type: 'SET_STYLE_STATE_VIEWPORT',
+				} )
+			).toBe( 'default' );
+		} );
+
+		it( 'ignores unrelated actions', () => {
+			expect(
+				styleStateViewport( '@mobile', { type: 'SOME_OTHER_ACTION' } )
+			).toBe( '@mobile' );
+		} );
+	} );
+
 	describe( 'viewportModalClientIds', () => {
 		it( 'should default to null', () => {
 			const state = viewportModalClientIds( undefined, {} );

package/src/store/test/selectors.js

@@ -7,6 +7,8 @@ import {
 	setFreeformContentHandlerName,
 	setDefaultBlockName,
 	getDefaultBlockName,
+	createBlock,
+	createBlocksFromInnerBlocksTemplate,
 } from '@wordpress/blocks';
 import { RawHTML } from '@wordpress/element';
 import { symbol } from '@wordpress/icons';
@@ -3657,6 +3659,54 @@ describe( 'selectors', () => {
 			} );
 		} );
 
+		it( 'surfaces innerContent on a block variation inserter item', () => {
+			registerBlockType( 'core/html', {
+				apiVersion: 3,
+				save: () => null,
+				category: 'widgets',
+				title: 'Custom HTML',
+				variations: [
+					{
+						name: 'card',
+						title: 'Card',
+						innerContent: [ '<div class="card">', null, '</div>' ],
+						innerBlocks: [ [ 'core/test-block-a' ] ],
+					},
+				],
+			} );
+
+			const items = select( store ).getInserterItems();
+			const variationItem = items.find(
+				( item ) => item.id === 'core/html/card'
+			);
+
+			expect( variationItem.innerContent ).toEqual( [
+				'<div class="card">',
+				null,
+				'</div>',
+			] );
+
+			// Replicate how `useBlockTypesState` builds the block on insert,
+			// to guard the full path from variation to created block.
+			const block = createBlock(
+				variationItem.name,
+				variationItem.initialAttributes,
+				createBlocksFromInnerBlocksTemplate(
+					variationItem.innerBlocks
+				),
+				variationItem.innerContent
+			);
+			expect( block.innerContent ).toEqual( [
+				'<div class="card">',
+				null,
+				'</div>',
+			] );
+			expect( block.innerBlocks ).toHaveLength( 1 );
+			expect( block.innerBlocks[ 0 ].name ).toBe( 'core/test-block-a' );
+
+			unregisterBlockType( 'core/html' );
+		} );
+
 		it( 'should correctly cache the return values', async () => {
 			await dispatch( store ).updateSettings( {
 				__experimentalReusableBlocks: [
@@ -4802,6 +4852,89 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'static inner content (Custom HTML block)', () => {
+		beforeEach( () => {
+			registerBlockType( 'core/html', {
+				apiVersion: 3,
+				save: () => null,
+				category: 'text',
+				title: 'Custom HTML',
+				icon: 'test',
+			} );
+		} );
+
+		afterEach( () => {
+			unregisterBlockType( 'core/html' );
+		} );
+
+		// The Custom HTML block parent with a child container, which has a
+		// child of its own. The direct child is fixed in place; the grandchild
+		// is regular, fully editable content.
+		const buildState = () => ( {
+			blocks: {
+				byClientId: new Map(
+					Object.entries( {
+						parent: { name: 'core/html' },
+						child: { name: 'core/test-block-b' },
+						grandchild: { name: 'core/test-block-b' },
+					} )
+				),
+				attributes: new Map(
+					Object.entries( {
+						parent: {},
+						child: {},
+						grandchild: {},
+					} )
+				),
+				parents: new Map(
+					Object.entries( {
+						parent: '',
+						child: 'parent',
+						grandchild: 'child',
+					} )
+				),
+				order: new Map( [
+					[ '', [ 'parent' ] ],
+					[ 'parent', [ 'child' ] ],
+					[ 'child', [ 'grandchild' ] ],
+				] ),
+				blockEditingModes: new Map(),
+			},
+			blockListSettings: new Map( [
+				[ 'parent', {} ],
+				[ 'child', {} ],
+			] ),
+			settings: {},
+			derivedBlockEditingModes: new Map(),
+		} );
+
+		it( 'prevents removing a direct child', () => {
+			expect( canRemoveBlock( buildState(), 'child' ) ).toBe( false );
+		} );
+
+		it( 'prevents moving a direct child', () => {
+			expect( canMoveBlock( buildState(), 'child' ) ).toBe( false );
+		} );
+
+		it( 'prevents insertion into the inner content root', () => {
+			expect(
+				canInsertBlockType(
+					buildState(),
+					'core/test-block-b',
+					'parent'
+				)
+			).toBe( false );
+		} );
+
+		it( 'does not cascade to deeper descendants', () => {
+			expect( canRemoveBlock( buildState(), 'grandchild' ) ).toBe( true );
+			expect( canMoveBlock( buildState(), 'grandchild' ) ).toBe( true );
+			expect(
+				canInsertBlockType( buildState(), 'core/test-block-b', 'child' )
+			).toBe( true );
+		} );
+	} );
+
 	describe( 'canMoveBlock', () => {
 		it( 'allows moving within a non-section contentOnly container', () => {
 			// When the parent has contentOnly editing mode but is NOT

package/src/style.scss

@@ -30,6 +30,7 @@
 @use "./components/border-radius-control/style.scss" as *;
 @use "./components/colors-gradients/style.scss" as *;
 @use "./components/date-format-picker/style.scss" as *;
+@use "./components/dimension-control/style.scss" as *;
 @use "./components/duotone-control/style.scss" as *;
 @use "./components/fit-text-size-warning/style.scss" as *;
 @use "./components/font-appearance-control/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/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 );
+	} );
+} );

package/build/components/rich-text/input-event.cjs

@@ -1,50 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/block-editor/src/components/rich-text/input-event.js
-var input_event_exports = {};
-__export(input_event_exports, {
-  RichTextInputEvent: () => RichTextInputEvent
-});
-module.exports = __toCommonJS(input_event_exports);
-var import_element = require("@wordpress/element");
-var import__ = require("./index.cjs");
-function RichTextInputEvent({ inputType, onInput }) {
-  const callbacks = (0, import_element.useContext)(import__.inputEventContext);
-  const onInputRef = (0, import_element.useRef)();
-  onInputRef.current = onInput;
-  (0, import_element.useEffect)(() => {
-    function callback(event) {
-      if (event.inputType === inputType) {
-        onInputRef.current();
-        event.preventDefault();
-      }
-    }
-    callbacks.current.add(callback);
-    return () => {
-      callbacks.current.delete(callback);
-    };
-  }, [inputType]);
-  return null;
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  RichTextInputEvent
-});
-//# sourceMappingURL=input-event.cjs.map

package/build/components/rich-text/input-event.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/rich-text/input-event.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useContext, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { inputEventContext } from './';\n\nexport function RichTextInputEvent( { inputType, onInput } ) {\n\tconst callbacks = useContext( inputEventContext );\n\tconst onInputRef = useRef();\n\tonInputRef.current = onInput;\n\n\tuseEffect( () => {\n\t\tfunction callback( event ) {\n\t\t\tif ( event.inputType === inputType ) {\n\t\t\t\tonInputRef.current();\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\n\t\tcallbacks.current.add( callback );\n\t\treturn () => {\n\t\t\tcallbacks.current.delete( callback );\n\t\t};\n\t}, [ inputType ] );\n\n\treturn null;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAK9C,eAAkC;AAE3B,SAAS,mBAAoB,EAAE,WAAW,QAAQ,GAAI;AAC5D,QAAM,gBAAY,2BAAY,0BAAkB;AAChD,QAAM,iBAAa,uBAAO;AAC1B,aAAW,UAAU;AAErB,gCAAW,MAAM;AAChB,aAAS,SAAU,OAAQ;AAC1B,UAAK,MAAM,cAAc,WAAY;AACpC,mBAAW,QAAQ;AACnB,cAAM,eAAe;AAAA,MACtB;AAAA,IACD;AAEA,cAAU,QAAQ,IAAK,QAAS;AAChC,WAAO,MAAM;AACZ,gBAAU,QAAQ,OAAQ,QAAS;AAAA,IACpC;AAAA,EACD,GAAG,CAAE,SAAU,CAAE;AAEjB,SAAO;AACR;",
-  "names": []
-}