diff --git a/packages/block-editor/src/components/fit-text-size-warning/style.scss b/packages/block-editor/src/components/fit-text-size-warning/style.scss
index bd51ac1f04244c..a529f8157e7af8 100644
--- a/packages/block-editor/src/components/fit-text-size-warning/style.scss
+++ b/packages/block-editor/src/components/fit-text-size-warning/style.scss
@@ -1,9 +1,5 @@
 @use "@wordpress/base-styles/variables" as *;
 
 .block-editor-fit-text-size-warning {
-	margin: $grid-unit-10 0 0 0;
-
-	.components-notice__content {
-		margin-right: 0;
-	}
+	grid-column: span 2;
 }
diff --git a/packages/block-editor/src/hooks/fit-text.js b/packages/block-editor/src/hooks/fit-text.js
index 91089eaaef2fc9..e48fe2473cb7a5 100644
--- a/packages/block-editor/src/hooks/fit-text.js
+++ b/packages/block-editor/src/hooks/fit-text.js
@@ -232,14 +232,13 @@ function useFitText( { fitText, name, clientId } ) {
 /**
  * Fit text control component for the typography panel.
  *
- * @param {Object}            props               Component props.
- * @param {string}            props.clientId      Block client ID.
- * @param {Function}          props.setAttributes Function to set block attributes.
- * @param {string}            props.name          Block name.
- * @param {boolean}           props.fitText       Whether fit text is enabled.
- * @param {string}            props.fontSize      Font size slug.
- * @param {Object}            props.style         Block style object.
- * @param {React.JSX.Element} props.warning       Warning component to display.
+ * @param {Object}   props               Component props.
+ * @param {string}   props.clientId      Block client ID.
+ * @param {Function} props.setAttributes Function to set block attributes.
+ * @param {string}   props.name          Block name.
+ * @param {boolean}  props.fitText       Whether fit text is enabled.
+ * @param {string}   props.fontSize      Font size slug.
+ * @param {Object}   props.style         Block style object.
  */
 export function FitTextControl( {
 	clientId,
@@ -248,56 +247,52 @@ export function FitTextControl( {
 	name,
 	fontSize,
 	style,
-	warning,
 } ) {
 	if ( ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
 		return null;
 	}
 	return (
-		<InspectorControls group="typography">
-			<ToolsPanelItem
-				hasValue={ () => fitText }
+		<ToolsPanelItem
+			hasValue={ () => fitText }
+			label={ __( 'Fit text' ) }
+			onDeselect={ () => setAttributes( { fitText: undefined } ) }
+			resetAllFilter={ () => ( { fitText: undefined } ) }
+			panelId={ clientId }
+		>
+			<ToggleControl
 				label={ __( 'Fit text' ) }
-				onDeselect={ () => setAttributes( { fitText: undefined } ) }
-				resetAllFilter={ () => ( { fitText: undefined } ) }
-				panelId={ clientId }
-			>
-				<ToggleControl
-					label={ __( 'Fit text' ) }
-					checked={ fitText }
-					onChange={ () => {
-						const newFitText = ! fitText || undefined;
-						const updates = { fitText: newFitText };
-
-						// When enabling fit text, clear font size if it has a value
-						if ( newFitText ) {
-							if ( fontSize ) {
-								updates.fontSize = undefined;
-							}
-							if ( style?.typography?.fontSize ) {
-								updates.style = {
-									...style,
-									typography: {
-										...style?.typography,
-										fontSize: undefined,
-									},
-								};
-							}
+				checked={ fitText }
+				onChange={ () => {
+					const newFitText = ! fitText || undefined;
+					const updates = { fitText: newFitText };
+
+					// When enabling fit text, clear font size if it has a value
+					if ( newFitText ) {
+						if ( fontSize ) {
+							updates.fontSize = undefined;
+						}
+						if ( style?.typography?.fontSize ) {
+							updates.style = {
+								...style,
+								typography: {
+									...style?.typography,
+									fontSize: undefined,
+								},
+							};
 						}
-
-						setAttributes( updates );
-					} }
-					help={
-						fitText
-							? __( 'Text will resize to fit its container.' )
-							: __(
-									'The text will resize to fit its container, resetting other font size settings.'
-							  )
 					}
-				/>
-				{ warning }
-			</ToolsPanelItem>
-		</InspectorControls>
+
+					setAttributes( updates );
+				} }
+				help={
+					fitText
+						? __( 'Text will resize to fit its container.' )
+						: __(
+								'The text will resize to fit its container, resetting other font size settings.'
+						  )
+				}
+			/>
+		</ToolsPanelItem>
 	);
 }
 
@@ -358,14 +353,27 @@ const hasFitTextSupport = ( blockNameOrType ) => {
 	return hasBlockSupport( blockNameOrType, FIT_TEXT_SUPPORT_KEY );
 };
 
-/*
- * Helper to encapsulate calls to the relatively expensive `useFitText` hook.
- * Used in `addFitTextControl` so that the hook is only called when a block's
- * `fitText` attribute is set.
+/**
+ * Component that handles the fit text font size and displays a warning
+ * if the fit text font size is below a minimum threshold.
+ *
+ * @param {Object}  props            Component props.
+ * @param {boolean} props.fitText    Whether fit text is enabled.
+ * @param {string}  props.name       Block name.
+ * @param {string}  props.clientId   Block client ID.
+ * @param {boolean} props.isSelected Whether the block is selected.
+ * @return {Element|null} Warning component or null.
  */
-function WithFitTextFontSize( { fitText, name, clientId, children } ) {
+function FitTextFontSize( { fitText, name, clientId, isSelected } ) {
 	const { fontSize } = useFitText( { fitText, name, clientId } );
-	return children( fontSize );
+	if ( isSelected && fontSize && fontSize < MIN_FONT_SIZE_FOR_WARNING ) {
+		return (
+			<InspectorControls group="typography">
+				<FitTextSizeWarning />
+			</InspectorControls>
+		);
+	}
+	return null;
 }
 
 /*
@@ -385,33 +393,7 @@ const addFitTextControl = createHigherOrderComponent( ( BlockEdit ) => {
 		return (
 			<>
 				<BlockEdit { ...props } />
-				{ fitText && (
-					<WithFitTextFontSize
-						fitText={ fitText }
-						name={ name }
-						clientId={ clientId }
-					>
-						{ ( fontSize ) =>
-							isSelected && (
-								<FitTextControl
-									clientId={ clientId }
-									fitText={ fitText }
-									setAttributes={ setAttributes }
-									name={ name }
-									fontSize={ attributes.fontSize }
-									style={ attributes.style }
-									warning={
-										fontSize <
-											MIN_FONT_SIZE_FOR_WARNING && (
-											<FitTextSizeWarning />
-										)
-									}
-								/>
-							)
-						}
-					</WithFitTextFontSize>
-				) }
-				{ ! fitText && isSelected && (
+				<InspectorControls group="typography">
 					<FitTextControl
 						clientId={ clientId }
 						fitText={ fitText }
@@ -420,6 +402,14 @@ const addFitTextControl = createHigherOrderComponent( ( BlockEdit ) => {
 						fontSize={ attributes.fontSize }
 						style={ attributes.style }
 					/>
+				</InspectorControls>
+				{ fitText && (
+					<FitTextFontSize
+						fitText={ fitText }
+						name={ name }
+						clientId={ clientId }
+						isSelected={ isSelected }
+					/>
 				) }
 			</>
 		);