[RNMobile] Adjust new borders implementations to columns PR (#21073)

* adjustments for Columns block to adapt new bordering logic
WordPress · Mar 26, 2020 · 37bad85 · 37bad85
1 parent 3ec4b34
commit 37bad85
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 159 deletions.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -91,15 +91,6 @@ $block-selected-padding: 0;
 $block-selected-child-margin: 5px;
 $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
 
-$block-selected-child-border-width: 1px;
-$block-selected-child-padding: 0;
-$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;
-$block-toolbar-margin: $block-selected-margin + $block-selected-border-width;
-
 /**
  * Border radii.
  */

diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -137,6 +137,7 @@ export class BlockList extends Component {
 					keyboardShouldPersistTaps="always"
 					scrollViewStyle={ {
 						flex: isRootList ? 1 : 0,
+						...( ! isRootList && { overflow: 'visible' } ),
 					} }
 					data={ blockClientIds }
 					keyExtractor={ identity }

diff --git a/packages/block-editor/src/components/block-mobile-toolbar/style.native.scss b/packages/block-editor/src/components/block-mobile-toolbar/style.native.scss
@@ -2,8 +2,6 @@
 	flex-direction: row;
 	height: $mobile-block-toolbar-height;
 	align-items: flex-start;
-	margin-left: $block-toolbar-margin;
-	margin-right: $block-toolbar-margin;
 }
 
 .spacer {

diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js
@@ -25,9 +25,6 @@ function ColumnEdit( {
 	isSelected,
 	getStylesFromColorScheme,
 	isParentSelected,
-	isDescendantOfParentSelected,
-	isDescendantSelected,
-	isAncestorSelected,
 	customBlockProps,
 } ) {
 	const { verticalAlignment } = attributes;
@@ -40,69 +37,11 @@ function ColumnEdit( {
 	const minWidth = Math.min( containerWidth, containerMaxWidth );
 	const columnBaseWidth = minWidth / Math.max( 1, columnsInRow );
 
-	const applyBlockStyle = ( placeholder = false ) => {
-		const pullWidths = ( names ) =>
-			names.map(
-				( name ) =>
-					( styles[ `column-${ name }-margin` ] || {} ).width || 0
-			);
-
+	const applyBlockStyle = () => {
 		let width = columnBaseWidth;
-		const names = [
-			'selected',
-			'parent-selected',
-			'descendant-selected',
-			'placeholder-selected',
-			'dashed-border',
-		];
-		const widths = pullWidths( names );
-		const [
-			emptyColumnSelected,
-			parentSelected,
-			columnSelected,
-			placeholderParentSelected,
-			dashedBorderWidth,
-		] = widths;
-
-		switch ( true ) {
-			case isSelected:
-				width = columnBaseWidth;
-				width -= ! hasChildren
-					? emptyColumnSelected
-					: columnSelected + dashedBorderWidth;
-				break;
-
-			case isParentSelected:
-				width -= placeholder
-					? placeholderParentSelected
-					: parentSelected;
-				break;
-
-			case isDescendantSelected:
-				width = columnBaseWidth;
-				break;
-
-			case isDescendantOfParentSelected:
-				width = columnBaseWidth;
-				if ( ! hasChildren ) width -= emptyColumnSelected;
-				break;
-
-			case isAncestorSelected:
-				width = columnBaseWidth;
-				if ( ! hasChildren ) width -= parentSelected;
-				break;
-
-			case placeholder:
-				width -=
-					columnsInRow === 1
-						? parentSelected
-						: placeholderParentSelected;
-				width -=
-					columnSelected +
-					( columnsInRow === 1 ? parentSelected : dashedBorderWidth );
-				break;
-
-			default:
+		if ( columnsInRow > 1 ) {
+			const margins = columnsInRow * 2 * styles.columnMargin.marginLeft;
+			width = ( minWidth - margins ) / Math.max( 1, columnsInRow );
 		}
 
 		return { width };
@@ -121,11 +60,8 @@ function ColumnEdit( {
 							styles.columnPlaceholder,
 							styles.columnPlaceholderDark
 						),
-					applyBlockStyle( true ),
-					{
-						...styles.marginVerticalDense,
-						...styles.marginHorizontalNone,
-					},
+					applyBlockStyle(),
+					styles.columnPlaceholderNotSelected,
 				] }
 			></View>
 		);
@@ -140,10 +76,16 @@ function ColumnEdit( {
 					isCollapsed={ false }
 				/>
 			</BlockControls>
-			<View style={ applyBlockStyle() }>
+			<View
+				style={ [
+					applyBlockStyle(),
+					isSelected && hasChildren && styles.innerBlocksBottomSpace,
+				] }
+			>
 				<InnerBlocks
 					flatListProps={ {
 						scrollEnabled: false,
+						style: styles.innerBlocks,
 					} }
 					renderAppender={
 						isSelected && InnerBlocks.ButtonBlockAppender
@@ -175,7 +117,6 @@ function ColumnEditWrapper( props ) {
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
 		const {
-			getBlockParents,
 			getBlockCount,
 			getBlockRootClientId,
 			getSelectedBlockClientId,
@@ -190,26 +131,10 @@ export default compose( [
 		const isParentSelected =
 			selectedBlockClientId && selectedBlockClientId === parentId;
 
-		const selectedParents = selectedBlockClientId
-			? getBlockParents( selectedBlockClientId )
-			: [];
-		const isDescendantOfParentSelected = selectedParents.includes(
-			parentId
-		);
-
-		const parents = getBlockParents( clientId, true );
-
-		const isAncestorSelected =
-			selectedBlockClientId && parents.includes( selectedBlockClientId );
-		const isDescendantSelected = selectedParents.includes( clientId );
-
 		return {
 			hasChildren,
 			isParentSelected,
 			isSelected,
-			isDescendantOfParentSelected,
-			isAncestorSelected,
-			isDescendantSelected,
 		};
 	} ),
 	withPreferredColorScheme,

diff --git a/packages/block-library/src/column/editor.native.scss b/packages/block-library/src/column/editor.native.scss
@@ -1,4 +1,9 @@
+.columnPlaceholderNotSelected {
+	padding-top: $block-selected-to-content;
+}
+
 .columnPlaceholder {
+	flex: 1;
 	padding: $block-selected-to-content;
 	background-color: $white;
 	border: $border-width dashed $gray;
@@ -10,44 +15,18 @@
 	border: $border-width dashed $gray-70;
 }
 
-.marginVerticalDense {
-	margin-top: $block-selected-child-to-content;
-	margin-bottom: $block-selected-child-to-content;
+.innerBlocks {
+	overflow: visible;
 }
 
-.marginHorizontalNone {
-	margin-left: 0;
-	margin-right: 0;
+.innerBlocksBottomSpace {
+	margin-bottom: $block-selected-to-content;
 }
 
 .columns-container {
 	max-width: $content-width;
 }
 
-.column-container-base {
-	max-width: $content-width - 2 * ( $block-selected-margin + $block-selected-border-width );
-}
-
-.column-placeholder-selected-margin {
-	width: 2 * $block-selected-to-content;
-}
-
-.column-parent-selected-margin {
-	width: $block-selected-to-content;
-}
-
-.column-selected-margin {
-	width: 2 * $block-edge-to-content;
-}
-
-.column-descendant-selected-margin {
-	width: 2 * $block-selected-margin;
-}
-
-.column-dashed-border-margin {
-	width: 2 * $block-selected-border-width;
-}
-
 .is-vertically-aligned-top {
 	justify-content: flex-start;
 }
@@ -63,3 +42,7 @@
 .flexBase {
 	flex: 1;
 }
+
+.columnMargin {
+	margin: $block-edge-to-content / 2;
+}
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
@@ -122,7 +122,7 @@ function ColumnsEditContainer( {
 					isCollapsed={ false }
 				/>
 			</BlockControls>
-			<View>
+			<View style={ isSelected && styles.innerBlocksSelected }>
 				{ resizeListener }
 				<InnerBlocks
 					renderAppender={ renderAppender }
@@ -132,12 +132,10 @@ function ColumnsEditContainer( {
 							: undefined
 					}
 					flatListProps={ {
-						contentContainerStyle: {
-							...styles.columnsContainer,
-							maxWidth: width,
-						},
+						contentContainerStyle: styles.columnsContainer,
 						horizontal: true,
 						scrollEnabled: false,
+						style: styles.innerBlocks,
 					} }
 					allowedBlocks={ ALLOWED_BLOCKS }
 					customBlockProps={ {

diff --git a/packages/block-library/src/columns/editor.native.scss b/packages/block-library/src/columns/editor.native.scss
@@ -1,31 +1,17 @@
-.columnsPlaceholder {
-	padding: 12px;
-	margin-bottom: 12px;
-	background-color: $white;
-	border: $border-width dashed $gray;
-	border-radius: 4px;
-}
-
-.columnsPlaceholderDark {
-	background-color: $black;
-	border: $border-width dashed $gray-70;
-}
-
-.marginVerticalDense {
-	margin-top: $block-selected-child-margin;
-	margin-bottom: $block-selected-child-margin;
-}
-
-.marginHorizontalNone {
-	margin-left: 0;
-	margin-right: 0;
-}
-
 .columnsContainer {
 	flex-direction: row;
 	flex-wrap: wrap;
-	justify-content: flex-start;
+	justify-content: space-between;
 	align-items: stretch;
 	max-width: $content-width;
-	overflow: hidden;
+	overflow: visible;
+	width: 100%;
+}
+
+.innerBlocks {
+	overflow: visible;
+}
+
+.innerBlocksSelected {
+	margin-bottom: $block-edge-to-content;
 }