diff --git a/packages/block-editor/src/components/colors/color-panel.js b/packages/block-editor/src/components/colors/color-panel.js
new file mode 100644
index 0000000000000..95784826eb302
--- /dev/null
+++ b/packages/block-editor/src/components/colors/color-panel.js
@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import PanelColorSettings from '../panel-color-settings';
+import ContrastChecker from '../contrast-checker';
+
+const resolveContrastCheckerColor = ( color, colorSettings, detectedColor ) => {
+	if ( typeof color === 'function' ) {
+		return color( colorSettings );
+	} else if ( color === true ) {
+		return detectedColor;
+	}
+	return color;
+};
+
+export default function ColorPanel( {
+	title,
+	colorSettings,
+	colorPanelProps,
+	contrastCheckers,
+	detectedBackgroundColor,
+	detectedColor,
+	panelChildren,
+	initialOpen,
+} ) {
+	return (
+		<PanelColorSettings
+			title={ title }
+			initialOpen={ initialOpen }
+			colorSettings={ Object.values( colorSettings ) }
+			{ ...colorPanelProps }
+		>
+			{ contrastCheckers &&
+				( Array.isArray( contrastCheckers )
+					? contrastCheckers.map(
+							( { backgroundColor, textColor, ...rest } ) => {
+								backgroundColor = resolveContrastCheckerColor(
+									backgroundColor,
+									colorSettings,
+									detectedBackgroundColor
+								);
+								textColor = resolveContrastCheckerColor(
+									textColor,
+									colorSettings,
+									detectedColor
+								);
+								return (
+									<ContrastChecker
+										key={ `${ backgroundColor }-${ textColor }` }
+										backgroundColor={ backgroundColor }
+										textColor={ textColor }
+										{ ...rest }
+									/>
+								);
+							}
+					  )
+					: map( colorSettings, ( { value } ) => {
+							let {
+								backgroundColor,
+								textColor,
+							} = contrastCheckers;
+							backgroundColor = resolveContrastCheckerColor(
+								backgroundColor || value,
+								colorSettings,
+								detectedBackgroundColor
+							);
+							textColor = resolveContrastCheckerColor(
+								textColor || value,
+								colorSettings,
+								detectedColor
+							);
+							return (
+								<ContrastChecker
+									{ ...contrastCheckers }
+									key={ `${ backgroundColor }-${ textColor }` }
+									backgroundColor={ backgroundColor }
+									textColor={ textColor }
+								/>
+							);
+					  } ) ) }
+			{ typeof panelChildren === 'function'
+				? panelChildren( colorSettings )
+				: panelChildren }
+		</PanelColorSettings>
+	);
+}
diff --git a/packages/block-editor/src/components/colors/color-panel.native.js b/packages/block-editor/src/components/colors/color-panel.native.js
new file mode 100644
index 0000000000000..3c505bfd0f15f
--- /dev/null
+++ b/packages/block-editor/src/components/colors/color-panel.native.js
@@ -0,0 +1,3 @@
+export default function ColorPanel() {
+	return null;
+}
diff --git a/packages/block-editor/src/components/colors/use-colors.js b/packages/block-editor/src/components/colors/use-colors.js
index 9a50bc266822f..66b1c9944e4db 100644
--- a/packages/block-editor/src/components/colors/use-colors.js
+++ b/packages/block-editor/src/components/colors/use-colors.js
@@ -3,14 +3,7 @@
  */
 import memoize from 'memize';
 import classnames from 'classnames';
