@wordpress/block-editor 9.0.0 → 9.3.0

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { AsyncModeProvider, useSelect } from '@wordpress/data';
+import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data';
 import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
 import { createContext, useState, useMemo } from '@wordpress/element';
 
@@ -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,
@@ -48,6 +47,23 @@ function Root( { className, ...settings } ) {
 		},
 		[]
 	);
+	const { setBlockVisibility } = useDispatch( blockEditorStore );
+	const intersectionObserver = useMemo( () => {
+		const { IntersectionObserver: Observer } = window;
+
+		if ( ! Observer ) {
+			return;
+		}
+
+		return new Observer( ( entries ) => {
+			const updates = {};
+			for ( const entry of entries ) {
+				const clientId = entry.target.getAttribute( 'data-block' );
+				updates[ clientId ] = entry.isIntersecting;
+			}
+			setBlockVisibility( updates );
+		} );
+	}, [] );
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			ref: useMergeRefs( [
@@ -65,7 +81,9 @@ function Root( { className, ...settings } ) {
 	);
 	return (
 		<elementContext.Provider value={ element }>
-			<div { ...innerBlocksProps } />
+			<IntersectionObserver.Provider value={ intersectionObserver }>
+				<div { ...innerBlocksProps } />
+			</IntersectionObserver.Provider>
 		</elementContext.Provider>
 	);
 }
@@ -90,34 +108,17 @@ function Items( {
 	__experimentalAppenderTagName,
 	__experimentalLayout: layout = defaultLayout,
 } ) {
-	const [ intersectingBlocks, setIntersectingBlocks ] = useState( new Set() );
-	const intersectionObserver = useMemo( () => {
-		const { IntersectionObserver: Observer } = window;
-
-		if ( ! Observer ) {
-			return;
-		}
-
-		return new Observer( ( entries ) => {
-			setIntersectingBlocks( ( oldIntersectingBlocks ) => {
-				const newIntersectingBlocks = new Set( oldIntersectingBlocks );
-				for ( const entry of entries ) {
-					const clientId = entry.target.getAttribute( 'data-block' );
-					const action = entry.isIntersecting ? 'add' : 'delete';
-					newIntersectingBlocks[ action ]( clientId );
-				}
-				return newIntersectingBlocks;
-			} );
-		} );
-	}, [ setIntersectingBlocks ] );
-	const { order, selectedBlocks } = useSelect(
+	const { order, selectedBlocks, visibleBlocks } = useSelect(
 		( select ) => {
-			const { getBlockOrder, getSelectedBlockClientIds } = select(
-				blockEditorStore
-			);
+			const {
+				getBlockOrder,
+				getSelectedBlockClientIds,
+				__unstableGetVisibleBlocks,
+			} = select( blockEditorStore );
 			return {
 				order: getBlockOrder( rootClientId ),
 				selectedBlocks: getSelectedBlockClientIds(),
+				visibleBlocks: __unstableGetVisibleBlocks(),
 			};
 		},
 		[ rootClientId ]
@@ -125,24 +126,22 @@ function Items( {
 
 	return (
 		<LayoutProvider value={ layout }>
-			<IntersectionObserver.Provider value={ intersectionObserver }>
-				{ order.map( ( clientId ) => (
-					<AsyncModeProvider
-						key={ clientId }
-						value={
-							// Only provide data asynchronously if the block is
-							// not visible and not selected.
-							! intersectingBlocks.has( clientId ) &&
-							! selectedBlocks.includes( clientId )
-						}
-					>
-						<BlockListBlock
-							rootClientId={ rootClientId }
-							clientId={ clientId }
-						/>
-					</AsyncModeProvider>
-				) ) }
-			</IntersectionObserver.Provider>
+			{ order.map( ( clientId ) => (
+				<AsyncModeProvider
+					key={ clientId }
+					value={
+						// Only provide data asynchronously if the block is
+						// not visible and not selected.
+						! visibleBlocks.has( clientId ) &&
+						! selectedBlocks.includes( clientId )
+					}
+				>
+					<BlockListBlock
+						rootClientId={ rootClientId }
+						clientId={ clientId }
+					/>
+				</AsyncModeProvider>
+			) ) }
 			{ order.length < 1 && placeholder }
 			<BlockListAppender
 				tagName={ __experimentalAppenderTagName }

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

@@ -25,10 +25,15 @@ import { __ } from '@wordpress/i18n';
 import styles from './style.scss';
 import BlockListAppender from '../block-list-appender';
 import BlockListItem from './block-list-item';
+import BlockListItemCell from './block-list-item-cell';
+import {
+	BlockListProvider,
+	BlockListConsumer,
+	DEFAULT_BLOCK_LIST_CONTEXT,
+} from './block-list-context';
+import { BlockDraggableWrapper } from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
 
-const BlockListContext = createContext();
-
 export const OnCaretVerticalPositionChange = createContext();
 
 const stylesMemo = {};
@@ -65,19 +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.onLayout = this.onLayout.bind( this );
 
@@ -154,6 +158,18 @@ export class BlockList extends Component {
 		return this.extraData;
 	}
 
+	getCellRendererComponent( { children, item, onLayout } ) {
+		const { rootClientId } = this.props;
+		return (
+			<BlockListItemCell
+				children={ children }
+				clientId={ item }
+				onLayout={ onLayout }
+				rootClientId={ rootClientId }
+			/>
+		);
+	}
+
 	onLayout( { nativeEvent } ) {
 		const { layout } = nativeEvent;
 		const { blockWidth } = this.state;
@@ -170,20 +186,27 @@ export class BlockList extends Component {
 	}
 
 	render() {
-		const { isRootList } = this.props;
+		const { isRootList, isRTL } = this.props;
 		// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
 		const blockList = isRootList ? (
-			<BlockListContext.Provider value={ this.scrollViewRef }>
-				{ this.renderList() }
-			</BlockListContext.Provider>
+			<BlockListProvider
+				value={ {
+					...DEFAULT_BLOCK_LIST_CONTEXT,
+					scrollRef: this.scrollViewRef,
+				} }
+			>
+				<BlockDraggableWrapper isRTL={ isRTL }>
+					{ ( { onScroll } ) => this.renderList( { onScroll } ) }
+				</BlockDraggableWrapper>
+			</BlockListProvider>
 		) : (
-			<BlockListContext.Consumer>
-				{ ( ref ) =>
+			<BlockListConsumer>
+				{ ( { scrollRef } ) =>
 					this.renderList( {
-						parentScrollRef: ref,
+						parentScrollRef: scrollRef,
 					} )
 				}
-			</BlockListContext.Consumer>
+			</BlockListConsumer>
 		);
 
 		return (
@@ -212,14 +235,10 @@ export class BlockList extends Component {
 			contentResizeMode,
 			blockWidth,
 		} = this.props;
-		const { parentScrollRef } = extraProps;
+		const { parentScrollRef, onScroll } = extraProps;
 
-		const {
-			blockToolbar,
-			blockBorder,
-			headerToolbar,
-			floatingToolbar,
-		} = styles;
+		const { blockToolbar, blockBorder, headerToolbar, floatingToolbar } =
+			styles;
 
 		const containerStyle = {
 			flex: isRootList ? 1 : 0,
@@ -279,6 +298,7 @@ export class BlockList extends Component {
 					data={ blockClientIds }
 					keyExtractor={ identity }
 					renderItem={ this.renderItem }
+					CellRendererComponent={ this.getCellRendererComponent }
 					shouldPreventAutomaticScroll={
 						this.shouldFlatListPreventAutomaticScroll
 					}
@@ -286,6 +306,7 @@ export class BlockList extends Component {
 					ListHeaderComponent={ header }
 					ListEmptyComponent={ ! isReadOnly && this.renderEmptyList }
 					ListFooterComponent={ this.renderBlockListFooter }
+					onScroll={ onScroll }
 				/>
 				{ this.shouldShowInnerBlockAppender() && (
 					<View
@@ -321,6 +342,15 @@ export class BlockList extends Component {
 			gridProperties,
 		} = this.props;
 		const { blockWidth } = this.state;
+
+		// Extracting the grid item properties here to avoid
+		// re-renders in the blockListItem component.
+		const isGridItem = !! gridProperties;
+		const gridItemProps = gridProperties && {
+			numOfColumns: gridProperties.numColumns,
+			tileCount: blockClientIds.length,
+			tileIndex: blockClientIds.indexOf( clientId ),
+		};
 		return (
 			<BlockListItem
 				isStackedHorizontally={ isStackedHorizontally }
@@ -337,8 +367,8 @@ export class BlockList extends Component {
 					this.shouldShowInnerBlockAppender
 				}
 				blockWidth={ blockWidth }
-				gridProperties={ gridProperties }
-				items={ blockClientIds }
+				isGridItem={ isGridItem }
+				{ ...gridItemProps }
 			/>
 		);
 	}
@@ -401,6 +431,8 @@ export default compose( [
 
 			const isFloatingToolbarVisible =
 				!! selectedBlockClientId && hasRootInnerBlocks;
+			const isRTL = getSettings().isRTL;
+
 			return {
 				blockClientIds,
 				blockCount,
@@ -411,13 +443,13 @@ export default compose( [
 				isFloatingToolbarVisible,
 				isStackedHorizontally,
 				maxWidth,
+				isRTL,
 			};
 		}
 	),
 	withDispatch( ( dispatch ) => {
-		const { insertBlock, replaceBlock, clearSelectedBlock } = dispatch(
-			blockEditorStore
-		);
+		const { insertBlock, replaceBlock, clearSelectedBlock } =
+			dispatch( blockEditorStore );
 
 		return {
 			clearSelectedBlock,

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

@@ -0,0 +1,245 @@
+/**
+ * External dependencies
+ */
+import { cloneDeep } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import {
+	DEFAULT_BLOCK_LIST_CONTEXT,
+	deleteBlockLayoutByClientId,
+} from '../block-list-context.native';
+import {
+	BLOCKS_LAYOUTS_DATA,
+	DEEP_NESTED_ID,
+	GROUP_BLOCK_LAYOUT_DATA,
+	NESTED_WITH_INNER_BLOCKS_ID,
+	PARAGRAPH_BLOCK_LAYOUT_DATA,
+	ROOT_LEVEL_ID,
+} from './fixtures/block-list-context.native';
+
+describe( 'findBlockLayoutByClientId', () => {
+	it( "finds a block's layout data at root level", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = BLOCKS_LAYOUTS_DATA;
+
+		const blockRootLevel = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			ROOT_LEVEL_ID
+		);
+
+		expect( blockRootLevel ).toEqual(
+			expect.objectContaining( { clientId: ROOT_LEVEL_ID } )
+		);
+	} );
+
+	it( "finds a nested block's layout data with inner blocks", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = BLOCKS_LAYOUTS_DATA;
+
+		const nestedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			NESTED_WITH_INNER_BLOCKS_ID
+		);
+
+		expect( nestedBlock ).toEqual(
+			expect.objectContaining( { clientId: NESTED_WITH_INNER_BLOCKS_ID } )
+		);
+	} );
+
+	it( "finds a deep nested block's layout data", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = BLOCKS_LAYOUTS_DATA;
+
+		const deepNestedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			DEEP_NESTED_ID
+		);
+
+		expect( deepNestedBlock ).toEqual(
+			expect.objectContaining( { clientId: DEEP_NESTED_ID } )
+		);
+	} );
+} );
+
+describe( 'deleteBlockLayoutByClientId', () => {
+	it( "deletes a block's layout data at root level", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+		const currentBlockLayouts = deleteBlockLayoutByClientId(
+			defaultBlockLayouts,
+			ROOT_LEVEL_ID
+		);
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			ROOT_LEVEL_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+
+	it( "deletes a nested block's layout data with inner blocks", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+		const currentBlockLayouts = deleteBlockLayoutByClientId(
+			defaultBlockLayouts,
+			NESTED_WITH_INNER_BLOCKS_ID
+		);
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			NESTED_WITH_INNER_BLOCKS_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+
+	it( "deletes a deep nested block's layout data", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+		const currentBlockLayouts = deleteBlockLayoutByClientId(
+			defaultBlockLayouts,
+			DEEP_NESTED_ID
+		);
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			DEEP_NESTED_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+} );
+
+describe( 'updateBlocksLayouts', () => {
+	it( "adds a new block's layout data at root level with an empty object", () => {
+		const {
+			blocksLayouts,
+			findBlockLayoutByClientId,
+			updateBlocksLayouts,
+		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = cloneDeep( blocksLayouts );
+		const BLOCK_CLIENT_ID = PARAGRAPH_BLOCK_LAYOUT_DATA.clientId;
+
+		updateBlocksLayouts( currentBlockLayouts, PARAGRAPH_BLOCK_LAYOUT_DATA );
+
+		const findAddedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			BLOCK_CLIENT_ID
+		);
+
+		expect( findAddedBlock ).toEqual(
+			expect.objectContaining( {
+				clientId: BLOCK_CLIENT_ID,
+				rootClientId: undefined,
+			} )
+		);
+	} );
+
+	it( "adds a new block's layout data at root level with inner blocks", () => {
+		const { findBlockLayoutByClientId, updateBlocksLayouts } =
+			DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = {
+			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+		};
+		const PARENT_BLOCK_CLIENT_ID = GROUP_BLOCK_LAYOUT_DATA.clientId;
+
+		// Add parent block
+		updateBlocksLayouts( currentBlockLayouts, GROUP_BLOCK_LAYOUT_DATA );
+
+		const findAddedParentBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			PARENT_BLOCK_CLIENT_ID
+		);
+
+		expect( findAddedParentBlock ).toEqual(
+			expect.objectContaining( { clientId: PARENT_BLOCK_CLIENT_ID } )
+		);
+
+		// Add inner block to it's parent
+		updateBlocksLayouts( currentBlockLayouts, {
+			...PARAGRAPH_BLOCK_LAYOUT_DATA,
+			rootClientId: PARENT_BLOCK_CLIENT_ID,
+		} );
+
+		const findAddedInnerBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			PARAGRAPH_BLOCK_LAYOUT_DATA.clientId
+		);
+
+		expect( findAddedInnerBlock ).toEqual(
+			expect.objectContaining( {
+				clientId: PARAGRAPH_BLOCK_LAYOUT_DATA.clientId,
+				rootClientId: PARENT_BLOCK_CLIENT_ID,
+			} )
+		);
+	} );
+
+	it( "adds a new block's layout data at deep level", () => {
+		const { findBlockLayoutByClientId, updateBlocksLayouts } =
+			DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = {
+			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+		};
+
+		// Add block layout data to it's parents inner blocks
+		updateBlocksLayouts( currentBlockLayouts, {
+			...PARAGRAPH_BLOCK_LAYOUT_DATA,
+			rootClientId: NESTED_WITH_INNER_BLOCKS_ID,
+		} );
+
+		const findAddedInnerBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			PARAGRAPH_BLOCK_LAYOUT_DATA.clientId
+		);
+
+		expect( findAddedInnerBlock ).toEqual(
+			expect.objectContaining( {
+				clientId: PARAGRAPH_BLOCK_LAYOUT_DATA.clientId,
+				rootClientId: NESTED_WITH_INNER_BLOCKS_ID,
+			} )
+		);
+	} );
+
+	it( "deletes a block's layout data at root level", () => {
+		const { findBlockLayoutByClientId, updateBlocksLayouts } =
+			DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = {
+			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+		};
+
+		updateBlocksLayouts( currentBlockLayouts, {
+			shouldRemove: true,
+			clientId: ROOT_LEVEL_ID,
+		} );
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			ROOT_LEVEL_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+
+	it( "deletes a block's layout data at a deep level", () => {
+		const { findBlockLayoutByClientId, updateBlocksLayouts } =
+			DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = {
+			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+		};
+
+		updateBlocksLayouts( currentBlockLayouts, {
+			shouldRemove: true,
+			clientId: DEEP_NESTED_ID,
+		} );
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			DEEP_NESTED_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+} );

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

@@ -0,0 +1,79 @@
+export const ROOT_LEVEL_ID = 'e59528f8-fb35-4ec1-aec6-5a065c236fa1';
+export const ROOT_LEVEL_WITH_INNER_BLOCKS_ID =
+	'72a9220f-4c3d-4b00-bae1-4506513f63d8';
+export const NESTED_WITH_INNER_BLOCKS_ID =
+	'9f3d1f1e-df85-485d-af63-dc8cb1b93cbc';
+export const DEEP_NESTED_ID = 'abec845a-e4de-43fb-96f7-80dc3d51ad7a';
+
+export const BLOCKS_LAYOUTS_DATA = {
+	[ ROOT_LEVEL_ID ]: {
+		clientId: ROOT_LEVEL_ID,
+		width: 390,
+		height: 54,
+		x: 0,
+		y: 83,
+		innerBlocks: {},
+	},
+	[ ROOT_LEVEL_WITH_INNER_BLOCKS_ID ]: {
+		clientId: ROOT_LEVEL_WITH_INNER_BLOCKS_ID,
+		width: 390,
+		height: 386,
+		x: 0,
+		y: 137,
+		innerBlocks: {
+			'62839858-48b0-44ed-b834-1343a1357e54': {
+				clientId: '62839858-48b0-44ed-b834-1343a1357e54',
+				rootClientId: ROOT_LEVEL_WITH_INNER_BLOCKS_ID,
+				width: 390,
+				height: 54,
+				x: 0,
+				y: 0,
+				innerBlocks: {},
+			},
+			[ NESTED_WITH_INNER_BLOCKS_ID ]: {
+				clientId: NESTED_WITH_INNER_BLOCKS_ID,
+				rootClientId: ROOT_LEVEL_WITH_INNER_BLOCKS_ID,
+				width: 390,
+				height: 332,
+				x: 0,
+				y: 54,
+				innerBlocks: {
+					'435d62a4-afa7-457c-a894-b04390d7b447': {
+						clientId: '435d62a4-afa7-457c-a894-b04390d7b447',
+						rootClientId: NESTED_WITH_INNER_BLOCKS_ID,
+						width: 358,
+						height: 54,
+						x: 0,
+						y: 0,
+						innerBlocks: {},
+					},
+					[ DEEP_NESTED_ID ]: {
+						clientId: DEEP_NESTED_ID,
+						rootClientId: NESTED_WITH_INNER_BLOCKS_ID,
+						width: 358,
+						height: 98,
+						x: 0,
+						y: 54,
+						innerBlocks: {},
+					},
+				},
+			},
+		},
+	},
+};
+
+export const PARAGRAPH_BLOCK_LAYOUT_DATA = {
+	clientId: '22dda04f-4718-45b2-8cd2-36cedb9eae4d',
+	width: 390,
+	height: 98,
+	x: 0,
+	y: 83,
+};
+
+export const GROUP_BLOCK_LAYOUT_DATA = {
+	clientId: 'e18249d9-ec06-4f54-b71e-6ec59be5213e',
+	width: 390,
+	height: 164,
+	x: 0,
+	y: 83,
+};

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

@@ -12,7 +12,7 @@ import {
 	__unstableGetBlockProps as getBlockProps,
 	getBlockType,
 } from '@wordpress/blocks';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useDisabled } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import warning from '@wordpress/warning';
 
@@ -50,17 +50,24 @@ const BLOCK_ANIMATION_THRESHOLD = 200;
  * also pass any other props through this hook, and they will be merged and
  * returned.
  *
- * @param {Object}  props                    Optional. Props to pass to the element. Must contain
- *                                           the ref if one is defined.
- * @param {Object}  options                  Options for internal use only.
+ * @param {Object}  props                        Optional. Props to pass to the element. Must contain
+ *                                               the ref if one is defined.
+ * @param {Object}  options                      Options for internal use only.
  * @param {boolean} options.__unstableIsHtml
+ * @param {boolean} options.__unstableIsDisabled Whether the block should be disabled.
  *
  * @return {Object} Props to pass to the element to mark as a block.
  */
-export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
-	const { clientId, className, wrapperProps = {}, isAligned } = useContext(
-		BlockListBlockContext
-	);
+export function useBlockProps(
+	props = {},
+	{ __unstableIsHtml, __unstableIsDisabled = false } = {}
+) {
+	const {
+		clientId,
+		className,
+		wrapperProps = {},
+		isAligned,
+	} = useContext( BlockListBlockContext );
 	const {
 		index,
 		mode,
@@ -125,6 +132,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			enableAnimation,
 			triggerAnimationOnChange: index,
 		} ),
+		useDisabled( { isDisabled: ! __unstableIsDisabled } ),
 	] );
 
 	const blockEditContext = useBlockEditContext();