Block styles: add block instance custom CSS

[glendaviesnz]

What problem does this address?

Currently, it is possible to add custom CSS for a given block type, but it is not possible to add custom CSS to a specific instance of a block in a given page/post.

There is a workaround for this by adding a custom class name to the block, and then targetting custom CSS to that selector via the site editor custom CSS input. However this involves a two-step process which may not be obvious to some users, and also many content editors may not have access to the site editor.

See #48331 for more background discussion and suggested solutions.

The proposed solution

In the block inspector panel in the post editor (most likely in the Styles tab) add an Advanced panel that is collapsed by default and has a custom CSS input box, similar to one in the block inspector panel in global styles.

This should operate the same as the global styles block-specific custom CSS in that a top-level selector is added automatically so only the style declarations need to be added and nested selectors can be handled by prefixing with a &. See #46571 for more detail about the global styles block custom CSS.

Tasks

• Decide on the best approach for saving the custom CSS. One approach would be to add a Custom CSS block support and save it in the block attributes under "style": {"customCSS": "color: purple"} and also decide if blocks will need to opt in to use it, or will it be opt-out by default
• Add new block support infrastructure to allow saving of the attribute, and outputting of custom CSS in frontend and editor. This CSS should be output after the global styles custom CSS and the global styles block custom CSS in order to have the highest specificity - or maybe inline styles would be easier?
• Add UI to the inspector panel for adding/editing the custom CSS

[glendaviesnz]

@carolinan, @aristath just pinging you in case you are interested in looking at this since you worked on the global styles block custom CSS.

[carolinan]

I know that page specific CSS is a highly sought after feature, and this is a variation of that.
I believe there are related issues already created that could be linked to this?
It has been requested enough times to show that there are use cases for this feature.

I have one concern, it can potentially make it more difficult to find out where a style is from.
Is there something we can do in the interface to indicate that custom CSS is used? Related to #49278

[glendaviesnz]

I believe there are related issues already created that could be linked to this?

I have seen this mentioned somewhere, but couldn't track it down today. It may have just been comments on another issue.

I have one concern, it can potentially make it more difficult to find out where a style is from.
Is there something we can do in the interface to indicate that custom CSS is used? Related to #49278

Also related to this:

• Design tools: Better handling of unset / inherited values #43082
• Try: Indicate when text color in post editor is inherited from Global Styles #55952

[carolinan]

I am back from my time off for the holidays and have the availability to work on this now.

[carolinan]

If we save the custom CSS as a block attribute, it has the potential to both break and be very large. 🤔
What other options do we have? Save it as a post meta?

[aristath]

What about <style id="whatever">/* Custom-CSS here */</style>?
Since the custom CSS here is for a single instance of a block, it will get printed inline anyway, so we could just add it like that in the content

[carolinan]

@aristath I don't follow, your comment is regarding the output, not the storing?

[carolinan]

My own concern is this part of the block supports:
<!-- wp:paragraph {"customCSS":"border:1.3rem dotted green;"} -->
Not necessarily
<p style="border:1.3rem dotted green;">A paragraph</p>

[aristath]

I'm talking about storing the custom-css data.
We can save the CSS either in the content itself, or as post-meta.
If we choose to store the CSS in the content, we can either save it as a block attribute, OR add it inline as a completely separate element.

Another option would be to introduce a new, hidden custom-css block at the end of the content, and internally cross-reference it in the block we're editing.
So if I'm adding custom-css to a paragraph, it could get an attribute like customCSS = 'random-string-id';, and then the custom-css block at the end of the content would have id="random-string-id"

[carolinan]

Ideally as little as possible should be in the HTML comment or saved in the post_content, I like the idea of using the ID as the attribute on the block;

But I don't know how to code any of this, while it is not difficult to add a new block supports that just uses the input. The block support "just works", and it can be filtered.

[onetrev]

Not sure if it's helpful, but this plugin adds this functionality. Of course it's preferable to have it in core, and one downside of this plugin is the CSS doesn't apply in the editor, which is less than ideal. But, it's exciting to see what one can do with per block custom CSS.