-import {
-	map,
-	kebabCase,
-	camelCase,
-	castArray,
-	startCase,
-	isFunction,
-} from 'lodash';
+import { kebabCase, camelCase, castArray, startCase, isFunction } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -29,10 +22,9 @@ import {
 /**
  * Internal dependencies
  */
-import PanelColorSettings from '../panel-color-settings';
-import ContrastChecker from '../contrast-checker';
 import InspectorControls from '../inspector-controls';
 import { useBlockEditContext } from '../block-edit';
+import ColorPanel from './color-panel';
 
 /**
  * Browser dependencies
@@ -46,81 +38,6 @@ const COMMON_COLOR_LABELS = {
 	backgroundColor: __( 'Background Color' ),
 };
 
-const resolveContrastCheckerColor = ( color, colorSettings, detectedColor ) => {
-	if ( typeof color === 'function' ) {
-		return color( colorSettings );
-	} else if ( color === true ) {
-		return detectedColor;
-	}
-	return color;
-};
-
-const ColorPanel = ( {
-	title,
-	colorSettings,
-	colorPanelProps,
-	contrastCheckers,
-	detectedBackgroundColor,
-	detectedColor,
-	panelChildren,
-	initialOpen,
-} ) => (
-	<PanelColorSettings
-		title={ title }
-		initialOpen={ initialOpen }
-		colorSettings={ Object.values( colorSettings ) }
-		{ ...colorPanelProps }
-	>
-		{ contrastCheckers &&
-			( Array.isArray( contrastCheckers )
-				? contrastCheckers.map(
-						( { backgroundColor, textColor, ...rest } ) => {
-							backgroundColor = resolveContrastCheckerColor(
-								backgroundColor,
-								colorSettings,
-								detectedBackgroundColor
-							);
-							textColor = resolveContrastCheckerColor(
-								textColor,
-								colorSettings,
-								detectedColor
-							);
-							return (
-								<ContrastChecker
-									key={ `${ backgroundColor }-${ textColor }` }
-									backgroundColor={ backgroundColor }
-									textColor={ textColor }
-									{ ...rest }
-								/>
-							);
-						}
-				  )
-				: map( colorSettings, ( { value } ) => {
-						let { backgroundColor, textColor } = contrastCheckers;
-						backgroundColor = resolveContrastCheckerColor(
-							backgroundColor || value,
-							colorSettings,
-							detectedBackgroundColor
-						);
-						textColor = resolveContrastCheckerColor(
-							textColor || value,
-							colorSettings,
-							detectedColor
-						);
-						return (
-							<ContrastChecker
-								{ ...contrastCheckers }
-								key={ `${ backgroundColor }-${ textColor }` }
-								backgroundColor={ backgroundColor }
-								textColor={ textColor }
-							/>
-						);
-				  } ) ) }
-		{ typeof panelChildren === 'function'
-			? panelChildren( colorSettings )
-			: panelChildren }
-	</PanelColorSettings>
-);
 const InspectorControlsColorPanel = ( props ) => (
 	<InspectorControls>
 		<ColorPanel { ...props } />
diff --git a/packages/block-editor/src/components/colors/use-colors.native.js b/packages/block-editor/src/components/colors/use-colors.native.js
deleted file mode 100644
index 49a29b6404836..0000000000000
--- a/packages/block-editor/src/components/colors/use-colors.native.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const TextColor = ( props ) => <>{ props.children }</>;
-
-const InspectorControlsColorPanel = () => null;
-
-export default function __experimentalUseColors() {
-	return {
-		TextColor,
-		InspectorControlsColorPanel,
-	};
-}
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
new file mode 100644
index 0000000000000..5a39737f6a6ec
--- /dev/null
+++ b/packages/block-editor/src/hooks/color-panel.js
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PanelColorSettings from '../components/panel-color-settings';
+import ContrastChecker from '../components/contrast-checker';
+import InspectorControls from '../components/inspector-controls';
+import { getBlockDOMNode } from '../utils/dom';
+
+export default function ColorPanel( { colorSettings, clientId } ) {
+	const { getComputedStyle, Node } = window;
+
+	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+	const [ detectedColor, setDetectedColor ] = useState();
+
+	useEffect( () => {
+		const colorsDetectionElement = getBlockDOMNode( clientId );
+		setDetectedColor( getComputedStyle( colorsDetectionElement ).color );
+
+		let backgroundColorNode = colorsDetectionElement;
+		let backgroundColor = getComputedStyle( backgroundColorNode )
+			.backgroundColor;
+		while (
+			backgroundColor === 'rgba(0, 0, 0, 0)' &&
+			backgroundColorNode.parentNode &&
+			backgroundColorNode.parentNode.nodeType === Node.ELEMENT_NODE
+		) {
+			backgroundColorNode = backgroundColorNode.parentNode;
+			backgroundColor = getComputedStyle( backgroundColorNode )
+				.backgroundColor;
+		}
+
+		setDetectedBackgroundColor( backgroundColor );
+	} );
+
+	return (
+		<InspectorControls>
+			<PanelColorSettings
+				title={ __( 'Color settings' ) }
+				initialOpen={ false }
+				colorSettings={ colorSettings }
+			>
+				<ContrastChecker
+					backgroundColor={ detectedBackgroundColor }
+					textColor={ detectedColor }
+				/>
+			</PanelColorSettings>
+		</InspectorControls>
+	);
+}
diff --git a/packages/block-editor/src/hooks/color-panel.native.js b/packages/block-editor/src/hooks/color-panel.native.js
new file mode 100644
index 0000000000000..3c505bfd0f15f
--- /dev/null
+++ b/packages/block-editor/src/hooks/color-panel.native.js
@@ -0,0 +1,3 @@
+export default function ColorPanel() {
+	return null;
+}
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 139bff0ae9ba3..05e5502a05972 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -10,7 +10,6 @@ import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -21,11 +20,8 @@ import {
 	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 } from '../components/colors';
-import PanelColorSettings from '../components/panel-color-settings';
-import ContrastChecker from '../components/contrast-checker';
-import InspectorControls from '../components/inspector-controls';
-import { getBlockDOMNode } from '../utils/dom';
 import { cleanEmptyObject } from './utils';
+import ColorPanel from './color-panel';
 
 export const COLOR_SUPPORT_KEY = '__experimentalColor';
 
@@ -118,51 +114,6 @@ export function addEditProps( settings ) {
 	return settings;
 }
 
-const ColorPanel = ( { colorSettings, clientId } ) => {
-	const { getComputedStyle, Node } = window;
-
-	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
-	const [ detectedColor, setDetectedColor ] = useState();
-
-	useEffect( () => {
-		const colorsDetectionElement = getBlockDOMNode( clientId );
-		if ( ! colorsDetectionElement ) {
-			return;
-		}
-		setDetectedColor( getComputedStyle( colorsDetectionElement ).color );
-
-		let backgroundColorNode = colorsDetectionElement;
-		let backgroundColor = getComputedStyle( backgroundColorNode )
-			.backgroundColor;
-		while (
-			backgroundColor === 'rgba(0, 0, 0, 0)' &&
-			backgroundColorNode.parentNode &&
-			backgroundColorNode.parentNode.nodeType === Node.ELEMENT_NODE
-		) {
-			backgroundColorNode = backgroundColorNode.parentNode;
-			backgroundColor = getComputedStyle( backgroundColorNode )
-				.backgroundColor;
-		}
-
-		setDetectedBackgroundColor( backgroundColor );
-	} );
-
-	return (
-		<InspectorControls>
-			<PanelColorSettings
-				title={ __( 'Color settings' ) }
-				initialOpen={ false }
-				colorSettings={ colorSettings }
-			>
-				<ContrastChecker
-					backgroundColor={ detectedBackgroundColor }
-					textColor={ detectedColor }
-				/>
-			</PanelColorSettings>
-		</InspectorControls>
-	);
-};
-
 /**
  * Override the default edit UI to include new inspector controls for block
  * color, if block defines support.
diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js
index d85f61d596d93..0efa29d7f8690 100644
--- a/packages/block-editor/src/hooks/index.native.js
+++ b/packages/block-editor/src/hooks/index.native.js
@@ -3,3 +3,5 @@
  */
 import './custom-class-name';
 import './generated-class-name';
+import './style';
+import './color';
diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js
index 9414f9901ae87..f1e1220b6100a 100644
--- a/packages/block-editor/src/hooks/line-height.js
+++ b/packages/block-editor/src/hooks/line-height.js
@@ -5,6 +5,7 @@ import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { PanelBody } from '@wordpress/components';
+import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -41,18 +42,20 @@ export const withBlockControls = createHigherOrderComponent(
 				style: cleanEmptyObject( newStyle ),
 			} );
 		};
