diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 05e5502a05972b..5e6cff33d41b14 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -8,7 +8,6 @@ import classnames from 'classnames';
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
@@ -115,75 +114,69 @@ export function addEditProps( settings ) {
 }
 
 /**
- * Override the default edit UI to include new inspector controls for block
- * color, if block defines support.
+ * Inspector control panel containing the color related configuration
  *
- * @param  {Function} BlockEdit Original component
- * @return {Function}           Wrapped component
+ * @param {Object} props
+ *
+ * @return {WPElement} Color edit element.
  */
-export const withBlockControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const { name: blockName } = props;
-		const colors = useSelect( ( select ) => {
-			return select( 'core/block-editor' ).getSettings().colors;
-		}, [] );
-
-		if ( ! hasBlockSupport( blockName, COLOR_SUPPORT_KEY ) ) {
-			return <BlockEdit key="edit" { ...props } />;
-		}
-		const { style, textColor, backgroundColor } = props.attributes;
-
-		const onChangeColor = ( name ) => ( value ) => {
-			const colorObject = getColorObjectByColorValue( colors, value );
-			const attributeName = name + 'Color';
-			const newStyle = {
-				...style,
-				color: {
-					...style?.color,
-					[ name ]: colorObject?.slug ? undefined : value,
-				},
-			};
-			const newNamedColor = colorObject?.slug
-				? colorObject.slug
-				: undefined;
-			props.setAttributes( {
-				style: cleanEmptyObject( newStyle ),
-				[ attributeName ]: newNamedColor,
-			} );
+export function ColorEdit( props ) {
+	const { name: blockName } = props;
+	const colors = useSelect( ( select ) => {
+		return select( 'core/block-editor' ).getSettings().colors;
+	}, [] );
+
+	if ( ! hasBlockSupport( blockName, COLOR_SUPPORT_KEY ) ) {
+		return null;
+	}
+	const { style, textColor, backgroundColor } = props.attributes;
+
+	const onChangeColor = ( name ) => ( value ) => {
+		const colorObject = getColorObjectByColorValue( colors, value );
+		const attributeName = name + 'Color';
+		const newStyle = {
+			...style,
+			color: {
+				...style?.color,
+				[ name ]: colorObject?.slug ? undefined : value,
+			},
 		};
+		const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
+		props.setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+			[ attributeName ]: newNamedColor,
+		} );
+	};
 
