[RNMobile] Column block

packages/base-styles/_variables.scss

@@ -91,7 +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;
 
-
 /**
  * Border radii.
  */

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,6 +92,8 @@ class BlockListBlock extends Component {
 			parentId,
 			isDimmed,
 			isTouchable,
+			onDeleteBlock,
+			horizontalDirection,
 			hasParent,
 			isParentSelected,
 			onSelect,
@@ -112,7 +115,10 @@ class BlockListBlock extends Component {
 				accessible={ ! isSelected }
 				accessibilityRole={ 'button' }
 			>
-				<View accessibilityLabel={ accessibilityLabel }>
+				<View
+					style={ { flex: 1 } }
+					accessibilityLabel={ accessibilityLabel }
+				>
 					{ showFloatingToolbar && (
 						<FloatingToolbar>
 							{ hasParent && (
@@ -168,7 +174,11 @@ class BlockListBlock extends Component {
 						) }
 						<View style={ styles.neutralToolbar }>
 							{ isSelected && (
-								<BlockMobileToolbar clientId={ clientId } />
+								<BlockMobileToolbar
+									clientId={ clientId }
+									onDelete={ onDeleteBlock }
+									horizontalDirection={ horizontalDirection }
+								/>
 							) }
 						</View>
 					</View>

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

@@ -98,6 +98,7 @@ export class BlockList extends Component {
 			withFooter = true,
 			isReadOnly,
 			isRootList,
+			flatListProps,
 			shouldShowInsertionPointBefore,
 			shouldShowInsertionPointAfter,
 			marginVertical = styles.defaultBlock.marginTop,
@@ -122,6 +123,7 @@ export class BlockList extends Component {
 				onAccessibilityEscape={ clearSelectedBlock }
 			>
 				<KeyboardAwareFlatList
+					{ ...flatListProps }
 					{ ...( Platform.OS === 'android'
 						? { removeClippedSubviews: false }
 						: {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
@@ -135,6 +137,7 @@ export class BlockList extends Component {
 					keyboardShouldPersistTaps="always"
 					scrollViewStyle={ {
 						flex: isRootList ? 1 : 0,
+						...( ! isRootList && { overflow: 'visible' } ),
 					} }
 					data={ blockClientIds }
 					keyExtractor={ identity }
@@ -179,11 +182,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 +212,10 @@ export class BlockList extends Component {
 						onCaretVerticalPositionChange={
 							this.onCaretVerticalPositionChange
 						}
+						horizontalDirection={ horizontalDirection }
+						contentStyle={ contentStyle }
+						onAddBlock={ onAddBlock }
+						onDeleteBlock={ onDeleteBlock }
 					/>
 					{ ! this.shouldShowInnerBlockAppender() &&
 						shouldShowInsertionPointAfter( clientId ) && (
@@ -225,7 +244,7 @@ export class BlockList extends Component {
 }
 
 export default compose( [
-	withSelect( ( select, { rootClientId } ) => {
+	withSelect( ( select, { rootClientId, __experimentalMoverDirection } ) => {
 		const {
 			getBlockCount,
 			getBlockOrder,
@@ -235,12 +254,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 +274,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 +295,7 @@ export default compose( [
 			selectedBlockClientId,
 			isReadOnly,
 			isRootList: rootClientId === undefined,
+			horizontalDirection,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

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 );

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

@@ -10,7 +10,31 @@ import { ToolbarButton } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
-import { arrowUp, arrowDown } from '@wordpress/icons';
+import { arrowUp, arrowDown, arrowLeft, arrowRight } from '@wordpress/icons';
+
+const horizontalMover = {
+	firstButtonIcon: arrowLeft,
+	secondButtonIcon: arrowRight,
+	firstButtonHint: __( 'Double tap to move the block to the left' ),
+	secondButtonHint: __( 'Double tap to move the block to the right' ),
+	firstBlockTitle: __( 'Move block left' ),
+	lastBlockTitle: __( 'Move block right' ),
+	firstButtonDirection: __( 'left' ),
+	secondButtonDirection: __( 'right' ),
+	location: 'position',
+};
+
+const verticalMover = {
+	firstButtonIcon: arrowUp,
+	secondButtonIcon: arrowDown,
+	firstButtonHint: __( 'Double tap to move the block up' ),
+	secondButtonHint: __( 'Double tap to move the block down' ),
+	firstBlockTitle: __( 'Move block up' ),
+	lastBlockTitle: __( 'Move block down' ),
+	firstButtonDirection: __( 'up' ),
+	secondButtonDirection: __( 'down' ),
+	location: 'row',
+};
 
 const BlockMover = ( {
 	isFirst,
@@ -20,7 +44,20 @@ const BlockMover = ( {
 	onMoveUp,
 	firstIndex,
 	rootClientId,
+	horizontalDirection,
 } ) => {
+	const {
+		firstButtonIcon,
+		secondButtonIcon,
+		firstButtonHint,
+		secondButtonHint,
+		firstBlockTitle,
+		lastBlockTitle,
+		firstButtonDirection,
+		secondButtonDirection,
+		location,
+	} = horizontalDirection ? horizontalMover : verticalMover;
+
 	if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
 		return null;
 	}
@@ -31,37 +68,43 @@ const BlockMover = ( {
 				title={
 					! isFirst
 						? sprintf(
-								/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
-								__( 'Move block up from row %1$s to row %2$s' ),
+								/* translators: accessibility text. %1: block moving direction (string). %2: location of block - row or order number (string). %3: current block position (number). %4: next block position (number) */
+								__(
+									'Move block %2$s from %1$s %3$s to %1$s %4$s'
+								),
+								location,
+								firstButtonDirection,
 								firstIndex + 1,
 								firstIndex
 						  )
-						: __( 'Move block up' )
+						: firstBlockTitle
 				}
 				isDisabled={ isFirst }
 				onClick={ onMoveUp }
-				icon={ arrowUp }
-				extraProps={ { hint: __( 'Double tap to move the block up' ) } }
+				icon={ firstButtonIcon }
+				extraProps={ { hint: firstButtonHint } }
 			/>
 
 			<ToolbarButton
 				title={
 					! isLast
 						? sprintf(
-								/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
+								/* translators: accessibility text. %1: block moving direction (string). %2: location of block - row or order number (string). %3: current block position (number). %4: next block position (number) */
 								__(
-									'Move block down from row %1$s to row %2$s'
+									'Move block %2$s from %1$s %3$s to %1$s %4$s'
 								),
+								location,
+								secondButtonDirection,
 								firstIndex + 1,
 								firstIndex + 2
 						  )
-						: __( 'Move block down' )
+						: lastBlockTitle
 				}
 				isDisabled={ isLast }
 				onClick={ onMoveDown }
-				icon={ arrowDown }
+				icon={ secondButtonIcon }
 				extraProps={ {
-					hint: __( 'Double tap to move the block down' ),
+					hint: secondButtonHint,
 				} }
 			/>
 		</>

packages/block-editor/src/components/button-block-appender/index.native.js

@@ -20,6 +20,7 @@ function ButtonBlockAppender( {
 	rootClientId,
 	getStylesFromColorScheme,
 	showSeparator,
+	onAddBlock,
 } ) {
 	const appenderStyle = {
 		...styles.appender,
@@ -39,7 +40,7 @@ function ButtonBlockAppender( {
 				rootClientId={ rootClientId }
 				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
 					<Button
-						onClick={ onToggle }
+						onClick={ onAddBlock || onToggle }
 						aria-expanded={ isOpen }
 						disabled={ disabled }
 						fixedRatio={ false }

packages/block-editor/src/components/inner-blocks/button-block-appender.js

@@ -4,11 +4,16 @@
 import BaseButtonBlockAppender from '../button-block-appender';
 import withClientId from './with-client-id';
 
-export const ButtonBlockAppender = ( { clientId, showSeparator } ) => {
+export const ButtonBlockAppender = ( {
+	clientId,
+	showSeparator,
+	onAddBlock,
+} ) => {
 	return (
 		<BaseButtonBlockAppender
 			rootClientId={ clientId }
 			showSeparator={ showSeparator }
+			onAddBlock={ onAddBlock }
 		/>
 	);
 };

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

@@ -112,6 +112,12 @@ class InnerBlocks extends Component {
 		const {
 			clientId,
 			renderAppender,
+			__experimentalMoverDirection,
+			flatListProps,
+			contentResizeMode,
+			contentStyle,
+			onAddBlock,
+			onDeleteBlock,
 			marginVertical,
 			marginHorizontal,
 		} = this.props;
@@ -126,6 +132,14 @@ class InnerBlocks extends Component {
 						rootClientId={ clientId }
 						renderAppender={ renderAppender }
 						withFooter={ false }
+						__experimentalMoverDirection={
+							__experimentalMoverDirection
+						}
+						flatListProps={ flatListProps }
+						contentResizeMode={ contentResizeMode }
+						contentStyle={ contentStyle }
+						onAddBlock={ onAddBlock }
+						onDeleteBlock={ onDeleteBlock }
 					/>
 				) }
 			</>