[Resolved] Unused stylesheet columns.min.css is added to the front end of pages and posts

Home Forums Support [Resolved] Unused stylesheet columns.min.css is added to the front end of pages and posts

Home Forums Support Unused stylesheet columns.min.css is added to the front end of pages and posts

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1562675
    James

    There seems to be a bug in your plugin. When I enable the setting “Use infinite scroll” in the customizer (Layout > Blog > Content > Archives) I am getting an extra stylesheet (columns.min.css) on the front end of pages and posts (but not archives where it probably belongs). This stylesheet is 100% unused on posts and pages and is missing on archive pages (I don’t have columns enabled anyway so not sure if should be there or not).

    I think the stylesheet is getting loading on line 122 of gp-premium/blog/functions/generate-blog.php. I am not displaying featured images on my single posts so then $needs_featured_image_css should be false and $needs_columns_css is true because of the code on line 97/98 and having infinite scroll enabled.

    #1564199
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    That file is necessary when infinite scroll is activated (the file name is just a name).

    However, if it’s not being loaded where it’s needed, that sounds like an issue. Can you link me to one of those pages?

    Thanks!

    #1564473
    James

    Hi Tom,

    The only place where infinite scroll is used is on the Archive pages, and those pages seem to be working fine without the columns.css file.

    I also noticed that the More button for the infinite scroll has a class of masonry-load-more even though I don’t have any masonry options enabled.

    <div class="masonry-load-more load-more has-svg-icon ">
      <a class="button" href="#"><span class="gp-icon spinner">

    Check the examples in the private info box. Thanks.

    #1566188
    Tom
    Lead Developer
    Lead Developer

    Ah, I see. Our Blog module has a few different CSS files:

    style.min.css
    columns.min.css
    featured-images.min.css

    Only one of these will load depending on what’s needed. On your archive, it’s loading the full style.min.css.

    Since your static pages don’t have featured images (whereas your archives may), it only loads the columns CSS and not the full bundle.

    Everything is working as it should be πŸ™‚

    #1566237
    James

    Hi Tom,

    Thanks for looking into this. I think there is some confusion here. You say that everything is working as it should be, but I don’t think that is the case.

    The columns.min.css stylesheet is 100% unused on my posts and pages. Chrome dev tools coverage shows 100% unused. If I block the columns.min.css file in dev tools and refresh the page then the page displays exactly the same. If I disable infinite scroll for Archives then the columns.min.css will not load anymore on pages and posts.

    Enabling or disabling infinite scroll has no effect on single pages and posts, so why should columns.min.css be loaded depending on this setting?

    #1566474
    Tom
    Lead Developer
    Lead Developer

    It’s not possible for the plugin to know 100% that you don’t need that CSS on your pages, as people can do anything to their templates.

    If you want to remove it on pages and posts, try this:

    add_action( 'wp_enqueue_scripts', function() {
        if ( is_singular() ) {
            wp_dequeue_style( 'generate-blog-columns' );
        }
    }, 100 );
    #1566561
    James

    Hi Tom,

    I’m not sure what plugin you are referring to. Do you mean the theme?

    The theme knows that columns.css is not needed on single pages and posts when infinite scroll for Archives is disabled? But once infinite scroll for Archives is enabled then the theme doesn’t know anymore whether it’s needed or not?

    I’m still confused about this. Could you give an example where enabling the infinite scroll option changes the single posts/pages in such a way that columns.css is required? Do you mean that it’s possible to modify templates so that infinite scroll is applied on single pages?

    #1567690
    Tom
    Lead Developer
    Lead Developer

    By plugin I mean GP Premium.

    It’s not possible via our controls, but anything is possible with custom templates.

    It may make sense to introduce a filter in GPP that allows those users to specify whether they need infinite scroll on a page, and have it turned on for archives only by default. This would prevent that stylesheet from needing to be loaded unnecessarily.

    I’ve made a note to look at this in 1.13.0 πŸ™‚

    #1567864
    James

    Thanks for the explanation. I just wanted to make sure that if I dequeue the stylesheet that it wouldn’t cause problems in the future if I changed settings and options.

    By the way, is there any possibility of using infinite scroll without jQuery? Maybe by adding some custom JavaScript and then dequeueing jQuery? I would prefer to use something that can be combined with the other js files in Autoptimize if possible.

    #1568726
    Tom
    Lead Developer
    Lead Developer

    I’m not aware of an infinite scroll library that uses vanilla javascript, but it may be worth looking into for sure πŸ™‚

    #1889778
    James

    Hi Tom,

    I see that jquery has been replaced by infinite-scroll.pkgd.min.js. I’m not sure which update this was as I can’t find any reference to this in the past few updates on this page.

    Anyway, it’s great to finally get rid of jQuery on all pages of my front end. Good job.

    #1891333
    Tom
    Lead Developer
    Lead Developer

    Yes, we ditched jQuery for our masonry/infinite scroll features in 2.0 πŸ™‚

    Thanks!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.