@wordpress/block-editor 12.5.0 → 12.7.0

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

@@ -16,7 +16,6 @@ import TextInputState from 'react-native/Libraries/Components/TextInput/TextInpu
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
-import '@wordpress/jest-console';
 
 /**
  * Internal dependencies
@@ -133,16 +132,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						paragraphBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 
 			it( 'does not enable drag mode when selected and editing text', async () =>
@@ -243,16 +232,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						imageBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 
@@ -301,16 +280,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						galleryBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 
 			it( 'enables drag mode when nested block is selected', async () =>
@@ -336,20 +305,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// After dropping the block, the gallery item gets automatically selected.
-					// Hence, we have to select the gallery item again.
-					fireEvent.press( galleryItem );
-
-					// Start dragging from nested block's mobile toolbar
-					fireLongPress(
-						galleryItem,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 
@@ -390,16 +345,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						spacerBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 	} );
@@ -437,7 +382,7 @@ describe( 'BlockDraggable', () => {
 			// activate the gesture. Since this not available in tests, the library
 			// displays a warning message.
 			expect( console ).toHaveWarnedWith(
-				'[react-native-gesture-handler] You have to use react-native-reanimated in order to control the state of the gesture.'
+				'[Reanimated] You can not use setGestureState in non-worklet function.'
 			);
 			expect( getEditorHtml() ).toMatchSnapshot(
 				'Paragraph block moved from first to second position'
@@ -465,7 +410,7 @@ describe( 'BlockDraggable', () => {
 			// activate the gesture. Since this not available in tests, the library
 			// displays a warning message.
 			expect( console ).toHaveWarnedWith(
-				'[react-native-gesture-handler] You have to use react-native-reanimated in order to control the state of the gesture.'
+				'[Reanimated] You can not use setGestureState in non-worklet function.'
 			);
 			expect( getEditorHtml() ).toMatchSnapshot(
 				'Spacer block moved from third to first position'

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

@@ -29,7 +29,25 @@ import BlockContext from '../block-context';
  */
 const DEFAULT_BLOCK_CONTEXT = {};
 
-export const Edit = ( props ) => {
+const Edit = ( props ) => {
+	const { name } = props;
+	const blockType = getBlockType( name );
+
+	if ( ! blockType ) {
+		return null;
+	}
+
+	// `edit` and `save` are functions or components describing the markup
+	// with which a block is displayed. If `blockType` is valid, assign
+	// them preferentially as the render value for the block.
+	const Component = blockType.edit || blockType.save;
+
+	return <Component { ...props } />;
+};
+
+const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );
+
+const EditWithGeneratedProps = ( props ) => {
 	const { attributes = {}, name } = props;
 	const blockType = getBlockType( name );
 	const blockContext = useContext( BlockContext );
@@ -49,13 +67,8 @@ export const Edit = ( props ) => {
 		return null;
 	}
 
-	// `edit` and `save` are functions or components describing the markup
-	// with which a block is displayed. If `blockType` is valid, assign
-	// them preferentially as the render value for the block.
-	const Component = blockType.edit || blockType.save;
-
 	if ( blockType.apiVersion > 1 ) {
-		return <Component { ...props } context={ context } />;
+		return <EditWithFilters { ...props } context={ context } />;
 	}
 
 	// Generate a class name for the block's editable form.
@@ -69,8 +82,12 @@ export const Edit = ( props ) => {
 	);
 
 	return (
-		<Component { ...props } context={ context } className={ className } />
+		<EditWithFilters
+			{ ...props }
+			context={ context }
+			className={ className }
+		/>
 	);
 };
 
-export default withFilters( 'editor.BlockEdit' )( Edit );
+export default EditWithGeneratedProps;

package/src/components/block-edit/test/edit.js

@@ -15,7 +15,7 @@ import {
 /**
  * Internal dependencies
  */
-import { Edit } from '../edit';
+import Edit from '../edit';
 import { BlockContextProvider } from '../../block-context';
 
 const noop = () => {};

package/src/components/block-editing-mode/index.js

@@ -66,6 +66,6 @@ export function useBlockEditingMode( mode ) {
 				unsetBlockEditingMode( clientId );
 			}
 		};
-	}, [ clientId, mode ] );
+	}, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] );
 	return blockEditingMode;
 }

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

@@ -7,51 +7,52 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { alignmentHelpers } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import styles from './block.scss';
 
