Site Editor Layout Breaks When Selecting Font Sizes with Long Names in theme.json

[SainathPoojary]

Description

When adding custom font sizes with long names in the theme.json file, the Site Editor layout breaks when these font sizes are selected. The issue manifests as an overflow in the Site Editor panel, causing a horizontal scrollbar to appear. This negatively impacts the user experience by breaking the layout and making the interface difficult to use.

Step-by-step reproduction instructions

1. Add custom font sizes with long names in your theme’s theme.json file. Example:

{
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"slug": "extra-long-heading-one",
					"size": "16px",
					"name": "Extra Extra Extra Long Heading Style One"
				},
				{
					"slug": "extra-long-heading-two",
					"size": "20px",
					"name": "Extra Extra Extra Long Heading Style Two"
				}
			]
		}
	}
}

2. Navigate to the Site Editor (Appearance > Editor).
3. Open the Typography panel and try to select one of the custom font sizes with a long name.
4. Observe how the Site Editor layout breaks, leading to overflow and the appearance of a scrollbar.

Screenshots, screen recording, code snippet

2024-12-24.18-00-16.mp4

Environment info

• WordPress: 6.8-alpha-59533
• PHP: 8.2.26
• Server: Apache/2.4.62 (Debian)
• Database: mysqli (Server: 11.4.4-MariaDB-ubu2404 / Client: mysqlnd 8.2.26)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Emptytheme 1.0
• MU Plugins: None activated
• Plugins: Gutenberg 19.9.0

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
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[himanshupathak95]

I observed similar behavior with the given conditions -

[yogeshbhutkar]

A similar thing can be replicated on mobile devices if the text becomes too large.

[yogeshbhutkar]

Thank you for raising the issue, @SainathPoojary. I’ve implemented a potential fix for the issue, simply applying display: contents appears to resolve it.

[SainathPoojary]

Thank you for addressing the issue @yogeshbhutkar! Applying display: contents seems like a reasonable solution. I’ve tested it, and it’s working correctly.