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: https://github.com/WordPress/gutenberg/issues/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. https://github.com/WordPress/gutenberg/pull/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.