Stretchy Heading inside Media & Text block don't render correct in Firefox browser.

[clauskofoed]

Tested with Firefox Developer v. 148,0b15 (64-bit) and standard Firefox v. 147.0.4 (64-bit)

When using Stretchy Heading or Stretchy Paragraph inside the Media & Text block, it renders fine in Chrome, Edge, Android and Brave browsers. But do not scale properly in FireFox browsers.
I first tried on staging site with own theme. Then tested in FireFox browser with Playground.
Problem both on frontend and backend.

[abhishekfdd]

I was able to reproduce this issue on WordPress 6.9.1 with Twenty Twenty-Five
theme and no plugins, using Firefox 147.0.4 (64-bit).

Summary

When "Fit text" (under Typography settings) is enabled on a Paragraph or
Heading block placed inside a Media & Text block, the text does not scale
correctly in Firefox. It works fine in Chrome, Edge, Brave, and Safari.
Problem is visible on both the frontend and the block editor.

Root Cause

The Media & Text block uses a CSS Grid layout:

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

The content area sits in the 1fr column. The fitText JavaScript uses a
binary search algorithm that compares scrollWidth / scrollHeight against
clientWidth / clientHeight to determine the correct font size. Firefox
reports different dimension values for elements inside 1fr grid tracks
compared to Chromium browsers, causing the algorithm to converge on the
wrong font size.

A similar issue was already fixed for flex containers in Gutenberg
PR ​#73652 (backported
to 6.9.1), but that fix does not cover the CSS Grid layout used by the
Media & Text block.

I tested adding min-width: 0 to .wp-block-media-text__content (a standard
CSS Grid fix for Firefox intrinsic sizing), but this did not resolve the
issue — confirming the fix needs to happen in the fitText JavaScript, not
just CSS.

Recommendation

This ticket should be addressed upstream in Gutenberg, since the fix requires
changes to the fitText measurement logic in:

• packages/block-editor/src/utils/fit-text-utils.js
• packages/block-editor/src/utils/fit-text-frontend.js

I have filed a Gutenberg issue for this:
​https://github.com/WordPress/gutenberg/issues/76647

Related

• Gutenberg PR #73652: Fix for flex containers (already in 6.9.1, does not cover CSS Grid) ​https://github.com/WordPress/gutenberg/pull/73652
• Gutenberg issue #73549: Stretchy Text inside Media & Text gets too big (identified the 1fr width issue) ​https://github.com/WordPress/gutenberg/issues/73549