@automattic/newspack-blocks 1.66.0 → 1.66.1

package/newspack-blocks.php

@@ -7,7 +7,7 @@
  * Author URI:      https://newspack.blog/
  * Text Domain:     newspack-blocks
  * Domain Path:     /languages
- * Version:         1.66.0
+ * Version:         1.66.1
  *
  * @package         Newspack_Blocks
  */
@@ -15,7 +15,7 @@
 define( 'NEWSPACK_BLOCKS__PLUGIN_FILE', __FILE__ );
 define( 'NEWSPACK_BLOCKS__BLOCKS_DIRECTORY', 'dist/' );
 define( 'NEWSPACK_BLOCKS__PLUGIN_DIR', plugin_dir_path( NEWSPACK_BLOCKS__PLUGIN_FILE ) );
-define( 'NEWSPACK_BLOCKS__VERSION', '1.66.0' );
+define( 'NEWSPACK_BLOCKS__VERSION', '1.66.1' );
 
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks.php';
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks-api.php';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/newspack-blocks",
-	"version": "1.66.0",
+	"version": "1.66.1",
 	"author": "Automattic",
 	"devDependencies": {
 		"@rushstack/eslint-patch": "^1.2.0",

package/src/blocks/carousel/edit.js

@@ -99,6 +99,7 @@ class Edit extends Component {
 				if ( latestPosts && this.swiperInstance.realIndex < latestPosts.length ) {
 					initialSlide = this.swiperInstance.realIndex;
 				}
+				this.setState( { swiperInitialized: false } );
 				this.swiperInstance.destroy( true, true );
 			}
 
@@ -115,7 +116,6 @@ class Edit extends Component {
 
 		if ( latestPosts && latestPosts.length ) {
 			const { aspectRatio, autoplay, delay, slidesPerView } = this.props.attributes;
-
 			const swiperInstance = createSwiper(
 				{
 					block: this.carouselRef.current, // Editor uses the same wrapper for block and swiper container.
@@ -240,7 +240,7 @@ class Edit extends Component {
 							<div style={ { margin: 'auto' } }>{ __( 'Sorry, no posts were found.' ) }</div>
 						</Placeholder>
 					) }
-					{ ! latestPosts && (
+					{ ( ! this.state.swiperInitialized || ! latestPosts ) && (
 						<Placeholder icon={ <Spinner /> } className="component-placeholder__align-center" />
 					) }
 					{ latestPosts && (

package/src/blocks/carousel/view.js

@@ -15,26 +15,37 @@ if ( typeof window !== 'undefined' ) {
 			document.querySelectorAll( '.wp-block-newspack-blocks-carousel' )
 		);
 		blocksArray.forEach( block => {
-			const slidesPerView = parseInt( block.dataset.slidesPerView );
-			const slideCount = parseInt( block.dataset.slideCount );
-			createSwiper(
-				{
-					block,
-					container: block.querySelector( '.swiper' ),
-					prev: block.querySelector( '.swiper-button-prev' ),
-					next: block.querySelector( '.swiper-button-next' ),
-					pagination: block.querySelector( '.swiper-pagination-bullets' ),
-					pause: block.querySelector( '.swiper-button-pause' ),
-					play: block.querySelector( '.swiper-button-play' ),
+			// Initialize Swiper only when the carousel becomes visible.
+			const observer = new IntersectionObserver(
+				entries => {
+					entries.forEach( entry => {
+						if ( entry.isIntersecting ) {
+							const slidesPerView = parseInt( block.dataset.slidesPerView );
+							const slideCount = parseInt( block.dataset.slideCount );
+							createSwiper(
+								{
+									block,
+									container: block.querySelector( '.swiper' ),
+									prev: block.querySelector( '.swiper-button-prev' ),
+									next: block.querySelector( '.swiper-button-next' ),
+									pagination: block.querySelector( '.swiper-pagination-bullets' ),
+									pause: block.querySelector( '.swiper-button-pause' ),
+									play: block.querySelector( '.swiper-button-play' ),
+								},
+								{
+									aspectRatio: parseFloat( block.dataset.aspectRatio ),
+									autoplay: !! parseInt( block.dataset.autoplay ),
+									delay: parseInt( block.dataset.autoplay_delay ) * 1000,
+									slidesPerView: slidesPerView <= slideCount ? slidesPerView : slideCount,
+									spaceBetween: 16,
+								}
+							);
+						}
+					} );
 				},
-				{
-					aspectRatio: parseFloat( block.dataset.aspectRatio ),
-					autoplay: !! parseInt( block.dataset.autoplay ),
-					delay: parseInt( block.dataset.autoplay_delay ) * 1000,
-					slidesPerView: slidesPerView <= slideCount ? slidesPerView : slideCount,
-					spaceBetween: 16,
-				}
+				{ threshold: 0.25 }
 			);
+			observer.observe( block );
 		} );
 	} );
 }

package/vendor/autoload.php

@@ -22,4 +22,4 @@ if (PHP_VERSION_ID < 50600) {
 
 require_once __DIR__ . '/composer/autoload_real.php';
 
-return ComposerAutoloaderInitba98d80c961f6c191c5abfe2b7fcd260::getLoader();
+return ComposerAutoloaderInita284b8440ce7cae45448aa4583a3feee::getLoader();

package/vendor/composer/autoload_real.php

@@ -2,7 +2,7 @@
 
 // autoload_real.php @generated by Composer
 
-class ComposerAutoloaderInitba98d80c961f6c191c5abfe2b7fcd260
+class ComposerAutoloaderInita284b8440ce7cae45448aa4583a3feee
 {
     private static $loader;
 
@@ -22,12 +22,12 @@ class ComposerAutoloaderInitba98d80c961f6c191c5abfe2b7fcd260
             return self::$loader;
         }
 
-        spl_autoload_register(array('ComposerAutoloaderInitba98d80c961f6c191c5abfe2b7fcd260', 'loadClassLoader'), true, true);
+        spl_autoload_register(array('ComposerAutoloaderInita284b8440ce7cae45448aa4583a3feee', 'loadClassLoader'), true, true);
         self::$loader = $loader = new \Composer\Autoload\ClassLoader(\dirname(__DIR__));
-        spl_autoload_unregister(array('ComposerAutoloaderInitba98d80c961f6c191c5abfe2b7fcd260', 'loadClassLoader'));
+        spl_autoload_unregister(array('ComposerAutoloaderInita284b8440ce7cae45448aa4583a3feee', 'loadClassLoader'));
 
         require __DIR__ . '/autoload_static.php';
-        call_user_func(\Composer\Autoload\ComposerStaticInitba98d80c961f6c191c5abfe2b7fcd260::getInitializer($loader));
+        call_user_func(\Composer\Autoload\ComposerStaticInita284b8440ce7cae45448aa4583a3feee::getInitializer($loader));
 
         $loader->register(true);
 

package/vendor/composer/autoload_static.php

@@ -4,7 +4,7 @@
 
 namespace Composer\Autoload;
 
-class ComposerStaticInitba98d80c961f6c191c5abfe2b7fcd260
+class ComposerStaticInita284b8440ce7cae45448aa4583a3feee
 {
     public static $classMap = array (
         'Composer\\InstalledVersions' => __DIR__ . '/..' . '/composer/InstalledVersions.php',
@@ -13,7 +13,7 @@ class ComposerStaticInitba98d80c961f6c191c5abfe2b7fcd260
     public static function getInitializer(ClassLoader $loader)
     {
         return \Closure::bind(function () use ($loader) {
-            $loader->classMap = ComposerStaticInitba98d80c961f6c191c5abfe2b7fcd260::$classMap;
+            $loader->classMap = ComposerStaticInita284b8440ce7cae45448aa4583a3feee::$classMap;
 
         }, null, ClassLoader::class);
     }

package/vendor/composer/installed.php

@@ -3,7 +3,7 @@
         'name' => 'automattic/newspack-blocks',
         'pretty_version' => 'dev-master',
         'version' => 'dev-master',
-        'reference' => 'b8c0c488a2dd448a8207e8a34147fcab9cdf848d',
+        'reference' => '24f3c8000d251f2272fc09d8ba7837108751506d',
         'type' => 'wordpress-plugin',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
@@ -13,7 +13,7 @@
         'automattic/newspack-blocks' => array(
             'pretty_version' => 'dev-master',
             'version' => 'dev-master',
-            'reference' => 'b8c0c488a2dd448a8207e8a34147fcab9cdf848d',
+            'reference' => '24f3c8000d251f2272fc09d8ba7837108751506d',
             'type' => 'wordpress-plugin',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),