Skip to content

Instantly share code, notes, and snippets.

@jvanja
Forked from dkjensen/filters.php
Created June 22, 2023 09:24
Show Gist options
  • Save jvanja/8af025dda04019ba6ee7f9128a510611 to your computer and use it in GitHub Desktop.
Save jvanja/8af025dda04019ba6ee7f9128a510611 to your computer and use it in GitHub Desktop.
WordPress Gutenberg Query Loop View More AJAX
<?php
/**
* Add data attributes to the query block to describe the block query.
*
* @param string $block_content Default query content.
* @param array $block Parsed block.
* @return string
*/
function query_render_block( $block_content, $block ) {
if ( 'core/query' === $block['blockName'] ) {
$query_id = $block['attrs']['queryId'];
$container_end = strpos( $block_content, '>' );
$paged = absint( $_GET[ 'query-' . $query_id . '-page' ] ?? 1 );
$block_content = substr_replace( $block_content, ' data-paged="' . esc_attr( $paged ) . '" data-attrs="' . esc_attr( json_encode( $block ) ) . '"', $container_end, 0 );
}
return $block_content;
}
\add_filter( 'render_block', __NAMESPACE__ . '\query_render_block', 10, 2 );
/**
* Replace the pagination block with a View More button.
*
* @param string $block_content Default pagination content.
* @param array $block Parsed block.
* @return string
*/
function query_pagination_render_block( $block_content, $block ) {
if ( 'core/query-pagination' === $block['blockName'] ) {
$block_content = sprintf( '<a href="#" class="view-more-query button">%s</a>', esc_html__( 'View More' ) );
}
return $block_content;
}
\add_filter( 'render_block', __NAMESPACE__ . '\query_pagination_render_block', 10, 2 );
/**
* AJAX function render more posts.
*
* @return void
*/
function query_pagination_render_more_query() {
$block = json_decode( stripslashes( $_GET['attrs'] ), true );
$paged = absint( $_GET['paged'] ?? 1 );
if ( $block ) {
$block['attrs']['query']['offset'] += $block['attrs']['query']['perPage'] * $paged;
echo render_block( $block );
}
exit;
}
add_action( 'wp_ajax_query_render_more_pagination', __NAMESPACE__ . '\query_pagination_render_more_query' );
add_action( 'wp_ajax_nopriv_query_render_more_pagination', __NAMESPACE__ . '\query_pagination_render_more_query' );
( function( $ ) {
$( '.view-more-query' ).on( 'click', function( e ) {
e.preventDefault();
const self = $( this );
const queryEl = $( this ).closest( '.wp-block-query' );
const postTemplateEl = queryEl.find( '.wp-block-post-template' );
if ( queryEl.length && postTemplateEl.length ) {
const block = JSON.parse( queryEl.attr( 'data-attrs' ) );
const maxPages = block.attrs.query.pages || 0;
$.ajax( {
url: i18n.ajax_url,
dataType: 'json html',
data: {
action: 'query_render_more_pagination',
attrs: queryEl.attr( 'data-attrs' ),
paged: queryEl.attr( 'data-paged' ),
},
complete( xhr ) {
const nextPage = Number( queryEl.attr( 'data-paged' ) ) + 1;
if ( maxPages > 0 && nextPage >= maxPages ) {
self.remove();
}
queryEl.attr( 'data-paged', nextPage );
if ( xhr.responseJSON ) {
console.log( xhr.responseJSON ); // eslint-disable-line
} else {
const htmlEl = $( xhr.responseText );
if ( htmlEl.length ) {
const html = htmlEl.find( '.wp-block-post-template' ).html() || '';
if ( html.length ) {
postTemplateEl.append( html );
return;
}
}
self.remove();
}
},
} );
}
} );
}( jQuery ) );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment