@wordpress/block-editor 15.21.0 → 15.22.1-next.v.202606191442.0

package/src/hooks/test/dimensions.js

@@ -1,6 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getBlockType,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
+import dimensions from '../dimensions';
 import { getDimensionsClassesAndStyles } from '../use-dimensions-props';
 
 describe( 'getDimensionsClassesAndStyles', () => {
@@ -126,3 +136,64 @@ describe( 'getDimensionsClassesAndStyles', () => {
 		} );
 	} );
 } );
+
+describe( 'useBlockProps', () => {
+	const blockName = 'test/dimensions-with-aspect-ratio';
+
+	afterEach( () => {
+		if ( getBlockType( blockName ) ) {
+			unregisterBlockType( blockName );
+		}
+	} );
+
+	const registerDimensionsBlock = () =>
+		registerBlockType( blockName, {
+			apiVersion: 3,
+			title: 'Dimensions with aspect ratio',
+			category: 'text',
+			supports: {
+				dimensions: {
+					aspectRatio: true,
+				},
+			},
+		} );
+
+	it( 'unsets height styles when aspect ratio is explicit', () => {
+		registerDimensionsBlock();
+
+		expect(
+			dimensions.useBlockProps( {
+				name: blockName,
+				style: {
+					dimensions: {
+						aspectRatio: '16/9',
+					},
+				},
+			} )
+		).toEqual( {
+			className: 'has-aspect-ratio',
+			style: {
+				minHeight: 'unset',
+				height: 'unset',
+			},
+		} );
+	} );
+
+	it( 'does not unset height styles when aspect ratio is the default', () => {
+		registerDimensionsBlock();
+
+		expect(
+			dimensions.useBlockProps( {
+				name: blockName,
+				style: {
+					dimensions: {
+						aspectRatio: 'auto',
+					},
+				},
+			} )
+		).toEqual( {
+			className: '',
+			style: {},
+		} );
+	} );
+} );

package/src/hooks/test/layout-child.js

@@ -0,0 +1,165 @@
+/**
+ * Internal dependencies
+ */
+import { getChildLayoutStyleRules } from '../layout-child';
+
+describe( 'layout child', () => {
+	describe( 'getChildLayoutStyleRules()', () => {
+		it( 'preserves legacy fixed sizing as shrinkable max width', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixed',
+						flexSize: '320px',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': '320px',
+						'box-sizing': 'border-box',
+					},
+				},
+			] );
+		} );
+
+		it( 'adds flex-shrink for fixedNoShrink sizing', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixedNoShrink',
+						flexSize: '320px',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': '320px',
+						'flex-shrink': '0',
+						'box-sizing': 'border-box',
+					},
+				},
+			] );
+		} );
+
+		it( 'allows viewport overrides to switch fixedNoShrink to max', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixedNoShrink',
+						flexSize: '320px',
+					},
+					viewportOverrides: {
+						selfStretch: 'fixed',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': '320px',
+						'flex-shrink': 'unset',
+						'box-sizing': 'border-box',
+					},
+				},
+			] );
+		} );
+
+		it( 'allows viewport overrides to switch fixedNoShrink to fit', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixedNoShrink',
+						flexSize: '320px',
+					},
+					viewportOverrides: {
+						selfStretch: 'fit',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': 'unset',
+						'flex-shrink': 'unset',
+					},
+				},
+			] );
+		} );
+
+		it( 'allows viewport overrides to switch fixed to fit', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixed',
+						flexSize: '320px',
+					},
+					viewportOverrides: {
+						selfStretch: 'fit',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': 'unset',
+					},
+				},
+			] );
+		} );
+
+		it( 'allows viewport overrides to switch fixedNoShrink to grow', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixedNoShrink',
+						flexSize: '320px',
+					},
+					viewportOverrides: {
+						selfStretch: 'fill',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': 'unset',
+						'flex-shrink': 'unset',
+						'flex-grow': '1',
+					},
+				},
+			] );
+		} );
+
+		it( 'allows viewport overrides to switch fixed to grow', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixed',
+						flexSize: '320px',
+					},
+					viewportOverrides: {
+						selfStretch: 'fill',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': 'unset',
+						'flex-grow': '1',
+					},
+				},
+			] );
+		} );
+	} );
+} );

package/src/hooks/test/style.js

@@ -208,6 +208,98 @@ describe( 'getStateStylesCSS', () => {
 			'.wp-block-test:hover { border-top-color: #0000ff !important; }\n.wp-block-test:hover { border-top-style: solid; }'
 		);
 	} );
