Border radius is not applied to overlay element

[mikachan]

Description

If the Post Featured Image or Cover block has a border-radius set in theme.json, and the block has an overlay set, the border-radius is not applied to the overlay element.

With the Post Featured image block, the overlay shows with square corners on top of the border-radius:

For the featured image, I think we should apply the border-radius to the overlay, as well as the image.

With the Cover block, the border-radius does not appear at all (it's applied to the container element):

For the cover block, it looks like the border-radius needs to be applied to the nested image and the overlay.

This issue was found when testing the Canary style variation in Twenty Twenty-Three.

Step-by-step reproduction instructions

1. Activate the Twenty Twenty-Three theme and select the Canary variation
2. Open the canary.json file in styles directory and add the following under styles.blocks:

"core/cover": {
	"border": {
		"radius": "100px 0 0 0"
	}
},

3. Notice that the border-radius is not applied correctly to the overlay on the front end

To test the featured image, use the following markup in place of the cover block in the single template:

<!-- wp:post-featured-image {"overlayColor":"contrast","dimRatio":50,"align":"wide"} /-->

The border-radius for the featured image is already set in canary.json, under core/post-featured-image. Notice how this is not applied correctly.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[talldan]

This seems similar to this other issue - Post Featured Image: Border radius option not working when custom height and width set

[talldan]

Post featured image is possibly fixed by #44213. In my testing border radius with overlay looks ok on latest trunk:

I haven't tested cover, but the fix in #44213 was only for post featured image.

[aaronrobertshaw]

With the Cover block, the border-radius does not appear at all (it's applied to the container element):

The Cover block hasn't officially adopted border support to my knowledge. It has been in the works (#41153) but there have been some issues around how it functions in the editor which meant progress stalled while we focused on other areas.

I'm not sure what the official recommendations are around attempting to style via theme.json when the block hasn't fully adopted a particular block support. I imagine it's a case of buyer beware?

That said, I'll bring #41153 back up-to-date in the next couple of days and see if recent work has addressed the block popover positioning issues that were holding it back.

[RahiDroid]

I am still able to reproduce the issue on latest trunk. #44276 would potentially fix the issue along with one more issue with the overlay. I will do some testing and will mark it ready for review.

For the cover block, I agree with @aaronrobertshaw above, the block doesn't officially support the border controls, yet.

[aaronrobertshaw]

I can also replicate the issue for the post featured image block. I'll have a fix up for review in a few minutes. It appears we just need the .wp-block-post-featured-image__overlay class in our feature level selectors for the block's border support.

[aaronrobertshaw]

I've put up a PR to fix the issue for the Post Featured Image block in: #44286.

Feel free to give it a review!

[RahiDroid]

Not related to this ticket, but #44276 fixes an issue with the featured image overlay's border colors.

@aaronrobertshaw @mikachan Would be great if you could help me with a review! If it looks good, maybe it can be cherry-picked with the above PR for this issue.

[gOuTM]

I would also apreciate if Cover block will have the ability to have hover effects as well..

[aaronrobertshaw]

@RahiDroid I missed your ping until now, sorry.

While doing some extra testing yesterday I realised there were some problems with general implementation of the Post Featured Image block's overlays when it came to borders. I've only just pushed the fixes I had to #44286.

My PR linked above also addresses some discrepancies in the rendered markup between the editor and frontend. I'll comment on #44276 as I think it might be worth closing that one if that's ok with you?

[RahiDroid]

@aaronrobertshaw, I have shared my thoughts on your PR; looks great! 🎉

there were some problems with general implementation of the Post Featured Image block's overlays when it came to borders

I believe the rendering of the overlay in the editor when opacity is 0 was the only issue. Though it doesn't affect the functionality, I agree it should definitely be removed for consistency in markup.

I think it might be worth closing that one if that's ok with you?

Sure, please go ahead. Also, add the Backport label on your PR to ensure it gets backported if we happen to push in any more code with the WP release.