@wordpress/block-editor 12.1.0 → 12.2.0

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

@@ -11,7 +11,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
 import {
 	KeyboardAwareFlatList,
-	ReadableContentView,
 	WIDE_ALIGNMENTS,
 	alignmentHelpers,
 } from '@wordpress/components';
@@ -26,23 +25,16 @@ 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 { useEditorWrapperStyles } from '../../hooks/use-editor-wrapper-styles';
 import { store as blockEditorStore } from '../../store';
 
 const identity = ( x ) => x;
 
 const stylesMemo = {};
-const getStyles = (
-	isRootList,
-	isStackedHorizontally,
-	horizontalAlignment
-) => {
-	if ( isRootList ) {
-		return;
-	}
+const getStyles = ( isStackedHorizontally, horizontalAlignment ) => {
 	const styleName = `${ isStackedHorizontally }-${ horizontalAlignment }`;
 	if ( stylesMemo[ styleName ] ) {
 		return stylesMemo[ styleName ];
@@ -74,7 +66,6 @@ export default function BlockList( {
 	renderAppender,
 	renderFooterAppender,
 	rootClientId,
-	title,
 	withFooter = true,
 } ) {
 	const {
@@ -190,114 +181,6 @@ export default function BlockList( {
 		}
 	};
 
-	const renderList = ( extraProps = {} ) => {
-		const { parentScrollRef, onScroll } = extraProps;
-
-		const { blockToolbar, headerToolbar, floatingToolbar } = styles;
-
-		const containerStyle = {
-			flex: isRootList ? 1 : 0,
-			// We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks.
-			marginVertical: isRootList ? 0 : -marginVertical,
-			marginHorizontal: isRootList ? 0 : -marginHorizontal,
-		};
-
-		const isContentStretch = contentResizeMode === 'stretch';
-		const isMultiBlocks = blockClientIds.length > 1;
-		const { isWider } = alignmentHelpers;
-		const extraScrollHeight =
-			headerToolbar.height +
-			blockToolbar.height +
-			( isFloatingToolbarVisible ? floatingToolbar.height : 0 );
-
-		const scrollViewStyle = [
-			{ flex: isRootList ? 1 : 0 },
-			! isRootList && styles.overflowVisible,
-		];
-
-		return (
-			<View
-				style={ containerStyle }
-				onAccessibilityEscape={ clearSelectedBlock }
-				onLayout={ onLayout }
-				testID="block-list-wrapper"
-			>
-				<KeyboardAwareFlatList
-					{ ...( Platform.OS === 'android'
-						? { removeClippedSubviews: false }
-						: {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
-					accessibilityLabel="block-list"
-					innerRef={ ( ref ) => {
-						scrollViewRef.current = parentScrollRef || ref;
-					} }
-					extraScrollHeight={ extraScrollHeight }
-					keyboardShouldPersistTaps="always"
-					scrollViewStyle={ scrollViewStyle }
-					extraData={ getExtraData() }
-					scrollEnabled={ isRootList }
-					contentContainerStyle={ [
-						horizontal && styles.horizontalContentContainer,
-						isWider( blockWidth, 'medium' ) &&
-							( isContentStretch && isMultiBlocks
-								? styles.horizontalContentContainerStretch
-								: styles.horizontalContentContainerCenter ),
-					] }
-					style={ getStyles(
-						isRootList,
-						isStackedHorizontally,
-						horizontalAlignment
-					) }
-					data={ blockClientIds }
-					keyExtractor={ identity }
-					listKey={
-						rootClientId ? `list-${ rootClientId }` : 'list-root'
-					}
-					renderItem={ renderItem }
-					CellRendererComponent={ BlockListItemCell }
-					shouldPreventAutomaticScroll={
-						shouldFlatListPreventAutomaticScroll
-					}
-					title={ title }
-					ListHeaderComponent={ header }
-					ListEmptyComponent={
-						! isReadOnly && (
-							<EmptyList
-								orientation={ orientation }
-								rootClientId={ rootClientId }
-								renderAppender={ renderAppender }
-								renderFooterAppender={ renderFooterAppender }
-							/>
-						)
-					}
-					ListFooterComponent={
-						<Footer
-							addBlockToEndOfPost={ addBlockToEndOfPost }
-							isReadOnly={ isReadOnly }
-							renderFooterAppender={ renderFooterAppender }
-							withFooter={ withFooter }
-						/>
-					}
-					onScroll={ onScroll }
-				/>
-				{ shouldShowInnerBlockAppender() && (
-					<View
-						style={ {
-							marginHorizontal:
-								marginHorizontal -
-								styles.innerAppender.marginLeft,
-						} }
-					>
-						<BlockListAppender
-							rootClientId={ rootClientId }
-							renderAppender={ renderAppender }
-							showSeparator
-						/>
-					</View>
-				) }
-			</View>
-		);
-	};
-
 	const renderItem = ( { item: clientId, index } ) => {
 		// Extracting the grid item properties here to avoid
 		// re-renders in the blockListItem component.
@@ -328,29 +211,159 @@ export default function BlockList( {
 		);
 	};
 
-	// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
-	const blockList = isRootList ? (
-		<BlockListProvider
-			value={ {
-				...DEFAULT_BLOCK_LIST_CONTEXT,
-				scrollRef: scrollViewRef.current,
-			} }
+	const { blockToolbar, headerToolbar, floatingToolbar } = styles;
+
+	const containerStyle = {
+		flex: isRootList ? 1 : 0,
+		// We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks.
+		marginVertical: isRootList ? 0 : -marginVertical,
+		marginHorizontal: isRootList ? 0 : -marginHorizontal,
+	};
+
+	const isContentStretch = contentResizeMode === 'stretch';
+	const isMultiBlocks = blockClientIds.length > 1;
+	const { isWider } = alignmentHelpers;
+	const extraScrollHeight =
+		headerToolbar.height +
+		blockToolbar.height +
+		( isFloatingToolbarVisible ? floatingToolbar.height : 0 );
+
+	return (
+		<View
+			style={ containerStyle }
+			onAccessibilityEscape={ clearSelectedBlock }
+			onLayout={ onLayout }
+			testID="block-list-wrapper"
 		>
-			<BlockDraggableWrapper isRTL={ isRTL }>
-				{ ( { onScroll } ) => renderList( { onScroll } ) }
-			</BlockDraggableWrapper>
-		</BlockListProvider>
-	) : (
-		<BlockListConsumer>
-			{ ( { scrollRef } ) =>
-				renderList( {
-					parentScrollRef: scrollRef,
-				} )
-			}
-		</BlockListConsumer>
+			{ isRootList ? (
+				<BlockListProvider
+					value={ {
+						...DEFAULT_BLOCK_LIST_CONTEXT,
+						scrollRef: scrollViewRef.current,
+					} }
+				>
+					<BlockDraggableWrapper isRTL={ isRTL }>
+						{ ( { onScroll } ) => (
+							<KeyboardAwareFlatList
+								{ ...( Platform.OS === 'android'
+									? { removeClippedSubviews: false }
+									: {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
+								accessibilityLabel="block-list"
+								innerRef={ ( ref ) => {
+									scrollViewRef.current = ref;
+								} }
+								extraScrollHeight={ extraScrollHeight }
+								keyboardShouldPersistTaps="always"
+								scrollViewStyle={ { flex: 1 } }
+								extraData={ getExtraData() }
+								scrollEnabled={ isRootList }
+								contentContainerStyle={ [
+									horizontal &&
+										styles.horizontalContentContainer,
+									isWider( blockWidth, 'medium' ) &&
+										( isContentStretch && isMultiBlocks
+											? styles.horizontalContentContainerStretch
+											: styles.horizontalContentContainerCenter ),
+								] }
+								data={ blockClientIds }
+								keyExtractor={ identity }
+								renderItem={ renderItem }
+								CellRendererComponent={ BlockListItemCell }
+								shouldPreventAutomaticScroll={
+									shouldFlatListPreventAutomaticScroll
+								}
+								ListHeaderComponent={ header }
+								ListEmptyComponent={
+									! isReadOnly && (
+										<EmptyList
+											orientation={ orientation }
+											rootClientId={ rootClientId }
+											renderAppender={ renderAppender }
+											renderFooterAppender={
+												renderFooterAppender
+											}
+										/>
+									)
+								}
+								ListFooterComponent={
+									<Footer
+										addBlockToEndOfPost={
+											addBlockToEndOfPost
+										}
+										isReadOnly={ isReadOnly }
+										renderFooterAppender={
+											renderFooterAppender
+										}
+										withFooter={ withFooter }
+									/>
+								}
+								onScroll={ onScroll }
+							/>
+						) }
+					</BlockDraggableWrapper>
+				</BlockListProvider>
+			) : (
+				<>
+					{ blockClientIds.length > 0 ? (
+						<View style={ [ { flex: 0 }, styles.overflowVisible ] }>
+							<View
+								style={ [
+									...getStyles(
+										isStackedHorizontally,
+										horizontalAlignment
+									),
+									horizontal &&
+										styles.horizontalContentContainer,
+								] }
+							>
+								{ blockClientIds.map(
+									( currentClientId, index ) => {
+										return (
+											<View key={ currentClientId }>
+												{ renderItem( {
+													item: currentClientId,
+													index,
+												} ) }
+											</View>
+										);
+									}
+								) }
+								<Footer
+									addBlockToEndOfPost={ addBlockToEndOfPost }
+									isReadOnly={ isReadOnly }
+									renderFooterAppender={
+										renderFooterAppender
+									}
+									withFooter={ withFooter }
+								/>
+							</View>
+						</View>
+					) : (
+						<EmptyList
+							orientation={ orientation }
+							rootClientId={ rootClientId }
+							renderAppender={ renderAppender }
+							renderFooterAppender={ renderFooterAppender }
+						/>
+					) }
+				</>
+			) }
+			{ shouldShowInnerBlockAppender() && (
+				<View
+					style={ {
+						marginHorizontal:
+							marginHorizontal - styles.innerAppender.marginLeft,
+					} }
+				>
+					<BlockListAppender
+						rootClientId={ rootClientId }
+						renderAppender={ renderAppender }
+						showSeparator
+					/>
+				</View>
+			) }
+		</View>
 	);
-
-	return blockList;
 }
 
 function Footer( {
@@ -375,7 +388,7 @@ function Footer( {
 			</>
 		);
 	} else if ( renderFooterAppender ) {
-		return renderFooterAppender();
+		return <View>{ renderFooterAppender() }</View>;
 	}
 
 	return null;
@@ -410,24 +423,22 @@ function EmptyList( {
 					! blockClientIds[ insertionPoint.index ] ),
 		};
 	} );
+	const align = renderAppender ? WIDE_ALIGNMENTS.alignments.full : undefined;
+	const [ wrapperStyles ] = useEditorWrapperStyles( { align } );
 
 	if ( renderFooterAppender || renderAppender === false ) {
 		return null;
 	}
 
+	const containerStyles = [ styles.defaultAppender, wrapperStyles ];
+
 	return (
-		<View style={ styles.defaultAppender }>
-			<ReadableContentView
-				align={
-					renderAppender ? WIDE_ALIGNMENTS.alignments.full : undefined
-				}
-			>
-				<BlockListAppender
-					rootClientId={ rootClientId }
-					renderAppender={ renderAppender }
-					showSeparator={ shouldShowInsertionPoint }
-				/>
-			</ReadableContentView>
+		<View style={ containerStyles }>
+			<BlockListAppender
+				rootClientId={ rootClientId }
+				renderAppender={ renderAppender }
+				showSeparator={ shouldShowInsertionPoint }
+			/>
 		</View>
 	);
 }

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

@@ -52,7 +52,7 @@ describe( 'BlockList', () => {
 			await addBlock( screen, 'Social Icons' );
 			const socialLinksBlock = await getBlock( screen, 'Social Icons' );
 			fireEvent.press( socialLinksBlock );
-			triggerBlockListLayout( socialLinksBlock );
+			await triggerBlockListLayout( socialLinksBlock );
 
 			// Act
 			fireEvent.press(
@@ -82,7 +82,7 @@ describe( 'BlockList', () => {
 			await initializeEditor();
 			await addBlock( screen, 'Group' );
 			const groupBlock = await getBlock( screen, 'Group' );
-			triggerBlockListLayout( groupBlock );
+			await triggerBlockListLayout( groupBlock );
 
 			// Assert
 			expect(

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

@@ -21,7 +21,7 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import useMovingAnimation from '../../use-moving-animation';
-import { BlockListBlockContext } from '../block';
+import { BlockListBlockContext } from '../block-list-block-context';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';
 import { useBlockEditContext } from '../../block-edit/context';

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

@@ -11,6 +11,7 @@ import { isRTL } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import { InsertionPointOpenRef } from '../block-tools/insertion-point';
+import { unlock } from '../../lock-unlock';
 
 export function useInBetweenInserter() {
 	const openRef = useContext( InsertionPointOpenRef );
@@ -29,7 +30,8 @@ export function useInBetweenInserter() {
 		getSelectedBlockClientIds,
 		getTemplateLock,
 		__unstableIsWithinBlockOverlay,
-	} = useSelect( blockEditorStore );
+		getBlockEditingMode,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
@@ -74,8 +76,10 @@ export function useInBetweenInserter() {
 					rootClientId = blockElement.getAttribute( 'data-block' );
 				}
 
-				// Don't set the insertion point if the template is locked.
-				if ( getTemplateLock( rootClientId ) ) {
+				if (
+					getTemplateLock( rootClientId ) ||
+					getBlockEditingMode( rootClientId ) === 'disabled'
+				) {
 					return;
 				}
 

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

@@ -85,6 +85,25 @@ function BlockListAppender( {
 	tagName: TagName = 'div',
 } ) {
 	const appender = useAppender( rootClientId, renderAppender );
+	const isDragOver = useSelect(
+		( select ) => {
+			const {
+				getBlockInsertionPoint,
+				isBlockInsertionPointVisible,
+				getBlockCount,
+			} = select( blockEditorStore );
+			const insertionPoint = getBlockInsertionPoint();
+			// Ideally we should also check for `isDragging` but currently it
+			// requires a lot more setup. We can revisit this once we refactor
+			// the DnD utility hooks.
+			return (
+				isBlockInsertionPointVisible() &&
+				rootClientId === insertionPoint?.rootClientId &&
+				getBlockCount( rootClientId ) === 0
+			);
+		},
+		[ rootClientId ]
+	);
 
 	if ( ! appender ) {
 		return null;
@@ -101,10 +120,9 @@ function BlockListAppender( {
 			//
 			// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
 			tabIndex={ -1 }
-			className={ classnames(
-				'block-list-appender wp-block',
-				className
-			) }
+			className={ classnames( 'block-list-appender wp-block', className, {
+				'is-drag-over': isDragOver,
+			} ) }
 			// Needed in case the whole editor is content editable (for multi
 			// selection). It fixes an edge case where ArrowDown and ArrowRight
 			// should collapse the selection to the end of that selection and

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -39,6 +39,10 @@ import { store as coreStore } from '@wordpress/core-data';
 import { getMoversSetup } from '../block-mover/mover-description';
 import { store as blockEditorStore } from '../../store';
 import BlockTransformationsMenu from '../block-switcher/block-transformations-menu';
+import {
+	useConvertToGroupButtons,
+	useConvertToGroupButtonProps,
+} from '../convert-to-group-buttons';
 
 const BlockActionsMenu = ( {
 	// Select.
@@ -55,6 +59,7 @@ const BlockActionsMenu = ( {
 	rootClientId,
 	selectedBlockClientId,
 	selectedBlockPossibleTransformations,
+	canRemove,
 	// Dispatch.
 	createSuccessNotice,
 	convertToRegularBlocks,
@@ -93,6 +98,17 @@ const BlockActionsMenu = ( {
 		},
 	} = getMoversSetup( isStackedHorizontally, moversOptions );
 
+	// Check if selected block is Groupable and/or Ungroupable.
+	const convertToGroupButtonProps = useConvertToGroupButtonProps( [
+		selectedBlockClientId,
+	] );
+	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
+	const showConvertToGroupButton =
+		( isGroupable || isUngroupable ) && canRemove;
+	const convertToGroupButtons = useConvertToGroupButtons( {
+		...convertToGroupButtonProps,
+	} );
+
 	const allOptions = {
 		settings: {
 			id: 'settingsOption',
@@ -229,6 +245,10 @@ const BlockActionsMenu = ( {
 		canDuplicate && allOptions.cutButton,
 		canDuplicate && isPasteEnabled && allOptions.pasteButton,
 		canDuplicate && allOptions.duplicateButton,
+		showConvertToGroupButton && isGroupable && convertToGroupButtons.group,
+		showConvertToGroupButton &&
+			isUngroupable &&
+			convertToGroupButtons.ungroup,
 		isReusableBlockType &&
 			innerBlockCount > 0 &&
 			allOptions.convertToRegularBlocks,
@@ -327,6 +347,7 @@ export default compose(
 			getSelectedBlockClientIds,
 			canInsertBlockType,
 			getTemplateLock,
+			canRemoveBlock,
 		} = select( blockEditorStore );
 		const block = getBlock( clientId );
 		const blockName = getBlockName( clientId );
@@ -363,6 +384,7 @@ export default compose(
 		const selectedBlockPossibleTransformations = selectedBlock
 			? getBlockTransformItems( selectedBlock, rootClientId )
 			: EMPTY_BLOCK_LIST;
+		const canRemove = canRemoveBlock( selectedBlockClientId );
 
 		const isReusableBlockType = block ? isReusableBlock( block ) : false;
 		const reusableBlock = isReusableBlockType
@@ -388,6 +410,7 @@ export default compose(
 			rootClientId,
 			selectedBlockClientId,
 			selectedBlockPossibleTransformations,
+			canRemove,
 		};
 	} ),
 	withDispatch(

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

@@ -55,6 +55,7 @@
 }
 
 .block-editor-block-mover__drag-handle {
+	cursor: grab;
 	@include break-small() {
 		width: $block-toolbar-height * 0.5;
 		min-width: 0 !important; // overrides default button width.

package/src/components/block-styles/preview-panel.js

@@ -33,7 +33,5 @@ export default function BlockStylesPreviewPanel( {
 		};
 	}, [ genericPreviewBlock, styleClassName ] );
 
-	return (
-		<InserterPreviewPanel item={ previewBlocks } isStylePreview={ true } />
-	);
+	return <InserterPreviewPanel item={ previewBlocks } />;
 }

package/src/components/block-switcher/block-transformations-menu.js

@@ -14,6 +14,7 @@ import { useState, useMemo } from '@wordpress/element';
  */
 import BlockIcon from '../block-icon';
 import PreviewBlockPopover from './preview-block-popover';
+import BlockVariationTransformations from './block-variation-transformations';
 
 /**
  * Helper hook to group transformations to display them in a specific order in the UI.
@@ -65,7 +66,9 @@ function useGroupedTransforms( possibleBlockTransformations ) {
 const BlockTransformationsMenu = ( {
 	className,
 	possibleBlockTransformations,
+	possibleBlockVariationTransformations,
 	onSelect,
+	onSelectVariation,
 	blocks,
 } ) => {
 	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
@@ -95,6 +98,15 @@ const BlockTransformationsMenu = ( {
 						) }
 					/>
 				) }
+				{ !! possibleBlockVariationTransformations?.length && (
+					<BlockVariationTransformations
+						transformations={
+							possibleBlockVariationTransformations
+						}
+						blocks={ blocks }
+						onSelect={ onSelectVariation }
+					/>
+				) }
 				{ priorityTextTransformations.map( ( item ) => (
 					<BlockTranformationItem
 						key={ item.name }