Cover block: Only apply overflow:clip when a cover block has a border and a border radius #73789
+258
−6
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… and a border radius
scruffian
added
the
[Block] Cover
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
getdave
reviewed
Dec 5, 2025
| } | ||
| } | ||
|
|
||
| &.has-border-radius.has-border { |
Contributor
There was a problem hiding this comment.
We should probably note reasons why we apply conditionally here. Doens't have to mention navigation but can mention elements that need to expand beyond the bounds of the cover block.
|
Size Change: +379 B (+0.01%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 251e8e8. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/19963447607
|
getdave
reviewed
Dec 5, 2025
| html.has-modal-open { | ||
| overflow: hidden; | ||
| } | ||
|
|
Contributor
There was a problem hiding this comment.
Let's ditch this whitespace.
getdave
reviewed
Dec 5, 2025
Contributor
There was a problem hiding this comment.
I tested adding a border radius without a border and the border radius doesn't work without the overflow being set.
I was able to make this work by using contain: paint but that also seems to clip the overflow again.
Unless I'm wrong then we'll need to gate the overflow to border-radius on its own as well 😢
Update: or could we also apply the border-radius to the children that cause the overflow, namely:
- the
position: absoluteimgthat is used for background image - the
spanthat is used in the same way
If they have matching radius does that work and avoid the need for overflow hidden at all?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Adds has-border and has-border-radius CSS classes to the Cover block when border or border-radius styles are applied.
Why?
The Cover block needs
overflow: clipapplied when it has a border radius and border set, so that the background doesn't bleed around the border. However,overflow: clipprevents navigation submenus from appearing outside the block (see #45353)If we only apply
overflow: clipwhen a border radius and border are set on the block, then we'll limit the problem in #45353 to only impact this very specific case, which makes it much more of an edge case.To only apply
overflow: clipwhen the block has a border and border-radius, we need to add classes to the block in these cases.The Cover block supports border and border-radius styling through block supports, but wasn't outputting semantic CSS classes to indicate when these styles were present. The CSS file already contained styles targeting .has-border-radius.has-border (line 224 in style.scss), but these classes were never being added to the block markup, making those styles unreachable.
Adding these classes:
Partially fixes #45353
How?
- Extended the function to detect border width/style properties and add has-border class
- Added detection for border-radius properties and add has-border-radius class
- Handles both unified properties (style.border.width) and split borders (style.border.top.width, etc.)
- Handles both unified radius and individual corner radii
- Imported and called getBorderClassesAndStyles utility
- Applied the returned border classes to the cover block wrapper
- Created a deprecation for blocks saved without the border classes
- Ensures existing Cover blocks with borders automatically migrate to include the new classes
- Merged duplicate .wp-block-cover selectors to resolve linting error
- Consolidated the has-border-radius.has-border styles into the main selector block
Testing Instructions
Testing new blocks:
Testing existing blocks (deprecation):
Testing split borders:
Testing the navigation block
Screenshots or screencast