Allow custom CSS for theme.json elements

[carolinan]

What problem does this address?

This is a minor inconvenience, but it means one will have to remember where CSS is allowed and not 😅
Theme.json does not allow CSS in elements, which means one can't do something like

"elements": {
	"link": {
		"css": "transition: all 1.1s ease;",

Instead, one would need to add it to CSS directly under styles and add the selector for the element.

What is your proposed solution?

Allow custom CSS for theme.json elements.

[bgardner]

@carolinan Curious what it looks like to add selectors (if that's possible) to CSS under styles. Can you drop a snippet so I can see?

[bgardner]

Oh snap, never mind. I think I figured it out:

"core/image": {
	"css": ".is-style-shadow img{box-shadow: 0 0 50px rgb(0 0 0 / 10%);}"
},

[bgardner]

Ok, it works in the editor with Gutenberg active, but not with WordPress 6.2 Beta 3 alone.

[bgardner]

Circling back to mention that I discussed this with @ndiego and an issue was created: #48466

[carolinan]

@tellthemachines It seems custom CSS is also not working for the variations in theme.json, can we enable it for them too? I am not sure if it was left out for a reason.
I am trying to set the default width of the default style of the separator block, in a block theme. 😸

[tellthemachines]

I am not sure if it was left out for a reason.

From memory custom CSS for individual blocks hadn't been implemented yet when I added block style variations to global styles. I don't think there's any particular reason for variations to not have it.

[cawa-93]

It's super confusing:

1. In $schema v6.2 already declared css for styles.elements.
2. In web FSE you can define custom css for elements
   

But as theme developer, you can't do same in theme.json 🤯

It feels like a bug or so

[carolinan]

That CSS input field is for the heading block, not element :)
I have a PR for this and will continue on it after my vacation.
#49396

[cawa-93]

That CSS input field is for the heading block, not element :) I have a PR for this and will continue on it after my vacation. #49396

Yet another confusing thing 😅

[annezazu]

No progress has been made here and this issue was merely forwarded into the 6.5 board for consideration. Punting out of it as a result.

[carolinan]

It is quiet difficult to make progress when nobody is able to pick up items that has waited for review for 3 months.

[annezazu]

Agreed. There's a ton going on right now in the project and it's a great reminder that folks who can dedicate time to purely reviewing would go a long way, impact wise.

[colorful-tones]

Hi folks,
We are only one week away from the Beta 1 cut-off date for WordPress 6.6. This issue hasn’t seen any movement in a while, so we (the editor triage leads of the 6.6 release) have decided to remove it from the WordPress 6.6 Editor Tasks project board.

[carolinan]

@aaronrobertshaw @andrewserong @tellthemachines

@t-hamano informed me in a different issue that custom CSS for elements in theme.json is working since 6.6.

If I add this theme.json file:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"styles":{
		"elements": {
			"link": {
				"css": "border: 1px solid green"
			}
		}
	},
	"version": 3
}

The links have a green border, but the CSS is not in the additional CSS field in the Site Editor.
I tested classic themes too, but I am unsure of what is supposed to work and not so I need to do more testing.

While if I add this theme.json file. it does show in the additional CSS field:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"styles":{
			"css": "a { border: 1px solid green}"
	},
	"version": 3
}

For Twenty Twenty-Four and Twenty Twenty-Five there are open issues where it is brought up that the CSS for the link focus style can be removed by users in the additional CSS field, which may be undesirable.
So I am not sure if the elements CSS not showing in the additional CSS field is a bug or a feature?

[andrewserong]

So I am not sure if the elements CSS not showing in the additional CSS field is a bug or a feature?

Good question. A possible third option is that it's a missing feature? Ideally it'd be exposed somewhere in the UI in order for folks to override it. I haven't looked at the code, but I imagine the absence from the site editor UI is that it hasn't been added anywhere for it to be editable 🤔. The current UI for elements doesn't appear to have a natural place for Additional CSS to be made available for them? Whereas for blocks you can drill down into a particular block and then go to the Advanced panel, elements are currently only accessible from a particular property, like Color, it seems...

[aaronrobertshaw]

A possible third option is that it's a missing feature?

I think @andrewserong has hit the nail on the head here.

Looking at the Global Styles sidebar you can see that elements are only accessible to style within the context of the typography or color drill downs at the root level. Within a block type, only the element's color can be styled.

Adding a custom CSS field to the typography or color screens for elements doesn't make a lot of sense to me.

With the expansion of block style variations to include element and inner block type styling, the overall information architecture for the Global Styles panel is ripe for review.

Root	Typography	Color

[carolinan]

Lets close this and when it becomes relevant, open a new issue for displaying it in the UI.