@wordpress/block-editor 11.8.0 → 12.1.0

package/src/components/block-draggable/use-scroll-when-dragging.js

@@ -78,7 +78,10 @@ export default function useScrollWhenDragging() {
 					SCROLL_INACTIVE_DISTANCE_PX,
 				0
 			);
-			const distancePercentage = dragDistance / moveableDistance;
+			const distancePercentage =
+				moveableDistance === 0 || dragDistance === 0
+					? 0
+					: dragDistance / moveableDistance;
 			velocityY.current = VELOCITY_MULTIPLIER * distancePercentage;
 		} else if ( event.clientY < offsetDragStartPosition ) {
 			// User is dragging upwards.
@@ -92,7 +95,10 @@ export default function useScrollWhenDragging() {
 					SCROLL_INACTIVE_DISTANCE_PX,
 				0
 			);
-			const distancePercentage = dragDistance / moveableDistance;
+			const distancePercentage =
+				moveableDistance === 0 || dragDistance === 0
+					? 0
+					: dragDistance / moveableDistance;
 			velocityY.current = -VELOCITY_MULTIPLIER * distancePercentage;
 		} else {
 			velocityY.current = 0;

package/src/components/block-info-slot-fill/index.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import useDisplayBlockControls from '../use-display-block-controls';
+
+const { createPrivateSlotFill } = unlock( componentsPrivateApis );
+const { Fill, Slot } = createPrivateSlotFill( 'BlockInformation' );
+
+const BlockInfo = ( props ) => {
+	const isDisplayed = useDisplayBlockControls();
+	if ( ! isDisplayed ) {
+		return null;
+	}
+	return <Fill { ...props } />;
+};
+BlockInfo.Slot = ( props ) => <Slot { ...props } />;
+
+export default BlockInfo;

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

@@ -37,6 +37,7 @@ import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-c
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
+import BlockInfo from '../block-info-slot-fill';
 
 function useContentBlocks( blockTypes, block ) {
 	const contentBlocksObjectAux = useMemo( () => {
@@ -115,6 +116,7 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 				className={ blockInformation.isSynced && 'is-synced' }
 			/>
 			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
+			<BlockInfo.Slot />
 			<VStack
 				spacing={ 1 }
 				padding={ 4 }
@@ -326,6 +328,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 				className={ blockInformation.isSynced && 'is-synced' }
 			/>
 			<BlockVariationTransforms blockClientId={ clientId } />
+			<BlockInfo.Slot />
 			{ showTabs && (
 				<InspectorControlsTabs
 					hasBlockStyles={ hasBlockStyles }

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

@@ -8,7 +8,7 @@ import { TouchableWithoutFeedback } from 'react-native';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -16,22 +16,30 @@ import { createBlock } from '@wordpress/blocks';
 import Warning from '../warning';
 import { store as blockEditorStore } from '../../store';
 
-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
-	);
-
+export default function BlockInvalidWarning( { clientId } ) {
 	const selector = ( select ) => {
 		const { getBlock } = select( blockEditorStore );
 		const block = getBlock( clientId );
+		const { name } = block || {};
+
+		const blockType = getBlockType( name || 'core/missing' );
+		const title = blockType?.title;
+		const blockIcon = blockType?.icon;
+
 		return {
 			block,
+			blockTitle: title,
+			icon: blockIcon,
 		};
 	};
 
-	const { block } = useSelect( selector, [ clientId ] );
+	const { block, blockTitle, icon } = useSelect( selector, [ 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 { replaceBlock } = useDispatch( blockEditorStore );
 

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

@@ -7,14 +7,23 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { useEffect, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useBlockListContext } from './block-list-context';
+import { store as blockEditorStore } from '../../store';
 
-function BlockListItemCell( { children, clientId, rootClientId, onLayout } ) {
+function BlockListItemCell( { children, item: clientId, onLayout } ) {
 	const { blocksLayouts, updateBlocksLayouts } = useBlockListContext();
+	const { rootClientId } = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+			return { rootClientId: getBlockRootClientId( clientId ) };
+		},
+		[ clientId ]
+	);
 
 	useEffect( () => {
 		return () => {

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

@@ -1,237 +1,209 @@
 /**
  * External dependencies
  */
-import { View, Dimensions } from 'react-native';
+import { View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-import { ReadableContentView, alignmentHelpers } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import BlockListBlock from './block';
-import BlockInsertionPoint from './insertion-point';
+import Block from './block';
 import Grid from './grid-item';
-
-import styles from './block-list-item.native.scss';
+import BlockInsertionPoint from './insertion-point';
 import { store as blockEditorStore } from '../../store';
+import { useEditorWrapperStyles } from '../../hooks/use-editor-wrapper-styles';
 
-const stretchStyle = {
-	flex: 1,
-};
-
-export class BlockListItem extends Component {
-	getMarginHorizontal() {
-		const {
-			blockAlignment,
-			marginHorizontal,
-			parentBlockAlignment,
-			hasParents,
-			blockName,
-			parentBlockName,
-			parentWidth,
-			blockWidth,
-		} = this.props;
-		const { isFullWidth, isWideWidth, isWider, isContainerRelated } =
-			alignmentHelpers;
-
-		if ( isFullWidth( blockAlignment ) ) {
-			if ( ! hasParents ) {
-				return 0;
-			}
-			return marginHorizontal;
-		}
-		if ( isWideWidth( blockAlignment ) ) {
-			return marginHorizontal;
-		}
-
-		const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
-
-		if (
-			isFullWidth( parentBlockAlignment ) &&
-			! isWider( blockWidth, 'medium' )
-		) {
-			if (
-				isContainerRelated( blockName ) ||
-				isWider( screenWidth, 'mobile' )
-			) {
-				return marginHorizontal;
-			}
-			return marginHorizontal * 2;
-		}
-
-		if (
-			isContainerRelated( parentBlockName ) &&
-			! isContainerRelated( blockName )
-		) {
-			const isScreenWidthEqual = parentWidth === screenWidth;
-			if ( isScreenWidthEqual || isWider( screenWidth, 'mobile' ) ) {
-				return marginHorizontal;
-			}
-		}
-
-		return marginHorizontal;
-	}
-
-	getContentStyles( readableContentViewStyle ) {
-		const { blockAlignment, blockName, hasParents, parentBlockName } =
-			this.props;
-		const { isFullWidth, isContainerRelated } = alignmentHelpers;
-
-		return [
-			readableContentViewStyle,
-			isFullWidth( blockAlignment ) &&
-				! hasParents && {
-					width: styles.fullAlignment.width,
-				},
-			! blockAlignment &&
-				hasParents &&
-				! isContainerRelated( parentBlockName ) &&
-				isContainerRelated( blockName ) && {
-					paddingHorizontal: styles.fullAlignmentPadding.paddingLeft,
-				},
-		];
-	}
-
-	renderContent() {
-		const {
-			blockAlignment,
-			clientId,
-			isReadOnly,
-			shouldShowInsertionPointBefore,
-			shouldShowInsertionPointAfter,
-			contentResizeMode,
-			shouldShowInnerBlockAppender,
-			parentWidth,
-			marginHorizontal,
-			blockName,
-			blockWidth,
-			...restProps
-		} = this.props;
-
-		const readableContentViewStyle =
-			contentResizeMode === 'stretch' && stretchStyle;
-		const { isContainerRelated } = alignmentHelpers;
-
-		return (
-			<ReadableContentView
-				align={ blockAlignment }
-				style={ [
-					readableContentViewStyle,
-					isContainerRelated( blockName ) &&
-						parentWidth && {
-							maxWidth: parentWidth + 2 * marginHorizontal,
-						},
-				] }
-			>
-				<View
-					style={ this.getContentStyles( readableContentViewStyle ) }
-					pointerEvents={ isReadOnly ? 'box-only' : 'auto' }
-				>
-					{ shouldShowInsertionPointBefore && (
-						<BlockInsertionPoint />
-					) }
-					<BlockListBlock
-						key={ clientId }
-						showTitle={ false }
-						clientId={ clientId }
-						parentWidth={ parentWidth }
-						{ ...restProps }
-						marginHorizontal={ this.getMarginHorizontal() }
-						blockWidth={ blockWidth }
-					/>
-					{ ! shouldShowInnerBlockAppender() &&
-						shouldShowInsertionPointAfter && (
-							<BlockInsertionPoint />
-						) }
-				</View>
-			</ReadableContentView>
-		);
-	}
-
-	render() {
-		const { parentWidth, blockWidth, isGridItem } = this.props;
-
-		if ( ! blockWidth ) {
-			return null;
-		}
-
-		if ( isGridItem ) {
-			const { numOfColumns, tileCount, tileIndex } = this.props;
-			return (
-				<Grid
-					maxWidth={ parentWidth }
-					numOfColumns={ numOfColumns }
-					tileCount={ tileCount }
-					index={ tileIndex }
-				>
-					{ this.renderContent() }
-				</Grid>
-			);
-		}
-		return this.renderContent();
-	}
-}
-
-export default compose( [
-	withSelect(
-		( select, { rootClientId, isStackedHorizontally, clientId } ) => {
+/**
+ * BlockListItemContent component. Renders a block with an optional insertion point.
+ *
+ * @param {Object}   props                              Component properties.
+ * @param {number}   props.blockWidth                   The width of the block.
+ * @param {string}   props.clientId                     The block client ID.
+ * @param {string}   props.contentResizeMode            The content resize mode, e.g "stretch".
+ * @param {Object}   props.contentStyle                 Styles for the block content
+ * @param {Object}   props.index                        Block item index
+ * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.
+ * @param {number}   props.marginHorizontal             The horizontal margin.
+ * @param {number}   props.marginVertical               The vertical margin.
+ * @param {Function} props.onAddBlock                   On add block callback.
+ * @param {Function} props.onDeleteBlock                On delete block callback.
+ * @param {number}   props.parentWidth                  The width of the parent block.
+ * @param {string}   props.rootClientId                 The root client ID.
+ * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
+ *
+ * @return {WPComponent} The rendered block list item content.
+ */
+function BlockListItemContent( {
+	blockWidth,
+	clientId,
+	contentResizeMode,
+	contentStyle,
+	index,
+	isStackedHorizontally,
+	marginHorizontal,
+	marginVertical,
+	onAddBlock,
+	onDeleteBlock,
+	parentWidth,
+	rootClientId,
+	shouldShowInnerBlockAppender,
+} ) {
+	const {
+		blockAlignment,
+		blockName,
+		hasParents,
+		parentBlockAlignment,
+		parentBlockName,
+		shouldShowInsertionPointAfter,
+		shouldShowInsertionPointBefore,
+	} = useSelect(
+		( select ) => {
 			const {
-				getBlockOrder,
+				getBlockAttributes,
 				getBlockInsertionPoint,
+				getBlockName,
+				getBlockOrder,
 				isBlockInsertionPointVisible,
-				getSettings,
-				getBlockParents,
-				getBlock,
 			} = select( blockEditorStore );
-
 			const blockClientIds = getBlockOrder( rootClientId );
 			const insertionPoint = getBlockInsertionPoint();
-			const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
-			const shouldShowInsertionPointBefore =
-				! isStackedHorizontally &&
-				blockInsertionPointIsVisible &&
-				insertionPoint.rootClientId === rootClientId &&
-				// If list is empty, show the insertion point (via the default appender)
-				( blockClientIds.length === 0 ||
-					// Or if the insertion point is right before the denoted block.
-					blockClientIds[ insertionPoint.index ] === clientId );
-
-			const shouldShowInsertionPointAfter =
+
+			const insertionPointVisibleInCurrentRoot =
 				! isStackedHorizontally &&
-				blockInsertionPointIsVisible &&
-				insertionPoint.rootClientId === rootClientId &&
-				// If the insertion point is at the end of the list.
-				blockClientIds.length === insertionPoint.index &&
-				// And the denoted block is the last one on the list, show the indicator at the end of the block.
+				isBlockInsertionPointVisible() &&
+				insertionPoint.rootClientId === rootClientId;
+
+			const isListEmpty = blockClientIds.length === 0;
+			const isInsertionPointBeforeBlock =
+				blockClientIds[ insertionPoint.index ] === clientId;
+			const isInsertionPointAtEnd =
+				blockClientIds.length === insertionPoint.index;
+			const isBlockLastInList =
 				blockClientIds[ insertionPoint.index - 1 ] === clientId;
 
-			const isReadOnly = getSettings().readOnly;
+			const showInsertionPointBefore =
+				insertionPointVisibleInCurrentRoot &&
+				( isListEmpty || isInsertionPointBeforeBlock );
+
+			const showInsertionPointAfter =
+				insertionPointVisibleInCurrentRoot &&
+				isInsertionPointAtEnd &&
+				isBlockLastInList;
 
-			const { attributes, name } = getBlock( clientId ) || {};
-			const { align } = attributes || {};
-			const parents = getBlockParents( clientId, true );
-			const hasParents = !! parents.length;
-			const parentBlock = hasParents ? getBlock( parents[ 0 ] ) : {};
-			const { align: parentBlockAlignment } =
-				parentBlock?.attributes || {};
-			const { name: parentBlockName } = parentBlock || {};
+			const blockHasParents = !! rootClientId;
+			const name = getBlockName( clientId );
+			const parentName = getBlockName( rootClientId );
+			const { align } = getBlockAttributes( clientId ) || {};
+			const { align: parentBlockAlign } =
+				getBlockAttributes( rootClientId ) || {};
 
 			return {
-				shouldShowInsertionPointBefore,
-				shouldShowInsertionPointAfter,
-				isReadOnly,
-				hasParents,
 				blockAlignment: align,
-				parentBlockAlignment,
 				blockName: name,
-				parentBlockName,
+				hasParents: blockHasParents,
+				parentBlockAlignment: parentBlockAlign,
+				parentBlockName: parentName,
+				shouldShowInsertionPointAfter: showInsertionPointAfter,
+				shouldShowInsertionPointBefore: showInsertionPointBefore,
 			};
-		}
-	),
-] )( BlockListItem );
+		},
+		[ isStackedHorizontally, rootClientId, clientId ]
+	);
+
+	const [ wrapperStyles, margin ] = useEditorWrapperStyles( {
+		align: blockAlignment,
+		blockName,
+		blockWidth,
+		contentResizeMode,
+		hasParents,
+		marginHorizontal,
+		parentBlockAlignment,
+		parentBlockName,
+		parentWidth,
+	} );
+
+	const shouldShowBlockInsertionPointAfter =
+		! shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter;
+
+	return (
+		<View style={ wrapperStyles }>
+			{ shouldShowInsertionPointBefore && (
+				<BlockInsertionPoint
+					testID={ `block-insertion-point-before-row-${ index + 1 }` }
+				/>
+			) }
+			<Block
+				blockWidth={ blockWidth }
+				clientId={ clientId }
+				contentStyle={ contentStyle }
+				isStackedHorizontally={ isStackedHorizontally }
+				marginHorizontal={ margin }
+				marginVertical={ marginVertical }
+				onAddBlock={ onAddBlock }
+				parentBlockAlignment={ parentBlockAlignment }
+				onDeleteBlock={ onDeleteBlock }
+				parentWidth={ parentWidth }
+				rootClientId={ rootClientId }
+			/>
+			{ shouldShowBlockInsertionPointAfter && (
+				<BlockInsertionPoint
+					testID={ `block-insertion-point-after-row-${ index + 1 }` }
+				/>
+			) }
+		</View>
+	);
+}
+
+/**
+ * BlockListItem component. Renders a block list item either as a grid item or as a standalone item.
+ *
+ * @param {Object}   props                              Component properties.
+ * @param {boolean}  props.isGridItem                   Whether the block is a grid item.
+ * @param {number}   props.numOfColumns                 The number of columns for grid layout.
+ * @param {number}   props.parentWidth                  The width of the parent block.
+ * @param {number}   props.tileCount                    The total number of tiles in the grid.
+ * @param {number}   props.tileIndex                    The index of the current tile in the grid.
+ * @param {number}   props.blockWidth                   The width of the block.
+ * @param {string}   props.clientId                     The block client ID.
+ * @param {string}   props.contentResizeMode            The content resize mode, e.g "stretch".
+ * @param {Object}   props.contentStyle                 Styles for the block content
+ * @param {Object}   props.index                        Block item index
+ * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.
+ * @param {number}   props.marginHorizontal             The horizontal margin.
+ * @param {number}   props.marginVertical               The vertical margin.
+ * @param {Function} props.onAddBlock                   On add block callback.
+ * @param {Function} props.onDeleteBlock                On delete block callback.
+ * @param {string}   props.rootClientId                 The root client ID.
+ * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
+ *
+ * @return {WPComponent|null} The rendered block list item or null if the block width is not provided.
+ */
+function BlockListItem( props ) {
+	const { isGridItem, numOfColumns, tileCount, tileIndex, ...restProps } =
+		props;
+
+	if ( ! props?.blockWidth ) {
+		return null;
+	}
+
+	if ( isGridItem ) {
+		return (
+			<Grid
+				maxWidth={ props?.parentWidth }
+				numOfColumns={ numOfColumns }
+				tileCount={ tileCount }
+				index={ tileIndex }
+			>
+				<BlockListItemContent { ...restProps } />
+			</Grid>
+		);
+	}
+
+	return <BlockListItemContent { ...restProps } />;
+}
+
+export default BlockListItem;

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

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { alignmentHelpers } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './block.scss';
+
+function BlockOutline( {
+	align,
+	blockWidth,
+	isParentSelected,
+	isSelected,
+	name,
+	screenWidth,
+} ) {
+	const { isFullWidth, isContainerRelated } = alignmentHelpers;
+	const isScreenWidthWider = blockWidth < screenWidth;
+
+	const styleSolidBorder = [
+		styles.solidBorder,
+		isFullWidth( align ) && isScreenWidthWider && styles.borderFullWidth,
+		isFullWidth( align ) &&
+			isContainerRelated( name ) &&
+			isScreenWidthWider &&
+			styles.containerBorderFullWidth,
+		usePreferredColorSchemeStyle(
+			styles.solidBorderColor,
+			styles.solidBorderColorDark
+		),
+	];
+	const styleDashedBorder = [
+		styles.dashedBorder,
+		usePreferredColorSchemeStyle(
+			styles.dashedBorderColor,
+			styles.dashedBorderColorDark
+		),
+	];
+
+	return (
+		<>
+			{ isSelected && (
+				<View pointerEvents="box-none" style={ styleSolidBorder } />
+			) }
+			{ isParentSelected && <View style={ styleDashedBorder } /> }
+		</>
+	);
+}
+
+export default BlockOutline;