Theme.json: CSS variables are not generated for non-latin slugs in the iframed editor

[t-hamano]

Description

In theme.json, if the value of the slug property contains a non-latin language, all CSS variables will not be loaded into the iframe editor instance. I have confirmed that it occurs with the settings.color.palette[].slug property, but it may occur with all slug properties.

This property has the following description in the JSON schema:

Kebab-case unique identifier for the color preset.

However, the user will not know why this occurs because the code editor will not show a validation error no matter what value is set.

I propose both of the following approaches to remedy this problem:

• Define a pattern for all slug properties to validate a value on theme.json schema, just as a pattern is specified for the name property in the block.json schema
• When copying inline CSS into the iframe editor, check all slugs and exclude only CSS variables with invalid slugs.

Step-by-step reproduction instructions

In the block theme, update theme.json as follows:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#101010",
					"name": "Custom",
					"slug": "custom-カラー"
				}
			]
		}
	}
}

When you open the site editor, the root document outputs all the CSS variables:

---

However, all CSS variables aren't generated in the iframe editor instance:

---

The browser console outputs the following error:

---

If all the slugs are correct, the CSS variable should output as follows:

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[Faizan711]

Hey @t-hamano is this issue assigned to anyone, if not i would live to get assigned and solve it.

[t-hamano]

@Faizan711
Thanks for your interest. I have assigned you.

[abhi3315]

What's the status of this issue? I would like to contribute to it.

[t-hamano]

@abhi3315
Thank you for your interest in this issue.

@Faizan711, who has already been assigned to this issue, may be working on this issue. Can I reassign @abhi3315 to work on this issue if you are not already working on this issue?

[Faizan711]

sorry for the delay @t-hamano , I am unable to fix the issue due to my semester exams.
Sure, you can assign it to @abhi3315

[abhi3315]

No problem @Faizan711
Best of luck for your exam. I can continue working on this issue.

[t-hamano]

Hi @abhi3315,

Can you afford to address this issue? If it is difficult, feel free to tell me 👍

[abhi3315]

Hey @t-hamano

I tried to fix this issue but I got occupied with other things. Sorry, I forgot to mention it. Please feel free to reassign it to someone else.

Thanks!