Group block: border-radius attribute to achieve rounded edges only clips content on bottom but not on top

porg commented 1 year ago

Description

Pull request which introduced the feature: #27665
To fulfill #26556
✅ Works fine on the bottom-left/right edges
❌ But not on the top-left/right edges

User Need

41345 and my personal application
But as a workaround within that Column I created a Group block which wrapped all the contents, and which shall get the rounded edges.

Reproduction

Create a group
Nest some blocks into it, Paragraph block, Bullet List block, Image block
Give all of them a visible background-color
Give the group a border-radius of e.g. 16px on all 4 edges (top-left, top-right, bottom-right, bottom-left)

Expected: You get 4 rounded edges. Content of the nested blocks is clipped on all 4 edges.

Actual: Only the bottom-left and bottom-right edge get rounded and clip their content.

Attempted workarounds: Tried with various blocks (Paragraph, Bullet List, Image block, 3rd party Gutenslider block). Also tried themself alone, or wrapped within another group. Did not help. On the top the sharp edges always remained. Content was not clipped.

https://github.com/WordPress/gutenberg/assets/737143/218e5867-cf20-4666-b1ed-5b1ce9e7b9b7

Environment

WordPress 6.2.2
Gutenberg plugin 15.9.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

porg commented 1 year ago

Workaround: CSS helper classes

.has-overflow-hidden { overflow: hidden;  }
.has-rounded-edges-30 { overflow: hidden; border-radius: var(--wp--preset--spacing--30); }
.has-rounded-edges-40 { overflow: hidden; border-radius: var(--wp--preset--spacing--30); }

In the Block Editor select the Column block or Group block which needs rounded edges on all 4 sides.
Inspector → Advanced → Additional CSS class(es) → Add the appropriate helper class(es).
- Group: Give it .has-overflow-hidden and the border-radius you can set in the Block Editor UI
- Column: Give it .has-overflow-hidden and a size helper class like .has-rounded-edges-30 to overcome #41345

t-hamano commented 1 year ago

@porg

Thanks for submitting the issue.

I think this problem would occur in all orientations, whether above or below. As seen in the CSS helper class you presented, the solution to this problem would be to apply overflow:hidden in the block to which the border-radius is applied. However, it would need to be thoroughly tested to ensure that it does not cut off something unintended.

I would mark this issue as an enhancement, not a bug.

porg commented 1 year ago

It is okay that you changed the type from bug to enhancement.
Thanks for the input what was the exact missing attribute. Updated my above comment to differentiate between the current state of Column (no border-radius UI controls at all, see #41345 ) and Group (just needs overflow:hidden so that the UI option border-radius gets really into effect).

WordPress / gutenberg