Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add border controls to featured image #42765

Closed
wants to merge 1 commit into from

Conversation

jameskoster
Copy link
Contributor

This PR makes it possible to add borders and border-radii to the featured image block:

Screenshot 2022-07-28 at 10 13 37

There is a quirk with this (most basic) implementation. The radius is applied to the figure, and so the img doesn't receive the properties. This feels a bit unexpected when you visit the frontend and see this:

Screenshot 2022-07-28 at 10 11 44

Note how the image corners are overlapping the border.

Despite the fact this is working as intended, we may want to consider adding overflow: hidden to any block that also has a border radius, to ensure that its contents respect that radius. E.g.:

Screenshot 2022-07-28 at 10 18 43

@aaronrobertshaw
Copy link
Contributor

Thanks for assigning this one to me @jameskoster 👍

Rather than attempting to force additional styles such as overflow: hidden onto any block that may adopt border-radius support, I think we might be better served by applying the border styles for this block directly on the inner img element. One downside of forcing overflow: hidden on blocks at the wrapper level is that it can also hide the inline inserter when inner blocks can be added.

I've put together a separate PR illustrating my suggested approach so it can be tested and compared easily alongside this one.

Let me know what you think and if that meets your needs and expectations.

@jameskoster
Copy link
Contributor Author

Thanks for assigning this one to me @jameskoster 👍

Oops, I meant to request a review and assigned accidentally. Sorry about that.

I've put together a #42847

Nice, I'll take a look.

@aaronrobertshaw
Copy link
Contributor

Closing this as borders were added via #42847.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Post Featured Image Affects the Post Featured Image Block
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants