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.

Sign up for GitHub

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

Jump to bottom

Post Featured Image: Fix height/scale overwriting img inline styles #44213

Merged
merged 1 commit into from
Sep 19, 2022
Merged

Post Featured Image: Fix height/scale overwriting img inline styles #44213

merged 1 commit into from
Sep 19, 2022

Conversation

aaronrobertshaw
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw commented Sep 16, 2022 •
edited
Loading

Fixes #44194

What?

Refactors application of inline styles to the featured image to avoid multiple style attributes causing loss of inline styles.

Why?

Without this fix, you cannot set post featured image heights as well as borders.

How?

Refactors the block's render callback to conditionally generate the height/scale related styles earlier and pass them through to the function generating the img element.

Testing Instructions

  1. Replicate the original issue following the instructions in #44194. Not that along with border radius, custom border colors, width, and style are also lost.
  2. Checkout this PR and repeat the process ensuring that the border styles are maintained when viewed on the front end.
  3. Continue to put the Post Featured Image block through its paces and confirm everything else still functions and displays correctly.

Screenshots or screencast

Before After
Screen.Recording.2022-09-16.at.12.12.55.pm.mp4
Screen.Recording.2022-09-16.at.12.09.43.pm.mp4

@aaronrobertshaw aaronrobertshaw added [Type] Bug An existing feature does not function as intended [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Block] Post Featured Image Affects the Post Featured Image Block labels Sep 16, 2022
@aaronrobertshaw aaronrobertshaw self-assigned this Sep 16, 2022
@aaronrobertshaw aaronrobertshaw marked this pull request as ready for review September 16, 2022 02:35
@aaronrobertshaw aaronrobertshaw mentioned this pull request Sep 16, 2022
Closed
jasmussen
jasmussen approved these changes Sep 16, 2022
View reviewed changes
Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

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

Beautiful, works as intended! Thank you.

status

☝️ In this GIF, I already had a default radius on featured image set in global styles, but it is confirmed to be overridden by a local one, in editor and on frontend.

ntsekouras
ntsekouras approved these changes Sep 19, 2022
View reviewed changes
Copy link
Contributor

@ntsekouras ntsekouras 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 the PR Aaron! LGTM

@ntsekouras ntsekouras merged commit 4dcf280 into trunk Sep 19, 2022
@ntsekouras ntsekouras deleted the fix/height-overwriting-inline-styles-for-post-featured-image branch September 19, 2022 11:37
@github-actions github-actions bot added this to the Gutenberg 14.2 milestone Sep 19, 2022
@aaronrobertshaw aaronrobertshaw mentioned this pull request Sep 20, 2022
Closed
@talldan talldan mentioned this pull request Sep 20, 2022
Closed
@aaronrobertshaw aaronrobertshaw added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 20, 2022
@aaronrobertshaw aaronrobertshaw mentioned this pull request Oct 20, 2022
Closed
@ockham
Copy link
Contributor

ockham commented Oct 25, 2022

Manually cherry-picking this to the wp/6.1 branch.

ockham pushed a commit that referenced this pull request Oct 25, 2022
@aaronrobertshaw @ockham
Post Featured Image: Fix height/scale overwriting border inline styles (
185f751 
#44213)
@ockham
Copy link
Contributor

ockham commented Oct 25, 2022

Manually cherry-picking this to the wp/6.1 branch.

185f751

@ockham ockham removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 25, 2022
@ockham ockham mentioned this pull request Oct 25, 2022
Closed
@ockham
Copy link
Contributor

ockham commented Oct 25, 2022

Manually cherry-picking this to the wp/6.1 branch.

185f751

Reverting on the wp/6.1 branch per this discussion.

ockham added a commit that referenced this pull request Oct 25, 2022
@ockham
Revert "Post Featured Image: Fix height/scale overwriting border inli…
bc3919b 
…ne styles (#44213)"

This reverts commit 185f751.
@ockham
Copy link
Contributor

ockham commented Oct 25, 2022

Reverting on the wp/6.1 branch per this discussion.

bc3919b

@ockham ockham mentioned this pull request Oct 25, 2022
Closed
@ockham ockham added the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Oct 26, 2022
Mamaduka pushed a commit that referenced this pull request Nov 10, 2022
@aaronrobertshaw @Mamaduka
Post Featured Image: Fix height/scale overwriting border inline styles (
19358d7 
#44213)
@Mamaduka Mamaduka mentioned this pull request Nov 10, 2022
Merged
Mamaduka pushed a commit that referenced this pull request Nov 10, 2022
@aaronrobertshaw @Mamaduka
Post Featured Image: Fix height/scale overwriting border inline styles (
432ed38 
#44213)
@Mamaduka Mamaduka removed the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Nov 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ntsekouras ntsekouras ntsekouras approved these changes

@jasmussen jasmussen jasmussen approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees

@aaronrobertshaw aaronrobertshaw

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 [Type] Bug An existing feature does not function as intended
Projects
No open projects
WordPress 6.1 Editor Tasks
Status: Bumped to 6.1.1
WordPress 6.1.x Editor Tasks
Status: Done
Milestone
Gutenberg 14.2
Development

Successfully merging this pull request may close these issues.

Image border radius missing after Scale:Cover
5 participants
@aaronrobertshaw @ockham @jasmussen @ntsekouras @Mamaduka