[wp-trac] [WordPress Trac] #64709: Stretchy Heading inside Media & Text block don't render correct in Firefox browser.

[WordPress Trac]

#64709: Stretchy Heading inside Media & Text block don't render correct in Firefox
browser.
--------------------------+------------------------------
 Reporter:  clauskofoed   |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Formatting    |     Version:  6.9.1
 Severity:  normal        |  Resolution:
 Keywords:  needs-patch   |     Focuses:
--------------------------+------------------------------
Changes (by abhishekfdd):

 * keywords:   => needs-patch


Comment:

 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 [https://github.com/WordPress/gutenberg/pull/73652 #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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64709#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform