@wordpress/block-editor 12.0.0 → 12.2.0

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;

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

@@ -6,19 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	createContext,
-	useMemo,
-	useCallback,
-	RawHTML,
-} from '@wordpress/element';
+import { useMemo, useCallback, RawHTML } from '@wordpress/element';
 import {
 	getBlockType,
 	getSaveContent,
 	isUnmodifiedDefaultBlock,
 	serializeRawBlock,
 	switchToBlockType,
-	store as blocksStore,
 	getDefaultBlockName,
 	isUnmodifiedBlock,
 } from '@wordpress/blocks';
@@ -43,7 +37,8 @@ import BlockHtml from './block-html';
 import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
-export const BlockListBlockContext = createContext();
+import { unlock } from '../../lock-unlock';
+import { BlockListBlockContext } from './block-list-block-context';
 
 /**
  * Merges wrapper props with special handling for classNames and styles.
@@ -99,35 +94,23 @@ function BlockListBlock( {
 } ) {
 	const {
 		themeSupportsLayout,
-		hasContentLockedParent,
-		isContentBlock,
-		isContentLocking,
 		isTemporarilyEditingAsBlocks,
+		blockEditingMode,
 	} = useSelect(
 		( select ) => {
 			const {
 				getSettings,
-				__unstableGetContentLockingParent,
-				getTemplateLock,
 				__unstableGetTemporarilyEditingAsBlocks,
-			} = select( blockEditorStore );
-			const _hasContentLockedParent =
-				!! __unstableGetContentLockingParent( clientId );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
 			return {
 				themeSupportsLayout: getSettings().supportsLayout,
-				isContentBlock:
-					select( blocksStore ).__experimentalHasContentRoleAttribute(
-						name
-					),
-				hasContentLockedParent: _hasContentLockedParent,
-				isContentLocking:
-					getTemplateLock( clientId ) === 'contentOnly' &&
-					! _hasContentLockedParent,
 				isTemporarilyEditingAsBlocks:
 					__unstableGetTemporarilyEditingAsBlocks() === clientId,
+				blockEditingMode: getBlockEditingMode( clientId ),
 			};
 		},
-		[ name, clientId ]
+		[ clientId ]
 	);
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
@@ -160,7 +143,7 @@ function BlockListBlock( {
 
 	const blockType = getBlockType( name );
 
-	if ( hasContentLockedParent && ! isContentBlock ) {
+	if ( blockEditingMode === 'disabled' ) {
 		wrapperProps = {
 			...wrapperProps,
 			tabIndex: -1,
@@ -234,10 +217,9 @@ function BlockListBlock( {
 		clientId,
 		className: classnames(
 			{
-				'is-content-locked': isContentLocking,
+				'is-editing-disabled': blockEditingMode === 'disabled',
 				'is-content-locked-temporarily-editing-as-blocks':
 					isTemporarilyEditingAsBlocks,
-				'is-content-block': hasContentLockedParent && isContentBlock,
 			},
 			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
 			className
@@ -376,26 +358,26 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				) {
 					removeBlock( _clientId );
 				} else {
-					if (
-						canInsertBlockType(
-							getBlockName( firstClientId ),
-							targetRootClientId
-						)
-					) {
-						moveBlocksToPosition(
-							[ firstClientId ],
-							_clientId,
-							targetRootClientId,
-							getBlockIndex( _clientId )
-						);
-					} else {
-						const replacement = switchToBlockType(
-							getBlock( firstClientId ),
-							getDefaultBlockName()
-						);
-
-						if ( replacement && replacement.length ) {
-							registry.batch( () => {
+					registry.batch( () => {
+						if (
+							canInsertBlockType(
+								getBlockName( firstClientId ),
+								targetRootClientId
+							)
+						) {
+							moveBlocksToPosition(
+								[ firstClientId ],
+								_clientId,
+								targetRootClientId,
+								getBlockIndex( _clientId )
+							);
+						} else {
+							const replacement = switchToBlockType(
+								getBlock( firstClientId ),
+								getDefaultBlockName()
+							);
+
+							if ( replacement && replacement.length ) {
 								insertBlocks(
 									replacement,
 									getBlockIndex( _clientId ),
@@ -403,16 +385,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 									changeSelection
 								);
 								removeBlock( firstClientId, false );
-							} );
+							}
 						}
-					}
 
-					if (
-						! getBlockOrder( _clientId ).length &&
-						isUnmodifiedBlock( getBlock( _clientId ) )
-					) {
-						removeBlock( _clientId, false );
-					}
+						if (
+							! getBlockOrder( _clientId ).length &&
+							isUnmodifiedBlock( getBlock( _clientId ) )
+						) {
+							removeBlock( _clientId, false );
+						}
+					} );
 				}
 			}