-		return [
-			<ColorPanel
-				key="colors"
-				clientId={ props.clientId }
-				colorSettings={ [
-					{
-						label: __( 'Text Color' ),
-						onChange: onChangeColor( 'text' ),
+	return (
+		<ColorPanel
+			key="colors"
+			clientId={ props.clientId }
+			colorSettings={ [
+				{
+					label: __( 'Text Color' ),
+					onChange: onChangeColor( 'text' ),
+					colors,
+					value: getColorObjectByAttributeValues(
 						colors,
-						value: getColorObjectByAttributeValues(
-							colors,
-							textColor,
-							style?.color?.text
-						).color,
-					},
-					{
-						label: __( 'Background Color' ),
-						onChange: onChangeColor( 'background' ),
+						textColor,
+						style?.color?.text
+					).color,
+				},
+				{
+					label: __( 'Background Color' ),
+					onChange: onChangeColor( 'background' ),
+					colors,
+					value: getColorObjectByAttributeValues(
 						colors,
-						value: getColorObjectByAttributeValues(
-							colors,
-							backgroundColor,
-							style?.color?.background
-						).color,
-					},
-				] }
-			/>,
-			<BlockEdit key="edit" { ...props } />,
-		];
-	},
-	'withToolbarControls'
-);
+						backgroundColor,
+						style?.color?.background
+					).color,
+				},
+			] }
+		/>
+	);
+}
 
 addFilter(
 	'blocks.registerBlockType',
@@ -202,9 +195,3 @@ addFilter(
 	'core/color/addEditProps',
 	addEditProps
 );
-
-addFilter(
-	'editor.BlockEdit',
-	'core/color/with-block-controls',
-	withBlockControls
-);
diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js
index e20a1e59dc0240..cdcf435ff53b15 100644
--- a/packages/block-editor/src/hooks/font-size.js
+++ b/packages/block-editor/src/hooks/font-size.js
@@ -8,9 +8,6 @@ import classnames from 'classnames';
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { PanelBody } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -22,9 +19,9 @@ import {
 	getFontSizeObjectByValue,
 	FontSizePicker,
 } from '../components/font-sizes';
-import InspectorControls from '../components/inspector-controls';
+import { cleanEmptyObject } from './utils';
 
-const FONT_SIZE_SUPPORT_KEY = '__experimentalFontSize';
+export const FONT_SIZE_SUPPORT_KEY = '__experimentalFontSize';
 
 /**
  * Filters registered block settings, extending attributes to include
@@ -66,8 +63,8 @@ function addSaveProps( props, blockType, attributes ) {
 	const { fontSize } = attributes;
 
 	const fontSizeClass = getFontSizeClass( fontSize );
-
-	props.className = classnames( props.className, fontSizeClass );
+	const newClassName = classnames( props.className, fontSizeClass );
+	props.className = newClassName ? newClassName : undefined;
 
 	return props;
 }
@@ -96,77 +93,55 @@ function addEditProps( settings ) {
 	return settings;
 }
 
-const FontSizeInspectorControl = ( { value, onChange } ) => (
-	<InspectorControls key="inspector-controls">
-		<PanelBody title={ __( 'Text settings' ) }>
-			<FontSizePicker value={ value } onChange={ onChange } />
-		</PanelBody>
-	</InspectorControls>
-);
-
-const setFontSize = ( { style, setAttributes }, fontSizes ) => ( value ) => {
-	const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;
-
-	setAttributes( {
-		style: {
-			...style,
-			typography: {
-				...style?.typography,
-				fontSize: fontSizeSlug ? undefined : value,
-			},
-		},
-		fontSize: fontSizeSlug,
-	} );
-};
-
 const hasFontSizeSupport = ( blockName ) =>
 	hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY );
 
 /**
- * Override the default edit UI to include inspector controls
- * for font size, if block defines support.
+ * Inspector control panel containing the font size related configuration
+ *
+ * @param {Object} props
  *
- * @param  {Function} BlockEdit Original component
- * @return {Function}           Wrapped component
+ * @return {WPElement} Font size edit element.
  */
-const withBlockControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const {
-			name: blockName,
-			attributes: { fontSize, style },
-		} = props;
-
-		const { fontSizes } = useSelect( ( select ) =>
-			select( 'core/block-editor' ).getSettings()
-		);
-
-		const fontSizeObject = getFontSize(
-			fontSizes,
-			fontSize,
-			style?.fontSize
-		);
-
-		if ( ! hasFontSizeSupport( blockName ) ) {
-			return (
-				<BlockEdit
-					key="edit"
-					{ ...props }
-					fontSize={ fontSizeObject }
-				/>
-			);
-		}
+export function FontSizeEdit( props ) {
+	const {
+		name: blockName,
+		attributes: { fontSize, style },
+		setAttributes,
+	} = props;
+
+	const { fontSizes } = useSelect( ( select ) =>
+		select( 'core/block-editor' ).getSettings()
+	);
+
+	if ( ! hasFontSizeSupport( blockName ) ) {
+		return null;
+	}
 
-		return [
-			<FontSizeInspectorControl
-				key="inspector-controls"
-				value={ fontSizeObject.size }
-				onChange={ setFontSize( props, fontSizes ) }
-			/>,
-			<BlockEdit key="edit" { ...props } fontSize={ fontSizeObject } />,
-		];
-	},
-	'withFontSizeControlsTest'
-);
+	const fontSizeObject = getFontSize(
+		fontSizes,
+		fontSize,
+		style?.typography?.fontSize
+	);
+	const onChange = ( value ) => {
+		const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;
+
+		setAttributes( {
+			style: cleanEmptyObject( {
+				...style,
+				typography: {
+					...style?.typography,
+					fontSize: fontSizeSlug ? undefined : value,
+				},
+			} ),
+			fontSize: fontSizeSlug,
+		} );
+	};
+
+	return (
+		<FontSizePicker value={ fontSizeObject.size } onChange={ onChange } />
+	);
+}
 
 addFilter(
 	'blocks.registerBlockType',
@@ -181,9 +156,3 @@ addFilter(
 );
 
 addFilter( 'blocks.registerBlockType', 'core/font/addEditProps', addEditProps );
-
-addFilter(
-	'editor.BlockEdit',
-	'core/font/with-block-controls',
-	withBlockControls
-);
diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js
index f1e1220b6100ad..9b042cb3683c8f 100644
--- a/packages/block-editor/src/hooks/line-height.js
+++ b/packages/block-editor/src/hooks/line-height.js
@@ -1,67 +1,43 @@
 /**
  * WordPress dependencies
  */
-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';
 
 /**
  * Internal dependencies
  */
 import LineHeightControl from '../components/line-height-control';
-import InspectorControls from '../components/inspector-controls';
 import { cleanEmptyObject } from './utils';
 
-export const LINE_HEIGHT_SUPPRT_KEY = '__experimentalLineHeight';
+export const LINE_HEIGHT_SUPPORT_KEY = '__experimentalLineHeight';
 
 /**
- * Override the default edit UI to include new inspector controls for block
- * color, if block defines support.
+ * Inspector control panel containing the line height related configuration
  *
- * @param  {Function} BlockEdit Original component
- * @return {Function}           Wrapped component
+ * @param {Object} props
+ *
+ * @return {WPElement} Line height edit element.
  */
-export const withBlockControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const { name: blockName } = props;
-		if ( ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPRT_KEY ) ) {
-			return <BlockEdit key="edit" { ...props } />;
-		}
-		const { style } = props.attributes;
-		const onChange = ( newLineHeightValue ) => {
-			const newStyle = {
-				...style,
-				typography: {
-					lineHeight: newLineHeightValue,
-				},
-			};
-			props.setAttributes( {
-				style: cleanEmptyObject( newStyle ),
-			} );
+export function LineHeightEdit( props ) {
+	const { style } = props.attributes;
+	const onChange = ( newLineHeightValue ) => {
+		const newStyle = {
+			...style,
+			typography: {
+				lineHeight: newLineHeightValue,
+			},
 		};
-		const controls = Platform.select( {
-			web: (
-				<InspectorControls key="control">
-					<PanelBody title={ __( 'Typography' ) }>
-						<LineHeightControl
-							value={ style?.typography?.lineHeight }
-							onChange={ onChange }
-						/>
-					</PanelBody>
-				</InspectorControls>
-			),
-			native: null,
+		props.setAttributes( {
+			style: cleanEmptyObject( newStyle ),
 		} );
-		return [ <BlockEdit key="edit" { ...props } />, controls ];
-	},
-	'withToolbarControls'
-);
-
-addFilter(
-	'editor.BlockEdit',
-	'core/color/with-block-controls',
-	withBlockControls
-);
+	};
+	return Platform.select( {
+		web: (
+			<LineHeightControl
+				value={ style?.typography?.lineHeight }
+				onChange={ onChange }
+			/>
+		),
+		native: null,
+	} );
+}
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 9ffd3fd34d0ca7..156104d3022e43 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -1,21 +1,35 @@
 /**
  * External dependencies
  */
-import { mapKeys, kebabCase, isObject, entries } from 'lodash';
+import { mapKeys, kebabCase, isObject, entries, identity } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { COLOR_SUPPORT_KEY } from './color';
-import { LINE_HEIGHT_SUPPRT_KEY } from './line-height';
-
-const styleSupportKeys = [ COLOR_SUPPORT_KEY, LINE_HEIGHT_SUPPRT_KEY ];
+import InspectorControls from '../components/inspector-controls';
+import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
+import { LINE_HEIGHT_SUPPORT_KEY, LineHeightEdit } from './line-height';
+import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit } from './font-size';
+
+const styleSupportKeys = [
+	COLOR_SUPPORT_KEY,
+	LINE_HEIGHT_SUPPORT_KEY,
+	FONT_SIZE_SUPPORT_KEY,
+];
+
+const typographySupportKeys = [
+	LINE_HEIGHT_SUPPORT_KEY,
+	FONT_SIZE_SUPPORT_KEY,
+];
 
 const hasStyleSupport = ( blockType ) =>
 	styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );
