fix: initializing swiper for multiple blocks (#476)

Swiper wasn't initializing for additional blocks because `componentDidUpdate` (where we initialize Swiper) is not called for them. The reason that only the first block is calling `componentDidUpdate` is that the `latestPosts` prop is empty on mount and changes once the request is done, triggering the update. That is not the case for additional blocks because the `latestPosts` data is already there. Initializing `Swiper` on `componentDidMount` (if posts are available) fixes the issue.

src/blocks/carousel/edit.js

@@ -44,9 +44,12 @@ class Edit extends Component {
 		this.paginationRef = createRef();
 	}
 
+	componentDidMount() {
+		this.initializeSwiper( 0 );
+	}
+
 	componentDidUpdate( prevProps ) {
 		const { attributes, latestPosts } = this.props;
-		const { autoplay, delay } = attributes;
 
 		if (
 			prevProps.latestPosts !== latestPosts ||
@@ -64,24 +67,32 @@ class Edit extends Component {
 				this.swiperInstance.destroy( true, true );
 			}
 
-			if ( latestPosts && latestPosts.length > 0 ) {
-				this.swiperInstance = createSwiper(
-					{
-						block: this.carouselRef.current, // Editor uses the same wrapper for block and swiper container
-						container: this.carouselRef.current,
-						next: this.btnNextRef.current,
-						prev: this.btnPrevRef.current,
-						play: this.btnPlayRef.current,
-						pause: this.btnPauseRef.current,
-						pagination: this.paginationRef.current,
-					},
-					{
-						autoplay,
-						delay: delay * 1000,
-						initialSlide,
-					}
-				);
-			}
+			this.initializeSwiper( initialSlide );
+		}
+	}
+
+	initializeSwiper( initialSlide ) {
+		const { latestPosts } = this.props;
+
+		if ( latestPosts && latestPosts.length ) {
+			const { autoplay, delay } = this.props.attributes;
+
+			this.swiperInstance = createSwiper(
+				{
+					block: this.carouselRef.current, // Editor uses the same wrapper for block and swiper container.
+					container: this.carouselRef.current,
+					next: this.btnNextRef.current,
+					prev: this.btnPrevRef.current,
+					play: this.btnPlayRef.current,
+					pause: this.btnPauseRef.current,
+					pagination: this.paginationRef.current,
+				},
+				{
+					autoplay,
+					delay: delay * 1000,
+					initialSlide,
+				}
+			);
 		}
 	}