Custom CSS for block with a block style variation is not rendered to the page.

[matiasbenedetto]

What?

The custom CSS added in the custom CSS input of a block with a block style variation, for example, a Button with the 'outline' variation as in the Twenty Twenty-Four theme, is not rendered on the page. It seems to be ignored.

Why?

To be able to add custom CSS to block variant.

Context

We found that this wasn't working because @beafialho was building a theme and trying to style the :hover state of the 'outline' variants button. The temporal solution we found was adding this CSS to the Buttons CSS input.

 .is-style-outline .wp-element-button:hover{
  border-bottom: 5px solid yellow!important;
  background-color: transparent!important;
}

Expected

The CSS should be rendered as the rest of the CSS included in the CSS input.

Screencast

In the screencast is possible to see how the 'outline' custom CSS is not added to the rendered page code.

Screencast.from.07-06-24.16.12.49.webm

[aaronrobertshaw]

I've only had a brief chance to look into this one but it doesn't appear that custom css was ever actually implemented for block style variations, only the block type itself. You can find the code collecting the block style nodes for custom CSS here.

My understanding is that it was a bug for the custom CSS field to be shown when editing a block style variation. That said, being able to add custom CSS for a variation sounds useful so I'll try and find some time to look into it further.

Edit: It's worth noting also there are some changes planned for the code around custom css in global styles: #62357.