[RNMobile] Full width columns

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

@@ -51,39 +51,62 @@ export class BlockListItem extends Component {
 			blockAlignment,
 			marginHorizontal,
 			parentBlockAlignment,
+			hasParents,
+			blockName,
+			parentBlockName,
 		} = this.props;
 		const { blockWidth } = this.state;
-
-		if ( blockAlignment === WIDE_ALIGNMENTS.alignments.full ) {
-			return 0;
+		const { medium } = ALIGNMENT_BREAKPOINTS;
+		const { alignments, innerContainers } = WIDE_ALIGNMENTS;
+		const isFullWidth = blockAlignment === alignments.full;
+		const isWideWidth = blockAlignment === alignments.wide;
+		const isParentFullWidth = parentBlockAlignment === alignments.full;
+
+		if ( isFullWidth ) {
+			if ( ! hasParents ) {
+				return 0;
+			}
+			return marginHorizontal;
 		}
 
-		if ( blockAlignment === WIDE_ALIGNMENTS.alignments.wide ) {
+		if ( isWideWidth ) {
 			return marginHorizontal;
 		}
 
-		if (
-			parentBlockAlignment === WIDE_ALIGNMENTS.alignments.full &&
-			blockWidth <= ALIGNMENT_BREAKPOINTS.medium
-		) {
+		if ( isParentFullWidth && blockWidth <= medium ) {
+			const isContainerRelated = innerContainers.includes( blockName );
+			const isParentContainerRelated = innerContainers.includes(
+				parentBlockName
+			);
+
+			if ( isContainerRelated || isParentContainerRelated ) {
+				return marginHorizontal;
+			}
 			return marginHorizontal * 2;
 		}
 
 		return marginHorizontal;
 	}
 
 	getContentStyles( readableContentViewStyle ) {
-		const { blockAlignment, hasParents } = this.props;
-		const isFullWidth = blockAlignment === WIDE_ALIGNMENTS.alignments.full;
+		const { blockAlignment, hasParents, parentBlockName } = this.props;
+		const { alignments, innerContainers } = WIDE_ALIGNMENTS;
+
+		const isFullWidth = blockAlignment === alignments.full;
+
+		const isParentContainerRelated = innerContainers.includes(
+			parentBlockName
+		);
 
 		return [
 			readableContentViewStyle,
 			isFullWidth &&
 				! hasParents && {
 					width: styles.fullAlignment.width,
 				},
-			isFullWidth &&
-				hasParents && {
+			! blockAlignment &&
+				hasParents &&
+				! isParentContainerRelated && {
 					paddingHorizontal: styles.fullAlignmentPadding.paddingLeft,
 				},
 		];
@@ -98,6 +121,7 @@ export class BlockListItem extends Component {
 			shouldShowInsertionPointAfter,
 			contentResizeMode,
 			shouldShowInnerBlockAppender,
+			parentWidth,
 			...restProps
 		} = this.props;
 		const readableContentViewStyle =
@@ -107,6 +131,7 @@ export class BlockListItem extends Component {
 			<ReadableContentView
 				align={ blockAlignment }
 				style={ readableContentViewStyle }
+				parentWidth={ parentWidth }
 			>
 				<View
 					style={ this.getContentStyles( readableContentViewStyle ) }
@@ -120,6 +145,7 @@ export class BlockListItem extends Component {
 						key={ clientId }
 						showTitle={ false }
 						clientId={ clientId }
+						parentWidth={ parentWidth }
 						{ ...restProps }
 						marginHorizontal={ this.getMarginHorizontal() }
 					/>
@@ -169,7 +195,7 @@ export default compose( [
 			const isReadOnly = getSettings().readOnly;
 
 			const block = __unstableGetBlockWithoutInnerBlocks( clientId );
-			const { attributes } = block || {};
+			const { attributes, name } = block || {};
 			const { align } = attributes || {};
 			const parents = getBlockParents( clientId, true );
 			const hasParents = !! parents.length;
@@ -178,6 +204,7 @@ export default compose( [
 				: {};
 			const { align: parentBlockAlignment } =
 				parentBlock?.attributes || {};
+			const { name: parentBlockName } = parentBlock || {};
 
 			return {
 				shouldShowInsertionPointBefore,
@@ -186,6 +213,8 @@ export default compose( [
 				hasParents,
 				blockAlignment: align,
 				parentBlockAlignment,
+				blockName: name,
+				parentBlockName,
 			};
 		}
 	),

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

@@ -122,9 +122,10 @@ class BlockListBlock extends Component {
 	getBlockWidth( { nativeEvent } ) {
 		const { layout } = nativeEvent;
 		const { blockWidth } = this.state;
+		const layoutWidth = Math.floor( layout.width );
 
-		if ( blockWidth !== layout.width ) {
-			this.setState( { blockWidth: layout.width } );
+		if ( blockWidth !== layoutWidth ) {
+			this.setState( { blockWidth: layoutWidth } );
 		}
 	}
 
@@ -166,6 +167,7 @@ class BlockListBlock extends Component {
 			marginVertical,
 			marginHorizontal,
 			isInnerBlockSelected,
+			name,
 		} = this.props;
 
 		if ( ! attributes || ! blockType ) {
@@ -181,8 +183,14 @@ class BlockListBlock extends Component {
 		);
 
 		const accessible = ! ( isSelected || isInnerBlockSelected );
+
 		const isFullWidth = align === WIDE_ALIGNMENTS.alignments.full;
 		const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
+		const isScreenWidthEqual = blockWidth === screenWidth;
+
+		const isContainerRelated = WIDE_ALIGNMENTS.innerContainers.includes(
+			name
+		);
 
 		return (
 			<TouchableWithoutFeedback
@@ -210,6 +218,10 @@ class BlockListBlock extends Component {
 									isFullWidth &&
 										blockWidth < screenWidth &&
 										styles.borderFullWidth,
+									isFullWidth &&
+										isContainerRelated &&
+										blockWidth < screenWidth &&
+										styles.containerBorderFullWidth,
 									getStylesFromColorScheme(
 										styles.solidBorderColor,
 										styles.solidBorderColorDark
@@ -249,7 +261,9 @@ class BlockListBlock extends Component {
 									}
 									blockWidth={ blockWidth }
 									anchorNodeRef={ this.anchorNodeRef.current }
-									isFullWidth={ isFullWidth }
+									isFullWidth={
+										isFullWidth || isScreenWidthEqual
+									}
 								/>
 							) }
 						</View>
@@ -327,6 +341,7 @@ export default compose( [
 			isDescendantOfParentSelected ||
 			isParentSelected ||
 			parentId === '';
+
 		return {
 			icon,
 			name: name || 'core/missing',

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

@@ -23,6 +23,11 @@
 	right: 0;
 }
 
+.containerBorderFullWidth {
+	left: -6px;
+	right: -6px;
+}
+
 .dimmed {
 	opacity: $dimmed-opacity;
 }

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

@@ -15,6 +15,7 @@ import {
 	KeyboardAwareFlatList,
 	ReadableContentView,
 	WIDE_ALIGNMENTS,
+	ALIGNMENT_BREAKPOINTS,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -169,6 +170,8 @@ export class BlockList extends Component {
 			isFloatingToolbarVisible,
 			isStackedHorizontally,
 			horizontalAlignment,
+			contentResizeMode,
+			blockWidth,
 		} = this.props;
 		const { parentScrollRef } = extraProps;
 
@@ -216,9 +219,12 @@ export class BlockList extends Component {
 					horizontal={ horizontal }
 					extraData={ this.getExtraData() }
 					scrollEnabled={ isRootList }
-					contentContainerStyle={
-						horizontal && styles.horizontalContentContainer
-					}
+					contentContainerStyle={ [
+						horizontal && styles.horizontalContentContainer,
+						contentResizeMode === 'stretch' &&
+							blockWidth > ALIGNMENT_BREAKPOINTS.medium &&
+							styles.horizontalContentContainerStretch,
+					] }
 					style={ getStyles(
 						isRootList,
 						isStackedHorizontally,

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

@@ -9,11 +9,14 @@
 	flex-wrap: wrap;
 	justify-content: flex-start;
 	align-items: stretch;
-	max-width: $content-width;
 	overflow: visible;
 	width: 100%;
 }
 
+.horizontalContentContainerStretch {
+	justify-content: space-evenly;
+}
+
 .switch {
 	flex-direction: row;
 	justify-content: flex-start;

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

@@ -2,8 +2,8 @@
 	flex-direction: row;
 	height: $mobile-block-toolbar-height;
 	align-items: flex-start;
-	margin-left: 2px;
-	margin-right: 2px;
+	margin-left: $block-selected-margin;
+	margin-right: $block-selected-margin;
 }
 
 .toolbarFullWidth {

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

@@ -50,6 +50,7 @@ function UncontrolledInnerBlocks( props ) {
 		marginHorizontal,
 		horizontalAlignment,
 		filterInnerBlocks,
+		blockWidth,
 		__experimentalLayout: layout = defaultLayout,
 	} = props;
 
@@ -84,6 +85,7 @@ function UncontrolledInnerBlocks( props ) {
 			onAddBlock={ onAddBlock }
 			onDeleteBlock={ onDeleteBlock }
 			filterInnerBlocks={ filterInnerBlocks }
+			blockWidth={ blockWidth }
 		/>
 	);