Archived topic
Next previous pagination infinite scroll
11 replies · Started by vast on August 14, 2021
When infinite scroll is enabled with the option Use button to load more posts checked, it displays a button on the home page. The button does not however display the additional posts when clicked. Additionally the next navigation link appears at the bottom of the page however not previous navigation is shown when on a subsequent page.
1) How can the button to load more posts be resolved?
2) How can the previous navigation be displayed?
3) How can the next & previous navigation be removed?
There are currently 25 posts and the site is configured to display 10 at a time.
The filter below does not work i.e. the navigation still appears.
add_filter( 'generate_show_post_navigation', '__return_false' );
add_action( 'after_setup_theme', function() {
if ( ! is_single() ) {
add_filter( 'generate_show_post_navigation', '__return_false' );
}
} );The gist to remove the navigation completely does not work i.e. the next navigation continues to display.
Hi there,
can you share a link to the site so we can take a look at the problem.
It seems that the issue was similar to a previous question i.e. as the div element includes an inline style attribute <div class="infinite-scroll-path" aria-hidden="true" style="display: none;"><a href="https://www.domain.com/page/2/">Next Page »</a></div>, the content security policy blocks it from rendering.
Styles should be internalized so that security policies can be applied. Is there an option to internalize it?
f that function was broken then we would have 1000's of support requests relating to the issue. So the problem has to be related to your setup. Without seeing the site you're having the issue on - i cannot tell what the problem is.
To clarify, the function breaks when content security policies are applied - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src.
Options such as 'unsafe-inline' isn't recommended - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#unsafe_inline_styles. Introducing nonces and/or hashes isn't always possible.
If you need to render it without the style attribute, you can add your own element:
add_action( 'generate_after_footer', function() {
if ( ! function_exists( 'generate_blog_get_defaults' ) ) {
return;
}
if ( function_exists( 'is_woocommerce' ) && is_woocommerce() ) {
return;
}
$settings = wp_parse_args(
get_option( 'generate_blog_settings', array() ),
generate_blog_get_defaults()
);
if ( $settings['infinite_scroll'] && ! is_singular() && ! is_404() ) {
printf(
'<div class="infinite-scroll-path" aria-hidden="true">%s</div>',
get_next_posts_link()
);
}
} );Then you can add some CSS:
.infinite-scroll-path {
display: none;
}Thanks Tom.
Is there an option to include this as part of the base build rather than a separate function? This is because it would need to be ported across each site separately.
No option like that for now - the style is baked into the plugin.
We'll look at improving it, although I'm not sure completely disabling style attributes is a very popular thing to do. I can imagine it can cause all kinds of trouble with other plugins as well.
Thanks Tom. Rather than disabling it, is there an option to internalize it to a CSS file as part of the plugin?
Not in GP, but there may be a plugin out there that does it.
If it was me, I simply wouldn't disable inline styles. Not sure if the benefit outweighs the cost in the end.
Thanks Tom. In comparison to inline JavaScript, inline styles have a reduced attack surface which are still susceptible to XSS. If properly implemented, CSP prevent such attacks. CSP by default blocks inline scripts & styles from rendering as a result. As there's a resolution for now, we'll close the ticket.
Sounds good - thanks! :)
