Fix: Fit Text may overflow into the padding area. (#73327)

jorgefilipecosta · t-hamano · gutenbergplugin · commit 393a65c62cad · 2025-11-17T10:03:16.000Z
Co-authored-by: jorgefilipecosta &lt;jorgefilipecosta@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
diff --git a/packages/block-editor/src/utils/fit-text-utils.js b/packages/block-editor/src/utils/fit-text-utils.js
@@ -17,11 +17,28 @@ function findOptimalFontSize( textElement, applyFontSize ) {
 	let maxSize = 2400;
 	let bestSize = minSize;
 
+	const computedStyle = window.getComputedStyle( textElement );
+	const paddingLeft = parseFloat( computedStyle.paddingLeft ) || 0;
+	const paddingRight = parseFloat( computedStyle.paddingRight ) || 0;
+	const range = document.createRange();
+	range.selectNodeContents( textElement );
+
 	while ( minSize <= maxSize ) {
 		const midSize = Math.floor( ( minSize + maxSize ) / 2 );
 		applyFontSize( midSize );
 
-		const fitsWidth = textElement.scrollWidth <= textElement.clientWidth;
+		// When there is padding if the text overflows to the
+		// padding area, it should be considered overflowing.
+		// Use Range API to measure actual text content dimensions.
+		const rect = range.getBoundingClientRect();
+		const textWidth = rect.width;
+
+		// Check if text fits within the element's width and is not
+		// overflowing into the padding area.
+		const fitsWidth =
+			textElement.scrollWidth <= textElement.clientWidth &&
+			textWidth <= textElement.clientWidth - paddingLeft - paddingRight;
+		// Check if text fits within the element's height.
 		const fitsHeight =
 			alreadyHasScrollableHeight ||
 			textElement.scrollHeight <= textElement.clientHeight;
@@ -33,6 +50,7 @@ function findOptimalFontSize( textElement, applyFontSize ) {
 			maxSize = midSize - 1;
 		}
 	}
+	range.detach();
 
 	return bestSize;
 }
