[RNMobile] Full width columns (#25621)

WordPress · Dec 18, 2020 · 3e70820 · 3e70820
1 parent a30ce7b
commit 3e70820
Show file tree

Hide file tree

Showing 24 changed files with 610 additions and 176 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
@@ -1,19 +1,15 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { View, Dimensions } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import {
-	ReadableContentView,
-	WIDE_ALIGNMENTS,
-	ALIGNMENT_BREAKPOINTS,
-} from '@wordpress/components';
+import { ReadableContentView, alignmentHelpers } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -26,6 +22,13 @@ const stretchStyle = {
 	flex: 1,
 };
 
+const {
+	isFullWidth,
+	isWideWidth,
+	isWider,
+	isContainerRelated,
+} = alignmentHelpers;
+
 export class BlockListItem extends Component {
 	constructor() {
 		super( ...arguments );
@@ -51,39 +54,69 @@ export class BlockListItem extends Component {
 			blockAlignment,
 			marginHorizontal,
 			parentBlockAlignment,
+			hasParents,
+			blockName,
+			parentBlockName,
+			parentWidth,
 		} = this.props;
 		const { blockWidth } = this.state;
 
-		if ( blockAlignment === WIDE_ALIGNMENTS.alignments.full ) {
-			return 0;
+		if ( isFullWidth( blockAlignment ) ) {
+			if ( ! hasParents ) {
+				return 0;
+			}
+			return marginHorizontal;
 		}
-
-		if ( blockAlignment === WIDE_ALIGNMENTS.alignments.wide ) {
+		if ( isWideWidth( blockAlignment ) ) {
 			return marginHorizontal;
 		}
 
+		const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
+
 		if (
-			parentBlockAlignment === WIDE_ALIGNMENTS.alignments.full &&
-			blockWidth <= ALIGNMENT_BREAKPOINTS.medium
+			isFullWidth( parentBlockAlignment ) &&
+			! isWider( blockWidth, 'medium' )
 		) {
+			if (
+				isContainerRelated( blockName ) ||
+				isWider( screenWidth, 'mobile' )
+			) {
+				return marginHorizontal;
+			}
 			return marginHorizontal * 2;
 		}
 
+		if (
+			isContainerRelated( parentBlockName ) &&
+			! isContainerRelated( blockName )
+		) {
+			const isScreenWidthEqual = parentWidth === screenWidth;
+			if ( isScreenWidthEqual || isWider( screenWidth, 'mobile' ) ) {
+				return marginHorizontal * 2;
+			}
+		}
+
 		return marginHorizontal;
 	}
 
 	getContentStyles( readableContentViewStyle ) {
-		const { blockAlignment, hasParents } = this.props;
-		const isFullWidth = blockAlignment === WIDE_ALIGNMENTS.alignments.full;
+		const {
+			blockAlignment,
+			blockName,
+			hasParents,
+			parentBlockName,
+		} = this.props;
 
 		return [
 			readableContentViewStyle,
-			isFullWidth &&
+			isFullWidth( blockAlignment ) &&
 				! hasParents && {
 					width: styles.fullAlignment.width,
 				},
-			isFullWidth &&
-				hasParents && {
+			! blockAlignment &&
+				hasParents &&
+				! isContainerRelated( parentBlockName ) &&
+				isContainerRelated( blockName ) && {
 					paddingHorizontal: styles.fullAlignmentPadding.paddingLeft,
 				},
 		];
@@ -98,15 +131,23 @@ export class BlockListItem extends Component {
 			shouldShowInsertionPointAfter,
 			contentResizeMode,
 			shouldShowInnerBlockAppender,
+			parentWidth,
+			marginHorizontal,
+			blockName,
 			...restProps
 		} = this.props;
 		const readableContentViewStyle =
 			contentResizeMode === 'stretch' && stretchStyle;
-
 		return (
 			<ReadableContentView
 				align={ blockAlignment }
-				style={ readableContentViewStyle }
+				style={ [
+					readableContentViewStyle,
+					isContainerRelated( blockName ) &&
+						parentWidth && {
+							maxWidth: parentWidth + 2 * marginHorizontal,
+						},
+				] }
 			>
 				<View
 					style={ this.getContentStyles( readableContentViewStyle ) }
@@ -120,6 +161,7 @@ export class BlockListItem extends Component {
 						key={ clientId }
 						showTitle={ false }
 						clientId={ clientId }
+						parentWidth={ parentWidth }
 						{ ...restProps }
 						marginHorizontal={ this.getMarginHorizontal() }
 					/>
@@ -169,7 +211,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 +220,7 @@ export default compose( [
 				: {};
 			const { align: parentBlockAlignment } =
 				parentBlock?.attributes || {};
+			const { name: parentBlockName } = parentBlock || {};
 
 			return {
 				shouldShowInsertionPointBefore,
@@ -186,6 +229,8 @@ export default compose( [
 				hasParents,
 				blockAlignment: align,
 				parentBlockAlignment,
+				blockName: name,
+				parentBlockName,
 			};
 		}
 	),

diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -10,7 +10,7 @@ import { Component, createRef } from '@wordpress/element';
 import {
 	GlobalStylesContext,
 	getMergedGlobalStyles,
-	WIDE_ALIGNMENTS,
+	alignmentHelpers,
 } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
@@ -28,6 +28,8 @@ import BlockEdit from '../block-edit';
 import BlockInvalidWarning from './block-invalid-warning';
 import BlockMobileToolbar from '../block-mobile-toolbar';
 
+const { isFullWidth, isWider, isContainerRelated } = alignmentHelpers;
+
 function BlockForType( {
 	attributes,
 	clientId,
@@ -122,9 +124,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,12 +169,12 @@ class BlockListBlock extends Component {
 			marginVertical,
 			marginHorizontal,
 			isInnerBlockSelected,
+			name,
 		} = this.props;
 
 		if ( ! attributes || ! blockType ) {
 			return null;
 		}
-
 		const { blockWidth } = this.state;
 		const { align } = attributes;
 		const accessibilityLabel = getAccessibleBlockLabel(
@@ -181,8 +184,10 @@ 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 isScreenWidthWider = blockWidth < screenWidth;
+		const isFullWidthToolbar = isFullWidth( align ) || isScreenWidthEqual;
 
 		return (
 			<TouchableWithoutFeedback
@@ -207,9 +212,13 @@ class BlockListBlock extends Component {
 								pointerEvents="box-none"
 								style={ [
 									styles.solidBorder,
-									isFullWidth &&
-										blockWidth < screenWidth &&
+									isFullWidth( align ) &&
+										isScreenWidthWider &&
 										styles.borderFullWidth,
+									isFullWidth( align ) &&
+										isContainerRelated( name ) &&
+										isScreenWidthWider &&
+										styles.containerBorderFullWidth,
 									getStylesFromColorScheme(
 										styles.solidBorderColor,
 										styles.solidBorderColorDark
@@ -237,7 +246,13 @@ class BlockListBlock extends Component {
 							/>
 						) }
 						<View
-							style={ styles.neutralToolbar }
+							style={ [
+								styles.neutralToolbar,
+								! isFullWidthToolbar &&
+									isContainerRelated( name ) &&
+									isWider( screenWidth, 'mobile' ) &&
+									styles.containerToolbar,
+							] }
 							ref={ this.anchorNodeRef }
 						>
 							{ isSelected && (
@@ -249,7 +264,7 @@ class BlockListBlock extends Component {
 									}
 									blockWidth={ blockWidth }
 									anchorNodeRef={ this.anchorNodeRef.current }
-									isFullWidth={ isFullWidth }
+									isFullWidth={ isFullWidthToolbar }
 								/>
 							) }
 						</View>

diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss
@@ -23,6 +23,11 @@
 	right: 0;
 }
 
+.containerBorderFullWidth {
+	left: -$solid-border-space / 2;
+	right: -$solid-border-space / 2;
+}
+
 .dimmed {
 	opacity: $dimmed-opacity;
 }
@@ -51,6 +56,11 @@
 	margin-right: -$block-edge-to-content;
 }
 
+.containerToolbar {
+	width: 100%;
+	align-self: center;
+}
+
 .solidBorder {
 	position: absolute;
 	top: -$solid-border-space;

diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -15,6 +15,7 @@ import {
 	KeyboardAwareFlatList,
 	ReadableContentView,
 	WIDE_ALIGNMENTS,
+	alignmentHelpers,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -47,6 +48,7 @@ const getStyles = (
 	stylesMemo[ styleName ] = computedStyles;
 	return computedStyles;
 };
+const { isWider } = alignmentHelpers;
 
 export class BlockList extends Component {
 	constructor() {
@@ -169,6 +171,8 @@ export class BlockList extends Component {
 			isFloatingToolbarVisible,
 			isStackedHorizontally,
 			horizontalAlignment,
+			contentResizeMode,
+			blockWidth,
 		} = this.props;
 		const { parentScrollRef } = extraProps;
 
@@ -185,6 +189,10 @@ export class BlockList extends Component {
 			marginVertical: isRootList ? 0 : -marginVertical,
 			marginHorizontal: isRootList ? 0 : -marginHorizontal,
 		};
+
+		const isContentStretch = contentResizeMode === 'stretch';
+		const isMultiBlocks = blockClientIds.length > 1;
+
 		return (
 			<View
 				style={ containerStyle }
@@ -216,9 +224,13 @@ export class BlockList extends Component {
 					horizontal={ horizontal }
 					extraData={ this.getExtraData() }
 					scrollEnabled={ isRootList }
-					contentContainerStyle={
-						horizontal && styles.horizontalContentContainer
-					}
+					contentContainerStyle={ [
+						horizontal && styles.horizontalContentContainer,
+						isWider( blockWidth, 'medium' ) &&
+							( isContentStretch && isMultiBlocks
+								? styles.horizontalContentContainerStretch
+								: styles.horizontalContentContainerCenter ),
+					] }
 					style={ getStyles(
 						isRootList,
 						isStackedHorizontally,

diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss
@@ -9,11 +9,18 @@
 	flex-wrap: wrap;
 	justify-content: flex-start;
 	align-items: stretch;
-	max-width: $content-width;
 	overflow: visible;
 	width: 100%;
 }
 
+.horizontalContentContainerStretch {
+	justify-content: space-evenly;
+}
+
+.horizontalContentContainerCenter {
+	justify-content: center;
+}
+
 .switch {
 	flex-direction: row;
 	justify-content: flex-start;