Disable font size when fit text is enabled and the opposite and add e2e tests (#72584)

t-hamano · jorgefilipecosta · mcsf · web-flow · commit 247e5cfdbd74 · 2025-10-23T18:14:17.000+09:00
* Add end to end tests for Fit Text (#72406) Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: mcsf <mcsf@git.wordpress.org> * Update: Disable font size when fit text is enabled and the opposite. (#72533) Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> --------- Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: mcsf <mcsf@git.wordpress.org>
diff --git a/packages/block-editor/src/hooks/fit-text.js b/packages/block-editor/src/hooks/fit-text.js
@@ -180,12 +180,16 @@ function useFitText( { fitText, name, clientId } ) {
  * @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,
 	fitText = false,
 	setAttributes,
 	name,
+	fontSize,
+	style,
 } ) {
 	if ( ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
 		return null;
@@ -203,9 +207,28 @@ export function FitTextControl( {
 					__nextHasNoMarginBottom
 					label={ __( 'Fit text' ) }
 					checked={ fitText }
-					onChange={ () =>
-						setAttributes( { fitText: ! fitText || undefined } )
-					}
+					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.' )
@@ -278,7 +301,7 @@ const hasFitTextSupport = ( blockNameOrType ) => {
 export default {
 	useBlockProps,
 	addSaveProps,
-	attributeKeys: [ 'fitText' ],
+	attributeKeys: [ 'fitText', 'fontSize', 'style' ],
 	hasSupport: hasFitTextSupport,
 	edit: FitTextControl,
 };
diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
@@ -116,19 +116,30 @@ function TypographyInspectorControl( { children, resetAllFilter } ) {
 
 export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 	function selector( select ) {
-		const { style, fontFamily, fontSize } =
+		const { style, fontFamily, fontSize, fitText } =
 			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-		return { style, fontFamily, fontSize };
+		return { style, fontFamily, fontSize, fitText };
 	}
-	const { style, fontFamily, fontSize } = useSelect( selector, [ clientId ] );
+	const { style, fontFamily, fontSize, fitText } = useSelect( selector, [
+		clientId,
+	] );
 	const isEnabled = useHasTypographyPanel( settings );
 	const value = useMemo(
 		() => attributesToStyle( { style, fontFamily, fontSize } ),
 		[ style, fontSize, fontFamily ]
 	);
 
 	const onChange = ( newStyle ) => {
-		setAttributes( styleToAttributes( newStyle ) );
+		const newAttributes = styleToAttributes( newStyle );
+
+		// If setting a font size and fitText is currently enabled, disable it
+		const hasFontSize =
+			newAttributes.fontSize || newAttributes.style?.typography?.fontSize;
+		if ( hasFontSize && fitText ) {
+			newAttributes.fitText = undefined;
+		}
+
+		setAttributes( newAttributes );
 	};
 
 	if ( ! isEnabled ) {
diff --git a/test/e2e/specs/editor/blocks/fit-text.spec.js b/test/e2e/specs/editor/blocks/fit-text.spec.js