-
-		return [
-			<BlockEdit key="edit" { ...props } />,
-			<InspectorControls key="control">
-				<PanelBody title={ __( 'Typography' ) }>
-					<LineHeightControl
-						value={ style?.typography?.lineHeight }
-						onChange={ onChange }
-					/>
-				</PanelBody>
-			</InspectorControls>,
-		];
+		const controls = Platform.select( {
+			web: (
+				<InspectorControls key="control">
+					<PanelBody title={ __( 'Typography' ) }>
+						<LineHeightControl
+							value={ style?.typography?.lineHeight }
+							onChange={ onChange }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			),
+			native: null,
+		} );
+		return [ <BlockEdit key="edit" { ...props } />, controls ];
 	},
 	'withToolbarControls'
 );
diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index ee85cadd91a65..b41810e614529 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -68,13 +68,21 @@ const Cover = ( {
 	overlayColor,
 	setAttributes,
 } ) => {
-	const { backgroundType, dimRatio, focalPoint, minHeight, url } = attributes;
+	const {
+		backgroundType,
+		dimRatio,
+		focalPoint,
+		minHeight,
+		url,
+		style,
+	} = attributes;
 	const CONTAINER_HEIGHT = minHeight || COVER_DEFAULT_HEIGHT;
 
 	const { gradientValue } = __experimentalUseGradient();
 
 	const hasBackground = !! (
 		url ||
+		( style && style.color && style.color.background ) ||
 		attributes.overlayColor ||
 		overlayColor.color ||
 		gradientValue
@@ -114,9 +122,9 @@ const Cover = ( {
 		url && { opacity: dimRatio / 100 },
 		! gradientValue && {
 			backgroundColor:
-				overlayColor && overlayColor.color
-					? overlayColor.color
-					: styles.overlay.color,
+				( overlayColor && overlayColor.color ) ||
+				( style && style.color && style.color.background ) ||
+				styles.overlay.color,
 		},
 		// While we don't support theme colors we add a default bg color
 		! overlayColor.color && ! url
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index 1647cdc32496b..28f9a6da5be57 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/packages/block-library/src/heading/edit.js
@@ -24,13 +24,18 @@ import {
 import { Platform } from '@wordpress/element';
 
 function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
-	const { align, content, level, placeholder } = attributes;
+	const { align, content, level, placeholder, style } = attributes;
 	const tagName = 'h' + level;
 	const isAndroid = Platform.select( {
 		android: true,
 		native: false,
 		web: false,
 	} );
+
+	const styles = {
+		color: style && style.color && style.color.text,
+	};
+
 	return (
 		<>
 			<BlockControls>
@@ -90,6 +95,7 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
 				} ) }
 				placeholder={ placeholder || __( 'Write heading…' ) }
 				textAlign={ align }
+				style={ styles }
 			/>
 		</>
 	);
diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js
index 8646b0c038002..d2c70814cd5f7 100644
--- a/packages/block-library/src/media-text/edit.native.js
+++ b/packages/block-library/src/media-text/edit.native.js
@@ -190,6 +190,7 @@ class MediaTextEdit extends Component {
 			mediaPosition,
 			mediaWidth,
 			verticalAlignment,
+			style,
 		} = attributes;
 		const { containerWidth } = this.state;
 
@@ -221,7 +222,9 @@ class MediaTextEdit extends Component {
 				? styles[ 'is-stacked-on-mobile.has-media-on-the-right' ]
 				: {} ),
 			...( isSelected && styles[ 'is-selected' ] ),
-			backgroundColor: backgroundColor.color,
+			backgroundColor:
+				( style && style.color && style.color.background ) ||
+				backgroundColor.color,
 		};
 
 		const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth;
diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
index f3fc74a70e9ff..1027f46371508 100644
--- a/packages/block-library/src/paragraph/edit.native.js
+++ b/packages/block-library/src/paragraph/edit.native.js
@@ -7,7 +7,6 @@ import {
 	AlignmentToolbar,
 	BlockControls,
 	RichText,
-	__experimentalUseColors,
 } from '@wordpress/block-editor';
 
 const name = 'core/paragraph';
@@ -17,15 +16,14 @@ function ParagraphBlock( {
 	mergeBlocks,
 	onReplace,
 	setAttributes,
-	style,
+	style: oldStyle,
 } ) {
-	const { align, content, placeholder } = attributes;
+	const { align, content, placeholder, style } = attributes;
 
-	/* eslint-disable @wordpress/no-unused-vars-before-return */
-	const { TextColor } = __experimentalUseColors( [
-		{ name: 'textColor', property: 'color' },
-	] );
-	/* eslint-enable @wordpress/no-unused-vars-before-return */
+	const styles = {
+		...oldStyle,
+		color: style && style.color && style.color.text,
+	};
 
 	return (
 		<>
@@ -37,35 +35,33 @@ function ParagraphBlock( {
 					} }
 				/>
 			</BlockControls>
-			<TextColor>
-				<RichText
-					identifier="content"
-					tagName="p"
-					value={ content }
-					deleteEnter={ true }
-					style={ style }
-					onChange={ ( nextContent ) => {
-						setAttributes( {
-							content: nextContent,
-						} );
-					} }
-					onSplit={ ( value ) => {
-						if ( ! value ) {
-							return createBlock( name );
-						}
+			<RichText
+				identifier="content"
+				tagName="p"
+				value={ content }
+				deleteEnter={ true }
+				style={ styles }
+				onChange={ ( nextContent ) => {
+					setAttributes( {
+						content: nextContent,
+					} );
+				} }
+				onSplit={ ( value ) => {
+					if ( ! value ) {
+						return createBlock( name );
+					}
 
-						return createBlock( name, {
-							...attributes,
-							content: value,
-						} );
-					} }
-					onMerge={ mergeBlocks }
-					onReplace={ onReplace }
-					onRemove={ onReplace ? () => onReplace( [] ) : undefined }
-					placeholder={ placeholder || __( 'Start writing…' ) }
-					textAlign={ align }
-				/>
-			</TextColor>
+					return createBlock( name, {
+						...attributes,
+						content: value,
+					} );
+				} }
+				onMerge={ mergeBlocks }
+				onReplace={ onReplace }
+				onRemove={ onReplace ? () => onReplace( [] ) : undefined }
+				placeholder={ placeholder || __( 'Start writing…' ) }
+				textAlign={ align }
+			/>
 		</>
 	);
 }