Slideshow and carousel: Update swiper from 6.7.0 to 11.2.10

.stylelintignore

@@ -14,7 +14,6 @@ projects/js-packages/components/components/boost-score-graph/style-uplot.scss
 projects/packages/jetpack-mu-wpcom/src/features/custom-css/custom-css/css/blank.css
 projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks
 projects/plugins/crm/css/lib
-projects/plugins/jetpack/modules/carousel/swiper-bundle.css
 projects/plugins/jetpack/scss/cleanslate.scss
 
 # Ignore test-related CSS files that need further investigation

projects/packages/paypal-payments/changelog/update-swiper_11.2.8

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Tests: Generate block test files with tab indents.

projects/packages/paypal-payments/tests/js/block-fixtures.js

@@ -53,7 +53,7 @@ export default function runBlockFixtureTests( blockName, blocks, fixturesPath )
 				if ( parsedJSONFixtureContent ) {
 					parserOutputExpectedString = parsedJSONFixtureContent;
 				} else if ( process.env.GENERATE_MISSING_FIXTURES ) {
-					parserOutputExpectedString = JSON.stringify( parserOutputActual, null, 4 ) + '\n';
+					parserOutputExpectedString = JSON.stringify( parserOutputActual, null, '\t' ) + '\n';
 					writeBlockFixtureParsedJSON( basename, parserOutputExpectedString );
 				} else {
 					throw new Error( `Missing fixture file: ${ parsedJSONFixtureFileName }` );
@@ -112,7 +112,7 @@ export default function runBlockFixtureTests( blockName, blocks, fixturesPath )
 					blocksExpectedString = jsonFixtureContent;
 				} else if ( process.env.GENERATE_MISSING_FIXTURES ) {
 					// Validation issues add too much noise so they get removed.
-					blocksExpectedString = JSON.stringify( blocksActualNormalized, null, 4 ) + '\n';
+					blocksExpectedString = JSON.stringify( blocksActualNormalized, null, '\t' ) + '\n';
 					writeBlockFixtureJSON( basename, blocksExpectedString );
 				} else {
 					throw new Error( `Missing fixture file: ${ jsonFixtureFileName }` );

projects/packages/post-list/changelog/update-swiper_11.2.8

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Tests: Update class used in Slideshow block.

projects/packages/post-list/tests/php/Post_Thumbnail_Test.php

@@ -81,7 +81,7 @@ public static function valid_post_content() {
 <!-- /wp:gallery -->';
 
 		$post_content_slideshow_image = '<!-- wp:jetpack/slideshow {"ids":[18,5],"sizeSlug":"large"} -->
-<div class="wp-block-jetpack-slideshow aligncenter" data-effect="slide"><div class="wp-block-jetpack-slideshow_container swiper-container"><ul class="wp-block-jetpack-slideshow_swiper-wrapper swiper-wrapper"><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img alt="" class="wp-block-jetpack-slideshow_image wp-image-18" data-id="18" src="http://localhost/wp-content/uploads/2021/08/b311c1481829913164f33a353de10a66-2-1024x448.jpeg"/></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img alt="" class="wp-block-jetpack-slideshow_image wp-image-5" data-id="5" src="http://localhost/wp-content/uploads/2021/08/201D3C7E-1BAE-4896-81A5-C848E2FC2AD1-1024x768.jpeg"/></figure></li></ul><a class="wp-block-jetpack-slideshow_button-prev swiper-button-prev swiper-button-white" role="button"></a><a class="wp-block-jetpack-slideshow_button-next swiper-button-next swiper-button-white" role="button"></a><a aria-label="Pause Slideshow" class="wp-block-jetpack-slideshow_button-pause" role="button"></a><div class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-white"></div></div></div>
+<div class="wp-block-jetpack-slideshow aligncenter" data-effect="slide"><div class="wp-block-jetpack-slideshow_container swiper"><ul class="wp-block-jetpack-slideshow_swiper-wrapper swiper-wrapper"><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img alt="" class="wp-block-jetpack-slideshow_image wp-image-18" data-id="18" src="http://localhost/wp-content/uploads/2021/08/b311c1481829913164f33a353de10a66-2-1024x448.jpeg"/></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img alt="" class="wp-block-jetpack-slideshow_image wp-image-5" data-id="5" src="http://localhost/wp-content/uploads/2021/08/201D3C7E-1BAE-4896-81A5-C848E2FC2AD1-1024x768.jpeg"/></figure></li></ul><a class="wp-block-jetpack-slideshow_button-prev swiper-button-prev swiper-button-white" role="button"></a><a class="wp-block-jetpack-slideshow_button-next swiper-button-next swiper-button-white" role="button"></a><a aria-label="Pause Slideshow" class="wp-block-jetpack-slideshow_button-pause" role="button"></a><div class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-white"></div></div></div>
 <!-- /wp:jetpack/slideshow -->';
 
 		$post_content_image_block = '<!-- wp:image {"id":24,"sizeSlug":"large","linkDestination":"none"} -->

projects/plugins/jetpack/.eslintignore

@@ -1,6 +1,5 @@
 # Our standard eslint config reads .gitignore and .eslintignore to determine what to ignore.
 
-/modules/carousel/swiper-bundle.js
 /modules/custom-css/custom-css/js/core-customizer-css-preview.js
 /modules/custom-css/custom-css/js/core-customizer-css.core-4.9.js
 /modules/custom-css/custom-css/js/core-customizer-css.js

projects/plugins/jetpack/changelog/update-swiper_11.2.8

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Update dependencies.

projects/plugins/jetpack/extensions/blocks/slideshow/create-swiper.js

@@ -1,7 +1,7 @@
 import './style.scss';
 
 export default async function createSwiper(
-	container = '.swiper-container',
+	container = '.wp-block-jetpack-slideshow_container',
 	params = {},
 	callbacks = {}
 ) {
@@ -35,9 +35,30 @@ export default async function createSwiper(
 			] )
 		),
 	};
-	const [ { default: Swiper } ] = await Promise.all( [
-		import( /* webpackChunkName: "swiper" */ 'swiper/swiper-bundle.js' ),
-		import( /* webpackChunkName: "swiper" */ 'swiper/swiper-bundle.css' ),
-	] );
+
+	let Swiper;
+	if ( window.JetpackSwiper ) {
+		// Load Swiper from window scope.
+		Swiper = window.JetpackSwiper;
+	} else {
+		const cssURL = window.Jetpack_Block_Assets_Base_Url + 'swiper.css';
+		// Load the CSS file first
+		if ( ! document.querySelector( `link[href="${ cssURL }"]` ) ) {
+			const link = document.createElement( 'link' );
+			link.rel = 'stylesheet';
+			link.href = cssURL;
+			document.head.appendChild( link );
+		}
+
+		// Load the JS file.
+		await import( /* webpackIgnore: true */ window.Jetpack_Block_Assets_Base_Url + 'swiper.js' );
+
+		if ( ! window.JetpackSwiper ) {
+			throw new Error( 'Failed to load Jetpack Swiper bundle' );
+		}
+
+		Swiper = window.JetpackSwiper;
+	}
+
 	return new Swiper( container, { ...defaultParams, ...params } );
 }

projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/index.js

@@ -1,4 +1,5 @@
 import * as deprecatedV1 from './v1';
 import * as deprecatedV2 from './v2';
+import * as deprecatedV3 from './v3';
 
-export default [ deprecatedV2, deprecatedV1 ];
+export default [ deprecatedV3, deprecatedV2, deprecatedV1 ];

projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v1/create-swiper.js

@@ -35,9 +35,30 @@ export default async function createSwiper(
 			] )
 		),
 	};
-	const [ { default: Swiper } ] = await Promise.all( [
-		import( /* webpackChunkName: "swiper" */ 'swiper/swiper-bundle.js' ),
-		import( /* webpackChunkName: "swiper" */ 'swiper/swiper-bundle.css' ),
-	] );
+
+	let Swiper;
+	if ( window.JetpackSwiper ) {
+		// Load Swiper from window scope.
+		Swiper = window.JetpackSwiper;
+	} else {
+		const cssURL = window.Jetpack_Block_Assets_Base_Url + 'swiper.css';
+		// Load the CSS file first
+		if ( ! document.querySelector( `link[href="${ cssURL }"]` ) ) {
+			const link = document.createElement( 'link' );
+			link.rel = 'stylesheet';
+			link.href = cssURL;
+			document.head.appendChild( link );
+		}
+
+		// Load the JS file.
+		await import( /* webpackIgnore: true */ window.Jetpack_Block_Assets_Base_Url + 'swiper.js' );
+
+		if ( ! window.JetpackSwiper ) {
+			throw new Error( 'Failed to load Jetpack Swiper bundle' );
+		}
+
+		Swiper = window.JetpackSwiper;
+	}
+
 	return new Swiper( container, { ...defaultParams, ...params } );
 }

projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v1/style.scss

@@ -85,7 +85,7 @@
 	}
 
 	// When the slideshow transition is set to "fade", hide all slides that are not active.
-	.swiper-container-fade .wp-block-jetpack-slideshow_slide:not(.swiper-slide-active) {
+	.swiper-fade .wp-block-jetpack-slideshow_slide:not(.swiper-slide-active) {
 		opacity: 0 !important;
 	}
 
@@ -140,25 +140,25 @@
 
 	// Prevent swiper button pseudo-element content displaying duplicate arrows.
 	.swiper-button-prev::after,
-	.swiper-container-rtl .swiper-button-next::after {
+	.swiper-rtl .swiper-button-next::after {
 		content: "";
 	}
 
 	.swiper-button-next::after,
-	.swiper-container-rtl .swiper-button-prev::after {
+	.swiper-rtl .swiper-button-prev::after {
 		content: "";
 	}
 
-	&.swiper-container-rtl .swiper-button-prev.swiper-button-white,
-	&.swiper-container-rtl .wp-block-jetpack-slideshow_button-prev,
+	&.swiper-rtl .swiper-button-prev.swiper-button-white,
+	&.swiper-rtl .wp-block-jetpack-slideshow_button-prev,
 	.swiper-button-next.swiper-button-white,
 	.wp-block-jetpack-slideshow_button-next,
 	.amp-carousel-button-next {
 		background-image: url( data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bWFzayBpZD0ibWFza05leHQiIG1hc2stdHlwZT0iYWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjgiIHk9IjYiIHdpZHRoPSI4IiBoZWlnaHQ9IjEyIj48cGF0aCBkPSJNOC41OTgxNCAxNi41OUwxMy4xNTU3IDEyTDguNTk4MTQgNy40MUwxMC4wMDEyIDZMMTUuOTcxOCAxMkwxMC4wMDEyIDE4TDguNTk4MTQgMTYuNTlaIiBmaWxsPSJ3aGl0ZSIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI21hc2tOZXh0KSI+PHJlY3QgeD0iMC4zNDM3NSIgd2lkdGg9IjIzLjg4MjIiIGhlaWdodD0iMjQiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+ );
 	}
 
-	&.swiper-container-rtl .swiper-button-next.swiper-button-white,
-	&.swiper-container-rtl .wp-block-jetpack-slideshow_button-next,
+	&.swiper-rtl .swiper-button-next.swiper-button-white,
+	&.swiper-rtl .wp-block-jetpack-slideshow_button-next,
 	.swiper-button-prev.swiper-button-white,
 	.wp-block-jetpack-slideshow_button-prev,
 	.amp-carousel-button-prev {

projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v2/index.js

@@ -1,8 +1,8 @@
 import { useBlockProps } from '@wordpress/block-editor';
 import Slideshow from './slideshow';
 
-export { default as attributes } from './attributes';
-export { default as supports } from './supports';
+export { default as attributes } from '../v1/attributes';
+export { default as supports } from './../v1/supports';
 
 export const save = ( { attributes: { align, autoplay, delay, effect, images } } ) => {
 	const blockProps = useBlockProps.save();

projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v2/slideshow.js

@@ -12,14 +12,14 @@ import ResizeObserver from 'resize-observer-polyfill';
 /**
  * Internal dependencies
  */
-import createSwiper from './create-swiper';
-import { paginationCustomRender } from './pagination';
+import createSwiper from '../v1/create-swiper';
+import { paginationCustomRender } from '../v1/pagination';
 import {
 	swiperApplyAria,
 	swiperInit,
 	swiperPaginationRender,
 	swiperResize,
-} from './swiper-callbacks';
+} from '../v1/swiper-callbacks';
 
 class Slideshow extends Component {
 	pendingRequestAnimationFrame = null;

projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v2/attributes.js → projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v3/attributes.js

@@ -42,6 +42,11 @@ export default {
 				selector: 'img',
 				attribute: 'src',
 			},
+			aspectRatio: {
+				source: 'attribute',
+				selector: 'img',
+				attribute: 'data-aspect-ratio',
+			},
 		},
 	},
 	effect: {

projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v2/create-swiper.js → projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v3/create-swiper.js

@@ -35,9 +35,30 @@ export default async function createSwiper(
 			] )
 		),
 	};
-	const [ { default: Swiper } ] = await Promise.all( [
-		import( /* webpackChunkName: "swiper" */ 'swiper/swiper-bundle.js' ),
-		import( /* webpackChunkName: "swiper" */ 'swiper/swiper-bundle.css' ),
-	] );
+
+	let Swiper;
+	if ( window.JetpackSwiper ) {
+		// Load Swiper from window scope.
+		Swiper = window.JetpackSwiper;
+	} else {
+		const cssURL = window.Jetpack_Block_Assets_Base_Url + 'swiper.css';
+		// Load the CSS file first
+		if ( ! document.querySelector( `link[href="${ cssURL }"]` ) ) {
+			const link = document.createElement( 'link' );
+			link.rel = 'stylesheet';
+			link.href = cssURL;
+			document.head.appendChild( link );
+		}
+
+		// Load the JS file.
+		await import( /* webpackIgnore: true */ window.Jetpack_Block_Assets_Base_Url + 'swiper.js' );
+
+		if ( ! window.JetpackSwiper ) {
+			throw new Error( 'Failed to load Jetpack Swiper bundle' );
+		}
+
+		Swiper = window.JetpackSwiper;
+	}
+
 	return new Swiper( container, { ...defaultParams, ...params } );
 }