+
+	it( 'adds background-image reset when state sets solid background-color', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					color: {
+						background: '#ff0000',
+					},
+				},
+				'.wp-block-test:hover'
+			)
+		).toBe(
+			'.wp-block-test:hover { background-color: #ff0000 !important; }\n.wp-block-test:hover { background-image: unset !important; }'
+		);
+	} );
+
+	it( 'does not add background-image reset when state also sets a legacy gradient', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					color: {
+						background: '#ff0000',
+						gradient: 'linear-gradient(135deg, #ff0000, #0000ff)',
+					},
+				},
+				'.wp-block-test:hover'
+			)
+		).toBe(
+			'.wp-block-test:hover { background: linear-gradient(135deg, #ff0000, #0000ff) !important; background-color: #ff0000 !important; }'
+		);
+	} );
+
+	it( 'does not add background-image reset when state also sets a modern gradient', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					color: {
+						background: '#ff0000',
+					},
+					background: {
+						gradient: 'linear-gradient(135deg, #ff0000, #0000ff)',
+					},
+				},
+				'.wp-block-test:hover'
+			)
+		).toBe(
+			'.wp-block-test:hover { background-color: #ff0000 !important; background-image: linear-gradient(135deg, #ff0000, #0000ff) !important; }'
+		);
+	} );
+
+	it( 'adds important fallback dimensions when aspect ratio is set', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					dimensions: {
+						aspectRatio: '16/9',
+					},
+				},
+				'.wp-block-test'
+			)
+		).toBe(
+			'.wp-block-test { height: unset !important; min-height: unset !important; aspect-ratio: 16/9 !important; }'
+		);
+	} );
+
+	it( 'does not add fallback dimensions when aspect ratio is the default', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					dimensions: {
+						aspectRatio: 'auto',
+					},
+				},
+				'.wp-block-test'
+			)
+		).toBe( '.wp-block-test { aspect-ratio: auto !important; }' );
+	} );
+
+	it( 'adds important fallback aspect ratio when height is set', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					dimensions: {
+						height: '20rem',
+					},
+				},
+				'.wp-block-test'
+			)
+		).toBe(
+			'.wp-block-test { height: 20rem !important; aspect-ratio: unset !important; }'
+		);
+	} );
 } );
 
 describe( 'getBlockStateStylesCSS', () => {
@@ -247,7 +339,7 @@ describe( 'getBlockStateStylesCSS', () => {
 				}
 			)
 		).toBe(
-			'.wp-elements-abc123 .wp-block-button__link:hover { background-color: #ff00d0 !important; }\n.wp-elements-abc123:hover { width: 50% !important; }'
+			'.wp-elements-abc123 .wp-block-button__link:hover { background-color: #ff00d0 !important; }\n.wp-elements-abc123 .wp-block-button__link:hover { background-image: unset !important; }\n.wp-elements-abc123:hover { width: 50% !important; }'
 		);
 	} );
 
@@ -264,7 +356,7 @@ describe( 'getBlockStateStylesCSS', () => {
 				}
 			)
 		).toBe(
-			'[data-block="client-id"] .wp-block-button__link { background-color: #ff00d0 !important; }\n[data-block="client-id"] { width: 50% !important; }'
+			'[data-block="client-id"] .wp-block-button__link { background-color: #ff00d0 !important; }\n[data-block="client-id"] .wp-block-button__link { background-image: unset !important; }\n[data-block="client-id"] { width: 50% !important; }'
 		);
 	} );
 } );
@@ -286,10 +378,24 @@ describe( 'getResponsiveStateCSSRules', () => {
 				},
 			},
 		} );
+
+		registerBlockType( 'test/state-image', {
+			apiVersion: 3,
+			title: 'State Image',
+			category: 'media',
+			attributes: {},
+			edit: () => null,
+			save: () => null,
+			selectors: {
+				root: '.wp-block-test-state-image',
+				dimensions: '.wp-block-test-state-image img',
+			},
+		} );
 	} );
 
 	afterEach( () => {
 		unregisterBlockType( 'test/state-button' );
+		unregisterBlockType( 'test/state-image' );
 	} );
 
 	it( 'generates media-query scoped root styles for viewport states', () => {
@@ -321,7 +427,23 @@ describe( 'getResponsiveStateCSSRules', () => {
 				'.wp-elements-1'
 			)
 		).toEqual( [
-			'@media (width <= 480px){.wp-elements-1 .wp-block-button__link { background-color: #ff00d0 !important; }\n.wp-elements-1 { width: 50% !important; }}',
+			'@media (width <= 480px){.wp-elements-1 .wp-block-button__link { background-color: #ff00d0 !important; }\n.wp-elements-1 .wp-block-button__link { background-image: unset !important; }\n.wp-elements-1 { width: 50% !important; }}',
+		] );
+	} );
+
+	it( 'outputs explicit fill object fit for viewport states', () => {
+		expect(
+			getResponsiveStateCSSRules(
+				{
+					mobile: {
+						dimensions: { objectFit: 'fill' },
+					},
+				},
+				'test/state-image',
+				'.wp-elements-1'
+			)
+		).toEqual( [
+			'@media (width <= 480px){.wp-elements-1 img { object-fit: fill !important; }}',
 		] );
 	} );
 
