Skip to content

Post Featured Image Block: Border radius and color not applied on overlay#44276

Closed
RahiDroid wants to merge 4 commits intoWordPress:trunkfrom
RahiDroid:fix/featured-image-border-radius
Closed

Post Featured Image Block: Border radius and color not applied on overlay#44276
RahiDroid wants to merge 4 commits intoWordPress:trunkfrom
RahiDroid:fix/featured-image-border-radius

Conversation

@RahiDroid
Copy link
Copy Markdown
Contributor

@RahiDroid RahiDroid commented Sep 19, 2022

What?

  • Fixes border-radius not being applied to the overlay when added from the theme.json file.
  • Fixes border-radius not being applied to the overlay when different values are added for each corner/side.
  • Fixes border-color not being applied on the overlay.

Why?

How?

  • Uses the style engine-generated attributes for the border and passes it on to the Overlay element.

Testing instructions

Screenshots or screencast

Before After
Screenshot 2022-09-20 at 6 47 09 PM Screenshot 2022-09-20 at 6 44 41 PM

@RahiDroid RahiDroid changed the title Post Featured Image Block: Border radius not applied on overlay Post Featured Image Block: Border radius and color not applied on overlay Sep 20, 2022
@RahiDroid RahiDroid marked this pull request as ready for review September 20, 2022 13:31
@mikachan mikachan added the [Block] Post Featured Image Affects the Post Featured Image Block label Sep 20, 2022
@mikachan mikachan added Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Bug An existing feature does not function as intended labels Sep 20, 2022
Copy link
Copy Markdown
Member

@mikachan mikachan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this! It's working well for me, and I like the way you've used get_block_core_post_featured_image_border_attributes for the border styles.

@aaronrobertshaw
Copy link
Copy Markdown
Contributor

Thanks for working on this @RahiDroid 👍

As noted in my comment on #44262, we've got some overlap between our PRs addressing these overlay issues.

#44286 also addresses a problem where the markup relating to the overlay is rendered in the editor when it isn't on the frontend.

If it is ok with you, I'd like to close this PR in favour of #44286. What do you think?

@aaronrobertshaw
Copy link
Copy Markdown
Contributor

As discussed, closing this one in favour of #44286

Note: I see this had another commit pushed after ok to close it however it missed adding the border classes to the overlay in the editor as the other PR does. So we'll still proceed with #44286

@RahiDroid RahiDroid deleted the fix/featured-image-border-radius branch September 23, 2022 07:19
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 [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Border radius is not applied to overlay element

3 participants