Adjust margin for containers

WordPress · Sep 25, 2020 · 73b2181 · 73b2181
1 parent 451dc09
commit 73b2181
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 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
@@ -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
@@ -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
@@ -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 (