diff --git a/packages/block-library/src/paragraph/controls.js b/packages/block-library/src/paragraph/controls.js
new file mode 100644
index 00000000000000..ccb9e9ec8c163f
--- /dev/null
+++ b/packages/block-library/src/paragraph/controls.js
@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x, isRTL } from '@wordpress/i18n';
+import {
+	ToolbarButton,
+	ToggleControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import {
+	AlignmentControl,
+	BlockControls,
+	InspectorControls,
+	useSettings,
+} from '@wordpress/block-editor';
+import { formatLtr } from '@wordpress/icons';
+import { pure } from '@wordpress/compose';
+
+function ParagraphRTLControl( { direction, setDirection } ) {
+	return (
+		isRTL() && (
+			<ToolbarButton
+				icon={ formatLtr }
+				title={ _x( 'Left to right', 'editor button' ) }
+				isActive={ direction === 'ltr' }
+				onClick={ () => {
+					setDirection( direction === 'ltr' ? undefined : 'ltr' );
+				} }
+			/>
+		)
+	);
+}
+
+export function hasDropCapDisabled( align ) {
+	return align === ( isRTL() ? 'left' : 'right' ) || align === 'center';
+}
+
+function Controls( { align, direction, dropCap, clientId, setAttributes } ) {
+	const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' );
+
+	let helpText;
+	if ( hasDropCapDisabled( align ) ) {
+		helpText = __( 'Not available for aligned text.' );
+	} else if ( dropCap ) {
+		helpText = __( 'Showing large initial letter.' );
+	} else {
+		helpText = __( 'Toggle to show a large initial letter.' );
+	}
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ align }
+					onChange={ ( newAlign ) =>
+						setAttributes( {
+							align: newAlign,
+							dropCap: hasDropCapDisabled( newAlign )
+								? false
+								: dropCap,
+						} )
+					}
+				/>
+				<ParagraphRTLControl
+					direction={ direction }
+					setDirection={ ( newDirection ) =>
+						setAttributes( { direction: newDirection } )
+					}
+				/>
+			</BlockControls>
+			{ isDropCapFeatureEnabled && (
+				<InspectorControls group="typography">
+					<ToolsPanelItem
+						hasValue={ () => !! dropCap }
+						label={ __( 'Drop cap' ) }
+						onDeselect={ () =>
+							setAttributes( { dropCap: undefined } )
+						}
+						resetAllFilter={ () => ( { dropCap: undefined } ) }
+						panelId={ clientId }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Drop cap' ) }
+							checked={ !! dropCap }
+							onChange={ () =>
+								setAttributes( { dropCap: ! dropCap } )
+							}
+							help={ helpText }
+							disabled={
+								hasDropCapDisabled( align ) ? true : false
+							}
+						/>
+					</ToolsPanelItem>
+				</InspectorControls>
+			) }
+		</>
+	);
+}
+
+export default pure( Controls );
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 3a0f4f0688ac9b..cad4cfc9f840b4 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -6,48 +6,16 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, _x, isRTL } from '@wordpress/i18n';
-import {
-	ToolbarButton,
-	ToggleControl,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import {
-	AlignmentControl,
-	BlockControls,
-	InspectorControls,
-	RichText,
-	useBlockProps,
-	useSettings,
-} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
-import { formatLtr } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { useOnEnter } from './use-enter';
-
-const name = 'core/paragraph';
-
-function ParagraphRTLControl( { direction, setDirection } ) {
-	return (
-		isRTL() && (
-			<ToolbarButton
-				icon={ formatLtr }
-				title={ _x( 'Left to right', 'editor button' ) }
-				isActive={ direction === 'ltr' }
-				onClick={ () => {
-					setDirection( direction === 'ltr' ? undefined : 'ltr' );
-				} }
-			/>
-		)
-	);
-}
-
-function hasDropCapDisabled( align ) {
-	return align === ( isRTL() ? 'left' : 'right' ) || align === 'center';
-}
+import Controls, { hasDropCapDisabled } from './controls';
+import { name } from './';
 
 function ParagraphBlock( {
 	attributes,
@@ -58,7 +26,6 @@ function ParagraphBlock( {
 	clientId,
 } ) {
 	const { align, content, direction, dropCap, placeholder } = attributes;
-	const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' );
 	const blockProps = useBlockProps( {
 		ref: useOnEnter( { clientId, content } ),
 		className: classnames( {
@@ -68,62 +35,15 @@ function ParagraphBlock( {
 		style: { direction },
 	} );
 
-	let helpText;
-	if ( hasDropCapDisabled( align ) ) {
-		helpText = __( 'Not available for aligned text.' );
-	} else if ( dropCap ) {
-		helpText = __( 'Showing large initial letter.' );
-	} else {
-		helpText = __( 'Toggle to show a large initial letter.' );
-	}
-
 	return (
 		<>
-			<BlockControls group="block">
-				<AlignmentControl
-					value={ align }
-					onChange={ ( newAlign ) =>
-						setAttributes( {
-							align: newAlign,
-							dropCap: hasDropCapDisabled( newAlign )
-								? false
-								: dropCap,
-						} )
-					}
-				/>
-				<ParagraphRTLControl
-					direction={ direction }
-					setDirection={ ( newDirection ) =>
-						setAttributes( { direction: newDirection } )
-					}
-				/>
-			</BlockControls>
-			{ isDropCapFeatureEnabled && (
-				<InspectorControls group="typography">
-					<ToolsPanelItem
-						hasValue={ () => !! dropCap }
-						label={ __( 'Drop cap' ) }
-						onDeselect={ () =>
-							setAttributes( { dropCap: undefined } )
-						}
-						resetAllFilter={ () => ( { dropCap: undefined } ) }
-						panelId={ clientId }
-					>
-						<ToggleControl
-							__nextHasNoMarginBottom
-							label={ __( 'Drop cap' ) }
-							checked={ !! dropCap }
-							onChange={ () =>
-								setAttributes( { dropCap: ! dropCap } )
-							}
-							help={ helpText }
-							disabled={
-								hasDropCapDisabled( align ) ? true : false
-							}
-						/>
-					</ToolsPanelItem>
-				</InspectorControls>
-			) }
+			<Controls
+				align={ align }
+				direction={ direction }
+				dropCap={ dropCap }
+				clientId={ clientId }
+				setAttributes={ setAttributes }
+			/>
 			<RichText
 				identifier="content"
 				tagName="p"