Skip to content

Image: Fix layout shift when lightbox is opened and closed #53026

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

Merged
artemiomorales merged 13 commits into from
Sep 28, 2023
Merged

Image: Fix layout shift when lightbox is opened and closed #53026

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3a43283
Replace overflow: hidden with JavaScript callback to prevent scrolling
artemiomorales Aug 15, 2023
c438e15
Disable scroll callback on mobile; add comments; fix scrim styles
artemiomorales Aug 16, 2023
4168036
Add handling for horizontally oriented pages
artemiomorales Aug 16, 2023
564db4c
Move close button so that it's further from scrollbar on desktop
artemiomorales Aug 16, 2023
2f7af76
Fix call to handleScroll() and add touch callback to new render method
artemiomorales Sep 20, 2023
2c94042
Improve lightbox experience on mobile
artemiomorales Sep 27, 2023
aa2b495
Fix spacing
artemiomorales Sep 27, 2023
2e38ab0
Add touch directives to block supports
artemiomorales Sep 27, 2023
59d32e8
Fix spacing in block supports
artemiomorales Sep 27, 2023
057a164
Rename attribute for clarity
artemiomorales Sep 28, 2023
dc7a8b4
Update comment
artemiomorales Sep 28, 2023
734096a
Update comments
artemiomorales Sep 28, 2023
82eb2ba
Fix spacing
artemiomorales Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix call to handleScroll() and add touch callback to new render method
  • Loading branch information
@artemiomorales
artemiomorales committed Sep 27, 2023
commit 2f7af76feeace90bbd1cbfc6de350124f6c2b42f
2 changes: 1 addition & 1 deletion packages/block-library/src/image/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,7 +272,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
aria-modal="false"
data-wp-effect="effects.core.image.initLightbox"
data-wp-on--keydown="actions.core.image.handleKeydown"
data-wp-on--mousewheel="actions.core.image.hideLightbox"
data-wp-on--touchmove="actions.core.image.handleTouchMove"
data-wp-on--click="actions.core.image.hideLightbox"
>
<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/image/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ let scrollCallback;
// behavior. In the future, we may be able to use CSS or overflow: hidden
// instead to not rely on JavaScript, but this seems to be the best approach
// for now that provides the best visual experience.
function handleScroll( event, context, actions ) {
function handleScroll( context, actions, event ) {
event.preventDefault();
window.scrollTo(
context.core.image.lastScrollLeft,
Expand Down