[RNMobile] Adjust vertical margins in InnerBlock (#19960)

* adjust vertical margins in group block
WordPress · Feb 3, 2020 · 258bce3 · 258bce3
1 parent 8ef615e
commit 258bce3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -76,6 +76,8 @@ $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $b
 $block-selected-child-to-content: $block-selected-to-content - $block-selected-child-margin - $block-selected-child-border-width;
 $block-custom-appender-to-content: $block-selected-margin - $block-selected-border-width;
 $block-media-container-to-content: $block-selected-child-margin + $block-selected-border-width;
+$block-selected-vertical-margin-descendant: 2 * $block-selected-to-content;
+$block-selected-vertical-margin-child: $block-edge-to-content;
 
 // Buttons & UI Widgets
 $radius-round-rectangle: 4px;

diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -125,6 +125,7 @@ class BlockListBlock extends Component {
 			isAncestorSelected,
 			hasParent,
 			getStylesFromColorScheme,
+			isLastBlock,
 		} = this.props;
 
 		// if block does not have parent apply neutral or full
@@ -146,16 +147,24 @@ class BlockListBlock extends Component {
 
 			// return apply childOfSelected or childOfSelectedLeaf
 			// margins depending if block has children or not
-			return hasChildren
-				? { ...styles.childOfSelected, ...dashedBorderStyle }
-				: { ...styles.childOfSelectedLeaf, ...dashedBorderStyle };
+			return {
+				...( hasChildren
+					? styles.childOfSelected
+					: styles.childOfSelectedLeaf ),
+				...dashedBorderStyle,
+				...( ! isLastBlock && styles.marginVerticalChild ),
+			};
 		}
 
 		if ( isAncestorSelected ) {
 			// ancestor of a block is selected
 			return {
 				...styles.descendantOfSelectedLeaf,
-				...( hasChildren && styles.marginHorizontalNone ),
+				...( hasChildren && {
+					...styles.marginHorizontalNone,
+					...styles.marginVerticalNone,
+				} ),
+				...( ! isLastBlock && styles.marginVerticalDescendant ),
 			};
 		}
 
@@ -255,7 +264,6 @@ export default compose( [
 	withSelect( ( select, { clientId, rootClientId } ) => {
 		const {
 			getBlockIndex,
-			getBlocks,
 			isBlockSelected,
 			__unstableGetBlockWithoutInnerBlocks,
 			getBlockHierarchyRootClientId,
@@ -271,7 +279,7 @@ export default compose( [
 
 		const order = getBlockIndex( clientId, rootClientId );
 		const isSelected = isBlockSelected( clientId );
-		const isLastBlock = order === getBlocks().length - 1;
+		const isLastBlock = order === getBlockCount( rootClientId ) - 1;
 		const block = __unstableGetBlockWithoutInnerBlocks( clientId );
 		const { name, attributes, isValid } = block || {};
 

diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss
@@ -54,6 +54,19 @@
 	margin-right: 0;
 }
 
+.marginVerticalDescendant {
+	margin-bottom: $block-selected-vertical-margin-descendant;
+}
+
+.marginVerticalChild {
+	margin-bottom: $block-selected-vertical-margin-child;
+}
+
+.marginVerticalNone {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
 .blockTitle {
 	background-color: $gray;
 	padding-left: 8px;