Reset "Expand on click" image styles when window is resized#55077
Reset "Expand on click" image styles when window is resized#55077SantosGuillamot merged 1 commit intotrunkfrom
Conversation
|
Size Change: +24 B (0%) Total Size: 1.65 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 35f2b39. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6436135285
|
b9ee8b2 to
35f2b39
Compare
artemiomorales
left a comment
There was a problem hiding this comment.
@SantosGuillamot This looks good to me. I rebased on trunk and modified the code slightly to account for changes in logic, namely using the event.target.previousElementSibling instead of event.target.nextElementSibling, but otherwise I think this is good to go.
If all looks good to you, I think we can merge 👍
Co-authored-by: Ricardo Artemio Morales <ric.morales22@gmail.com>
|
I just cherry-picked this PR to the 6.4-beta3-2 branch to get it included in the next release: 3d1200b |
* Site Editor Styles Screen: Fix dancing styles previews (#55183) * Pulling across changes from WordPress/wordpress-develop#5441 (#55181) Removed var * Add `aria-label` attribute to navigation block only when it is open (#54816) * Add `aria-label` only when is open * Remove unnecessary `label` property in edit * Escape translation * Move navigation context to `wp_json_encode` * Add `wp_json_encode` flags * Paste: fix MS Word list paste (#55127) * Paste: fix MS Word list paste * Match mso-list:Ignore * Fix inline paste * Fix scrollbars on pattern transforms (#55069) * Fix scrollbars on pattern transforms * Fix single pattern previews * Improve classname semantics * Remove modal title * Reset styles on window resize (#55077) Co-authored-by: Ricardo Artemio Morales <ric.morales22@gmail.com> --------- Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Co-authored-by: Ramon <ramonjd@users.noreply.github.com> Co-authored-by: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> Co-authored-by: Daniel Richards <daniel.richards@automattic.com> Co-authored-by: Ricardo Artemio Morales <ric.morales22@gmail.com>
What?
Fix a bug where the "Expand on click" functionality doesn't work properly when resizing the window. Reported here.
Why?
It breaks somehow the experience when you change the window size.
How?
I added an effect that listens to the window height and width stored in the
stateand it is triggered when they change. In that effect, it recalculates the styles.Testing Instructions
Before this pull request
You should see that the width of the image is not correct and the zooming out is broken.
After this pull request
You should see that the width of the image is corrected and the zooming works fine.
Screenshots or screencast
Before this pull request
Lightbox.test64.-.5.October.2023.1.mp4
After this pull request
Lightbox.test64.-.5.October.2023.mp4