Editor crashes on typeset switch when `fontFace` array is not correctly defined

[hanneslsm]

Description

When a typeset has a fontFace defined but it is missing the following info, the editor crashes when selecting this typeset.

		"fontFamily": "poppins, sans-serif",
		"name": "Poppins",
		"slug": "poppins"

Step-by-step reproduction instructions

1. create a typeset with a ``fontface`

{
	"$schema": "https://schemas.wp.org/wp/7.0/theme.json",
	"version": 3,
	"title": "Poppins",
	"slug": "poppins",
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFace": [
						{
							"fontFamily": "Poppins",
							"fontStyle": "normal",
							"fontWeight": "100",
							"src": [
								"file:./assets/fonts/poppins/poppins-100-normal.woff2"
							]
						}
					],
					"fontFamily": "poppins, sans-serif",
					"name": "Poppins",
					"slug": "poppins"
					}
			]
		}
	} 
}

2. remove the fontFamily, name, and slug
3. switch to the typeset

Screenshots, screen recording, code snippet

TypeError: Cannot read properties of undefined (reading 'replace')
    at Yl (https://with-lab.ddev.site/wp-includes/js/dist/editor.min.js?ver=425fffc30511d9d52e5f:31:33)
    at https://with-lab.ddev.site/wp-includes/js/dist/editor.min.js?ver=425fffc30511d9d52e5f:31:3135
    at Array.forEach (<anonymous>)
    at https://with-lab.ddev.site/wp-includes/js/dist/editor.min.js?ver=425fffc30511d9d52e5f:31:3087
    at Array.forEach (<anonymous>)
    at https://with-lab.ddev.site/wp-includes/js/dist/editor.min.js?ver=425fffc30511d9d52e5f:31:3064
    at Array.reduce (<anonymous>)
    at rhe (https://with-lab.ddev.site/wp-includes/js/dist/editor.min.js?ver=425fffc30511d9d52e5f:31:2953)
    at https://with-lab.ddev.site/wp-includes/js/dist/editor.min.js?ver=425fffc30511d9d52e5f:31:9755
    at Array.forEach (<anonymous>)

Screen.Recording.2026-07-20.at.18.20.10.mov

Environment info

• WP 7.0.2

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

[dpmehta]

I have done analysis regarding root cause and possible workarounds for the issue resolution.

Root Cause

The crash originates in the Global Styles Engine when it attempts to generate CSS variables for the font family presets:

1. The editor tries to read the slug property from the malformed font family preset.
2. Because slug is missing, the value is undefined.
3. This undefined value is passed into the kebabCase() utility function.
4. The kebabCase() function expects a string and immediately calls .replace() on the input.
5. Calling .replace() on undefined triggers a fatal JavaScript TypeError, crashing the React render tree.

This happens specifically in two functions within global-styles-engine/src/core/render.tsx:

• getPresetVarDeclarations
• getPresetsClasses

Possible Workarounds & Solutions

To handle this and prevent editor crashes, the following solutions can be applied :

1. Multi-Layered Validation (Recommended)

This is the most comprehensive approach to prevent the crash :

• JSON Schema Validation: Update the theme.json schema to explicitly require slug, fontFamily, and name for font family items. This provides immediate red-lines inside code editors when developers make a mistake.
• PHP Backend Validation: Add validation inside the WP_Theme_JSON_Gutenberg constructor to strip out any font family entries missing these required fields before they are even sent to the frontend. Trigger a _doing_it_wrong() warning to alert developers in the PHP debug log.
• JS Defensive Guards: Add simple if (!slug) return; checks inside getPresetVarDeclarations and getPresetsClasses to silently skip invalid entries as a final safety net.

2. JS Defensive Guards Only (Quick Fix)

Add protective guards directly in the render.tsx loops.

• Pros: Directly prevents the crash with minimal code changes.
• Cons: Silently ignores the invalid data. Theme authors won't receive any feedback that their theme.json config is malformed and that their font families aren't loading.

3. Make kebabCase Null-Safe (Band-aid)

Update the kebabCase utility function itself to return an empty string if it receives undefined.

• Pros: Prevents crashes everywhere kebabCase is used across the entire Gutenberg project.
• Cons: Masks underlying data flow bugs. If kebabCase silently returns an empty string, it might result in broken CSS variables being generated (e.g., --wp--preset--font-family--: "Poppins"), leading to hard-to-debug layout issues.

Open for suggestion here and would be happy to open PR for the fix of Editor Crash issue.