Fit Text does not scale correctly inside Media & Text block in Firefox

[abhishekfdd]

Description

When "Fit text" is enabled (Typography > Fit text toggle) on a Paragraph
or Heading block placed inside a Media & Text block, the text does not
scale correctly in Firefox. It renders correctly in Chrome, Edge, Brave,
and Safari.

The text either overflows the content area or renders at a size that
doesn't fit the container — on both frontend and backend (editor).

This appears to be the CSS Grid counterpart of the flex container issue
fixed in #73652. That PR fixed fitText inside flex containers, but the
Media & Text block uses a CSS Grid layout (grid-template-columns: 50% 1fr),
and the same class of problem occurs here — the fitText algorithm
miscalculates the available width inside the 1fr grid column in Firefox.

I also attempted the CSS-only fix of adding min-width: 0 to
.wp-block-media-text__content (which is a standard fix for grid item
intrinsic sizing in Firefox), but this did not resolve the issue. The
problem appears to be in how the fitText JavaScript reads the container
dimensions inside a CSS Grid context in Firefox, not just in how Firefox
resolves min-width: auto.

Step-by-step reproduction instructions

1. Open Firefox (tested with v147.0.4 and Developer Edition v148.0b15)
2. Create a new post
3. Add a Media & Text block
4. Add an image to the media side
5. In the text content area, add a Paragraph or Heading block
6. Enable "Fit text" under Typography settings for that block
7. Observe: the text does not scale to fit the content area properly

Now open the same page in Chrome — the text scales correctly.

Expected behavior

The text should scale to fit the available width of the
.wp-block-media-text__content area, just like it does in Chrome/Edge/Safari.

Actual behavior

In Firefox, the text either overflows the content column or renders at an
incorrect (too large) size. Problem occurs on both the frontend and
within the block editor.

Environment info

• WordPress 6.9.1
• Firefox 147.0.4 (64-bit) and Firefox Developer 148.0b15 (64-bit)
• Theme: Twenty Twenty-Five (also reproduced with Playground default)
• Plugins: None
• Works correctly in Chrome, Edge, Brave, Safari

Analysis

The Media & Text block uses:

.wp-block-media-text {
    grid-template-columns: 50% 1fr;
}

The content area sits in the 1fr column. The fitText algorithm uses a
binary search that compares scrollWidth/scrollHeight against
clientWidth/clientHeight to find the maximum font size that fits.

Firefox reports different values for scrollWidth on elements inside
1fr grid tracks compared to Chromium browsers — particularly when the
content is being dynamically resized by the fitText algorithm. This causes
the binary search to converge on the wrong font size.

PR #73652 fixed a similar issue for flex containers by adjusting how
the fitText code handles nested flex layouts. The same approach likely
needs to be extended to handle CSS Grid containers like Media & Text.

A CSS-only fix (min-width: 0 on .wp-block-media-text__content) was
tested and did not resolve the issue, confirming this requires a
JavaScript-level fix in the fitText measurement logic.

Related

• Fix: Stretchy text issue when nested on flex containers. #73652 — Fix: Stretchy text issue when nested on flex containers
  (backported to 6.9.1, but doesn't cover CSS Grid)
• Stretchy Text inside Media & Text block gets too big if the Content padding is not a percentage #73549 — Stretchy Text inside Media & Text block gets too big if
  padding is not a percentage (identified the 1fr width issue)
• Core Trac URLInput should use InputControl internally #64709 — Original bug report
  https://core.trac.wordpress.org/ticket/64709

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block

[Mustafabharmal]

I am able to reproduce this issue in the firefox with the steps mentioned in the issue.

The Media & Text block uses grid-template-columns: 50% 1fr, placing content in the flexible 1fr column. Firefox reports inconsistent scrollWidth values for elements inside 1fr grid tracks during the Fit Text binary search algorithm, causing incorrect font size convergence.

I've implemented a fix:

1. JavaScript Enhancement (fit-text-utils.js): Extended the existing flex container workaround from PR Fix: Stretchy text issue when nested on flex containers. #73652 to also handle CSS Grid containers. When a text element's parent is a grid/inline-grid container, we use the parent as the reference element for width calculations, providing stable sizing.

2. CSS Stabilization (media-text/style.scss): Added min-width: 0 to .wp-block-media-text__content to establish proper intrinsic sizing in grid contexts.