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