WordPress inline custom css specified for block even if block doesn't include on the page

[cawa-93]

Description

If I add some custom css for specific block I expect that this css will be included to page only if that block also included. But currently, it seems block-specific css always included, no mater is actually block itself used on page or not.

Step-by-step reproduction instructions

1. Create empty theme with empty templates/index.html and theme.json like so:

   {
     "version": 2,
     "styles": {
       "blocks": {
         "core/button": {
           "css": "color: red"
         }
       }
     }
   }

2. Open any page to load empty index.html template.
3. Inspect inlined CSS. You should find .wp-block-button .wp-block-button__link{color: red} but I expect expected it not to be

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.3-alpha-55614

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

[ndiego]

I have been able to confirm and would similarly expect this styling only to render when a Button block is added to the page. Added some labels to get additional eyes on this issue.

[talldan]

cc @glendaviesnz or @Mamaduka, who might be able to provide technical feedback.

[Mamaduka]

@aristath or @carolinan should have more details for the block CSS feature since they worked on the implementation.

[aristath]

Hmmm the per-block custom-css is currently getting added to the global custom-css. In order to make these styles render only when a block exists on the page (as they should), they'll have to be decoupled from there, and attached to the block-styles instead. It's doable, but it will require some code restructuring 🤔

[Mamaduka]

Thank you, Ari! I belive that would be an excellent enhancement for the next major WP release.

[carolinan]

Can we update this before I continue on https://github.com/WordPress/gutenberg/pull/49396

[aristath]

Can we update this before I continue on https://github.com/WordPress/gutenberg/pull/49396

Not necessary, it can be done after that PR without side-effects 👍