Query: Try adding infinite scroll loading

docs/reference-guides/core-blocks.md

@@ -704,7 +704,7 @@ An advanced block that allows displaying post types based on different query par
 -	**Name:** core/query
 -	**Category:** theme
 -	**Supports:** align (full, wide), layout, ~~html~~
--	**Attributes:** enhancedPagination, namespace, query, queryId, tagName
+-	**Attributes:** enhancedPagination, infiniteScroll, namespace, query, queryId, tagName
 
 ## No results
 

packages/block-library/src/post-template/index.php

@@ -135,9 +135,10 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 	wp_reset_postdata();
 
 	return sprintf(
-		'<ul %1$s>%2$s</ul>',
+		'<ul %1$s data-wp-infinite-scroll="%3$s">%2$s</ul>',
 		$wrapper_attributes,
-		$content
+		$content,
+		$page_key . '-' . ( $use_global_query ? $query->query_vars['paged'] : $page )
 	);
 }
 

packages/block-library/src/query-pagination-next/block.json

@@ -17,7 +17,8 @@
 		"query",
 		"paginationArrow",
 		"showLabel",
-		"enhancedPagination"
+		"enhancedPagination",
+		"query/infiniteScroll"
 	],
 	"supports": {
 		"reusable": false,

packages/block-library/src/query-pagination-next/edit.js

@@ -13,7 +13,11 @@ const arrowMap = {
 export default function QueryPaginationNextEdit( {
 	attributes: { label },
 	setAttributes,
-	context: { paginationArrow, showLabel },
+	context: {
+		'query/infiniteScroll': hasInfiniteScroll,
+		paginationArrow,
+		showLabel,
+	},
 } ) {
 	const displayArrow = arrowMap[ paginationArrow ];
 	return (
@@ -22,7 +26,8 @@ export default function QueryPaginationNextEdit( {
 			onClick={ ( event ) => event.preventDefault() }
 			{ ...useBlockProps() }
 		>
-			{ showLabel && (
+			{ hasInfiniteScroll && __( 'Load more link' ) }
+			{ ! hasInfiniteScroll && showLabel && (
 				<PlainText
 					__experimentalVersion={ 2 }
 					tagName="span"
@@ -34,7 +39,7 @@ export default function QueryPaginationNextEdit( {
 					}
 				/>
 			) }
-			{ displayArrow && (
+			{ ! hasInfiniteScroll && displayArrow && (
 				<span
 					className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
 					aria-hidden={ true }

packages/block-library/src/query-pagination-next/index.php

@@ -17,22 +17,29 @@
 function render_block_core_query_pagination_next( $attributes, $content, $block ) {
 	$page_key            = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
 	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
+	$infinite_scroll     = ! empty( $block->context['query/infiniteScroll'] );
 	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
 	$max_page            = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
 
 	$wrapper_attributes = get_block_wrapper_attributes();
-	$show_label         = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
-	$default_label      = __( 'Next Page' );
-	$label_text         = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
-	$label              = $show_label ? $label_text : '';
-	$pagination_arrow   = get_query_pagination_arrow( $block, true );
 
-	if ( ! $label ) {
-		$wrapper_attributes .= ' aria-label="' . $label_text . '"';
-	}
-	if ( $pagination_arrow ) {
-		$label .= $pagination_arrow;
+	if ( $infinite_scroll ) {
+		$label = __( 'Load more' );
+	} else {
+		$show_label       = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
+		$default_label    = __( 'Next Page' );
+		$label_text       = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+		$label            = $show_label ? $label_text : '';
+		$pagination_arrow = get_query_pagination_arrow( $block, true );
+
+		if ( ! $label ) {
+			$wrapper_attributes .= ' aria-label="' . $label_text . '"';
+		}
+		if ( $pagination_arrow ) {
+			$label .= $pagination_arrow;
+		}
 	}
+
 	$content = '';
 
 	// Check if the pagination is for Query that inherits the global context.

packages/block-library/src/query-pagination-numbers/block.json

@@ -13,7 +13,12 @@
 			"default": 2
 		}
 	},
-	"usesContext": [ "queryId", "query", "enhancedPagination" ],
+	"usesContext": [
+		"queryId",
+		"query",
+		"enhancedPagination",
+		"query/infiniteScroll"
+	],
 	"supports": {
 		"reusable": false,
 		"html": false,

packages/block-library/src/query-pagination-numbers/edit.js

@@ -41,8 +41,16 @@ const previewPaginationNumbers = ( midSize ) => {
 export default function QueryPaginationNumbersEdit( {
 	attributes,
 	setAttributes,
+	context,
 } ) {
+	const blockProps = useBlockProps();
+
+	if ( context[ 'query/infiniteScroll' ] ) {
+		return null;
+	}
+
 	const { midSize } = attributes;
+
 	const paginationNumbers = previewPaginationNumbers(
 		parseInt( midSize, 10 )
 	);
@@ -67,7 +75,7 @@ export default function QueryPaginationNumbersEdit( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<div { ...useBlockProps() }>{ paginationNumbers }</div>
+			<div { ...blockProps }>{ paginationNumbers }</div>
 		</>
 	);
 }

packages/block-library/src/query-pagination-numbers/index.php

@@ -15,6 +15,10 @@
  * @return string Returns the pagination numbers for the Query.
  */
 function render_block_core_query_pagination_numbers( $attributes, $content, $block ) {
+	if ( ! empty( $block->context['query/infiniteScroll'] ) ) {
+		return '';
+	}
+
 	$page_key            = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
 	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
 	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];

packages/block-library/src/query-pagination-previous/block.json

@@ -17,7 +17,8 @@
 		"query",
 		"paginationArrow",
 		"showLabel",
-		"enhancedPagination"
+		"enhancedPagination",
+		"query/infiniteScroll"
 	],
 	"supports": {
 		"reusable": false,

packages/block-library/src/query-pagination-previous/edit.js

@@ -13,14 +13,24 @@ const arrowMap = {
 export default function QueryPaginationPreviousEdit( {
 	attributes: { label },
 	setAttributes,
-	context: { paginationArrow, showLabel },
+	context: {
+		'query/infiniteScroll': hasInfiniteScroll,
+		paginationArrow,
+		showLabel,
+	},
 } ) {
+	const blockProps = useBlockProps();
+
+	if ( hasInfiniteScroll ) {
+		return null;
+	}
+
 	const displayArrow = arrowMap[ paginationArrow ];
 	return (
 		<a
 			href="#pagination-previous-pseudo-link"
 			onClick={ ( event ) => event.preventDefault() }
-			{ ...useBlockProps() }
+			{ ...blockProps }
 		>
 			{ displayArrow && (
 				<span

packages/block-library/src/query-pagination-previous/index.php

@@ -15,6 +15,10 @@
  * @return string Returns the previous posts link for the query.
  */
 function render_block_core_query_pagination_previous( $attributes, $content, $block ) {
+	if ( ! empty( $block->context['query/infiniteScroll'] ) ) {
+		return '';
+	}
+
 	$page_key            = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
 	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
 	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];

packages/block-library/src/query/block.json

@@ -38,13 +38,18 @@
 		"enhancedPagination": {
 			"type": "boolean",
 			"default": false
+		},
+		"infiniteScroll": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"providesContext": {
 		"queryId": "queryId",
 		"query": "query",
 		"displayLayout": "displayLayout",
-		"enhancedPagination": "enhancedPagination"
+		"enhancedPagination": "enhancedPagination",
+		"query/infiniteScroll": "infiniteScroll"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],

packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js

@@ -11,6 +11,7 @@ import { useUnsupportedBlocks } from '../../utils';
 
 export default function EnhancedPaginationControl( {
 	enhancedPagination,
+	infiniteScroll,
 	setAttributes,
 	clientId,
 } ) {
@@ -40,6 +41,18 @@ export default function EnhancedPaginationControl( {
 					} );
 				} }
 			/>
+			{ enhancedPagination && (
+				<ToggleControl
+					label={ __( 'Infinite scroll' ) }
+					checked={ infiniteScroll }
+					disabled={ hasUnsupportedBlocks }
+					onChange={ ( value ) => {
+						setAttributes( {
+							infiniteScroll: value,
+						} );
+					} }
+				/>
+			) }
 		</>
 	);
 }

packages/block-library/src/query/edit/inspector-controls/index.js

@@ -43,7 +43,8 @@ const { BlockInfo } = unlock( blockEditorPrivateApis );
 export default function QueryInspectorControls( props ) {
 	const { attributes, setQuery, setDisplayLayout, setAttributes, clientId } =
 		props;
-	const { query, displayLayout, enhancedPagination } = attributes;
+	const { query, displayLayout, enhancedPagination, infiniteScroll } =
+		attributes;
 	const {
 		order,
 		orderBy,
@@ -206,6 +207,7 @@ export default function QueryInspectorControls( props ) {
 						) }
 						<EnhancedPaginationControl
 							enhancedPagination={ enhancedPagination }
+							infiniteScroll={ infiniteScroll }
 							setAttributes={ setAttributes }
 							clientId={ clientId }
 						/>

packages/block-library/src/query/view.js

@@ -68,8 +68,8 @@ store( 'core/query', {
 				ctx.url = ref.href;
 
 				// Focus the first anchor of the Query block.
-				const firstAnchor = `[data-wp-navigation-id=${ id }] .wp-block-post-template a[href]`;
-				document.querySelector( firstAnchor )?.focus();
+				// const firstAnchor = `[data-wp-navigation-id=${ id }] .wp-block-post-template a[href]`;
+				// document.querySelector( firstAnchor )?.focus();
 			}
 		},
 		*prefetch() {

packages/interactivity/src/directives.js

@@ -390,4 +390,25 @@ export default () => {
 		),
 		{ priority: 4 }
 	);
+
+	const InfiniteScroll = ( {
+		elementType: Type,
+		pageId,
+		children,
+		...props
+	} ) => {
+		const { current: pages } = useRef( new Map() );
+		if ( ! pages.has( pageId ) ) pages.set( pageId, children );
+		return <Type { ...props }>{ [ ...pages.values() ] }</Type>;
+	};
+
+	directive(
+		'infinite-scroll',
+		( { directives: { 'infinite-scroll': isr }, element } ) => {
+			const { value } = isr.find( ( e ) => e.suffix === 'default' );
+			element.props.elementType = element.type;
+			element.props.pageId = value;
+			element.type = InfiniteScroll;
+		}
+	);
 };