@@ -30,11 +44,15 @@ const hasStyleSupport = ( blockType ) =>
 export function getCSSVariables( styles = {} ) {
 	const prefix = '--wp';
 	const token = '--';
+	const valueFormatters = {
+		fontSize: ( value ) => ( value ? value + 'px' : value ),
+	};
 	const getNestedCSSVariables = ( config ) => {
 		let result = {};
 		entries( config ).forEach( ( [ key, value ] ) => {
 			if ( ! isObject( value ) ) {
-				result[ kebabCase( key ) ] = value;
+				const formatter = valueFormatters[ key ] || identity;
+				result[ kebabCase( key ) ] = formatter( value );
 				return;
 			}
 
@@ -127,6 +145,36 @@ export function addEditProps( settings ) {
 	return settings;
 }
 
+/**
+ * Override the default edit UI to include new inspector controls for
+ * all the custom styles configs.
+ *
+ * @param  {Function} BlockEdit Original component
+ * @return {Function}           Wrapped component
+ */
+export const withBlockControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { name: blockName } = props;
+		const hasTypographySupport = typographySupportKeys.some( ( key ) =>
+			hasBlockSupport( blockName, key )
+		);
+
+		return [
+			hasTypographySupport && (
+				<InspectorControls key="typography">
+					<PanelBody title={ __( 'Typography' ) }>
+						<FontSizeEdit { ...props } />
+						<LineHeightEdit { ...props } />
+					</PanelBody>
+				</InspectorControls>
+			),
+			<ColorEdit key="colors" { ...props } />,
+			<BlockEdit key="edit" { ...props } />,
+		];
+	},
+	'withToolbarControls'
+);
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/style/addAttribute',
@@ -144,3 +192,9 @@ addFilter(
 	'core/style/addEditProps',
 	addEditProps
 );
+
+addFilter(
+	'editor.BlockEdit',
+	'core/style/with-block-controls',
+	withBlockControls
+);
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index f723b2f8a8b300..bcae630f0e5ac9 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -14,6 +14,7 @@ import {
 	InspectorControls,
 	RichText,
 	__experimentalBlock as Block,
+	getFontSize,
 } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
@@ -71,20 +72,29 @@ function useDropCapMinimumHeight( isDropCap, deps ) {
 
 function ParagraphBlock( {
 	attributes,
-	fontSize,
 	mergeBlocks,
 	onReplace,
 	setAttributes,
 } ) {
-	const { align, content, direction, dropCap, placeholder } = attributes;
-
+	const {
+		align,
+		content,
+		direction,
+		dropCap,
+		placeholder,
+		fontSize,
+		style,
+	} = attributes;
+	const { fontSizes } = useSelect( ( select ) =>
+		select( 'core/block-editor' ).getSettings()
+	);
 	const ref = useRef();
+	const fontSizeObject = getFontSize( fontSizes, fontSize, style?.fontSize );
 	const dropCapMinimumHeight = useDropCapMinimumHeight( dropCap, [
-		fontSize.size,
+		fontSizeObject.size,
 	] );
 
 	const styles = {
-		fontSize: fontSize.size ? `${ fontSize.size }px` : undefined,
 		direction,
 		minHeight: dropCapMinimumHeight,
 	};
@@ -128,7 +138,6 @@ function ParagraphBlock( {
 				className={ classnames( {
 					'has-drop-cap': dropCap,
 					[ `has-text-align-${ align }` ]: align,
-					[ fontSize.class ]: fontSize.class,
 				} ) }
 				style={ styles }
 				value={ content }
diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss
index 20b0f6a4311cd9..6d2711c0aded92 100644
--- a/packages/block-library/src/paragraph/editor.scss
+++ b/packages/block-library/src/paragraph/editor.scss
@@ -3,7 +3,6 @@
 	min-height: auto !important;
 }
 
-
 // Show a footprint fade effect when first selecting any block.
 .block-editor-block-list__block[data-type="core/paragraph"].is-selected {
 	&::before {
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 99e738bf9fc5fd..46686a47e63f89 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -217,28 +217,30 @@
 
 
 // Font sizes.
+:root {
+	.has-small-font-size {
+		font-size: 13px;
+	}
 
-.has-small-font-size {
-	font-size: 13px;
-}
+	.has-regular-font-size, // Not used now, kept because of backward compatibility.
+	.has-normal-font-size {
+		font-size: 16px;
+	}
 
-.has-regular-font-size, // Not used now, kept because of backward compatibility.
-.has-normal-font-size {
-	font-size: 16px;
-}
+	.has-medium-font-size {
+		font-size: 20px;
+	}
 
-.has-medium-font-size {
-	font-size: 20px;
-}
+	.has-large-font-size {
+		font-size: 36px;
+	}
 
-.has-large-font-size {
-	font-size: 36px;
+	.has-larger-font-size, // Not used now, kept because of backward compatibility.
+	.has-huge-font-size {
+		font-size: 42px;
+	}
 }
 
-.has-larger-font-size, // Not used now, kept because of backward compatibility.
-.has-huge-font-size {
-	font-size: 42px;
-}
 
 // Text alignments.
 .has-text-align-center {
diff --git a/packages/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss
index a7608813a5fcc2..8ecb29426d3c75 100644
--- a/packages/editor/src/editor-styles.scss
+++ b/packages/editor/src/editor-styles.scss
@@ -94,7 +94,6 @@ h6 {
 }
 
 p {
-	font-size: inherit;
 	margin-top: $default-block-margin;
 	margin-bottom: $default-block-margin;
 }
diff --git a/storybook/stories/playground/editor-styles.scss b/storybook/stories/playground/editor-styles.scss
index d920ea8de5ba04..9d94b0d1b5cae0 100644
--- a/storybook/stories/playground/editor-styles.scss
+++ b/storybook/stories/playground/editor-styles.scss
@@ -4,11 +4,6 @@
 	line-height: $editor-line-height;
 	color: $dark-gray-900;
 
-	p {
-		font-size: inherit;
-		line-height: inherit;
-	}
-
 	ul,
 	ol {
 		margin: 0;