Description
openedon Feb 26, 2024
Description
A client has reported an issue with border radius on Cover blocks. He set a border radius of 12px in the Global Styles for the Cover block, but the radius isn't applied to the images. On investigating this issue I found out that there has been a recent change in the latest Chrome version 122.X, which actually fixes a bug in the behaviour between overflow: clip
and border-radius
: https://chromium.googlesource.com/chromium/src/+/7e006a047e267eb0eefdbd93f11c915590c615cc - also check out the link to the CSSWG draft with a full explanation of the desired behaviour.
Recently, there has been a change to the Cover block adding support for Aspect Ratio in this PR: #56897
Specifically, for the block CSS, the overflow: clip
property has changed to overflow-x: clip
in order to support the aspect ratio settings to work properly.
Unfortunately, this causes the border-radius
setting to be ignored, as the CSSWG draft says this:
3.1.2. Interaction of border-radius and overflow
As mentioned in CSS Backgrounds 3 § 4.3 Corner Clipping, the clipping region established by overflow can be rounded:
When overflow-x and overflow-y compute to hidden, scroll, or auto, the clipping region is rounded based on the border radius, adjusted to the padding edge, as described in CSS Backgrounds 3 § 4.2 Corner Shaping.
When both overflow-x and overflow-y compute to clip, the clipping region is rounded as described in § 3.2 Expanding Clipping Bounds: the overflow-clip-margin property.
However, when one of overflow-x or overflow-y computes to clip and the other computes to visible, the clipping region is not rounded.
The last sentence is the important one - if just overflow-x
is set to clip
, the border-radius
won't apply. Reverting back to overflow: clip
solves this issue, but I guess this will cause issues with the aspect ratio setting again. As Chrome is the browser with the largest user base, I think it should be discussed how to fix this problem, as both settings (border radius and aspect ratio) are now available in the Gutenberg plugin and potentially 6.5.
Step-by-step reproduction instructions
- Make sure your Chrome browser is updated to version 122.X - 121.X does not have this issue
- Gutenberg 17.7 or at least 17.6 should be active as well
- Open a post/page and add a Cover block, add a visible border radius like 20px to it. It should not apply visually.
- Save the post/page
- Open the site editor, navigate to Styles -> Blocks -> Cover
- Scroll down to the Advanced Settings and add
overflow: clip;
as additional CSS - The border radius should now be working.
Screenshots, screen recording, code snippet
No response
Environment info
- WordPress 6.4.3
- Gutenberg 17.7.0
- Chrome 122.0.6261.69
- macOS Sonoma 14.2.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.
Yes