@@ -339,7 +461,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 				'.wp-elements-1'
 			)
 		).toEqual( [
-			'@media (width <= 480px){.wp-elements-1:hover { background-color: black !important; }}',
+			'@media (width <= 480px){.wp-elements-1:hover { background-color: black !important; }\n.wp-elements-1:hover { background-image: unset !important; }}',
 		] );
 	} );
 

package/src/private-apis.js

@@ -16,6 +16,11 @@ import { PrivateListView } from './components/list-view';
 import InspectorControlsLastItem from './components/inspector-controls/last-item';
 import { useHasBlockToolbar } from './components/block-toolbar/use-has-block-toolbar';
 import { cleanEmptyObject, usePrivateStyleOverride } from './hooks/utils';
+import {
+	getStyleForState,
+	isDefaultBlockStyleState,
+	setStyleForState,
+} from './hooks/block-style-state';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
 import BlockManager from './components/block-manager';
@@ -98,6 +103,9 @@ lock( privateApis, {
 	InspectorControlsLastItem,
 	useHasBlockToolbar,
 	cleanEmptyObject,
+	getStyleForState,
+	isDefaultBlockStyleState,
+	setStyleForState,
 	usePrivateStyleOverride,
 	BlockQuickNavigation,
 	LayoutStyle,

package/src/store/actions.js

@@ -822,6 +822,8 @@ export const __unstableDeleteSelection =
 					...targetBlock.attributes,
 					...updatedAttributes,
 				},
+				// Block A's inner blocks sit inside the selection; only B's survive.
+				innerBlocks: blockB.innerBlocks,
 			},
 			...( isForward ? [] : blocksWithTheSameType ),
 		];
@@ -1646,12 +1648,20 @@ export function __unstableMarkLastChangeAsPersistent() {
 }
 
 /**
- * Action that signals that the next block change should be marked explicitly as not persistent.
+ * Action that signals that the next block change should be marked explicitly
+ * as not persistent.
  *
+ * By default, non-persistent changes may still merge into undo history. Use
+ * `history: 'ignore'` for derived changes that should never be captured by undo.
+ *
+ * @param {Object} options         Options object.
+ * @param {string} options.history How the change should interact with history.
  * @return {Object} Action object.
  */
