diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
index db30304cfeee3..918c414ba833c 100644
--- 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,6 +92,8 @@ class BlockListBlock extends Component {
 			parentId,
 			isDimmed,
 			isTouchable,
+			onDeleteBlock,
+			horizontalDirection,
 			hasParent,
 			isParentSelected,
 			onSelect,
@@ -98,6 +101,7 @@ class BlockListBlock extends Component {
 			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
index 53d696e5d00e6..830f92559b5ce 100644
--- 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
index 903401f3bedf3..78994455ca0f3 100644
--- 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
index 43a34c0466b54..b4a56abc4df1b 100644
--- 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 );
diff --git a/packages/block-editor/src/components/block-mover/index.native.js b/packages/block-editor/src/components/block-mover/index.native.js
index b572e21ee79dd..5ca80153bee05 100644
--- a/packages/block-editor/src/components/block-mover/index.native.js
+++ b/packages/block-editor/src/components/block-mover/index.native.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { I18nManager } from 'react-native';
 import { first, last, partial, castArray } from 'lodash';
 
 /**
@@ -10,58 +11,123 @@ 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 right from position %1$s to position %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 up from row %1$s to row %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,
 	isLast,
+	isRTL,
 	isLocked,
 	onMoveDown,
 	onMoveUp,
 	firstIndex,
 	rootClientId,
+	horizontalDirection,
 } ) => {
+	const {
+		backwardButtonIcon,
+		forwardButtonIcon,
+		backwardButtonHint,
+		forwardButtonHint,
+		firstBlockTitle,
+		lastBlockTitle,
+	} = horizontalDirection ? horizontalMover : verticalMover;
+
 	if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
 		return null;
 	}
 
+	const switchButtonPropIfRTL = (
+		isBackwardButton,
+		forwardButtonProp,
+		backwardButtonProp
+	) => {
+		if ( isRTL && horizontalDirection ) {
+			// for RTL and horizontal direction switch prop between forward and backward button
+			if ( isBackwardButton ) {
+				return forwardButtonProp; // set forwardButtonProp for backward button
+			}
+			return backwardButtonProp; // set backwardButtonProp for forward button
+		}
+
+		return isBackwardButton ? backwardButtonProp : forwardButtonProp;
+	};
+
+	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 = switchButtonPropIfRTL(
+			isBackwardButton,
+			forwardButtonTitle,
+			backwardButtonTitle
+		);
+
+		return sprintf( buttonTitle, fromIndex, toIndex );
+	};
+
+	const getArrowIcon = ( isBackwardButton ) =>
+		switchButtonPropIfRTL(
+			isBackwardButton,
+			forwardButtonIcon,
+			backwardButtonIcon
+		);
+
 	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={ getArrowIcon( true ) }
+				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={ getArrowIcon() }
 				extraProps={ {
-					hint: __( 'Double tap to move the block down' ),
+					hint: forwardButtonHint,
 				} }
 			/>
 		</>
@@ -90,6 +156,7 @@ export default compose(
 			firstIndex,
 			isFirst: firstIndex === 0,
 			isLast: lastIndex === blockOrder.length - 1,
+			isRTL: I18nManager.isRTL,
 			isLocked: getTemplateLock( rootClientId ) === 'all',
 			rootClientId,
 		};
diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js
index 692c013a69f72..4a3be1a5b5ac0 100644
--- a/packages/block-editor/src/components/button-block-appender/index.native.js
+++ b/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 }
diff --git a/packages/block-editor/src/components/inner-blocks/button-block-appender.js b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
index 5823a5e42c7b0..874366015abd1 100644
--- a/packages/block-editor/src/components/inner-blocks/button-block-appender.js
+++ b/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 }
 		/>
 	);
 };
diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js
index 696f308ce0eff..d462fa40d0486 100644
--- a/packages/block-editor/src/components/inner-blocks/index.native.js
+++ b/packages/block-editor/src/components/inner-blocks/index.native.js
@@ -112,6 +112,13 @@ class InnerBlocks extends Component {
 		const {
 			clientId,
 			renderAppender,
+			__experimentalMoverDirection,
+			horizontal,
+			scrollEnabled,
+			contentResizeMode,
+			contentStyle,
+			onAddBlock,
+			onDeleteBlock,
 			marginVertical,
 			marginHorizontal,
 		} = this.props;
@@ -126,6 +133,15 @@ class InnerBlocks extends Component {
 						rootClientId={ clientId }
 						renderAppender={ renderAppender }
 						withFooter={ false }
+						__experimentalMoverDirection={
+							__experimentalMoverDirection
+						}
+						horizontal={ horizontal }
+						scrollEnabled={ scrollEnabled }
+						contentResizeMode={ contentResizeMode }
+						contentStyle={ contentStyle }
+						onAddBlock={ onAddBlock }
+						onDeleteBlock={ onDeleteBlock }
 					/>
 				) }
 			</>
diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js
new file mode 100644
index 0000000000000..d10d2374d0fb7
--- /dev/null
+++ b/packages/block-library/src/column/edit.native.js
@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { withSelect } from '@wordpress/data';
+import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import {
+	InnerBlocks,
+	BlockControls,
+	BlockVerticalAlignmentToolbar,
+} from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import styles from './editor.scss';
+
+function ColumnEdit( {
+	attributes,
+	setAttributes,
+	hasChildren,
+	isSelected,
+	getStylesFromColorScheme,
+	isParentSelected,
+	contentStyle,
+} ) {
+	const { verticalAlignment } = attributes;
+
+	const updateAlignment = ( alignment ) => {
+		setAttributes( { verticalAlignment: alignment } );
+	};
+
+	if ( ! isSelected && ! hasChildren ) {
+		return (
+			<View
+				style={ [
+					! isParentSelected &&
+						getStylesFromColorScheme(
+							styles.columnPlaceholder,
+							styles.columnPlaceholderDark
+						),
+					contentStyle,
+					styles.columnPlaceholderNotSelected,
+				] }
+			></View>
+		);
+	}
+
+	return (
+		<>
+			<BlockControls>
+				<BlockVerticalAlignmentToolbar
+					onChange={ updateAlignment }
+					value={ verticalAlignment }
+				/>
+			</BlockControls>
+			<View
+				style={ [
+					contentStyle,
+					isSelected && hasChildren && styles.innerBlocksBottomSpace,
+				] }
+			>
+				<InnerBlocks
+					scrollEnabled={ false }
+					renderAppender={
+						isSelected && InnerBlocks.ButtonBlockAppender
+					}
+				/>
+			</View>
+		</>
+	);
+}
+
+function ColumnEditWrapper( props ) {
+	const { verticalAlignment } = props.attributes;
+
+	const getVerticalAlignmentRemap = ( alignment ) => {
+		if ( ! alignment ) return styles.flexBase;
+		return {
+			...styles.flexBase,
+			...styles[ `is-vertically-aligned-${ alignment }` ],
+		};
+	};
+
+	return (
+		<View style={ getVerticalAlignmentRemap( verticalAlignment ) }>
+			<ColumnEdit { ...props } />
+		</View>
+	);
+}
+
+export default compose( [
+	withSelect( ( select, { clientId } ) => {
+		const {
+			getBlockCount,
+			getBlockRootClientId,
+			getSelectedBlockClientId,
+		} = select( 'core/block-editor' );
+
+		const selectedBlockClientId = getSelectedBlockClientId();
+		const isSelected = selectedBlockClientId === clientId;
+
+		const parentId = getBlockRootClientId( clientId );
+		const hasChildren = !! getBlockCount( clientId );
+
+		const isParentSelected =
+			selectedBlockClientId && selectedBlockClientId === parentId;
+
+		return {
+			hasChildren,
+			isParentSelected,
+			isSelected,
+		};
+	} ),
+	withPreferredColorScheme,
+] )( ColumnEditWrapper );
diff --git a/packages/block-library/src/column/editor.native.scss b/packages/block-library/src/column/editor.native.scss
new file mode 100644
index 0000000000000..ec9579c63234b
--- /dev/null
+++ b/packages/block-library/src/column/editor.native.scss
@@ -0,0 +1,36 @@
+.columnPlaceholderNotSelected {
+	padding-top: $block-selected-to-content;
+}
+
+.columnPlaceholder {
+	flex: 1;
+	padding: $block-selected-to-content;
+	background-color: $white;
+	border: $border-width dashed $gray;
+	border-radius: 4px;
+}
+
+.columnPlaceholderDark {
+	background-color: $black;
+	border: $border-width dashed $gray-70;
+}
+
+.innerBlocksBottomSpace {
+	margin-bottom: $block-selected-to-content;
+}
+
+.is-vertically-aligned-top {
+	justify-content: flex-start;
+}
+
+.is-vertically-aligned-center {
+	justify-content: center;
+}
+
+.is-vertically-aligned-bottom {
+	justify-content: flex-end;
+}
+
+.flexBase {
+	flex: 1;
+}
diff --git a/packages/block-library/src/column/index.native.js b/packages/block-library/src/column/index.native.js
new file mode 100644
index 0000000000000..d03c4756174bc
--- /dev/null
+++ b/packages/block-library/src/column/index.native.js
@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import * as webSettings from './index.js';
+import metadata from './block.json';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	...webSettings.settings,
+	supports: {
+		...webSettings.settings.supports,
+		inserter: true,
+	},
+};
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
new file mode 100644
index 0000000000000..e1cc669a414c1
--- /dev/null
+++ b/packages/block-library/src/columns/edit.native.js
@@ -0,0 +1,280 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+import { dropRight, times } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody, StepperControl } from '@wordpress/components';
+import {
+	InspectorControls,
+	InnerBlocks,
+	BlockControls,
+	BlockVerticalAlignmentToolbar,
+} from '@wordpress/block-editor';
+import { withDispatch, useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
+import { createBlock } from '@wordpress/blocks';
+/**
+ * Internal dependencies
+ */
+import styles from './editor.scss';
+
+/**
+ * Allowed blocks constant is passed to InnerBlocks precisely as specified here.
+ * The contents of the array should never change.
+ * The array should contain the name of each block that is allowed.
+ * In columns block, the only block we allow is 'core/column'.
+ *
+ * @constant
+ * @type {string[]}
+ */
+const ALLOWED_BLOCKS = [ 'core/column' ];
+
+/**
+ * Number of columns to assume for template in case the user opts to skip
+ * template option selection.
+ *
+ * @type {number}
+ */
+const DEFAULT_COLUMNS = 2;
+const MIN_COLUMNS_NUMBER = 1;
+
+const BREAKPOINTS = {
+	mobile: 480,
+	large: 768,
+};
+
+function ColumnsEditContainer( {
+	attributes,
+	updateAlignment,
+	updateColumns,
+	columnCount,
+	isSelected,
+	onAddNextColumn,
+	onDeleteBlock,
+} ) {
+	const [ resizeListener, sizes ] = useResizeObserver();
+	const [ columnsInRow, setColumnsInRow ] = useState( MIN_COLUMNS_NUMBER );
+
+	const containerMaxWidth = styles.columnsContainer.maxWidth;
+
+	const { verticalAlignment } = attributes;
+	const { width } = sizes || {};
+
+	useEffect( () => {
+		const newColumnCount = ! columnCount ? DEFAULT_COLUMNS : columnCount;
+		updateColumns( columnCount, newColumnCount );
+		setColumnsInRow( getColumnsInRow( width, newColumnCount ) );
+	}, [ columnCount ] );
+
+	useEffect( () => {
+		setColumnsInRow( getColumnsInRow( width, columnCount ) );
+	}, [ width ] );
+
+	const getColumnWidth = ( containerWidth = containerMaxWidth ) => {
+		const minWidth = Math.min( containerWidth, containerMaxWidth );
+		const columnBaseWidth = minWidth / columnsInRow;
+
+		let columnWidth = columnBaseWidth;
+		if ( columnsInRow > 1 ) {
+			const margins = columnsInRow * 2 * styles.columnMargin.marginLeft;
+			columnWidth = ( minWidth - margins ) / columnsInRow;
+		}
+
+		return columnWidth;
+	};
+
+	const getColumnsInRow = ( containerWidth, columnsNumber ) => {
+		if ( containerWidth < BREAKPOINTS.mobile ) {
+			// show only 1 Column in row for mobile breakpoint container width
+			return 1;
+		} else if ( containerWidth < BREAKPOINTS.large ) {
+			// show 2 Column in row for large breakpoint container width
+			return Math.min( Math.max( 1, columnCount ), 2 );
+		}
+		// show all Column in one row
+		return Math.max( 1, columnsNumber );
+	};
+
+	const renderAppender = () => {
+		if ( isSelected ) {
+			return (
+				<InnerBlocks.ButtonBlockAppender
+					onAddBlock={ onAddNextColumn }
+				/>
+			);
+		}
+		return null;
+	};
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Columns Settings' ) }>
+					<StepperControl
+						label={ __( 'Number of columns' ) }
+						icon="columns"
+						value={ columnCount }
+						onChange={ ( value ) =>
+							updateColumns( columnCount, value )
+						}
+						min={ MIN_COLUMNS_NUMBER }
+						max={ columnCount + 1 }
+						separatorType={ 'none' }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<BlockControls>
+				<BlockVerticalAlignmentToolbar
+					onChange={ updateAlignment }
+					value={ verticalAlignment }
+				/>
+			</BlockControls>
+			<View style={ isSelected && styles.innerBlocksSelected }>
+				{ resizeListener }
+				<InnerBlocks
+					renderAppender={ renderAppender }
+					__experimentalMoverDirection={
+						columnsInRow > 1 ? 'horizontal' : undefined
+					}
+					horizontal={ true }
+					scrollEnabled={ false }
+					allowedBlocks={ ALLOWED_BLOCKS }
+					contentResizeMode="stretch"
+					onAddBlock={ onAddNextColumn }
+					onDeleteBlock={
+						columnCount === 1 ? onDeleteBlock : undefined
+					}
+					contentStyle={ { width: getColumnWidth( width ) } }
+				/>
+			</View>
+		</>
+	);
+}
+
+const ColumnsEditContainerWrapper = withDispatch(
+	( dispatch, ownProps, registry ) => ( {
+		/**
+		 * Update all child Column blocks with a new vertical alignment setting
+		 * based on whatever alignment is passed in. This allows change to parent
+		 * to overide anything set on a individual column basis.
+		 *
+		 * @param {string} verticalAlignment the vertical alignment setting
+		 */
+		updateAlignment( verticalAlignment ) {
+			const { clientId, setAttributes } = ownProps;
+			const { updateBlockAttributes } = dispatch( 'core/block-editor' );
+			const { getBlockOrder } = registry.select( 'core/block-editor' );
+
+			// Update own alignment.
+			setAttributes( { verticalAlignment } );
+
+			// Update all child Column Blocks to match
+			const innerBlockClientIds = getBlockOrder( clientId );
+			innerBlockClientIds.forEach( ( innerBlockClientId ) => {
+				updateBlockAttributes( innerBlockClientId, {
+					verticalAlignment,
+				} );
+			} );
+		},
+		updateBlockSettings( settings ) {
+			const { clientId } = ownProps;
+			const { updateBlockListSettings } = dispatch( 'core/block-editor' );
+			updateBlockListSettings( clientId, settings );
+		},
+		/**
+		 * Updates the column columnCount, including necessary revisions to child Column
+		 * blocks to grant required or redistribute available space.
+		 *
+		 * @param {number} previousColumns Previous column columnCount.
+		 * @param {number} newColumns      New column columnCount.
+		 */
+		updateColumns( previousColumns, newColumns ) {
+			const { clientId } = ownProps;
+			const { replaceInnerBlocks } = dispatch( 'core/block-editor' );
+			const { getBlocks, getBlockAttributes } = registry.select(
+				'core/block-editor'
+			);
+
+			let innerBlocks = getBlocks( clientId );
+
+			// Redistribute available width for existing inner blocks.
+			const isAddingColumn = newColumns > previousColumns;
+
+			if ( isAddingColumn ) {
+				// Get verticalAlignment from Columns block to set the same to new Column
+				const { verticalAlignment } = getBlockAttributes( clientId );
+
+				innerBlocks = [
+					...innerBlocks,
+					...times( newColumns - previousColumns, () => {
+						return createBlock( 'core/column', {
+							verticalAlignment,
+						} );
+					} ),
+				];
+			} else {
+				// The removed column will be the last of the inner blocks.
+				innerBlocks = dropRight(
+					innerBlocks,
+					previousColumns - newColumns
+				);
+			}
+
+			replaceInnerBlocks( clientId, innerBlocks, false );
+		},
+		onAddNextColumn: () => {
+			const { clientId } = ownProps;
+			const { replaceInnerBlocks, selectBlock } = dispatch(
+				'core/block-editor'
+			);
+			const { getBlocks, getBlockAttributes } = registry.select(
+				'core/block-editor'
+			);
+
+			// Get verticalAlignment from Columns block to set the same to new Column
+			const { verticalAlignment } = getBlockAttributes( clientId );
+
+			const innerBlocks = getBlocks( clientId );
+
+			const insertedBlock = createBlock( 'core/column', {
+				verticalAlignment,
+			} );
+
+			innerBlocks.push( insertedBlock );
+
+			replaceInnerBlocks( clientId, innerBlocks, true );
+			selectBlock( insertedBlock.clientId );
+		},
+		onDeleteBlock: () => {
+			const { clientId } = ownProps;
+			const { removeBlock } = dispatch( 'core/block-editor' );
+			removeBlock( clientId );
+		},
+	} )
+)( ColumnsEditContainer );
+
+const ColumnsEdit = ( props ) => {
+	const { clientId } = props;
+	const { columnCount } = useSelect(
+		( select ) => {
+			const { getBlockCount } = select( 'core/block-editor' );
+
+			return {
+				columnCount: getBlockCount( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	return (
+		<ColumnsEditContainerWrapper columnCount={ columnCount } { ...props } />
+	);
+};
+
+export default ColumnsEdit;
diff --git a/packages/block-library/src/columns/editor.native.scss b/packages/block-library/src/columns/editor.native.scss
new file mode 100644
index 0000000000000..991655a13f327
--- /dev/null
+++ b/packages/block-library/src/columns/editor.native.scss
@@ -0,0 +1,11 @@
+.columnsContainer {
+	max-width: $content-width;
+}
+
+.innerBlocksSelected {
+	margin-bottom: $block-edge-to-content;
+}
+
+.columnMargin {
+	margin: $block-edge-to-content / 2;
+}
diff --git a/packages/block-library/src/group/edit.native.js b/packages/block-library/src/group/edit.native.js
index 257ba8b4e628c..6545600f93904 100644
--- a/packages/block-library/src/group/edit.native.js
+++ b/packages/block-library/src/group/edit.native.js
@@ -36,6 +36,9 @@ function GroupEdit( { hasInnerBlocks, isSelected, getStylesFromColorScheme } ) {
 		<View style={ isSelected && hasInnerBlocks && styles.innerBlocks }>
 			<InnerBlocks
 				renderAppender={ isSelected && InnerBlocks.ButtonBlockAppender }
+				flatListProps={ {
+					scrollEnabled: false,
+				} }
 			/>
 		</View>
 	);
diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js
index 968e652d86505..914cff5f9a3ea 100644
--- a/packages/block-library/src/index.native.js
+++ b/packages/block-library/src/index.native.js
@@ -148,6 +148,8 @@ export const registerCoreBlocks = () => {
 		mediaText,
 		preformatted,
 		gallery,
+		columns,
+		column,
 		group,
 		button,
 		spacer,
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
index 83f8f64f84ff6..932e54646a9af 100644
--- a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
@@ -50,6 +50,7 @@ export const KeyboardAwareFlatList = ( {
 		onKeyboardWillShow={ () => {
 			this.keyboardWillShowIndicator = true;
 		} }
+		scrollEnabled={ listProps.scrollEnabled }
 		onScroll={ ( event ) => {
 			this.latestContentOffsetY = event.nativeEvent.contentOffset.y;
 		} }
diff --git a/packages/components/src/mobile/readable-content-view/index.native.js b/packages/components/src/mobile/readable-content-view/index.native.js
index a25048b0b5dff..ec1f67a4d98f8 100644
--- a/packages/components/src/mobile/readable-content-view/index.native.js
+++ b/packages/components/src/mobile/readable-content-view/index.native.js
@@ -8,14 +8,15 @@ import { View, Dimensions } from 'react-native';
  */
 import styles from './style.scss';
 
-const ReadableContentView = ( { reversed, children } ) => (
+const ReadableContentView = ( { reversed, children, style } ) => (
 	<View style={ styles.container }>
 		<View
-			style={
+			style={ [
 				reversed
 					? styles.reversedCenteredContent
-					: styles.centeredContent
-			}
+					: styles.centeredContent,
+				style,
+			] }
 		>
 			{ children }
 		</View>