[RNMobile] Column block

packages/base-styles/_variables.scss

@@ -93,7 +93,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,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 ) => {

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;
+}

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,37 @@ 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 = {
+	backwardButtonIcon: arrowLeft,
+	forwardButtonIcon: arrowRight,
+	backwardButtonHint: __( 'Double tap to move the block to the left' ),
+	forwardButtonHint: __( 'Double tap to move the block to the right' ),
+	firstBlockTitle: __( 'Move block left' ),
+	lastBlockTitle: __( 'Move block right' ),
+	/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
+	backwardButtonTitle: __(
+		'Move block left from position %1$s to position %2$s'
+	),
+	/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
+	forwardButtonTitle: __( 'Move block up from row %1$s to row %2$s' ),
+};
+
+const verticalMover = {
+	backwardButtonIcon: arrowUp,
+	forwardButtonIcon: arrowDown,
+	backwardButtonHint: __( 'Double tap to move the block up' ),
+	forwardButtonHint: __( 'Double tap to move the block down' ),
+	firstBlockTitle: __( 'Move block up' ),
+	lastBlockTitle: __( 'Move block down' ),
+	/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
+	backwardButtonTitle: __(
+		'Move block right from position %1$s to position %2$s'
+	),
+	/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
+	forwardButtonTitle: __( 'Move block down from row %1$s to row %2$s' ),
+};
 
 const BlockMover = ( {
 	isFirst,
@@ -20,48 +50,57 @@ const BlockMover = ( {
 	onMoveUp,
 	firstIndex,
 	rootClientId,
+	horizontalDirection,
 } ) => {
+	const {
+		backwardButtonIcon,
+		forwardButtonIcon,
+		backwardButtonHint,
+		forwardButtonHint,
+		firstBlockTitle,
+		lastBlockTitle,
+	} = horizontalDirection ? horizontalMover : verticalMover;
+
 	if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
 		return null;
 	}
 
+	const getMoverButtonTitle = ( isBackwardButton ) => {
+		const fromIndex = firstIndex + 1; // current position based on index
+		// for backwardButton decrease index (move left/up) for forwardButton increase index (move right/down)
+		const direction = isBackwardButton ? -1 : 1;
+		const toIndex = fromIndex + direction; // position after move
+
+		const { backwardButtonTitle, forwardButtonTitle } = horizontalDirection
+			? horizontalMover
+			: verticalMover;
+
+		const buttonTitle = isBackwardButton
+			? backwardButtonTitle
+			: forwardButtonTitle;
+
+		return sprintf( buttonTitle, fromIndex, toIndex );
+	};
+
 	return (
 		<>
 			<ToolbarButton
 				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' ),
-								firstIndex + 1,
-								firstIndex
-						  )
-						: __( 'Move block up' )
+					! isFirst ? getMoverButtonTitle( true ) : firstBlockTitle
 				}
 				isDisabled={ isFirst }
 				onClick={ onMoveUp }
-				icon={ arrowUp }
-				extraProps={ { hint: __( 'Double tap to move the block up' ) } }
+				icon={ backwardButtonIcon }
+				extraProps={ { hint: backwardButtonHint } }
 			/>
 
 			<ToolbarButton
-				title={
-					! isLast
-						? sprintf(
-								/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
-								__(
-									'Move block down from row %1$s to row %2$s'
-								),
-								firstIndex + 1,
-								firstIndex + 2
-						  )
-						: __( 'Move block down' )
-				}
+				title={ ! isLast ? getMoverButtonTitle() : lastBlockTitle }
 				isDisabled={ isLast }
 				onClick={ onMoveDown }
-				icon={ arrowDown }
+				icon={ forwardButtonIcon }
 				extraProps={ {
-					hint: __( 'Double tap to move the block down' ),
+					hint: forwardButtonHint,
 				} }
 			/>
 		</>

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