feat(homepage-posts): infinite scroll

src/blocks/homepage-articles/block.json

@@ -18,6 +18,10 @@
 			"type": "boolean",
 			"default": false
 		},
+		"infiniteScroll": {
+			"type": "boolean",
+			"default": false
+		},
 		"readMoreLabel": {
 			"type": "string",
 			"default": "Keep reading"

src/blocks/homepage-articles/edit.tsx

@@ -280,6 +280,7 @@ class Edit extends Component< HomepageArticlesProps > {
 			mobileStack,
 			minHeight,
 			moreButton,
+			infiniteScroll,
 			showExcerpt,
 			showReadMore,
 			readMoreLabel,
@@ -434,11 +435,20 @@ class Edit extends Component< HomepageArticlesProps > {
 						</i>
 					) : (
 						! specificMode && (
-							<ToggleControl
-								label={ __( 'Show "Load more posts" Button', 'newspack-blocks' ) }
-								checked={ moreButton }
-								onChange={ () => setAttributes( { moreButton: ! moreButton } ) }
-							/>
+							<>
+								<ToggleControl
+									label={ __( 'Show "Load more posts" Button', 'newspack-blocks' ) }
+									checked={ moreButton }
+									onChange={ () => setAttributes( { moreButton: ! moreButton } ) }
+								/>
+								{ moreButton && (
+									<ToggleControl
+										label={ __( 'Infinite Scroll', 'newspack-blocks' ) }
+										checked={ infiniteScroll }
+										onChange={ () => setAttributes( { infiniteScroll: ! infiniteScroll } ) }
+									/>
+								) }
+							</>
 						)
 					) }
 					<ToggleControl

src/blocks/homepage-articles/view.js

@@ -35,9 +35,11 @@ function buildLoadMoreHandler( blockWrapperEl ) {
 		return;
 	}
 	const postsContainerEl = blockWrapperEl.querySelector( '[data-posts]' );
+	const isInfiniteScroll = btnEl.getAttribute( 'data-infinite-scroll' );
 
 	// Set initial state flags.
 	let isFetching = false;
+	let isInfiniteScrolling = false;
 	let isEndOfData = false;
 
 	btnEl.addEventListener( 'click', () => {
@@ -85,6 +87,8 @@ function buildLoadMoreHandler( blockWrapperEl ) {
 			isFetching = false;
 
 			blockWrapperEl.classList.remove( 'is-loading' );
+
+			isInfiniteScrolling = false;
 		}
 
 		/**
@@ -97,6 +101,25 @@ function buildLoadMoreHandler( blockWrapperEl ) {
 			blockWrapperEl.classList.add( 'is-error' );
 		}
 	} );
+	if ( isInfiniteScroll ) {
+		// Create an intersection observer instance
+		const btnObserver = new IntersectionObserver(
+			entries => {
+				entries.forEach( entry => {
+					if ( entry.isIntersecting && ! isInfiniteScrolling ) {
+						btnEl.click();
+						isInfiniteScrolling = true;
+					}
+				} );
+			},
+			{
+				root: null,
+				rootMargin: '0px',
+				threshold: 1,
+			}
+		);
+		btnObserver.observe( btnEl );
+	}
 }
 
 /**

src/blocks/homepage-articles/view.php

@@ -383,8 +383,12 @@ class="<?php echo esc_attr( $classes ); ?>"
 		<?php
 
 		if ( $has_more_button ) :
+			$load_more = '';
+			if ( (bool) $attributes['infiniteScroll'] ) {
+				$load_more = 'data-infinite-scroll="true"';
+			}
 			?>
-			<button type="button" class="wp-block-button__link" data-next="<?php echo esc_url( $articles_rest_url ); ?>">
+			<button type="button" class="wp-block-button__link" <?php echo esc_attr( $load_more ); ?> data-next="<?php echo esc_url( $articles_rest_url ); ?>">
 				<span class="label">
 					<?php
 					if ( ! empty( $attributes['moreButtonText'] ) ) {

src/types/index.d.ts

@@ -125,6 +125,7 @@ declare global {
 		imageShape: string;
 		minHeight: integer;
 		moreButton: boolean;
+		infiniteScroll: boolean;
 		moreButtonText: string;
 		showAuthor: boolean;
 		showAvatar: boolean;