Skip to content

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

Merged
merged 23 commits into from
Jul 15, 2025

Conversation

tbradsha
Copy link
Contributor

@tbradsha tbradsha commented Jun 25, 2025

This updates both the slideshow and carousel to use the same swiper dependency.

It also introduces a block deprecation.

Things to be aware of:

  1. The downloaded content is a bit larger due to the Slideshow using the whole dependency whereas the Carousel was using a fork that only built a subset of swiper modules. On the other hand, when both are present on a page this means we're not downloading redundant code. I'm okay with this for now, though this could be probably be reduced if we determine what swiper modules Slideshow doesn't use.
  2. The forked CSS for carousel was previously namespaced to the .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.
  3. When both on the same page and the Carousel is open, pressing the arrow keys affect the Slideshow block. This is a preexisting bug.
  4. The autoplay pause/play button doesn't work in the editor. This is a preexisting bug.
  5. Block tests were disabled in Blocks: upgrade to API version 3 - Part 6 #36858. I added back the validate.js and updated the classes the test JSON. Things seem to pass with pnpm 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:

  • Have you written new tests for your changes, if applicable?
  • Have you checked the E2E test CI results, and verified that your changes do not break them?
  • Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

  1. Create a page with a Slideshow block in trunk and switch to this branch. It should show correctly on the frontend.
  2. Edit the page and be sure the block loads without errors. The JS console should show that the block was upgraded.
  3. Create a page with a Slideshow block in this branch.
  4. Create a page with a gallery shortcode ([gallery ids="<csv_of_image_ids>"]) and enable carousels: /wp-admin/admin.php?page=jetpack#/settings?term=carousel
  5. Create a page with both a Slideshow block and gallery shortcode.

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.

@tbradsha tbradsha requested a review from a team June 25, 2025 21:24
@tbradsha tbradsha self-assigned this Jun 25, 2025
@tbradsha tbradsha added [Status] Needs Review This PR is ready for review. [Type] Janitorial labels Jun 25, 2025
Copy link
Contributor

github-actions bot commented Jun 25, 2025

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

  • To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the update/swiper_11.2.8 branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack update/swiper_11.2.8
bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/swiper_11.2.8

Interested in more tips and information?

  • In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
  • Read more about our development workflow here: PCYsg-eg0-p2
  • Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

@github-actions github-actions bot added [Block] Slideshow [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ labels Jun 25, 2025
Copy link
Contributor

github-actions bot commented Jun 25, 2025

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  • ✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  • ✅ Add testing instructions.
  • ✅ Specify whether this PR includes any changes to data or privacy.
  • ✅ Add changelog entries to affected projects

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:

  1. Ensure all required checks appearing at the bottom of this PR are passing.
  2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
  3. You can use GitHub's Reviewers functionality to request a review.
  4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

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:

  • WordPress.com Simple releases happen as soon as you deploy your changes after merging this PR (PCYsg-Jjm-p2).
  • WoA releases happen weekly.
  • Releases to self-hosted sites happen monthly:
    • Scheduled release: August 5, 2025
    • Code freeze: August 4, 2025

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Copy link

jp-launch-control bot commented Jun 25, 2025

Code Coverage Summary

Coverage changed in 9 files. Only the first 5 are listed here.

File Coverage Δ% Δ Uncovered
projects/plugins/jetpack/extensions/blocks/slideshow/swiper-callbacks.js 4/54 (7.41%) -45.65% 27 💔
projects/plugins/jetpack/extensions/blocks/slideshow/slideshow.php 0/137 (0.00%) 0.00% 19 💔
projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v1/create-swiper.js 0/16 (0.00%) 0.00% 11 💔
projects/plugins/jetpack/extensions/blocks/slideshow/create-swiper.js 10/16 (62.50%) -37.50% 6 💔
projects/plugins/jetpack/extensions/blocks/slideshow/slideshow.js 25/54 (46.30%) -11.11% 6 💔

6 files are newly checked for coverage. Only the first 5 are listed here.

File Coverage
projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v3/create-swiper.js 0/16 (0.00%) 💔
projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v3/index.js 0/3 (0.00%) 💔
projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v3/slideshow.js 0/54 (0.00%) 💔
projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v3/swiper-callbacks.js 0/49 (0.00%) 💔
projects/plugins/jetpack/extensions/blocks/slideshow/swiper-entry.js 0/1 (0.00%) 💔

Full summary · PHP report · JS report

If appropriate, add one of these labels to override the failing coverage check: Covered by non-unit tests Use to ignore the Code coverage requirement check when E2Es or other non-unit tests cover the code Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR I don't care about code coverage for this PR Use this label to ignore the check for insufficient code coveage.

@github-actions github-actions bot added the [Feature] Carousel A fullscreen modal appearing when clicking on an image in a gallery or tiled gallery. label Jun 26, 2025
@tbradsha tbradsha changed the title Slideshow block: Update swiper from 6.7.0 to 11.2.8 Slideshow and carousel: Update swiper from 6.7.0 to 11.2.8 Jun 26, 2025
Copy link
Contributor

@anomiex anomiex left a 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.

Copy link
Contributor

@anomiex anomiex left a 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":

<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-rtlswiper-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-fadeswiper-fade).

@anomiex
Copy link
Contributor

anomiex commented Jun 27, 2025

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-fadeswiper-fade).

Setting the block's transition to "fade" rather than "slide" seems broken, the old images don't fade out.

@anomiex
Copy link
Contributor

anomiex commented Jun 27, 2025

Additionally, in the carousel, the counting of the images at the bottom (and the URL hash) seems to get out of sync sometimes.

@tbradsha
Copy link
Contributor Author

tbradsha commented Jun 27, 2025

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:

  • The swiper.activeIndex is 1-indexed. The actual items seem to loop fine visually.
  • Observing the slideChange event, if one has 5 images and goes rightward, the swiper.activeIndex is changed until it hits 4. If one goes right again, it fires the event twice: once with swiper.activeIndex set to 3, and once with it set to 4.
  • Starting at 1 and going left, it switches to 0, then subsequent leftward swipes result the event firing twice: once with swiper.activeIndex set to 1, and once with it set to 0.

It seems activeIndex has nothing to do with the current slide.

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: Note, that in loop mode active index value will be always shifted on a number of looped slides.

Edit: maybe realIndex will do it.

@tbradsha tbradsha added DO NOT MERGE don't merge it! [Status] In Progress and removed [Status] Needs Review This PR is ready for review. labels Jun 30, 2025
@tbradsha
Copy link
Contributor Author

I think the gallery/carousel is working as expected now.

In testing I found the carousel isn't sized properly

Good find; I'd tested with images that were too small; updating the classes was easy enough here: ed086e3

the counting of the images at the bottom (and the URL hash) seems to get out of sync sometimes.

Yep, realIndex was the trick: 0dc4692

@tbradsha tbradsha changed the title Slideshow and carousel: Update swiper from 6.7.0 to 11.2.8 Slideshow and carousel: Update swiper from 6.7.0 to 11.2.10 Jul 14, 2025
@tbradsha tbradsha added [Status] Needs Review This PR is ready for review. and removed [Status] In Progress DO NOT MERGE don't merge it! labels Jul 14, 2025
anomiex
anomiex previously approved these changes Jul 15, 2025
Copy link
Contributor

@anomiex anomiex left a 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 ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

> 2 rather than > 1?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Silly me: a96bc5a

@tbradsha
Copy link
Contributor Author

I don't know what the recommended practice is for block deprecations

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 v1 as a full copy since presumably v1 will be more stable to reference for other deprecated blocks vs. the non-deprecated version.

@tbradsha tbradsha requested a review from anomiex July 15, 2025 16:08
@tbradsha tbradsha merged commit 32a27be into trunk Jul 15, 2025
84 of 85 checks passed
@tbradsha tbradsha deleted the update/swiper_11.2.8 branch July 15, 2025 17:23
@github-actions github-actions bot removed the [Status] Needs Review This PR is ready for review. label Jul 15, 2025
@github-actions github-actions bot added this to the jetpack/14.9 milestone Jul 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Slideshow [Feature] Carousel A fullscreen modal appearing when clicking on an image in a gallery or tiled gallery. [Package] Paypal Payments [Package] Post List [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Tests] Includes Tests [Type] Janitorial
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants