From 73b2181496ed591ee32180d7fba197dca69ed68f Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Fri, 25 Sep 2020 14:24:22 +0200
Subject: [PATCH] Adjust margin for containers

---
 .../block-list/block-list-item.native.js      | 31 ++++++++++---------
 .../src/components/block-list/block.native.js | 11 +++++--
 .../block-library/src/columns/edit.native.js  |  3 +-
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block-list-item.native.js b/packages/block-editor/src/components/block-list/block-list-item.native.js
index 4b28d681755efc..8719346a8439c7 100644
--- a/packages/block-editor/src/components/block-list/block-list-item.native.js
+++ b/packages/block-editor/src/components/block-list/block-list-item.native.js
@@ -22,6 +22,8 @@ import BlockListBlock from './block';
 import BlockInsertionPoint from './insertion-point';
 import styles from './block-list-item.native.scss';
 
+export const INNER_CONTAINERS = [ 'core/columns', 'core/column', 'core/group' ];
+
 const stretchStyle = {
 	flex: 1,
 };
@@ -53,22 +55,22 @@ export class BlockListItem extends Component {
 			parentBlockAlignment,
 			hasParents,
 			blockName,
-			isColumnsDescendantSelected,
+			isContainerDescendantSelected,
 		} = this.props;
 		const { blockWidth } = this.state;
 		const isFullWidth = blockAlignment === WIDE_ALIGNMENTS.alignments.full;
 		const isWideWidth = blockAlignment === WIDE_ALIGNMENTS.alignments.wide;
 		const isParentFullWidth =
 			parentBlockAlignment === WIDE_ALIGNMENTS.alignments.full;
-		const isColumnsRelated = blockName.includes( 'core/column' );
+		const isContainerRelated = INNER_CONTAINERS.includes( blockName );
 
 		if ( isFullWidth ) {
 			if ( ! hasParents ) {
 				if (
-					isColumnsRelated &&
+					isContainerRelated &&
 					blockWidth < ALIGNMENT_BREAKPOINTS.mobile
 				) {
-					if ( isColumnsDescendantSelected ) {
+					if ( isContainerDescendantSelected ) {
 						return 0;
 					}
 					return marginHorizontal;
@@ -86,7 +88,7 @@ export class BlockListItem extends Component {
 		if (
 			isParentFullWidth &&
 			blockWidth <= ALIGNMENT_BREAKPOINTS.medium &&
-			! isColumnsRelated
+			! isContainerRelated
 		) {
 			return marginHorizontal * 2;
 		}
@@ -207,21 +209,22 @@ export default compose( [
 				parentBlock?.attributes || {};
 
 			const selectedBlockId = getSelectedBlockClientId();
-			const selectedBlockParents = getBlockParents(
+			const selectedBlockParentId = getBlockParents(
 				selectedBlockId
 			)[ 0 ];
 			const { name: selectedBlockParentsName } =
-				__unstableGetBlockWithoutInnerBlocks( selectedBlockParents ) ||
+				__unstableGetBlockWithoutInnerBlocks( selectedBlockParentId ) ||
 				{};
 
-			const isRootInnerBlockSelected = hasSelectedInnerBlock(
-				rootClientId
+			const isInnerBlockSelected =
+				hasParents && hasSelectedInnerBlock( clientId );
+
+			const isContainerBlock = INNER_CONTAINERS.includes(
+				selectedBlockParentsName
 			);
 
-			const isColumnsDescendantSelected = selectedBlockParentsName?.includes(
-				'core/column'
-			)
-				? isRootInnerBlockSelected
+			const isContainerDescendantSelected = isContainerBlock
+				? isInnerBlockSelected
 				: true;
 
 			return {
@@ -232,7 +235,7 @@ export default compose( [
 				blockAlignment: align,
 				parentBlockAlignment,
 				blockName: name,
-				isColumnsDescendantSelected,
+				isContainerDescendantSelected,
 			};
 		}
 	),
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
index 11024b721f58aa..559568d6d2ddc9 100644
--- a/packages/block-editor/src/components/block-list/block.native.js
+++ b/packages/block-editor/src/components/block-list/block.native.js
@@ -7,7 +7,11 @@ import { View, Text, TouchableWithoutFeedback, Dimensions } from 'react-native';
  * WordPress dependencies
  */
 import { Component, createRef } from '@wordpress/element';
-import { GlobalStylesContext, WIDE_ALIGNMENTS } from '@wordpress/components';
+import {
+	GlobalStylesContext,
+	WIDE_ALIGNMENTS,
+	ALIGNMENT_BREAKPOINTS,
+} from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import {
@@ -153,7 +157,10 @@ class BlockListBlock extends Component {
 		const isColumnsRelated = name.includes( 'core/column' );
 		const shouldBeFullWidth =
 			isFullWidth &&
-			( ! isColumnsRelated || ! hasParents || hasParentBlockAlignment );
+			( ! isColumnsRelated ||
+				! hasParents ||
+				( hasParentBlockAlignment &&
+					blockWidth > ALIGNMENT_BREAKPOINTS.mobile ) );
 
 		return (
 			<TouchableWithoutFeedback
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index 6eb83bb0586645..747623518fa57b 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -86,7 +86,6 @@ function ColumnsEditContainer( {
 	onDeleteBlock,
 	innerColumns,
 	updateInnerColumnWidth,
-	hasParents,
 } ) {
 	const [ resizeListener, sizes ] = useResizeObserver();
 	const [ columnsInRow, setColumnsInRow ] = useState( MIN_COLUMNS_NUM );
@@ -250,7 +249,7 @@ function ColumnsEditContainer( {
 	const renderAppender = () => {
 		const isFullWidth = align === WIDE_ALIGNMENTS.alignments.full;
 		const isFullWidthAppender =
-			isFullWidth && ! hasParents && width > ALIGNMENT_BREAKPOINTS.mobile;
+			isFullWidth && width > ALIGNMENT_BREAKPOINTS.mobile;
 
 		if ( isSelected ) {
 			return (