[RNMobile] Column block (#19013)

* Implement Columns/Column block
WordPress · Apr 8, 2020 · eedd738 · eedd738
1 parent a3a06e5
commit eedd738
Show file tree

Hide file tree

Showing 17 changed files with 677 additions and 47 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -66,6 +66,7 @@ class BlockListBlock extends Component {
 					this.props.onCaretVerticalPositionChange
 				}
 				clientId={ this.props.clientId }
+				contentStyle={ this.props.contentStyle }
 			/>
 		);
 	}
@@ -91,13 +92,16 @@ class BlockListBlock extends Component {
 			parentId,
 			isDimmed,
 			isTouchable,
+			onDeleteBlock,
+			horizontalDirection,
 			hasParent,
 			isParentSelected,
 			onSelect,
 			showFloatingToolbar,
 			getStylesFromColorScheme,
 			marginVertical,
 			marginHorizontal,
+			isInnerBlockSelected,
 		} = this.props;
 
 		const accessibilityLabel = getAccessibleBlockLabel(
@@ -106,13 +110,18 @@ class BlockListBlock extends Component {
 			order + 1
 		);
 
+		const accessible = ! ( isSelected || isInnerBlockSelected );
+
 		return (
 			<TouchableWithoutFeedback
 				onPress={ this.onFocus }
-				accessible={ ! isSelected }
+				accessible={ accessible }
 				accessibilityRole={ 'button' }
 			>
-				<View accessibilityLabel={ accessibilityLabel }>
+				<View
+					style={ { flex: 1 } }
+					accessibilityLabel={ accessibilityLabel }
+				>
 					{ showFloatingToolbar && (
 						<FloatingToolbar>
 							{ hasParent && (
@@ -168,7 +177,11 @@ class BlockListBlock extends Component {
 						) }
 						<View style={ styles.neutralToolbar }>
 							{ isSelected && (
-								<BlockMobileToolbar clientId={ clientId } />
+								<BlockMobileToolbar
+									clientId={ clientId }
+									onDelete={ onDeleteBlock }
+									horizontalDirection={ horizontalDirection }
+								/>
 							) }
 						</View>
 					</View>
@@ -190,10 +203,12 @@ export default compose( [
 			getBlockRootClientId,
 			getLowestCommonAncestorWithSelectedBlock,
 			getBlockParents,
+			hasSelectedInnerBlock,
 		} = select( 'core/block-editor' );
 
 		const order = getBlockIndex( clientId, rootClientId );
 		const isSelected = isBlockSelected( clientId );
+		const isInnerBlockSelected = hasSelectedInnerBlock( clientId );
 		const block = __unstableGetBlockWithoutInnerBlocks( clientId );
 		const { name, attributes, isValid } = block || {};
 
@@ -256,6 +271,7 @@ export default compose( [
 			attributes,
 			blockType,
 			isSelected,
+			isInnerBlockSelected,
 			isValid,
 			parentId,
 			isParentSelected,

diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -98,6 +98,8 @@ export class BlockList extends Component {
 			withFooter = true,
 			isReadOnly,
 			isRootList,
+			horizontal,
+			scrollEnabled,
 			shouldShowInsertionPointBefore,
 			shouldShowInsertionPointAfter,
 			marginVertical = styles.defaultBlock.marginTop,
@@ -133,9 +135,16 @@ export class BlockList extends Component {
 					}
 					inputAccessoryViewHeight={ headerToolbar.height }
 					keyboardShouldPersistTaps="always"
-					scrollViewStyle={ {
-						flex: isRootList ? 1 : 0,
-					} }
+					scrollViewStyle={ [
+						{ flex: isRootList ? 1 : 0 },
+						! isRootList && styles.overflowVisible,
+					] }
+					horizontal={ horizontal }
+					scrollEnabled={ scrollEnabled }
+					contentContainerStyle={
+						horizontal && styles.horizontalContentContainer
+					}
+					style={ ! isRootList && styles.overflowVisible }
 					data={ blockClientIds }
 					keyExtractor={ identity }
 					extraData={ forceRefresh }
@@ -179,11 +188,23 @@ export class BlockList extends Component {
 			shouldShowInsertionPointAfter,
 			marginVertical = styles.defaultBlock.marginTop,
 			marginHorizontal = styles.defaultBlock.marginLeft,
+			horizontalDirection,
+			contentResizeMode,
+			contentStyle,
+			onAddBlock,
+			onDeleteBlock,
 		} = this.props;
 
+		const readableContentViewStyle = contentResizeMode === 'stretch' && {
+			flex: 1,
+		};
+
 		return (
-			<ReadableContentView>
-				<View pointerEvents={ isReadOnly ? 'box-only' : 'auto' }>
+			<ReadableContentView style={ readableContentViewStyle }>
+				<View
+					style={ readableContentViewStyle }
+					pointerEvents={ isReadOnly ? 'box-only' : 'auto' }
+				>
 					{ shouldShowInsertionPointBefore( clientId ) && (
 						<BlockInsertionPoint />
 					) }
@@ -197,6 +218,10 @@ export class BlockList extends Component {
 						onCaretVerticalPositionChange={
 							this.onCaretVerticalPositionChange
 						}
+						horizontalDirection={ horizontalDirection }
+						contentStyle={ contentStyle }
+						onAddBlock={ onAddBlock }
+						onDeleteBlock={ onDeleteBlock }
 					/>
 					{ ! this.shouldShowInnerBlockAppender() &&
 						shouldShowInsertionPointAfter( clientId ) && (
@@ -225,7 +250,7 @@ export class BlockList extends Component {
 }
 
 export default compose( [
-	withSelect( ( select, { rootClientId } ) => {
+	withSelect( ( select, { rootClientId, __experimentalMoverDirection } ) => {
 		const {
 			getBlockCount,
 			getBlockOrder,
@@ -235,12 +260,16 @@ export default compose( [
 			getSettings,
 		} = select( 'core/block-editor' );
 
+		const horizontalDirection =
+			__experimentalMoverDirection === 'horizontal';
+
 		const selectedBlockClientId = getSelectedBlockClientId();
 		const blockClientIds = getBlockOrder( rootClientId );
 		const insertionPoint = getBlockInsertionPoint();
 		const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
 		const shouldShowInsertionPointBefore = ( clientId ) => {
 			return (
+				! horizontalDirection &&
 				blockInsertionPointIsVisible &&
 				insertionPoint.rootClientId === rootClientId &&
 				// if list is empty, show the insertion point (via the default appender)
@@ -251,6 +280,7 @@ export default compose( [
 		};
 		const shouldShowInsertionPointAfter = ( clientId ) => {
 			return (
+				! horizontalDirection &&
 				blockInsertionPointIsVisible &&
 				insertionPoint.rootClientId === rootClientId &&
 				// if the insertion point is at the end of the list
@@ -271,6 +301,7 @@ export default compose( [
 			selectedBlockClientId,
 			isReadOnly,
 			isRootList: rootClientId === undefined,
+			horizontalDirection,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss
@@ -4,6 +4,16 @@
 	background-color: #fff;
 }
 
+.horizontalContentContainer {
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: stretch;
+	max-width: $content-width;
+	overflow: visible;
+	width: 100%;
+}
+
 .switch {
 	flex-direction: row;
 	justify-content: flex-start;
@@ -70,3 +80,7 @@
 .blockToolbar {
 	height: $mobile-block-toolbar-height;
 }
+
+.overflowVisible {
+	overflow: visible;
+}
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
@@ -19,9 +19,17 @@ import styles from './style.scss';
 import BlockMover from '../block-mover';
 import { BlockSettingsButton } from '../block-settings';
 
-const BlockMobileToolbar = ( { clientId, onDelete, order } ) => (
+const BlockMobileToolbar = ( {
+	clientId,
+	onDelete,
+	order,
+	horizontalDirection,
+} ) => (
 	<View style={ styles.toolbar }>
-		<BlockMover clientIds={ [ clientId ] } />
+		<BlockMover
+			clientIds={ [ clientId ] }
+			horizontalDirection={ horizontalDirection }
+		/>
 
 		<View style={ styles.spacer } />
 
@@ -48,13 +56,15 @@ export default compose(
 			order: getBlockIndex( clientId ),
 		};
 	} ),
-	withDispatch( ( dispatch, { clientId, rootClientId } ) => {
+	withDispatch( ( dispatch, { clientId, rootClientId, onDelete } ) => {
 		const { removeBlock } = dispatch( 'core/block-editor' );
 		return {
-			onDelete: () => {
-				Keyboard.dismiss();
-				removeBlock( clientId, rootClientId );
-			},
+			onDelete:
+				onDelete ||
+				( () => {
+					Keyboard.dismiss();
+					removeBlock( clientId, rootClientId );
+				} ),
 		};
 	} )
 )( BlockMobileToolbar );