@wordpress/block-editor 15.21.0 → 15.21.1

package/src/hooks/anchor.js

@@ -5,7 +5,6 @@ import { addFilter } from '@wordpress/hooks';
 import { TextControl, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -53,8 +52,6 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 		return null;
 	}
 
-	const isWeb = Platform.OS === 'web';
-
 	return (
 		<InspectorControls group="advanced">
 			<TextControl
@@ -65,23 +62,18 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 					<>
 						{ __(
 							'Enter a word or two—without spaces—to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page.'
-						) }
-						{ isWeb && (
-							<>
-								{ ' ' }
-								<ExternalLink
-									href={ __(
-										'https://wordpress.org/documentation/article/page-jumps/'
-									) }
-								>
-									{ __( 'Learn more about anchors' ) }
-								</ExternalLink>
-							</>
-						) }
+						) }{ ' ' }
+						<ExternalLink
+							href={ __(
+								'https://wordpress.org/documentation/article/page-jumps/'
+							) }
+						>
+							{ __( 'Learn more about anchors' ) }
+						</ExternalLink>
 					</>
 				}
 				value={ anchor || '' }
-				placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
+				placeholder={ null }
 				onChange={ ( nextValue ) => {
 					nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
 					setAttributes( {

package/src/hooks/border.js

@@ -8,7 +8,7 @@ import clsx from 'clsx';
  */
 import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks';
 import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
-import { Platform, useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -217,10 +217,6 @@ export function BorderPanel( { clientId, name, setAttributes, settings } ) {
  * @return {boolean} Whether there is support.
  */
 export function hasBorderSupport( blockName, feature = 'any' ) {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
-
 	const support = getBlockSupport( blockName, BORDER_SUPPORT_KEY );
 
 	if ( support === true ) {

package/src/hooks/color.js

@@ -8,7 +8,7 @@ import clsx from 'clsx';
  */
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
-import { useMemo, Platform, useCallback } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -55,10 +55,6 @@ const hasColorSupport = ( blockNameOrType ) => {
 };
 
 const hasLinkColorSupport = ( blockType ) => {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
-
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 
 	return (
@@ -342,7 +338,6 @@ export function ColorEdit( {
 
 	const enableContrastChecking =
 		! isStateSelected &&
-		Platform.OS === 'web' &&
 		! value?.color?.gradient &&
 		( settings?.color?.text || settings?.color?.link ) &&
 		// Contrast checking is enabled by default.

package/src/hooks/dimensions.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { Platform, useState, useEffect, useCallback } from '@wordpress/element';
+import { useState, useEffect, useCallback } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
@@ -171,10 +171,6 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
  * @return {boolean} Whether there is support.
  */
 export function hasDimensionsSupport( blockName, feature = 'any' ) {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
-
 	const support = getBlockSupport( blockName, DIMENSIONS_SUPPORT_KEY );
 
 	if ( support === true ) {

package/src/hooks/fit-text.js

@@ -23,6 +23,7 @@ import { store as blockEditorStore } from '../store';
 import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 import InspectorControls from '../components/inspector-controls';
 import FitTextSizeWarning from '../components/fit-text-size-warning';
+import { unlock } from '../lock-unlock';
 
 export const FIT_TEXT_SUPPORT_KEY = 'typography.fitText';
 
@@ -248,9 +249,24 @@ export function FitTextControl( {
 	fontSize,
 	style,
 } ) {
+	const hasSelectedStyleState = useSelect(
+		( select ) => {
+			const { hasSelectedStyleState: hasSelectedBlockStyleState } =
+				unlock( select( blockEditorStore ) );
+
+			return hasSelectedBlockStyleState( clientId );
+		},
+		[ clientId ]
+	);
+
 	if ( ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
 		return null;
 	}
+
+	if ( hasSelectedStyleState ) {
+		return null;
+	}
+
 	return (
 		<ToolsPanelItem
 			hasValue={ () => fitText }

package/src/hooks/position.js

@@ -11,7 +11,7 @@ import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { BaseControl, CustomSelectControl } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useMemo, Platform } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -264,32 +264,28 @@ export function PositionPanelPure( {
 		: DEFAULT_OPTION;
 
 	// Only display position controls if there is at least one option to choose from.
-	return Platform.select( {
-		web:
-			options.length > 1 ? (
-				<InspectorControls group="position">
-					<BaseControl help={ stickyHelpText }>
-						<CustomSelectControl
-							__next40pxDefaultSize
-							label={ __( 'Position' ) }
-							hideLabelFromVision
-							describedBy={ sprintf(
-								// translators: %s: Currently selected position.
-								__( 'Currently selected position: %s' ),
-								selectedOption.name
-							) }
-							options={ options }
-							value={ selectedOption }
-							onChange={ ( { selectedItem } ) => {
-								onChangeType( selectedItem.value );
-							} }
-							size="__unstable-large"
-						/>
-					</BaseControl>
-				</InspectorControls>
-			) : null,
-		native: null,
-	} );
+	return options.length > 1 ? (
+		<InspectorControls group="position">
+			<BaseControl help={ stickyHelpText }>
+				<CustomSelectControl
+					__next40pxDefaultSize
+					label={ __( 'Position' ) }
+					hideLabelFromVision
+					describedBy={ sprintf(
+						// translators: %s: Currently selected position.
+						__( 'Currently selected position: %s' ),
+						selectedOption.name
+					) }
+					options={ options }
+					value={ selectedOption }
+					onChange={ ( { selectedItem } ) => {
+						onChangeType( selectedItem.value );
+					} }
+					size="__unstable-large"
+				/>
+			</BaseControl>
+		</InspectorControls>
+	) : null;
 }
 
 export default {

package/src/hooks/supports.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { Platform } from '@wordpress/element';
 
 const ALIGN_SUPPORT_KEY = 'align';
 const ALIGN_WIDE_SUPPORT_KEY = 'alignWide';
@@ -120,10 +119,6 @@ export const getAlignWideSupport = ( nameOrType ) =>
  * @return {boolean} Whether there is support.
  */
 export function hasBorderSupport( nameOrType, feature = 'any' ) {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
-
 	const support = getBlockSupport( nameOrType, BORDER_SUPPORT_KEY );
 
 	if ( support === true ) {
@@ -177,10 +172,6 @@ export const hasColorSupport = ( nameOrType ) => {
  * @return {boolean} Whether the block supports the feature.
  */
 export const hasLinkColorSupport = ( nameOrType ) => {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
-
 	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
 
 	return (

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

@@ -116,6 +116,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 = [];

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 };
 	};
 }
 

package/src/store/selectors.js

@@ -12,7 +12,6 @@ import {
 	store as blocksStore,
 	privateApis as blocksPrivateApis,
 } from '@wordpress/blocks';
-import { Platform } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { symbol } from '@wordpress/icons';
 import { create, remove, toHTMLString } from '@wordpress/rich-text';
@@ -44,6 +43,8 @@ import {
 	getParentSectionBlock,
 	isZoomOut,
 	isContainerInsertableToInContentOnlyMode,
+	getClientIdWithClientIdsTree,
+	getClientIdsTree,
 } from './private-selectors';
 
 const { isContentBlock } = unlock( blocksPrivateApis );
@@ -107,14 +108,6 @@ const DEFAULT_INSERTER_OPTIONS = {
  */
 export function getBlockName( state, clientId ) {
 	const block = state.blocks.byClientId.get( clientId );
-	const socialLinkName = 'core/social-link';
-
-	if ( Platform.OS !== 'web' && block?.name === socialLinkName ) {
-		const attributes = state.blocks.attributes.get( clientId );
-		const { service } = attributes ?? {};
-
-		return service ? `${ socialLinkName }-${ service }` : socialLinkName;
-	}
 	return block ? block.name : null;
 }
 
@@ -225,22 +218,16 @@ export function getBlocks( state, rootClientId ) {
  *
  * @return {Object} Client IDs of the post blocks.
  */
-export const __unstableGetClientIdWithClientIdsTree = createSelector(
-	( state, clientId ) => {
-		deprecated(
-			"wp.data.select( 'core/block-editor' ).__unstableGetClientIdWithClientIdsTree",
-			{
-				since: '6.3',
-				version: '6.5',
-			}
-		);
-		return {
-			clientId,
-			innerBlocks: __unstableGetClientIdsTree( state, clientId ),
-		};
-	},
-	( state ) => [ state.blocks.order ]
-);
+export function __unstableGetClientIdWithClientIdsTree( state, clientId ) {
+	deprecated(
+		"wp.data.select( 'core/block-editor' ).__unstableGetClientIdWithClientIdsTree",
+		{
+			since: '6.3',
+			version: '6.5',
+		}
+	);
+	return getClientIdWithClientIdsTree( state, clientId );
+}
 
 /**
  * Returns the block tree represented in the block-editor store from the
@@ -254,21 +241,16 @@ export const __unstableGetClientIdWithClientIdsTree = createSelector(
  *
  * @return {Object[]} Client IDs of the post blocks.
  */
-export const __unstableGetClientIdsTree = createSelector(
-	( state, rootClientId = '' ) => {
-		deprecated(
-			"wp.data.select( 'core/block-editor' ).__unstableGetClientIdsTree",
-			{
-				since: '6.3',
-				version: '6.5',
-			}
-		);
-		return getBlockOrder( state, rootClientId ).map( ( clientId ) =>
-			__unstableGetClientIdWithClientIdsTree( state, clientId )
-		);
-	},
-	( state ) => [ state.blocks.order ]
-);
+export function __unstableGetClientIdsTree( state, rootClientId ) {
+	deprecated(
+		"wp.data.select( 'core/block-editor' ).__unstableGetClientIdsTree",
+		{
+			since: '6.3',
+			version: '6.5',
+		}
+	);
+	return getClientIdsTree( state, rootClientId );
+}
 
 /**
  * Returns an array containing the clientIds of all descendants of the blocks
@@ -2303,6 +2285,19 @@ const buildBlockTypeItem =
 		};
 	};
 
+const buildBlockVariationItem = ( state, item ) => ( variation ) => {
+	const variationId = `${ item.id }/${ variation.name }`;
+	const { time, count = 0 } = getInsertUsage( state, variationId ) || {};
+	return {
+		...item,
+		id: variationId,
+		icon: variation.icon || item.icon,
+		title: variation.title || item.title,
+		frecency: calculateFrecency( time, count ),
+		variationName: variation.name,
+	};
+};
+
 /**
  * Determines the items that appear in the inserter. Includes both static
  * items (e.g. a regular block type) and dynamic items (e.g. a reusable block).
@@ -2483,20 +2478,21 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
  *
  * Items are returned ordered descendingly by their 'frecency'.
  *
- * @param    {Object}          state        Editor state.
- * @param    {Object|Object[]} blocks       Block object or array objects.
- * @param    {?string}         rootClientId Optional root client ID of block list.
+ * @param    {Object}          state         Editor state.
+ * @param    {Object|Object[]} blocks        Block object or array objects.
+ * @param    {?string}         rootClientId  Optional root client ID of block list.
  *
  * @return {WPEditorTransformItem[]} Items that appear in inserter.
  *
  * @typedef {Object} WPEditorTransformItem
- * @property {string}          id           Unique identifier for the item.
- * @property {string}          name         The type of block to create.
- * @property {string}          title        Title of the item, as it appears in the inserter.
- * @property {string}          icon         Dashicon for the item, as it appears in the inserter.
- * @property {boolean}         isDisabled   Whether or not the user should be prevented from inserting
- *                                          this item.
- * @property {number}          frecency     Heuristic that combines frequency and recency.
+ * @property {string}          id            Unique identifier for the item.
+ * @property {string}          name          The type of block to create.
+ * @property {?string}         variationName The target block variation name.
+ * @property {string}          title         Title of the item, as it appears in the inserter.
+ * @property {string}          icon          Dashicon for the item, as it appears in the inserter.
+ * @property {boolean}         isDisabled    Whether or not the user should be prevented from inserting
+ *                                           this item.
+ * @property {number}          frecency      Heuristic that combines frequency and recency.
  */
 export const getBlockTransformItems = createRegistrySelector( ( select ) =>
 	createSelector(
@@ -2526,14 +2522,37 @@ export const getBlockTransformItems = createRegistrySelector( ( select ) =>
 			const possibleTransforms = getPossibleBlockTransformations(
 				normalizedBlocks
 			).reduce( ( accumulator, block ) => {
-				if ( itemsByName[ block?.name ] ) {
-					accumulator.push( itemsByName[ block.name ] );
+				const item = itemsByName[ block?.name ];
+
+				if ( ! item ) {
+					return accumulator;
+				}
+
+				const { variationName } = block;
+
+				if ( ! variationName ) {
+					accumulator.push( item );
+					return accumulator;
+				}
+
+				const variation = getBlockVariations(
+					item.name,
+					'transform'
+				)?.find( ( { name } ) => name === variationName );
+
+				if ( ! variation ) {
+					accumulator.push( item );
+					return accumulator;
 				}
+
+				accumulator.push(
+					buildBlockVariationItem( state, item )( variation )
+				);
 				return accumulator;
 			}, [] );
 			return orderBy(
 				possibleTransforms,
-				( block ) => itemsByName[ block.name ].frecency,
+				( block ) => block.frecency,
 				'desc'
 			);
 		},
@@ -2902,6 +2921,25 @@ export function isLastBlockChangePersistent( state ) {
 	return state.blocks.isPersistentChange;
 }
 
+/**
+ * Returns how the most recent block change interacts with undo history.
+ *
+ * - `persistent` changes create a new undo level.
+ * - `merge` changes do not create a new undo level, but may merge into the
+ *    prior stack item history.
+ * - `ignore` changes should never be captured by undo history.
+ *
+ * @param {Object} state Block editor state.
+ *
+ * @return {'persistent'|'merge'|'ignore'} Block change history behavior.
+ */
+export function __unstableGetLastBlockChangeHistoryMode( state ) {
+	if ( state.blocks.lastBlockChangeHistoryMode ) {
+		return state.blocks.lastBlockChangeHistoryMode;
+	}
+	return state.blocks.isPersistentChange === false ? 'merge' : 'persistent';
+}
+
 /**
  * Returns the block list settings for an array of blocks, if any exist.
  *

package/src/store/test/actions.js

@@ -53,6 +53,7 @@ const {
 	updateBlockListSettings,
 	updateSettings,
 	validateBlocksToTemplate,
+	__unstableMarkNextChangeAsNotPersistent,
 	registerInserterMediaCategory,
 	setBlockEditingMode,
 	unsetBlockEditingMode,
@@ -814,6 +815,26 @@ describe( 'actions', () => {
 		} );
 	} );
 
+	describe( '__unstableMarkNextChangeAsNotPersistent', () => {
+		it( 'should use merge history by default', () => {
+			expect( __unstableMarkNextChangeAsNotPersistent() ).toEqual( {
+				type: 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT',
+				history: 'merge',
+			} );
+		} );
+
+		it( 'should allow ignoring history for the next change', () => {
+			expect(
+				__unstableMarkNextChangeAsNotPersistent( {
+					history: 'ignore',
+				} )
+			).toEqual( {
+				type: 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT',
+				history: 'ignore',
+			} );
+		} );
+	} );
+
 	describe( 'mergeBlocks', () => {
 		afterEach( () => {
 			getBlockTypes().forEach( ( block ) => {