Fix: Fit Text sizing inside CSS Grid layouts in Firefox

[Mustafabharmal]

What?

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

The text either overflows the content area or renders at an incorrect (too large) size on both the frontend and backend (editor).

Closes #76647
Related to PR #73652 (flex container fix that didn't cover grid layouts)
Related to issue #73549 (1fr width intrinsic sizing issue)

Why?

The Media & Text block uses a CSS Grid layout with grid-template-columns: 50% 1fr, placing the content in the flexible 1fr column (.wp-block-media-text__content).

The Fit Text algorithm uses a binary search to find the maximum font size that fits by comparing:

• scrollWidth / scrollHeight against clientWidth / clientHeight

Firefox Bug: Firefox reports different (often unstable) scrollWidth values for descendants inside 1fr grid tracks compared to Chromium browsers. This causes the binary search to converge on an incorrect (too large) font size.

How?

Implemented a two-layer fix that mirrors the successful approach:

1. JavaScript Enhancement (fit-text-utils.js): Extended findOptimalFontSize() to recognize CSS Grid containers (display: grid or inline-grid) in addition to flex containers. When detected, the parent container becomes the reference element for width/height calculations, providing stable sizing measurements.
2. CSS Stabilization (media-text/style.scss): Added min-width: 0 to .wp-block-media-text__content to establish proper intrinsic sizing constraints in grid contexts, which stabilizes the measurement in Firefox.

Testing Instructions

1. Create a new post/page
2. Add a Media & Text block
3. Add an image to the media side
4. Add a Heading or Paragraph to the content area
5. Enable "Fit text" under Typography settings
6. Test in Firefox : Text should scale to fit without overflowing
7. Test in Chrome/Edge/Safari: Verify no regressions

Screenshots or screencast

Before:

Before.Fix.Stretch.mov

After:

After.Fix.Stretch.mov

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: [Package] Block library, [Package] Block editor.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Mustafabharmal <mustafabharmal@git.wordpress.org>
Co-authored-by: abhishekfdd <abhishekfdd@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.