+const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing' ];
+
 function BlockOutline( {
-	align,
-	blockWidth,
-	isParentSelected,
+	blockCategory,
+	hasInnerBlocks,
+	isRootList,
 	isSelected,
 	name,
-	screenWidth,
 } ) {
-	const { isFullWidth, isContainerRelated } = alignmentHelpers;
-	const isScreenWidthWider = blockWidth < screenWidth;
+	const textBlockWithOutline = TEXT_BLOCKS_WITH_OUTLINE.includes( name );
+	const hasBlockTextCategory =
+		blockCategory === 'text' && ! textBlockWithOutline;
+	const hasBlockMediaCategory =
+		blockCategory === 'media' ||
+		blockCategory === 'embed' ||
+		! blockCategory;
+	const shouldShowCompactOutline =
+		( hasBlockMediaCategory && ! hasInnerBlocks ) || textBlockWithOutline;
 
 	const styleSolidBorder = [
 		styles.solidBorder,
-		isFullWidth( align ) && isScreenWidthWider && styles.borderFullWidth,
-		isFullWidth( align ) &&
-			isContainerRelated( name ) &&
-			isScreenWidthWider &&
-			styles.containerBorderFullWidth,
 		usePreferredColorSchemeStyle(
 			styles.solidBorderColor,
 			styles.solidBorderColorDark
 		),
+		shouldShowCompactOutline && styles.solidBorderCompact,
+		hasBlockTextCategory && styles.solidBorderTextContent,
 	];
-	const styleDashedBorder = [
-		styles.dashedBorder,
-		usePreferredColorSchemeStyle(
-			styles.dashedBorderColor,
-			styles.dashedBorderColorDark
-		),
-	];
+
+	const shoudlShowOutline =
+		isSelected &&
+		( ( hasBlockTextCategory && hasInnerBlocks ) ||
+			( ! hasBlockTextCategory && hasInnerBlocks ) ||
+			( ! hasBlockTextCategory && isRootList ) ||
+			textBlockWithOutline );
 
 	return (
-		<>
-			{ isSelected && (
-				<View pointerEvents="box-none" style={ styleSolidBorder } />
-			) }
-			{ isParentSelected && <View style={ styleDashedBorder } /> }
-		</>
+		shoudlShowOutline && (
+			<View pointerEvents="box-none" style={ styleSolidBorder } />
+		)
 	);
 }
 

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

@@ -505,9 +505,14 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 			) {
 				__unstableMarkLastChangeAsPersistent();
 			}
+			//Unsynced patterns are nested in an array so we need to flatten them.
+			const replacementBlocks =
+				blocks?.length === 1 && Array.isArray( blocks[ 0 ] )
+					? blocks[ 0 ]
+					: blocks;
 			replaceBlocks(
 				[ ownProps.clientId ],
-				blocks,
+				replacementBlocks,
 				indexToSelect,
 				initialPosition
 			);

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

@@ -1,17 +1,16 @@
 /**
  * External dependencies
  */
