@wordpress/block-editor 9.2.0 → 9.5.0

package/src/components/block-context/index.js

@@ -25,10 +25,10 @@ const Context = createContext( {} );
  */
 export function BlockContextProvider( { value, children } ) {
 	const context = useContext( Context );
-	const nextValue = useMemo( () => ( { ...context, ...value } ), [
-		context,
-		value,
-	] );
+	const nextValue = useMemo(
+		() => ( { ...context, ...value } ),
+		[ context, value ]
+	);
 
 	return <Context.Provider value={ nextValue } children={ children } />;
 }

package/src/components/block-controls/hook.js

@@ -17,9 +17,8 @@ export default function useBlockControlsFill( group, shareWithChildBlocks ) {
 	const { clientId } = useBlockEditContext();
 	const isParentDisplayed = useSelect(
 		( select ) => {
-			const { getBlockName, hasSelectedInnerBlock } = select(
-				blockEditorStore
-			);
+			const { getBlockName, hasSelectedInnerBlock } =
+				select( blockEditorStore );
 			const { hasBlockSupport } = select( blocksStore );
 			return (
 				shareWithChildBlocks &&

package/src/components/block-draggable/index.js

@@ -22,11 +22,8 @@ const BlockDraggable = ( {
 } ) => {
 	const { srcRootClientId, isDraggable, icon } = useSelect(
 		( select ) => {
-			const {
-				canMoveBlocks,
-				getBlockRootClientId,
-				getBlockName,
-			} = select( blockEditorStore );
+			const { canMoveBlocks, getBlockRootClientId, getBlockName } =
+				select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 			const blockName = getBlockName( clientIds[ 0 ] );
 
@@ -39,15 +36,11 @@ const BlockDraggable = ( {
 		[ clientIds ]
 	);
 	const isDragging = useRef( false );
-	const [
-		startScrolling,
-		scrollOnDragOver,
-		stopScrolling,
-	] = useScrollWhenDragging();
+	const [ startScrolling, scrollOnDragOver, stopScrolling ] =
+		useScrollWhenDragging();
 
-	const { startDraggingBlocks, stopDraggingBlocks } = useDispatch(
-		blockEditorStore
-	);
+	const { startDraggingBlocks, stopDraggingBlocks } =
+		useDispatch( blockEditorStore );
 
 	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {

package/src/components/block-draggable/index.native.js

@@ -71,11 +71,8 @@ const DEFAULT_IOS_LONG_PRESS_MIN_DURATION =
 const BlockDraggableWrapper = ( { children, isRTL } ) => {
 	const [ draggedBlockIcon, setDraggedBlockIcon ] = useState();
 
-	const {
-		selectBlock,
-		startDraggingBlocks,
-		stopDraggingBlocks,
-	} = useDispatch( blockEditorStore );
+	const { selectBlock, startDraggingBlocks, stopDraggingBlocks } =
+		useDispatch( blockEditorStore );
 
 	const { scrollRef } = useBlockListContext();
 	const animatedScrollRef = useAnimatedRef();
@@ -112,12 +109,8 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 		draggingScrollHandler( event );
 	};
 
-	const {
-		onBlockDragOver,
-		onBlockDragEnd,
-		onBlockDrop,
-		targetBlockIndex,
-	} = useBlockDropZone();
+	const { onBlockDragOver, onBlockDragEnd, onBlockDrop, targetBlockIndex } =
+		useBlockDropZone();
 
 	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {
@@ -316,9 +309,8 @@ const BlockDraggable = ( {
 } ) => {
 	const wasBeingDragged = useRef( false );
 	const [ isEditingText, setIsEditingText ] = useState( false );
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
-		false
-	);
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
 
 	const draggingAnimation = {
 		opacity: useSharedValue( 1 ),

package/src/components/block-draggable/test/helpers.native.js

@@ -7,7 +7,7 @@ import {
 	initializeEditor,
 	waitForStoreResolvers,
 	within,
-	advanceAnimationByFrame,
+	advanceAnimationByFrames,
 } from 'test/helpers';
 import { fireGestureHandler } from 'react-native-gesture-handler/jest-utils';
 import { State } from 'react-native-gesture-handler';
@@ -135,7 +135,7 @@ export const fireLongPress = (
 	}
 	// Advance timers one frame to ensure that shared values
 	// are updated and trigger animation reactions.
-	act( () => advanceAnimationByFrame( 1 ) );
+	act( () => advanceAnimationByFrames( 1 ) );
 };
 
 /**
@@ -162,7 +162,7 @@ export const firePanGesture = (
 	] );
 	// Advance timers one frame to ensure that shared values
 	// are updated and trigger animation reactions.
-	act( () => advanceAnimationByFrame( 1 ) );
+	act( () => advanceAnimationByFrames( 1 ) );
 };
 
 /**

package/src/components/block-draggable/test/index.native.js

@@ -192,9 +192,8 @@ describe( 'BlockDraggable', () => {
 					const paragraphBlock = getByA11yLabel(
 						/Paragraph Block\. Row 1/
 					);
-					const spacerBlock = getByA11yLabel(
-						/Spacer Block\. Row 3/
-					);
+					const spacerBlock =
+						getByA11yLabel( /Spacer Block\. Row 3/ );
 
 					// Select Paragraph block and start editing text
 					fireEvent.press( paragraphBlock );
@@ -222,9 +221,8 @@ describe( 'BlockDraggable', () => {
 
 					// We select the first Image block as the Gallery block
 					// also contains Image blocks.
-					const imageBlock = getAllByA11yLabel(
-						/Image Block\. Row 2/
-					)[ 0 ];
+					const imageBlock =
+						getAllByA11yLabel( /Image Block\. Row 2/ )[ 0 ];
 					// Start dragging from block's content
 					fireLongPress( imageBlock, 'draggable-trigger-content' );
 					expect( getDraggableChip( screen ) ).toBeVisible();
@@ -246,9 +244,8 @@ describe( 'BlockDraggable', () => {
 
 					// We select the first Image block as the Gallery block
 					// also contains Image blocks.
-					const imageBlock = getAllByA11yLabel(
-						/Image Block\. Row 2/
-					)[ 0 ];
+					const imageBlock =
+						getAllByA11yLabel( /Image Block\. Row 2/ )[ 0 ];
 					fireEvent.press( imageBlock );
 
 					// Start dragging from block's content
@@ -339,9 +336,10 @@ describe( 'BlockDraggable', () => {
 					const galleryBlock = getByA11yLabel(
 						/Gallery Block\. Row 4/
 					);
-					const galleryItem = within( galleryBlock ).getByA11yLabel(
-						/Image Block\. Row 2/
-					);
+					const galleryItem =
+						within( galleryBlock ).getByA11yLabel(
+							/Image Block\. Row 2/
+						);
 					fireEvent.press( galleryBlock );
 					fireEvent.press( galleryItem );
 
@@ -396,9 +394,8 @@ describe( 'BlockDraggable', () => {
 						'block-draggable-wrapper'
 					);
 
-					const spacerBlock = getByA11yLabel(
-						/Spacer Block\. Row 3/
-					);
+					const spacerBlock =
+						getByA11yLabel( /Spacer Block\. Row 3/ );
 					await waitForStoreResolvers( () =>
 						fireEvent.press( spacerBlock )
 					);

package/src/components/block-edit/test/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { shallow, mount } from 'enzyme';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,6 +18,8 @@ import {
 import { Edit } from '../edit';
 import { BlockContextProvider } from '../../block-context';
 
+const noop = () => {};
+
 describe( 'Edit', () => {
 	afterEach( () => {
 		getBlockTypes().forEach( ( block ) => {

package/src/components/block-list/block-invalid-warning.native.js

@@ -1,27 +1,62 @@
+/**
+ * External dependencies
+ */
+import { TouchableWithoutFeedback } from 'react-native';
+
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import Warning from '../warning';
+import { store as blockEditorStore } from '../../store';
 
-export default function BlockInvalidWarning( { blockTitle, icon } ) {
+export default function BlockInvalidWarning( { blockTitle, icon, clientId } ) {
 	const accessibilityLabel = sprintf(
 		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
 		__( '%s block. This block has invalid content' ),
 		blockTitle
 	);
 
+	const selector = ( select ) => {
+		const { getBlock } = select( blockEditorStore );
+		const block = getBlock( clientId );
+		return {
+			block,
+		};
+	};
+
+	const { block } = useSelect( selector, [ clientId ] );
+
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
+	const recoverBlock = ( { name, attributes, innerBlocks } ) =>
+		createBlock( name, attributes, innerBlocks );
+
+	const attemptBlockRecovery = () => {
+		replaceBlock( block.clientId, recoverBlock( block ) );
+	};
+
 	return (
-		<Warning
-			title={ blockTitle }
-			message={ __( 'Problem displaying block' ) }
-			icon={ icon }
+		<TouchableWithoutFeedback
+			onPress={ attemptBlockRecovery }
 			accessible={ true }
-			accessibilityLabel={ accessibilityLabel }
-		/>
+			accessibilityRole={ 'button' }
+		>
+			<Warning
+				title={ blockTitle }
+				// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
+				message={ __(
+					'Problem displaying block. \nTap to attempt block recovery.'
+				) }
+				icon={ icon }
+				accessibilityLabel={ accessibilityLabel }
+			/>
+		</TouchableWithoutFeedback>
 	);
 }

package/src/components/block-list/block-list-item.native.js

@@ -37,12 +37,8 @@ export class BlockListItem extends Component {
 			parentWidth,
 			blockWidth,
 		} = this.props;
-		const {
-			isFullWidth,
-			isWideWidth,
-			isWider,
-			isContainerRelated,
-		} = alignmentHelpers;
+		const { isFullWidth, isWideWidth, isWider, isContainerRelated } =
+			alignmentHelpers;
 
 		if ( isFullWidth( blockAlignment ) ) {
 			if ( ! hasParents ) {
@@ -83,12 +79,8 @@ export class BlockListItem extends Component {
 	}
 
 	getContentStyles( readableContentViewStyle ) {
-		const {
-			blockAlignment,
-			blockName,
-			hasParents,
-			parentBlockName,
-		} = this.props;
+		const { blockAlignment, blockName, hasParents, parentBlockName } =
+			this.props;
 		const { isFullWidth, isContainerRelated } = alignmentHelpers;
 
 		return [

package/src/components/block-list/block-selection-button.native.js

@@ -81,9 +81,8 @@ const BlockSelectionButton = ( {
 
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
-		const { getBlockRootClientId, getBlockName, getSettings } = select(
-			blockEditorStore
-		);
+		const { getBlockRootClientId, getBlockName, getSettings } =
+			select( blockEditorStore );
 		const rootClientId = getBlockRootClientId( clientId );
 
 		if ( ! rootClientId ) {

package/src/components/block-list/block.js

@@ -56,10 +56,10 @@ function mergeWrapperProps( propsA, propsB ) {
 		...propsB,
 	};
 
-	if ( propsA && propsB && propsA.className && propsB.className ) {
+	if ( propsA?.className && propsB?.className ) {
 		newProps.className = classnames( propsA.className, propsB.className );
 	}
-	if ( propsA && propsB && propsA.style && propsB.style ) {
+	if ( propsA?.style && propsB?.style ) {
 		newProps.style = { ...propsA.style, ...propsB.style };
 	}
 
@@ -269,10 +269,10 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 	// leaking new props to the public API (editor.BlockListBlock filter).
 	return {
 		setAttributes( newAttributes ) {
-			const { getMultiSelectedBlockClientIds } = select(
-				blockEditorStore
-			);
-			const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds();
+			const { getMultiSelectedBlockClientIds } =
+				select( blockEditorStore );
+			const multiSelectedBlockClientIds =
+				getMultiSelectedBlockClientIds();
 			const { clientId } = ownProps;
 			const clientIds = multiSelectedBlockClientIds.length
 				? multiSelectedBlockClientIds
@@ -292,9 +292,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 		},
 		onMerge( forward ) {
 			const { clientId } = ownProps;
-			const { getPreviousBlockClientId, getNextBlockClientId } = select(
-				blockEditorStore
-			);
+			const { getPreviousBlockClientId, getNextBlockClientId } =
+				select( blockEditorStore );
 
 			if ( forward ) {
 				const nextBlockClientId = getNextBlockClientId( clientId );
@@ -302,9 +301,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 					mergeBlocks( clientId, nextBlockClientId );
 				}
 			} else {
-				const previousBlockClientId = getPreviousBlockClientId(
-					clientId
-				);
+				const previousBlockClientId =
+					getPreviousBlockClientId( clientId );
 				if ( previousBlockClientId ) {
 					mergeBlocks( previousBlockClientId, clientId );
 				}

package/src/components/block-list/block.native.js

@@ -272,6 +272,7 @@ class BlockListBlock extends Component {
 									<BlockInvalidWarning
 										blockTitle={ title }
 										icon={ icon }
+										clientId={ clientId }
 									/>
 								)
 							}
@@ -347,9 +348,8 @@ export default compose( [
 
 		const selectedBlockClientId = getSelectedBlockClientId();
 
-		const commonAncestor = getLowestCommonAncestorWithSelectedBlock(
-			clientId
-		);
+		const commonAncestor =
+			getLowestCommonAncestorWithSelectedBlock( clientId );
 		const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1;
 		const firstToSelectId = commonAncestor
 			? parents[ commonAncestorIndex ]
@@ -363,16 +363,15 @@ export default compose( [
 		const selectedParents = selectedBlockClientId
 			? getBlockParents( selectedBlockClientId )
 			: [];
-		const isDescendantOfParentSelected = selectedParents.includes(
-			parentId
-		);
+		const isDescendantOfParentSelected =
+			selectedParents.includes( parentId );
 		const isTouchable =
 			isSelected ||
 			isDescendantOfParentSelected ||
 			isParentSelected ||
 			parentId === '';
-		const baseGlobalStyles = getSettings()
-			?.__experimentalGlobalStylesBaseStyles;
+		const baseGlobalStyles =
+			getSettings()?.__experimentalGlobalStylesBaseStyles;
 
 		const hasInnerBlocks = getBlockCount( clientId ) > 0;
 		// For blocks with inner blocks, we only enable the dragging in the nested
@@ -420,10 +419,8 @@ export default compose( [
 		return {
 			mergeBlocks( forward ) {
 				const { clientId } = ownProps;
-				const {
-					getPreviousBlockClientId,
-					getNextBlockClientId,
-				} = select( blockEditorStore );
+				const { getPreviousBlockClientId, getNextBlockClientId } =
+					select( blockEditorStore );
 
 				if ( forward ) {
 					const nextBlockClientId = getNextBlockClientId( clientId );
@@ -431,9 +428,8 @@ export default compose( [
 						mergeBlocks( clientId, nextBlockClientId );
 					}
 				} else {
-					const previousBlockClientId = getPreviousBlockClientId(
-						clientId
-					);
+					const previousBlockClientId =
+						getPreviousBlockClientId( clientId );
 					if ( previousBlockClientId ) {
 						mergeBlocks( previousBlockClientId, clientId );
 					}

package/src/components/block-list/index.js

@@ -36,9 +36,8 @@ function Root( { className, ...settings } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { isOutlineMode, isFocusMode, isNavigationMode } = useSelect(
 		( select ) => {
-			const { getSettings, isNavigationMode: _isNavigationMode } = select(
-				blockEditorStore
-			);
+			const { getSettings, isNavigationMode: _isNavigationMode } =
+				select( blockEditorStore );
 			const { outlineMode, focusMode } = getSettings();
 			return {
 				isOutlineMode: outlineMode,

package/src/components/block-list/index.native.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { identity } from 'lodash';
 import { View, Platform, TouchableWithoutFeedback } from 'react-native';
 
 /**
@@ -35,6 +34,7 @@ import { BlockDraggableWrapper } from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
 
 export const OnCaretVerticalPositionChange = createContext();
+const identity = ( x ) => x;
 
 const stylesMemo = {};
 const getStyles = (
@@ -70,22 +70,18 @@ export class BlockList extends Component {
 		};
 		this.renderItem = this.renderItem.bind( this );
 		this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
-		this.onCaretVerticalPositionChange = this.onCaretVerticalPositionChange.bind(
-			this
-		);
+		this.onCaretVerticalPositionChange =
+			this.onCaretVerticalPositionChange.bind( this );
 		this.scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
 		this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind( this );
-		this.shouldFlatListPreventAutomaticScroll = this.shouldFlatListPreventAutomaticScroll.bind(
-			this
-		);
-		this.shouldShowInnerBlockAppender = this.shouldShowInnerBlockAppender.bind(
-			this
-		);
+		this.shouldFlatListPreventAutomaticScroll =
+			this.shouldFlatListPreventAutomaticScroll.bind( this );
+		this.shouldShowInnerBlockAppender =
+			this.shouldShowInnerBlockAppender.bind( this );
 		this.renderEmptyList = this.renderEmptyList.bind( this );
 		this.getExtraData = this.getExtraData.bind( this );
-		this.getCellRendererComponent = this.getCellRendererComponent.bind(
-			this
-		);
+		this.getCellRendererComponent =
+			this.getCellRendererComponent.bind( this );
 
 		this.onLayout = this.onLayout.bind( this );
 
@@ -241,12 +237,8 @@ export class BlockList extends Component {
 		} = this.props;
 		const { parentScrollRef, onScroll } = extraProps;
 
-		const {
-			blockToolbar,
-			blockBorder,
-			headerToolbar,
-			floatingToolbar,
-		} = styles;
+		const { blockToolbar, blockBorder, headerToolbar, floatingToolbar } =
+			styles;
 
 		const containerStyle = {
 			flex: isRootList ? 1 : 0,
@@ -456,9 +448,8 @@ export default compose( [
 		}
 	),
 	withDispatch( ( dispatch ) => {
-		const { insertBlock, replaceBlock, clearSelectedBlock } = dispatch(
-			blockEditorStore
-		);
+		const { insertBlock, replaceBlock, clearSelectedBlock } =
+			dispatch( blockEditorStore );
 
 		return {
 			clearSelectedBlock,

package/src/components/block-list/layout.js

@@ -7,6 +7,7 @@ import { createContext, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import { getLayoutType } from '../../layouts';
+import useSetting from '../use-setting';
 
 export const defaultLayout = { type: 'default' };
 
@@ -24,12 +25,23 @@ export function useLayout() {
 	return useContext( Layout );
 }
 
-export function LayoutStyle( { layout = {}, ...props } ) {
+export function LayoutStyle( { layout = {}, css, ...props } ) {
 	const layoutType = getLayoutType( layout.type );
+	const blockGapSupport = useSetting( 'spacing.blockGap' );
+	const hasBlockGapSupport = blockGapSupport !== null;
 
 	if ( layoutType ) {
-		return <layoutType.save layout={ layout } { ...props } />;
+		if ( css ) {
+			return <style>{ css }</style>;
+		}
+		const layoutStyle = layoutType.getLayoutStyle?.( {
+			hasBlockGapSupport,
+			layout,
+			...props,
+		} );
+		if ( layoutStyle ) {
+			return <style>{ layoutStyle }</style>;
+		}
 	}
-
 	return null;
 }

package/src/components/block-list/style.scss

@@ -26,7 +26,7 @@
 	// When selecting multiple blocks, we provide an additional selection indicator.
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-hovered,
-	.block-editor-block-list__block.is-multi-selected:not([contenteditable]),
+	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected),
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
 		&::after {
@@ -293,7 +293,7 @@
 
 // Spotlight mode. Fade out blocks unless they contain a selected block.
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
-	opacity: 0.5;
+	opacity: 0.2;
 	transition: opacity 0.1s linear;
 	@include reduce-motion("transition");
 

package/src/components/block-list/test/block-list-context.native.js

@@ -139,10 +139,8 @@ describe( 'updateBlocksLayouts', () => {
 	} );
 
 	it( "adds a new block's layout data at root level with inner blocks", () => {
-		const {
-			findBlockLayoutByClientId,
-			updateBlocksLayouts,
-		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const { findBlockLayoutByClientId, updateBlocksLayouts } =
+			DEFAULT_BLOCK_LIST_CONTEXT;
 		const currentBlockLayouts = {
 			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
 		};
@@ -180,10 +178,8 @@ describe( 'updateBlocksLayouts', () => {
 	} );
 
 	it( "adds a new block's layout data at deep level", () => {
-		const {
-			findBlockLayoutByClientId,
-			updateBlocksLayouts,
-		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const { findBlockLayoutByClientId, updateBlocksLayouts } =
+			DEFAULT_BLOCK_LIST_CONTEXT;
 		const currentBlockLayouts = {
 			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
 		};
@@ -208,10 +204,8 @@ describe( 'updateBlocksLayouts', () => {
 	} );
 
 	it( "deletes a block's layout data at root level", () => {
-		const {
-			findBlockLayoutByClientId,
-			updateBlocksLayouts,
-		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const { findBlockLayoutByClientId, updateBlocksLayouts } =
+			DEFAULT_BLOCK_LIST_CONTEXT;
 		const currentBlockLayouts = {
 			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
 		};
@@ -230,10 +224,8 @@ describe( 'updateBlocksLayouts', () => {
 	} );
 
 	it( "deletes a block's layout data at a deep level", () => {
-		const {
-			findBlockLayoutByClientId,
-			updateBlocksLayouts,
-		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const { findBlockLayoutByClientId, updateBlocksLayouts } =
+			DEFAULT_BLOCK_LIST_CONTEXT;
 		const currentBlockLayouts = {
 			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
 		};

package/src/components/block-list/use-block-props/index.js

@@ -62,9 +62,12 @@ export function useBlockProps(
 	props = {},
 	{ __unstableIsHtml, __unstableIsDisabled = false } = {}
 ) {
-	const { clientId, className, wrapperProps = {}, isAligned } = useContext(
-		BlockListBlockContext
-	);
+	const {
+		clientId,
+		className,
+		wrapperProps = {},
+		isAligned,
+	} = useContext( BlockListBlockContext );
 	const {
 		index,
 		mode,

package/src/components/block-list/use-block-props/use-block-class-names.js

@@ -33,6 +33,7 @@ export function useBlockClassNames( clientId ) {
 				getSettings,
 				hasSelectedInnerBlock,
 				isTyping,
+				__unstableIsFullySelected,
 			} = select( blockEditorStore );
 			const { outlineMode } = getSettings();
 			const isDragging = isBlockBeingDragged( clientId );
@@ -44,10 +45,13 @@ export function useBlockClassNames( clientId ) {
 				clientId,
 				checkDeep
 			);
+			const isMultiSelected = isBlockMultiSelected( clientId );
 			return classnames( {
 				'is-selected': isSelected,
 				'is-highlighted': isBlockHighlighted( clientId ),
-				'is-multi-selected': isBlockMultiSelected( clientId ),
+				'is-multi-selected': isMultiSelected,
+				'is-partially-selected':
+					isMultiSelected && ! __unstableIsFullySelected(),
 				'is-reusable': isReusableBlock( getBlockType( name ) ),
 				'is-dragging': isDragging,
 				'has-child-selected': isAncestorOfSelectedBlock,