-export function __unstableMarkNextChangeAsNotPersistent() {
-	return { type: 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT' };
+export function __unstableMarkNextChangeAsNotPersistent( {
+	history = 'merge',
+} = {} ) {
+	return { type: 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT', history };
 }
 
 /**

package/src/store/private-actions.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { Platform } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
@@ -56,9 +55,7 @@ export function __experimentalUpdateSettings(
 
 	let cleanSettings = incomingSettings;
 
-	// There are no plugins in the mobile apps, so there is no
-	// need to strip the experimental settings:
-	if ( stripExperimentalSettings && Platform.OS === 'web' ) {
+	if ( stripExperimentalSettings ) {
 		cleanSettings = {};
 		for ( const key in incomingSettings ) {
 			if ( ! privateSettings.includes( key ) ) {

package/src/store/private-selectors.js

@@ -14,6 +14,7 @@ import {
 	getBlockOrder,
 	getBlockParents,
 	getBlockEditingMode,
+	getBlockListSettings,
 	getSettings,
 	canInsertBlockType,
 	getBlockName,
@@ -116,6 +117,48 @@ export function isContainerInsertableToInContentOnlyMode(
 	);
 }
 
+function getClientIdWithClientIdsTreeUnmemoized( state, clientId ) {
+	return {
+		clientId,
+		innerBlocks: getClientIdsTreeUnmemoized( state, clientId ),
+	};
+}
+
+function getClientIdsTreeUnmemoized( state, rootClientId = '' ) {
+	return getBlockOrder( state, rootClientId ).map( ( clientId ) =>
+		getClientIdWithClientIdsTreeUnmemoized( state, clientId )
+	);
+}
+
+/**
+ * Returns a stripped down block object containing only its client ID,
+ * and its inner blocks' client IDs.
+ *
+ * @param {Object} state    Editor state.
+ * @param {string} clientId Client ID of the block to get.
+ *
+ * @return {Object} Client IDs of the post blocks.
+ */
+export const getClientIdWithClientIdsTree = createSelector(
+	getClientIdWithClientIdsTreeUnmemoized,
+	( state ) => [ state.blocks.order ]
+);
+
+/**
+ * Returns the block tree represented in the block-editor store from the
+ * given root, consisting of stripped down block objects containing only
+ * their client IDs, and their inner blocks' client IDs.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {Object[]} Client IDs of the post blocks.
+ */
+export const getClientIdsTree = createSelector(
+	getClientIdsTreeUnmemoized,
+	( state ) => [ state.blocks.order ]
+);
+
 function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
 	const blockOrder = getBlockOrder( state, rootClientId );
 	const result = [];
@@ -1035,6 +1078,52 @@ export function getListViewExpandRevision( state ) {
 	return state.listViewExpandRevision || 0;
 }
 
+/**
+ * Returns whether a block instance participates in List View-specific UI for
+ * its inner blocks.
+ *
+ * Intentionally private: this is the derived participation logic (block type
+ * `listView` support and the `core/navigation` special case) shared by the List
+ * View consumers. A `listView`-supporting block drops out when it has no inner
+ * blocks and its `allowedBlocks` (`[]` or `false`) permits no block: the nested
+ * List View panel would render no rows and no appender, so it is hidden rather
+ * than shown empty. This is a signal, not a guarantee — a child naming this
+ * block as its `parent` stays insertable regardless (see `canInsertBlockType`);
+ * that edge case is accepted to keep the check cheap. Keeping the read internal
+ * lets this computation evolve without a back-compat commitment.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client ID of the block.
+ *
+ * @return {boolean} Whether the block participates in List View-specific UI.
+ */
+export function shouldRenderBlockListView( state, clientId ) {
+	const blockName = getBlockName( state, clientId );
+
+	// The navigation block always participates; its List View is core to how it
+	// is edited, regardless of how its menu is locked or populated.
+	if ( blockName === 'core/navigation' ) {
+		return true;
+	}
+
+	if ( ! hasBlockSupport( blockName, 'listView' ) ) {
+		return false;
+	}
+
+	// `allowedBlocks` permits no block when it is `[]` or `false`; an unset value
+	// is unrestricted and is intentionally not matched.
+	const allowedBlocks = getBlockListSettings(
+		state,
+		clientId
+	)?.allowedBlocks;
+	const isEmptyAndNoAllowedBlocks =
+		getBlockOrder( state, clientId ).length === 0 &&
+		( allowedBlocks === false ||
+			( Array.isArray( allowedBlocks ) && allowedBlocks.length === 0 ) );
+
+	return ! isEmptyAndNoAllowedBlocks;
+}
+
 /**
  * Returns the client IDs for the viewport modal, or null if
  * the modal is not open.

package/src/store/reducer.js

@@ -419,18 +419,20 @@ const withBlockTree =
  */
 function withPersistentBlockChange( reducer ) {
 	let lastAction;
-	let markNextChangeAsNotPersistent = false;
+	let nextHistoryMode;
 
 	return ( state, action ) => {
 		const nextState = reducer( state, action );
 
-		const wasMarkedAsNotPersistent = markNextChangeAsNotPersistent;
-		markNextChangeAsNotPersistent =
-			action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT';
+		const pendingHistoryMode = nextHistoryMode;
+		nextHistoryMode =
+			action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT'
+				? action.history ?? 'merge'
+				: undefined;
 
 		const isExplicitPersistentChange =
 			action.type === 'MARK_LAST_CHANGE_AS_PERSISTENT' ||
-			wasMarkedAsNotPersistent;
+			pendingHistoryMode;
 
 		// Defer to previous state value (or default) unless changing or
 		// explicitly marking as persistent.
@@ -442,7 +444,7 @@ function withPersistentBlockChange( reducer ) {
 		}
 
 		const isPersistentChange = isExplicitPersistentChange
-			? ! wasMarkedAsNotPersistent
+			? ! pendingHistoryMode
 			: ! isUpdatingSameBlockAttribute( action, lastAction );
 
 		// In comparing against the previous action, consider only those which
@@ -450,7 +452,17 @@ function withPersistentBlockChange( reducer ) {
 		// have resulted in a changed state.
 		lastAction = action;
 
-		return { ...nextState, isPersistentChange };
+		if ( pendingHistoryMode === 'ignore' ) {
+			return {
+				...nextState,
+				isPersistentChange,
+				lastBlockChangeHistoryMode: 'ignore',
+			};
+		}
+
+		const { lastBlockChangeHistoryMode, ...blockChange } = nextState;
+
+		return { ...blockChange, isPersistentChange };
 	};
 }