-
Notifications
You must be signed in to change notification settings - Fork 823
Slideshow and carousel: Update swiper from 6.7.0 to 11.2.10 #44099
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
Conversation
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! Jetpack plugin: The Jetpack plugin has different release cadences depending on the platform:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. |
Code Coverage SummaryCoverage changed in 9 files. Only the first 5 are listed here.
6 files are newly checked for coverage. Only the first 5 are listed here.
Full summary · PHP report · JS report If appropriate, add one of these labels to override the failing coverage check:
Covered by non-unit tests
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Gave it a first glance. Will review in more depth later.
projects/plugins/jetpack/extensions/blocks/slideshow/create-swiper.js
Outdated
Show resolved
Hide resolved
projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v1/create-swiper.js
Outdated
Show resolved
Hide resolved
projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v2/create-swiper.js
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In testing I found the carousel isn't sized properly. As far as I can tell, changes in v10.0.0 mean it now wants the class in this div to be "swiper" rather than "swiper-container":
jetpack/projects/plugins/jetpack/modules/carousel/jetpack-carousel.php
Lines 590 to 593 in 8011519
<div | |
class="jp-carousel-wrap swiper-container jp-carousel-swiper-container jp-carousel-transitions" | |
itemscope | |
itemtype="https://schema.org/ImageGallery"> |
At least, adding that seems to make it work. See also nolimits4web/swiper-website@3eeffe8
Then it looks like there are some styles in projects/plugins/jetpack/modules/carousel/jetpack-carousel.css
that would need to have the same change (plus swiper-container-rtl
→swiper-rtl
).
I didn't notice any problems in Slideshow related to that class change, but I'd think the same might be needed there too (and also swiper-container-fade
→swiper-fade
).
Setting the block's transition to "fade" rather than "slide" seems broken, the old images don't fade out. |
Additionally, in the carousel, the counting of the images at the bottom (and the URL hash) seems to get out of sync sometimes. |
This one is bizarre:
It seems I see there was some behavior change mentioned in the v9 migration guide here that mentions rearranging images dynamically: https://swiperjs.com/migration-guide-v9 The API doesn't seem to tell me much other than this: Edit: maybe |
I think the gallery/carousel is working as expected now.
Good find; I'd tested with images that were too small; updating the classes was easy enough here: ed086e3
Yep, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't know what the recommended practice is for block deprecations, copy all the files (which makes for a bigger bundle, and more copies of stuff needing updating when maintenance is needed) or only the ones that differ (which risks stuff breaking if those files are later changed).
@@ -6,6 +6,15 @@ const SANITY_MAX_HEIGHT = 600; | |||
const PAUSE_CLASS = 'wp-block-jetpack-slideshow_autoplay-paused'; | |||
|
|||
function swiperInit( swiper ) { | |||
// Enable loop mode after init if we have enough slides | |||
// See also: https://stackoverflow.com/a/78680695 | |||
if ( swiper.slides.length > 2 ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
> 2
rather than > 1
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Silly me: a96bc5a
I'm not sure either, but I went ahead and cleaned up some of the redundant code: 4892410 Chances are the only changes to the deprecated code will be updating things to be compatible as the languages evolve, so one change is better than multiple. I kept |
This updates both the slideshow and carousel to use the same swiper dependency.
It also introduces a block deprecation.
Things to be aware of:
.jp-carousel-overlay
class. This would have prevented some CSS leaks if third-party code included a different version of swiper. Those leaks were inevitable anyway when both Slideshow and Carousel be present on the same page. I'm okay with this as well, since namespacing the CSS it precludes us from using the same CSS on Slideshow and Slideshow already had the same theoretical issue.validate.js
and updated the classes the test JSON. Things seem to pass withpnpm fixtures:generate extensions/blocks/slideshow/test/validate.js
.I'm open to suggestions, and feel free to push commits. The webpack stuff is not my strength, and I went through dozens of variations before I got something that worked, but I'm sure there are ways to improve it.
Proposed changes:
Other information:
Jetpack product discussion
Does this pull request change what data or activity we track or use?
Testing instructions:
trunk
and switch to this branch. It should show correctly on the frontend.[gallery ids="<csv_of_image_ids>"]
) and enable carousels:/wp-admin/admin.php?page=jetpack#/settings?term=carousel
In general, verify the frontend and backend work as before. On page 4, the JS file should only load when the carousel item is clicked.