@wordpress/block-editor 8.6.0 → 9.2.0

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 = {};
@@ -78,6 +83,9 @@ export class BlockList extends Component {
 		);
 		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 +162,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 +190,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,7 +239,7 @@ export class BlockList extends Component {
 			contentResizeMode,
 			blockWidth,
 		} = this.props;
-		const { parentScrollRef } = extraProps;
+		const { parentScrollRef, onScroll } = extraProps;
 
 		const {
 			blockToolbar,
@@ -279,6 +306,7 @@ export class BlockList extends Component {
 					data={ blockClientIds }
 					keyExtractor={ identity }
 					renderItem={ this.renderItem }
+					CellRendererComponent={ this.getCellRendererComponent }
 					shouldPreventAutomaticScroll={
 						this.shouldFlatListPreventAutomaticScroll
 					}
@@ -286,6 +314,7 @@ export class BlockList extends Component {
 					ListHeaderComponent={ header }
 					ListEmptyComponent={ ! isReadOnly && this.renderEmptyList }
 					ListFooterComponent={ this.renderBlockListFooter }
+					onScroll={ onScroll }
 				/>
 				{ this.shouldShowInnerBlockAppender() && (
 					<View
@@ -321,6 +350,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 +375,8 @@ export class BlockList extends Component {
 					this.shouldShowInnerBlockAppender
 				}
 				blockWidth={ blockWidth }
-				gridProperties={ gridProperties }
-				items={ blockClientIds }
+				isGridItem={ isGridItem }
+				{ ...gridItemProps }
 			/>
 		);
 	}
@@ -401,6 +439,8 @@ export default compose( [
 
 			const isFloatingToolbarVisible =
 				!! selectedBlockClientId && hasRootInnerBlocks;
+			const isRTL = getSettings().isRTL;
+
 			return {
 				blockClientIds,
 				blockCount,
@@ -411,6 +451,7 @@ export default compose( [
 				isFloatingToolbarVisible,
 				isStackedHorizontally,
 				maxWidth,
+				isRTL,
 			};
 		}
 	),

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

@@ -262,12 +262,17 @@
 			right: $border-width;
 			bottom: $border-width;
 			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
+			// Border is outset, so subtract the width to achieve correct radius.
+			border-radius: $radius-block-ui - $border-width;
 		}
 	}
 
 	&.is-selected {
-		cursor: unset;
+		cursor: default;
+
+		&.rich-text {
+			cursor: unset;
+		}
 
 		&::after {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
@@ -303,22 +308,6 @@
 	}
 }
 
-// Active entity spotlight.
-// Disable if focus mode is active.
-.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
-	opacity: 0.5;
-	transition: opacity 0.1s linear;
-	@include reduce-motion("transition");
-
-	&.is-active-entity,
-	&.has-child-selected,
-	&:not(.has-child-selected) .block-editor-block-list__block,
-	&.is-active-entity .block-editor-block-list__block,
-	.is-active-entity .block-editor-block-list__block {
-		opacity: 1;
-	}
-}
-
 .wp-block[data-align="left"] > *,
 .wp-block[data-align="right"] > *,
 .wp-block.alignleft,

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

@@ -0,0 +1,253 @@
+/**
+ * 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,14 +50,18 @@ 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 } = {} ) {
+export function useBlockProps(
+	props = {},
+	{ __unstableIsHtml, __unstableIsDisabled = false } = {}
+) {
 	const { clientId, className, wrapperProps = {}, isAligned } = useContext(
 		BlockListBlockContext
 	);
@@ -125,6 +129,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			enableAnimation,
 			triggerAnimationOnChange: index,
 		} ),
+		useDisabled( { isDisabled: ! __unstableIsDisabled } ),
 	] );
 
 	const blockEditContext = useBlockEditContext();

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

@@ -33,12 +33,8 @@ export function useBlockClassNames( clientId ) {
 				getSettings,
 				hasSelectedInnerBlock,
 				isTyping,
-				__experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames,
 			} = select( blockEditorStore );
-			const {
-				__experimentalSpotlightEntityBlocks: spotlightEntityBlocks,
-				outlineMode,
-			} = getSettings();
+			const { outlineMode } = getSettings();
 			const isDragging = isBlockBeingDragged( clientId );
 			const isSelected = isBlockSelected( clientId );
 			const name = getBlockName( clientId );
@@ -48,9 +44,6 @@ export function useBlockClassNames( clientId ) {
 				clientId,
 				checkDeep
 			);
-			const activeEntityBlockId = getActiveBlockIdByBlockNames(
-				spotlightEntityBlocks
-			);
 			return classnames( {
 				'is-selected': isSelected,
 				'is-highlighted': isBlockHighlighted( clientId ),
@@ -58,9 +51,6 @@ export function useBlockClassNames( clientId ) {
 				'is-reusable': isReusableBlock( getBlockType( name ) ),
 				'is-dragging': isDragging,
 				'has-child-selected': isAncestorOfSelectedBlock,
-				'has-active-entity': activeEntityBlockId,
-				// Determine if there is an active entity area to spotlight.
-				'is-active-entity': activeEntityBlockId === clientId,
 				'remove-outline': isSelected && outlineMode && isTyping(),
 			} );
 		},

package/src/components/block-list/use-in-between-inserter.js

@@ -110,7 +110,7 @@ export function useInBetweenInserter() {
 				// Don't show the insertion point if a parent block has an "overlay"
 				// See https://github.com/WordPress/gutenberg/pull/34012#pullrequestreview-727762337
 				const parentOverlay = element.parentElement?.closest(
-					'.block-editor-block-content-overlay.overlay-active'
+					'.block-editor-block-content-overlay'
 				);
 				if ( parentOverlay ) {
 					return;

package/src/components/block-mobile-toolbar/index.native.js

@@ -15,6 +15,7 @@ import { useState, useEffect } from '@wordpress/element';
  */
 import styles from './style.scss';
 import BlockMover from '../block-mover';
+import BlockDraggable from '../block-draggable';
 import BlockActionsMenu from './block-actions-menu';
 import { BlockSettingsButton } from '../block-settings';
 import { store as blockEditorStore } from '../../store';
@@ -33,6 +34,7 @@ const BlockMobileToolbar = ( {
 	blockWidth,
 	anchorNodeRef,
 	isFullWidth,
+	draggingClientId,
 } ) => {
 	const [ fillsLength, setFillsLength ] = useState( null );
 	const [ appenderWidth, setAppenderWidth ] = useState( 0 );
@@ -73,7 +75,13 @@ const BlockMobileToolbar = ( {
 				/>
 			) }
 
-			<View style={ styles.spacer } />
+			<BlockDraggable
+				clientId={ clientId }
+				draggingClientId={ draggingClientId }
+				testID="draggable-trigger-mobile-toolbar"
+			>
+				{ () => <View style={ styles.spacer } /> }
+			</BlockDraggable>
 
 			<BlockSettingsButton.Slot>
 				{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls. */ }