change approach and use negative margins

packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.js

@@ -8,17 +8,10 @@ import { View, TouchableWithoutFeedback } from 'react-native';
  */
 import styles from './block-mobile-floating-toolbar.scss';
 
-const FloatingToolbar = ( { children, isFirstBlock } ) => {
+const FloatingToolbar = ( { children } ) => {
 	return (
 		<TouchableWithoutFeedback>
-			<View
-				style={ [
-					styles.floatingToolbar,
-					isFirstBlock && styles.withMargin,
-				] }
-			>
-				{ children }
-			</View>
+			<View style={ styles.floatingToolbar }>{ children }</View>
 		</TouchableWithoutFeedback>
 	);
 };

packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.scss

@@ -22,8 +22,3 @@ $floating-toolbar-height: 44;
 .floatingToolbarFillColorDark {
 	background-color: rgba(#3c434a, 0.85);
 }
-
-.withMargin {
-	margin-top: -$block-edge-to-content;
-	margin-bottom: 24;
-}

packages/block-editor/src/components/block-list/block.native.js

@@ -79,27 +79,6 @@ class BlockListBlock extends Component {
 		);
 	}
 
-	applyBlockStyle() {
-		const {
-			isDimmed,
-			hasParent,
-			isLastBlock,
-			isFirstBlock,
-			isHorizontal,
-			isSelected,
-		} = this.props;
-		return [
-			// Do not add horizontal margin in nested blocks
-			! hasParent && styles.withMarginHorizontal,
-			// remove margin bottom for the last block (the margin is added to the parent)
-			! isLastBlock && ! isSelected && styles.isVerticalMarginBottom,
-			// remove margin top for the first block that is not on the root level (the margin is added to the parent)
-			! ( isFirstBlock && hasParent ) && styles.isVerticalMarginTop,
-			isHorizontal && styles.isHorizontal,
-			isDimmed && styles.dimmed,
-		];
-	}
-
 	render() {
 		const {
 			attributes,
@@ -111,14 +90,15 @@ class BlockListBlock extends Component {
 			order,
 			title,
 			parentId,
-			isFirstBlock,
-			isHorizontal,
+			isDimmed,
 			isTouchable,
 			hasParent,
 			isParentSelected,
 			onSelect,
 			showFloatingToolbar,
 			getStylesFromColorScheme,
+			marginVertical,
+			marginHorizontal,
 		} = this.props;
 
 		const accessibilityLabel = getAccessibleBlockLabel(
@@ -135,11 +115,7 @@ class BlockListBlock extends Component {
 			>
 				<View accessibilityLabel={ accessibilityLabel }>
 					{ showFloatingToolbar && (
-						<FloatingToolbar
-							isFirstBlock={
-								( hasParent && isFirstBlock ) || isHorizontal
-							}
-						>
+						<FloatingToolbar>
 							{ hasParent && (
 								<Toolbar passedStyle={ styles.toolbar }>
 									<ToolbarButton
@@ -156,7 +132,10 @@ class BlockListBlock extends Component {
 					<View
 						pointerEvents={ isTouchable ? 'auto' : 'box-only' }
 						accessibilityLabel={ accessibilityLabel }
-						style={ this.applyBlockStyle() }
+						style={ [
+							{ marginVertical, marginHorizontal },
+							isDimmed && styles.dimmed,
+						] }
 					>
 						{ isSelected && (
 							<View
@@ -217,7 +196,6 @@ export default compose( [
 
 		const order = getBlockIndex( clientId, rootClientId );
 		const isSelected = isBlockSelected( clientId );
-		const isFirstBlock = order === 0;
 		const isLastBlock = order === getBlockCount( rootClientId ) - 1;
 		const block = __unstableGetBlockWithoutInnerBlocks( clientId );
 		const { name, attributes, isValid } = block || {};
@@ -276,8 +254,6 @@ export default compose( [
 			! isDescendantSelected &&
 			( isDescendantOfParentSelected || rootBlockId === clientId );
 
-		const isHorizontal = false;
-
 		return {
 			icon,
 			name: name || 'core/missing',
@@ -286,10 +262,8 @@ export default compose( [
 			attributes,
 			blockType,
 			isLastBlock,
-			isFirstBlock,
 			isSelected,
 			isValid,
-			isHorizontal,
 			parentId,
 			isParentSelected,
 			firstToSelectId,

packages/block-editor/src/components/block-list/block.native.scss

@@ -84,22 +84,3 @@
 	border-radius: 2px;
 	border-style: dashed;
 }
-
-.withMarginHorizontal {
-	margin-left: $block-edge-to-content;
-	margin-right: $block-edge-to-content;
-}
-
-.isVerticalMarginTop {
-	margin-top: $block-edge-to-content;
-}
-
-.isVerticalMarginBottom {
-	margin-bottom: $block-edge-to-content;
-}
-
-.isHorizontal {
-	margin-bottom: 2 * $block-edge-to-content;
-	margin-top: 0;
-	flex: 1;
-}

packages/block-editor/src/components/block-list/index.native.js

@@ -99,14 +99,22 @@ export class BlockList extends Component {
 			isRootList,
 			shouldShowInsertionPointBefore,
 			shouldShowInsertionPointAfter,
+			marginVertical = styles.defaultBlock.marginTop,
+			marginHorizontal = styles.defaultBlock.marginLeft,
 		} = this.props;
 
 		const forceRefresh =
 			shouldShowInsertionPointBefore || shouldShowInsertionPointAfter;
 
+		const containerStyle = {
+			flex: isRootList ? 1 : 0,
+			marginVertical: isRootList ? 0 : -marginVertical,
+			marginHorizontal: isRootList ? 0 : -marginHorizontal,
+		};
+
 		return (
 			<View
-				style={ { flex: isRootList ? 1 : 0 } }
+				style={ containerStyle }
 				onAccessibilityEscape={ clearSelectedBlock }
 			>
 				<KeyboardAwareFlatList
@@ -157,6 +165,8 @@ export class BlockList extends Component {
 			isReadOnly,
 			shouldShowInsertionPointBefore,
 			shouldShowInsertionPointAfter,
+			marginVertical = styles.defaultBlock.marginTop,
+			marginHorizontal = styles.defaultBlock.marginLeft,
 		} = this.props;
 
 		return (
@@ -169,6 +179,8 @@ export class BlockList extends Component {
 						key={ clientId }
 						showTitle={ false }
 						clientId={ clientId }
+						marginVertical={ marginVertical }
+						marginHorizontal={ marginHorizontal }
 						rootClientId={ this.props.rootClientId }
 						onCaretVerticalPositionChange={
 							this.onCaretVerticalPositionChange

packages/block-editor/src/components/block-list/style.native.scss

@@ -51,3 +51,7 @@
 	margin-right: - 9;
 	margin-top: 10;
 }
+
+.defaultBlock {
+	margin: $block-edge-to-content;
+}

packages/block-editor/src/components/inner-blocks/index.native.js

@@ -109,13 +109,20 @@ class InnerBlocks extends Component {
 	}
 
 	render() {
-		const { clientId, renderAppender } = this.props;
+		const {
+			clientId,
+			renderAppender,
+			marginVertical,
+			marginHorizontal,
+		} = this.props;
 		const { templateInProcess } = this.state;
 
 		return (
 			<>
 				{ ! templateInProcess && (
 					<BlockList
+						marginVertical={ marginVertical }
+						marginHorizontal={ marginHorizontal }
 						rootClientId={ clientId }
 						renderAppender={ renderAppender }
 						withFooter={ false }