Automattic
Text not responsive in FSE themes
Quick summary
The text on FSE themes is not responsive. This makes it quite large on mobile screens.
Even if you use EM or REM unit for the font-size, there is no difference on the rendered font-size with respect to the screen width.
Meanwhile, in Classic themes such as Twenty Twenty, the EM or REM unit for the font-size actually reduces font-width with respect to the screen width.
Steps to reproduce
On FSE themes:
- Activate an FSE theme such as Twenty Twenty Two.
- Create a page or post and add a Heading Block.
- Set font-size in REM or EM unit.
- Save the page.
- Check the rendered text size in desktop mode.
- Resize the browser window and check the rendered text size, it will remain the same.
Font size setting:
Desktop font-size - 90px
Mobile view - 90px
On Classic themes such as Twenty Twenty:
- Check the rendered text size in desktop mode.
- Resize the browser window and check the rendered text size, it is reduced.
Font size setting:
Desktop font-size - 105px
Mobile view - 90px
What you expected to happen
The rendered font size should be responsive.
What actually happened
The font size was not responsive. It was too large for mobile on FSE themes.
Context
User report: 5360883-zd-woothemes
Simple, Atomic or both?
Simple, Atomic
Theme-specific issue?
I was able to reproduce this issue on multiple FSE themes.
Browser, operating system and other notes
No response
Reproducibility
Consistent
Severity
All
Available workarounds?
No but the platform is still usable
Workaround details
No response
📌 HOUSEKEEPING
- Labels ✅
- Priority ✅
- Replicable on Core - Yes
📌 SCRUBBING
- Tested on P2 ✅
- Tested on Simple ✅
- Tested on AT ✅
- Tested on Self-hosted ✅
📌 FINDINGS/SCREENSHOTS/VIDEO
- I had a quick convo here(p1657823555188209-slack-C029FM1EH) and it appears to be a thing that'll be merged in Core.
https://github.com/WordPress/gutenberg/pull/39529
📌 ACTIONS
- Marked as Triaged for Quality Squad review
- Transferred to themes
