Image block style - .is-style-rounded overrides my block style css

[romerocs]

Description

I've created a custom block style for applying rounded corners to block images. However, after a recent WP core update I noticed my block styles were being overridden by the core block library css. It resets the border-radius for all block images to border-radius: inherit. So now I need to increase the specificity of my css in order to apply my styles. The high specificity of this css makes it difficult to apply custom styles and sets a precedent where I'm worried my custom styles will be overridden by a core update.

Is there a reason why the block image css wasn't simply written as .wp-block-image img { border-radius: inherit; }?

block-library/style.min.css

.wp-block-image:not(.is-style-rounded) img {
 border-radius:inherit
}

custom-block-styles.css

.is-style-custom-rounded-corners img {
  border-radius: #{$_border_radius};
}

PS, we use the rounded corner style on the site so removing it isn't an option.

Step-by-step reproduction instructions

1. Create a custom block style for adding rounded corners
2. Apply the custom block style to an image
3. The custom block style may not work depending on its level of specificity (see description)

Screenshots, screen recording, code snippet

No response

Environment info

• Wordpress 5.8.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[markhowellsmead]

The :not() selector is being used in many places in core, which has a comparatively high specificity and is therefore increasingly difficult to override. The use of this technique needs to be reviewed by whomever (or by the team) is “in charge” of Core/Editor CSS.

See also #36135, #35840, #34047, #29705, #17511.

[aaronrobertshaw]

This issue has been resolved via #31366, which leverages new feature level selectors for block supports to target the inner img. This meant the problematic style wasn't required anymore and was subsequently removed.

I'll close this issue now however if you have any further concerns or questions, please let me know.

Is there a reason why the block image css wasn't simply written as .wp-block-image img { border-radius: inherit; }?

I believe this was because the suggested selector wouldn't allow custom border radii set by end users to take precedence.