@wordpress/block-editor 12.5.0 → 12.6.0

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/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-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>
 	);
 };
 

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -43,7 +43,19 @@ exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
 `;
 
 exports[`Block Mover Picker should render without crashing and match snapshot 1`] = `
-[
+<View
+  style={
+    [
+      {
+        "height": 44,
+      },
+      {
+        "borderLeftWidth": 0.5,
+      },
+      undefined,
+    ]
+  }
+>
   <View>
     <View
       accessibilityHint="Double tap to move the block to the left"
@@ -99,7 +111,6 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
           }
         >
           <Svg
-            colorScheme="light"
             height={24}
             style={{}}
             viewBox="0 0 24 24"
@@ -111,7 +122,7 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <View>
     <View
       accessibilityHint="Double tap to move the block to the right"
@@ -167,7 +178,6 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
           }
         >
           <Svg
-            colorScheme="light"
             height={24}
             style={{}}
             viewBox="0 0 24 24"
@@ -179,6 +189,6 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
         </View>
       </View>
     </View>
-  </View>,
-]
+  </View>
+</View>
 `;

package/src/components/block-removal-warning-modal/index.js

@@ -50,9 +50,6 @@ export function BlockRemovalWarningModal( { rules } ) {
 		<Modal
 			title={ __( 'Are you sure?' ) }
 			onRequestClose={ clearBlockRemovalPrompt }
-			style={ {
-				maxWidth: '40rem',
-			} }
 		>
 			{ blockNamesForPrompt.length === 1 ? (
 				<p>{ rules[ blockNamesForPrompt[ 0 ] ] }</p>

package/src/components/block-settings/button.native.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, ToolbarButton } from '@wordpress/components';
+import {
+	createSlotFill,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withDispatch } from '@wordpress/data';
 import { cog } from '@wordpress/icons';
@@ -9,11 +13,13 @@ import { cog } from '@wordpress/icons';
 const { Fill, Slot } = createSlotFill( 'SettingsToolbarButton' );
 
 const SettingsButton = ( { openGeneralSidebar } ) => (
-	<ToolbarButton
-		title={ __( 'Open Settings' ) }
-		icon={ cog }
-		onClick={ openGeneralSidebar }
-	/>
+	<ToolbarGroup>
+		<ToolbarButton
+			title={ __( 'Open Settings' ) }
+			icon={ cog }
+			onClick={ openGeneralSidebar }
+		/>
+	</ToolbarGroup>
 );
 
 const SettingsButtonFill = ( props ) => (

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

@@ -9,6 +9,7 @@ import { Platform, findNodeHandle } from 'react-native';
 import {
 	getClipboard,
 	setClipboard,
+	ToolbarGroup,
 	ToolbarButton,
 	Picker,
 } from '@wordpress/components';
@@ -99,9 +100,11 @@ const BlockActionsMenu = ( {
 	} = getMoversSetup( isStackedHorizontally, moversOptions );
 
 	// Check if selected block is Groupable and/or Ungroupable.
-	const convertToGroupButtonProps = useConvertToGroupButtonProps( [
-		selectedBlockClientId,
-	] );
+	const convertToGroupButtonProps = useConvertToGroupButtonProps(
+		// `selectedBlockClientId` can be undefined in some cases where this
+		// component gets re-rendered right after the block is removed.
+		selectedBlockClientId ? [ selectedBlockClientId ] : []
+	);
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
 	const showConvertToGroupButton =
 		( isGroupable || isUngroupable ) && canRemove;
@@ -254,11 +257,13 @@ const BlockActionsMenu = ( {
 	// End early if there are no options to show.
 	if ( ! options.length ) {
 		return (
-			<ToolbarButton
-				title={ __( 'Open Block Actions Menu' ) }
-				icon={ moreHorizontalMobile }
-				disabled={ true }
-			/>
+			<ToolbarGroup>
+				<ToolbarButton
+					title={ __( 'Open Block Actions Menu' ) }
+					icon={ moreHorizontalMobile }
+					disabled={ true }
+				/>
+			</ToolbarGroup>
 		);
 	}
 
@@ -294,7 +299,7 @@ const BlockActionsMenu = ( {
 		anchorNodeRef ? findNodeHandle( anchorNodeRef ) : undefined;
 
 	return (
-		<>
+		<ToolbarGroup>
 			<ToolbarButton
 				title={ __( 'Open Block Actions Menu' ) }
 				onClick={ onPickerPresent }
@@ -324,7 +329,7 @@ const BlockActionsMenu = ( {
 				selectedBlock={ getBlocksByClientId( selectedBlockClientId ) }
 				selectedBlockClientId={ selectedBlockClientId }
 			/>
-		</>
+		</ToolbarGroup>
 	);
 };
 

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

@@ -35,9 +35,9 @@ import __unstableBlockNameContext from './block-name-context';
 import { unlock } from '../../lock-unlock';
 
 const BlockToolbar = ( { hideDragHandle } ) => {
+	const { getSelectedBlockClientId } = useSelect( blockEditorStore );
 	const {
 		blockClientIds,
-		blockClientId,
 		blockType,
 		hasFixedToolbar,
 		isDistractionFree,
@@ -61,7 +61,6 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 		return {
 			blockClientIds: selectedBlockClientIds,
-			blockClientId: selectedBlockClientId,
 			blockType:
 				selectedBlockClientId &&
 				getBlockType( getBlockName( selectedBlockClientId ) ),
@@ -91,7 +90,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 				if ( isFocused && isDistractionFree ) {
 					return;
 				}
-				toggleBlockHighlight( blockClientId, isFocused );
+				toggleBlockHighlight( getSelectedBlockClientId(), isFocused );
 			},
 		}
 	);

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

@@ -1,23 +1,60 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import BlockActionsMenu from './block-toolbar-menu';
 import BlockControls from '../block-controls';
+import BlockMover from '../block-mover';
 import UngroupButton from '../ungroup-button';
+import { BlockSettingsButton } from '../block-settings';
 import { store as blockEditorStore } from '../../store';
 
-export default function BlockToolbar() {
-	const { isSelected, isValidAndVisual } = useSelect( ( select ) => {
-		const { getBlockMode, getSelectedBlockClientIds, isBlockValid } =
-			select( blockEditorStore );
+const REMOVE_EMPY_PARENT_BLOCKS = [
+	'core/buttons',
+	'core/columns',
+	'core/social-links',
+];
+
+export default function BlockToolbar( { anchorNodeRef } ) {
+	const {
+		rootClientId,
+		blockClientId,
+		isSelected,
+		isValidAndVisual,
+		isStackedHorizontally,
+		parentBlockName,
+		parentNumberOfInnerBlocks,
+	} = useSelect( ( select ) => {
+		const {
+			getBlockListSettings,
+			getBlockMode,
+			getBlockName,
+			getBlockCount,
+			getBlockRootClientId,
+			getSelectedBlockClientIds,
+			isBlockValid,
+		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
+		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
+		const blockListSettings = getBlockListSettings( blockRootClientId );
+		const orientation = blockListSettings?.orientation;
+		const isBlockStackedHorizontally = orientation === 'horizontal';
+		const parentName = getBlockName( blockRootClientId );
+		const numberOfInnerBlocks = getBlockCount( blockRootClientId );
 
 		return {
+			rootClientId: blockRootClientId,
+			blockClientId: selectedBlockClientId,
 			isSelected: selectedBlockClientIds.length > 0,
+			isStackedHorizontally: isBlockStackedHorizontally,
+			parentBlockName: parentName,
+			parentNumberOfInnerBlocks: numberOfInnerBlocks,
 			isValidAndVisual:
 				selectedBlockClientIds.length === 1
 					? isBlockValid( selectedBlockClientIds[ 0 ] ) &&
@@ -26,6 +63,28 @@ export default function BlockToolbar() {
 		};
 	}, [] );
 
+	const { removeBlock } = useDispatch( blockEditorStore );
+	const onRemove = useCallback( () => {
+		// Temp: remove parent block for specific cases where they don't
+		// have inner blocks, ideally we should match the behavior as in
+		// the Web editor and show a placeholder instead of removing the parent.
+		if (
+			REMOVE_EMPY_PARENT_BLOCKS.includes( parentBlockName ) &&
+			parentNumberOfInnerBlocks === 1
+		) {
+			removeBlock( rootClientId );
+			return;
+		}
+
+		removeBlock( blockClientId );
+	}, [
+		blockClientId,
+		parentBlockName,
+		parentNumberOfInnerBlocks,
+		removeBlock,
+		rootClientId,
+	] );
+
 	if ( ! isSelected ) {
 		return null;
 	}
@@ -34,11 +93,32 @@ export default function BlockToolbar() {
 		<>
 			{ isValidAndVisual && (
 				<>
-					<UngroupButton />
+					<BlockSettingsButton.Slot>
+						{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls. */ }
+						{ ( fills = [ null ] ) => {
+							if ( ! fills?.length > 0 ) {
+								return null;
+							}
+							return fills[ 0 ];
+						} }
+					</BlockSettingsButton.Slot>
 					<BlockControls.Slot group="block" />
 					<BlockControls.Slot />
 					<BlockControls.Slot group="inline" />
 					<BlockControls.Slot group="other" />
+					<UngroupButton />
+
+					<BlockMover
+						clientIds={ [ blockClientId ] }
+						isStackedHorizontally={ isStackedHorizontally }
+					/>
+
+					<BlockActionsMenu
+						clientId={ blockClientId }
+						isStackedHorizontally={ isStackedHorizontally }
+						onDelete={ onRemove }
+						anchorNodeRef={ anchorNodeRef }
+					/>
 				</>
 			) }
 		</>