Paginator css getting enqueued sitewide

Hi,

In V2.05 the tangible-paginator-css it getting enqueued site-wide when any template is created, whether or not a template is even being used on the site or not.

It is not happening on plugin activation, just when a template exists, even if blank.
Our templates don’t have pagination, so it may not need to be added at all.

<link rel='stylesheet' id='tangible-paginator-css'  href='https://site.com/wp-content/plugins/tangible-loops-and-logic/vendor/tangible/template/assets/build/paginator.min.css' media='all' />

Tested 2 diff sites.

@eliot hey mate, not sure if this is an easy fix or not.

This stylesheet is getting added sitewide, just by having the plugin activated with a saved template, whether it is needed or a template is even being used on a page.

@gareth Thank you for pointing this out. It’s been solved in the newest version.

The enqueue of pagination CSS was actually intentional, with the following logic: stylesheets are supposed to be loaded in document <head>; however, in most themes, it’s too early at that point to know if the page content will need the styles or not, because the content (and any included template) is rendered inside <body> which comes later. Many plugins enqueue all their CSS files on every page for this reason, and they’re cached by the browser.

This issue doesn’t apply for JS assets, because it’s best to load them at the bottom of the document. By that point, any templates have already been rendered so we know what assets are needed.


I did confirm that it’s technically possible to use a <link> tag within document body instead of head.

A <link> element can occur either in the <head> or <body> element, depending on whether it has a link type that is body-ok. For example, the stylesheet link type is body-ok, and therefore <link rel="stylesheet"> is permitted in the body. However, this isn’t a good practice to follow; it makes more sense to separate your <link> elements from your body content, putting them in the <head> .

– From MDN: <link> The External Resource Link element

So it’s a compromise between following best practices (put all stylesheets in head), and loading the minimal amount of assets needed for a page.

In this case, I decided to try the latter approach. I updated the enqueue logic so the paginator CSS is conditionally loaded (once only) just before it’s needed in a template. It’s working fine, so I’ll consider applying the same technique to other modules in the plugin that require CSS.

1 Like