-import { Pressable, useWindowDimensions, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo, useRef, useState } from '@wordpress/element';
+import { useCallback, useMemo, useState } from '@wordpress/element';
 import {
 	GlobalStylesContext,
 	getMergedGlobalStyles,
 	useMobileGlobalStylesColors,
-	alignmentHelpers,
 	useGlobalStyles,
 } from '@wordpress/components';
 import {
@@ -36,9 +35,7 @@ import { compose, ifCondition, pure } from '@wordpress/compose';
 import BlockEdit from '../block-edit';
 import BlockDraggable from '../block-draggable';
 import BlockInvalidWarning from './block-invalid-warning';
-import BlockMobileToolbar from '../block-mobile-toolbar';
 import BlockOutline from './block-outline';
-import styles from './block.scss';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
 import useSetting from '../use-setting';
@@ -63,27 +60,21 @@ function getWrapperProps( value, getWrapperPropsFunction ) {
 
 function BlockWrapper( {
 	accessibilityLabel,
-	align,
-	blockWidth,
+	blockCategory,
 	children,
 	clientId,
 	draggingClientId,
 	draggingEnabled,
+	hasInnerBlocks,
 	isDescendentBlockSelected,
-	isParentSelected,
+	isRootList,
 	isSelected,
-	isStackedHorizontally,
 	isTouchable,
 	marginHorizontal,
 	marginVertical,
-	onDeleteBlock,
+	name,
 	onFocus,
 } ) {
-	const { width: screenWidth } = useWindowDimensions();
-	const anchorNodeRef = useRef();
-	const { isFullWidth } = alignmentHelpers;
-	const isScreenWidthEqual = blockWidth === screenWidth;
-	const isFullWidthToolbar = isFullWidth( align ) || isScreenWidthEqual;
 	const blockWrapperStyles = { flex: 1 };
 	const blockWrapperStyle = [
 		blockWrapperStyles,
@@ -104,9 +95,11 @@ function BlockWrapper( {
 			style={ blockWrapperStyle }
 		>
 			<BlockOutline
+				blockCategory={ blockCategory }
+				hasInnerBlocks={ hasInnerBlocks }
+				isRootList={ isRootList }
 				isSelected={ isSelected }
-				isParentSelected={ isParentSelected }
-				screenWidth={ screenWidth }
+				name={ name }
 			/>
 			<BlockDraggable
 				clientId={ clientId }
@@ -116,19 +109,6 @@ function BlockWrapper( {
 			>
 				{ children }
 			</BlockDraggable>
-			<View style={ styles.neutralToolbar } ref={ anchorNodeRef }>
-				{ isSelected && (
-					<BlockMobileToolbar
-						anchorNodeRef={ anchorNodeRef.current }
-						blockWidth={ blockWidth }
-						clientId={ clientId }
-						draggingClientId={ draggingClientId }
-						isFullWidth={ isFullWidthToolbar }
-						isStackedHorizontally={ isStackedHorizontally }
-						onDelete={ onDeleteBlock }
-					/>
-				) }
-			</View>
 		</Pressable>
 	);
 }
@@ -159,9 +139,11 @@ function BlockListBlock( {
 } ) {
 	const {
 		baseGlobalStyles,
+		blockCategory,
 		blockType,
 		draggingClientId,
 		draggingEnabled,
+		hasInnerBlocks,
 		isDescendantOfParentSelected,
 		isDescendentBlockSelected,
 		isParentSelected,
@@ -178,6 +160,7 @@ function BlockListBlock( {
 				hasSelectedInnerBlock,
 			} = select( blockEditorStore );
 			const currentBlockType = getBlockType( name || 'core/missing' );
+			const currentBlockCategory = currentBlockType?.category;
 			const blockOrder = getBlockIndex( clientId );
 			const descendentBlockSelected = hasSelectedInnerBlock(
 				clientId,
@@ -194,13 +177,15 @@ function BlockListBlock( {
 			const selectedParents = clientId ? parents : [];
 			const descendantOfParentSelected =
 				selectedParents.includes( rootClientId );
-			const hasInnerBlocks = getBlockCount( clientId ) > 0;
+			const blockHasInnerBlocks = getBlockCount( clientId ) > 0;
 
 			// For blocks with inner blocks, we only enable the dragging in the nested
 			// blocks if any of them are selected. This way we prevent the long-press
 			// gesture from being disabled for elements within the block UI.
 			const isDraggingEnabled =
-				! hasInnerBlocks || isSelected || ! descendentBlockSelected;
+				! blockHasInnerBlocks ||
+				isSelected ||
+				! descendentBlockSelected;
 			// Dragging nested blocks is not supported yet. For this reason, the block to be dragged
 			// will be the top in the hierarchy.
 			const currentDraggingClientId =
@@ -211,9 +196,11 @@ function BlockListBlock( {
 
 			return {
 				baseGlobalStyles: globalStylesBaseStyles,
+				blockCategory: currentBlockCategory,
 				blockType: currentBlockType,
 				draggingClientId: currentDraggingClientId,
 				draggingEnabled: isDraggingEnabled,
+				hasInnerBlocks: blockHasInnerBlocks,
 				isDescendantOfParentSelected: descendantOfParentSelected,
 				isDescendentBlockSelected: descendentBlockSelected,
 				isParentSelected: parentSelected,
@@ -295,7 +282,6 @@ function BlockListBlock( {
 		),
 	] );
 
-	const { align } = attributes;
 	const isFocused = isSelected || isDescendentBlockSelected;
 	const isTouchable =
 		isSelected ||
@@ -312,20 +298,20 @@ function BlockListBlock( {
 	return (
 		<BlockWrapper
 			accessibilityLabel={ accessibilityLabel }
-			align={ align }
-			blockWidth={ blockWidth }
+			blockCategory={ blockCategory }
 			clientId={ clientId }
 			draggingClientId={ draggingClientId }
 			draggingEnabled={ draggingEnabled }
-			isFocused={ isFocused }
+			hasInnerBlocks={ hasInnerBlocks }
 			isDescendentBlockSelected={ isDescendentBlockSelected }
-			isParentSelected={ isParentSelected }
+			isFocused={ isFocused }
+			isRootList={ ! rootClientId }
 			isSelected={ isSelected }
 			isStackedHorizontally={ isStackedHorizontally }
 			isTouchable={ isTouchable }
 			marginHorizontal={ marginHorizontal }
 			marginVertical={ marginVertical }
-			onDeleteBlock={ onDeleteBlock }
+			name={ name }
 			onFocus={ onFocus }
 		>
 			{ () =>

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

@@ -3,29 +3,11 @@
 }
 
 .solidBorderColor {
-	border-color: $blue-wordpress;
+	border-color: $blue-40;
 }
 
 .solidBorderColorDark {
-	border-color: $blue-30;
-}
-
-.dashedBorderColor {
-	border-color: $gray;
-}
-
-.dashedBorderColorDark {
-	border-color: $gray-70;
-}
-
-.borderFullWidth {
-	left: 0;
-	right: 0;
-}
-
-.containerBorderFullWidth {
-	left: -$solid-border-space * 0.5;
-	right: -$solid-border-space * 0.5;
+	border-color: $blue-50;
 }
 
 .dimmed {
@@ -51,32 +33,28 @@
 	min-height: 50px;
 }
 
-.neutralToolbar {
-	margin-left: -$block-edge-to-content;
-	margin-right: -$block-edge-to-content;
-}
-
 .solidBorder {
 	position: absolute;
-	top: -$solid-border-space;
-	bottom: 0;
-	left: -$solid-border-space;
-	right: -$solid-border-space;
-	border-width: $block-selected-border-width;
-	border-radius: 4px;
+	top: -6px;
+	bottom: -6px;
+	left: -6px;
+	right: -6px;
+	border-width: 2px;
+	border-radius: 2px;
 	border-style: solid;
 	z-index: 1;
 }
 
-.dashedBorder {
-	position: absolute;
-	top: -$dashed-border-space;
-	bottom: -$dashed-border-space;
-	left: -$dashed-border-space;
-	right: -$dashed-border-space;
-	border-width: $block-selected-border-width;
-	border-radius: 2px;
-	border-style: dashed;
+.solidBorderCompact {
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.solidBorderTextContent {
+	left: 0;
+	right: 0;
 }
 
 .fullWidthPadding {

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

@@ -33,7 +33,6 @@ import { useInBetweenInserter } from './use-in-between-inserter';
 import { store as blockEditorStore } from '../../store';
 import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
 import { LayoutProvider, defaultLayout } from './layout';
-import BlockToolsBackCompat from '../block-tools/back-compat';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useInnerBlocksProps } from '../inner-blocks';
 import {
@@ -127,11 +126,9 @@ function Root( { className, ...settings } ) {
 export default function BlockList( settings ) {
 	usePreParsePatterns();
 	return (
-		<BlockToolsBackCompat>
-			<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
-				<Root { ...settings } />
-			</BlockEditContextProvider>
-		</BlockToolsBackCompat>
+		<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
+			<Root { ...settings } />
+		</BlockEditContextProvider>
 	);
 }
 

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

@@ -66,12 +66,12 @@
 }
 
 .defaultBlock {
-	margin: $block-edge-to-content;
+	margin: $block-edge-to-content * 0.5 $block-edge-to-content;
 }
 
 .defaultAppender {
-	margin-top: $block-edge-to-content;
-	margin-bottom: $block-edge-to-content;
+	margin-top: $grid-unit;
+	margin-bottom: $grid-unit;
 	width: 100%;
 }
 

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

@@ -19,6 +19,10 @@ describe( 'Block invalid warning', () => {
             <div styless="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
             <!-- /wp:spacer -->`,
 		} );
+		expect( console ).toHaveErrored();
+		expect( console ).toHaveWarnedWith(
+			'Encountered unexpected attribute `styless`.'
+		);
 
 		// Assert
 		const warningElement = screen.getByText( /Problem displaying block./ );
@@ -32,7 +36,10 @@ describe( 'Block invalid warning', () => {
             <div styless="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
             <!-- /wp:spacer -->`,
 		} );
-
+		expect( console ).toHaveErrored();
+		expect( console ).toHaveWarnedWith(
+			'Encountered unexpected attribute `styless`.'
+		);
 		// Act
 		fireEvent.press( screen.getByText( /Problem displaying block./ ) );
 		const spacerBlock = getBlock( screen, 'Spacer' );

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

@@ -7,7 +7,7 @@ import { Platform } from 'react-native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Picker, ToolbarButton } from '@wordpress/components';
+import { Picker, ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
@@ -107,7 +107,7 @@ export const BlockMover = ( {
 	}
 
 	return (
-		<>
+		<ToolbarGroup>
 			<ToolbarButton
 				title={ ! isFirst ? backwardButtonTitle : firstBlockTitle }
 				isDisabled={ isFirst }
@@ -136,7 +136,7 @@ export const BlockMover = ( {
 				leftAlign={ true }
 				hideCancelButton={ Platform.OS !== 'ios' }
 			/>
-		</>
+		</ToolbarGroup>
 	);
 };