[Question] Loading assets only when necessary #152

willstocks · 2019-02-25T14:16:48Z

So, I was attempting to load Enlighter only on is_single posts - at first I tried dequeueing the assets if ( !is_single() ) but then realised that wasn't going to work (based on previous issues opened). So I enabled DRI and that seemed to work! However, when I now navigate to a page where I have code (COMPATIBILITY!) Enlighter doesn't load. So, my question is:
How can I load the Enlighter assets only on is_single but also where I did not exclusively use Enlighter to generate the code block?

The text was updated successfully, but these errors were encountered:

AndiDittrich · 2019-02-25T14:18:12Z

see https://github.com/EnlighterJS/Plugin.WordPress/blob/master/docs/FilterHooks.md#filterenlighter_startup

willstocks · 2019-02-25T14:20:53Z

So, in theory the following should work:

function mm_ejs_disable_enlighter($enabled){
	if ( !is_single() ) {
		//Enlighter
		wp_dequeue_script('mootools-local');
		wp_dequeue_script('mootools-google-cdn');
		wp_dequeue_script('mootools-cloudfare-cdn');
		wp_dequeue_script('mootools-jsdelivr-cdn');
		wp_dequeue_script('enlighter-local');
		wp_dequeue_script('enlighter-config');
		wp_dequeue_script('enlighter-jetpack-infinitescroll');
		wp_dequeue_script('enlighter-jquery-ajax');
		wp_dequeue_script('enlighter-local');
		wp_dequeue_script('enlighter-config');
		wp_dequeue_style('enlighter-wpcustom');
		wp_deregister_script('enlighter-local');
		wp_deregister_script('enlighter-config');
		wp_deregister_style('enlighter-wpcustom');
		remove_action('wp_footer', 'appendInlineEnlighterConfig');
	}
}
add_filter('enlighter_startup', 'mm_ejs_disable_enlighter');

Should work perfectly fine?

AndiDittrich · 2019-02-25T14:23:54Z

your solution won't work! please read the docs carefully... the filter hook is not intended for this kind of actions

do dequeue the resources take a look into the DRI implementation

btw. i've just take a dive into the sources....theoretically it should also work with the compat mode because in the newer releases DRI is implemented as additional filter

willstocks · 2019-02-25T14:32:24Z

I had a feeling it wouldn't work!

When I enable DRI and navigate to a page with code blocks, they're not formatted at all 😞

For example:
https://willstocks.co.uk/php-dom-manipulation-snippet/

Looking at the DRI implementation, it looks like my use-case is always validating as false (I assume, that's due to the fact that the code blocks in use on this article, for example, are "non-Enlighter" code blocks and therefore "compatibility"?)

AndiDittrich · 2019-02-25T14:37:58Z

your example page works currently fine. do you've disabled dri right now ?

willstocks · 2019-02-25T14:38:53Z

I tried running the same dequeue's as follows (I know this is janky - but I was just trying):

function custom_script_conditional_loading() {
	if ( !is_single() ) {
		//Enlighter
		wp_dequeue_script('mootools-local');
		wp_dequeue_script('mootools-google-cdn');
		wp_dequeue_script('mootools-cloudfare-cdn');
		wp_dequeue_script('mootools-jsdelivr-cdn');
		wp_dequeue_script('enlighter-local');
		wp_dequeue_script('enlighter-config');
		wp_dequeue_script('enlighter-jetpack-infinitescroll');
		wp_dequeue_script('enlighter-jquery-ajax');
		wp_dequeue_script('enlighter-local');
		wp_dequeue_script('enlighter-config');
		wp_dequeue_style('enlighter-wpcustom');
		wp_deregister_script('enlighter-local');
		wp_deregister_script('enlighter-config');
		wp_deregister_style('enlighter-wpcustom');
		remove_action('wp_footer', 'appendInlineEnlighterConfig');
	}
}
add_action( 'wp_enqueue_scripts', 'custom_script_conditional_loading', -1 );
add_action( 'wp_enqueue_styles', 'custom_script_conditional_loading', -1 );
add_action( 'wp_footer', 'custom_script_conditional_loading', -1 );
add_action( 'wp_print_styles', 'custom_script_conditional_loading' );

But the problem was, I was getting a few console errors, due to the inline config still being appended

willstocks · 2019-02-25T14:39:57Z

Sorry - I turned DRI off again! It is back on now, if you visit that page again you'll see unstyled code blocks:

AndiDittrich · 2019-02-25T14:42:29Z

i will try to reproduce the error (dri + compat mode)

AndiDittrich · 2019-02-25T14:49:56Z

i'm a bit confused... the code blocks on this particular page are generated by Gutenberg "Code" block... this format is not supported by the compat mode.... why does the highlighting work ? did you changed the CSS selectors ?

<pre class="wp-block-code"><code>function </code></pre>

expected behaviour: the compat mode does only match code with the following structures (e.g. used by jetpack markdown):

<pre><code>function </code></pre>
<pre><code class="php">function </code></pre>

willstocks · 2019-02-25T14:53:33Z

If I disable DRI - it works, but the code blocks look like this:

I currently have the CSS selectors set to (in Options):

willstocks · 2019-02-25T14:54:28Z

So it's a "partial working" for the blocks when DRI is disabled - I still need to get some time to go through and sort all of my blocks and convert them up to Enlighter blocks

AndiDittrich · 2019-02-25T15:11:04Z

that's the issue: by changing the selectors, the EnlighterJS (javascript) library will highlight ALL elements which are matching. the code tags are appearing because of the (wrong) selectors: everything within a selector is taken as "sourcecode" which will be highlighted...

to use DRI, the content has to be modified/handled by the Enlighter Plugin (WordPress) - you skipped this step - therefore it cannot work..

please use the default selectors and add a custom content filter

sry @willstocks-tech but the Enlighter plugin is very complex...

AndiDittrich · 2019-02-25T15:45:50Z

i'm currently adding additional compat modes for crayon and Gutenberg style codeblocks

willstocks · 2019-02-25T15:56:48Z

Ahhhh, OK - so if I switch the selectors back to default and then go through all of my posts and where I have a snippet, convert the block to an Enlighter block - that will take care of the DRI "issue"?

No worries @AndiDittrich!!! I completely understand - it is incredibly complex! I have a habit of breaking complex things 😉 lol!

I will convert the selectors back to default and will go through my articles. I've now fully uninstalled Crayon (it's not PHP 7.3 compatible!!!) so the code blocks now "orphaned". It looks like Enlighter is picking up some of my old Crayon blocks - https://willstocks.co.uk/powershell-get-mailboxstatistics/:

<pre class="lang:ps decode:true" title="View mailbox storage usage by server (lists all mailboxes on the server)" style="display: none;">
    Get-MailboxStatistics -Server PrimaryExchange2013

    DisplayName               ItemCount    StorageLimitStatus                                                 LastLogonTime
    -----------               ---------    ------------------                                                 -------------
    Will Stocks               0                                                                      01/01/2017 08:00:00
</pre>

But I think that's because I'm still using pre and code as the selectors!

willstocks · 2019-02-25T16:04:45Z

I've swapped the blocks in my PHP article and have updated the selectors. It's working there fine (I need to go through all my historic stuff now!)

The only thing that makes me a bit sad... inline code is now not styled - which I thought looked super cool!

Because I was previously looking at only <pre> and <code>, it meant any inline code (surrounded by backticks) was also being formatted! Is there any chance you could add a tick box for a future release for "format inline code" as well 😁 😊

willstocks · 2019-02-25T16:06:36Z

Also - if I now enable DRI:

So I've turned DRI off again

AndiDittrich · 2019-02-25T16:11:05Z

DRI

by using EnlighterJS build-on codeblocks (Gutenberg), dialogs (TinyMCE) or shortcodes (not recommended) the DRI mechanism will work!

the theory behind is pretty simple: all code tags generated by the Enlighter WordPress Plugin have the "magic" EnlighterJSRAW css class added - the DRI filter just tries to find the first occurrence of this string - if it's found no action will take place - otherwise the frontend resources will be dequeued.

please enable DRI again (just for a short time - i will take a look on it).
in case you're using some caching/optmization plugins they might break the DRI mechanism - you've to exclude Enlighter resources

Inline Code

it's still supported by the TinyMCE plugin.... the Gutenberg Plugin is a bit weird in case of adding custom formats...(there are a lot of open issues...) i'm trying to add this feature soon

willstocks · 2019-02-25T16:13:03Z

I have excluded Enlighter from Autoptimize, as it was resulting in the JS being deferred which broke things.

I will enable DRI again for you now. The blocks were "converted" from Gutenberg Code blocks to Enlighter code blocks.

They work perfectly when DRI is disabled, but do not work when DRI is enabled.

willstocks · 2019-02-25T16:14:26Z

DRI now enabled - see: https://willstocks.co.uk/php-dom-manipulation-snippet/

willstocks · 2019-02-25T16:15:09Z

<pre class="EnlighterJSRAW" data-enlighter-language="php" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">
    function willstocks_content_images( $content ) {
	global $post;
	$pattern ="/&lt;img(.*?)class=\"(.*?)\"(.*?)src=(.*?)&gt;/i";
	$replacement = '&lt;img$1class="$2 lazyload blur-up"$3data-src=$4&gt;';
	$content = preg_replace( $pattern, $replacement, $content );
	return $content;
    }
    add_filter( 'the_content', 'willstocks_content_images' );*/
</pre>

willstocks · 2019-02-25T16:20:02Z

Options:

pre: pre.EnlighterJSRAW
code: code.EnlighterJSRAW

AndiDittrich · 2019-02-25T16:23:43Z

that's weird...the code is setup correctly...it should work... :( i've no idea whats going on..sry

another issue on your site: the attributes of the pre tags generated by Enlighter are not wrapped in quotes - this is not a normal behaviour...

<pre class=EnlighterJSRAW data-enlighter-language=php data-enlighter-theme data-enlighter-highlight data-enlighter-linenumbers data-enlighter-lineoffset data-enlighter-title data-enlighter-group>

additionally the whole markup of the page is broken by multiple html tags - i'm not sure whats going on but i believe that's another broken plugin ...

try to check this on your testing page...

willstocks · 2019-02-25T16:27:19Z

That's strange... when I look at them (Chrome, Windows 10 currently), they are wrapped in quotes?

When you say "broken by multiple html tags" can you point me at which ones and I can check? made sure I cleared ALL caching:

W3TC (Page, Object, Database, Opcache)
Autoptimize

AndiDittrich · 2019-02-25T16:29:53Z

willstocks · 2019-02-25T16:30:29Z

I don't know if this will help or not... but I've attached the actual HTML markup that I'm seeing on my end (not logged in, browser cache cleared)
PHP DOM Manipulation (snippet) - Will Stocks.zip

willstocks · 2019-02-25T16:32:43Z

Hmmm, OK interesting I'm with you now...

view-source is showing no quotes
devtools is showing quotes around them

I don't think I have anything that would affect this though... I will try turning off Autoptimize's HTML minification feature to see if that makes a difference. I'm travelling now, so will take a look when I get home (a couple of hours)

willstocks · 2019-02-25T16:33:31Z

It's weird though, because this is only an issue when DRI is enabled (I think) - when DRI is disabled, the code blocks are all formatted perfectly fine, so I assume it's working as expected???

AndiDittrich · 2019-02-25T16:35:51Z

i didn't have time to check this right now.

i would suggest to disable all caching/opimization plugins and try it again

willstocks · 2019-02-25T16:36:55Z

Will do - I will get a test server spun up as “in theory” this is a production site 😂

…

On Mon, 25 Feb 2019 at 16:35, Andi Dittrich ***@***.***> wrote: i didn't have time to check this right now. i would suggest to disable all caching/opimization plugins and try it again — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#152 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Apt9Ag3cWRQp_xrNdbTtVPwvi2kayVKcks5vRBDogaJpZM4bP97i> .

willstocks · 2019-02-26T09:04:15Z

I disabled DRI again and formatting works as expected (as long as you clear your browser cache): https://willstocks.co.uk/php-dom-manipulation-snippet/ - I'm in the process of getting a test server setup now

willstocks · 2019-02-26T09:10:23Z

I can confirm - Autoptimize's HTML minification feature is what is stripping out quotes, however, based on the research I was doing last night, no quotes is also valid HTML:

Attributes are placed inside the start tag, and consist of a name and a value, separated by an "=" character. The attribute value can remain unquoted if it doesn't contain ASCII whitespace or any of " ' ` = < or >. Otherwise, it has to be quoted using either single or double quotes. The value, along with the "=" character, can be omitted altogether if the value is the empty string.

That being said - would you like me to raise a question to Frank @ Autoptimize to find out what's what?

willstocks · 2019-02-26T09:13:46Z

I have completed the following steps:

Disable DRI
Clear all Caches
Disable Autoptimize HTML Minification
Enable DRI
Clear all Caches

Still, assets do not load on posts (https://willstocks.co.uk/php-dom-manipulation-snippet/) where an Enlighter Code Block exists 😞 😢

AndiDittrich · 2019-02-26T09:35:24Z

hi will,

thanks for your effort to investigate the issue - i'm very sorry for this inconvenience

i've tried to reproduce the behaviour but everything works as expected within my testing environment.
did you tried it on a test site without any plugins ?

best regards, Andi

willstocks · 2019-02-26T09:42:49Z

Hi Andi,

Not a problem at all! I can appreciate that environments differ - not every single scenario can be tested!

I'm just about to get a test environment put together, I will let you know how that gets along. For reference, I'm running PHP 7.3 - I don't know whether that makes any difference to you?

Also, can I just confirm - is DRI handled here:

Plugin.WordPress/class/Enlighter.php

Line 201 in e5a4549

if ($this->_settingsUtility->getOption('dynamicResourceInvocation')){

or here:

Plugin.WordPress/class/ContentProcessor.php

Line 142 in e5a4549

if ($this->_config['dynamicResourceInvocation']){

They're both very similar, I couldn't work out which one is/should be firing!

AndiDittrich · 2019-02-26T10:04:52Z

the first one adds the dequeue filter to wp_footer in case the DRI option is enabled AND the content filter or shortcode processor have not detected any Enlighter code (thats just the dequeue action)

the second one adds the content filter to WordPress the_content filter hook (thats the detection itself)

willstocks · 2019-02-26T10:18:54Z

OK, I have just setup a like-for-like environment:
https://dev.willstocks.co.uk/php-dom-manipulation-snippet/

DRI is now enabled... and it seems to be working OK. I've even re-enabled Autoptimize and W3TC and it's still working OK...

willstocks · 2019-02-26T10:21:17Z

I've just changed back to my theme... it looks like it's something related to the theme - I've no idea where to start with that though, I might have a word with the theme developer to see if they have any insight!

willstocks · 2019-02-26T23:25:52Z

Hi Andi, The devs that look after my theme have worked it out - I’ll update in the morning (it’s 00:00 now!) but it’s to do with related posts. I have a PR they have recommended so I’ll submit that for you tomorrow too?

…

On Tue, 26 Feb 2019 at 10:04, Andi Dittrich ***@***.***> wrote: the first one adds the dequeue filter to wp_footer in case the DRI option is enabled AND the content filter or shortcode processor have not detected any Enlighter code (thats just the dequeue action) the second one adds the content filter to WordPress the_content filter hook (thats the detection itself) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#152 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Apt9Aj9I2eQfZ9J93v89z-5Xey5KV5kcks5vRQbEgaJpZM4bP97i> .

AndiDittrich · 2019-02-27T07:08:55Z

That sounds good.

i assume that the changes only affects the theme

willstocks · 2019-02-27T08:37:09Z

Please see PR #153 - it's to do with the way that the plugin was/is detecting whether there's code within the_content and whether a theme/plugin is using a related posts section.

AndiDittrich · 2019-02-27T08:38:17Z

i'll check this soon but the code doesn't match the coding styles...therefore i will reject the current version...

willstocks · 2019-02-27T08:43:42Z

Thanks Andi - hopefully it makes sense what it's trying to do?

I have just updated the styling ({}, whitespacing and comment) so that it aligns a bit better with existing code structure

willstocks · 2019-02-27T16:11:32Z

Hi Andi,
I'm happy to close this one off as "Working" now, based on 7c187f8 - DRI is now working perfectly for me! :) :)

AndiDittrich added the question label Feb 25, 2019

willstocks closed this as completed Feb 27, 2019

[Question] Loading assets only when necessary #152

[Question] Loading assets only when necessary #152

Comments

willstocks commented Feb 25, 2019

AndiDittrich commented Feb 25, 2019

willstocks commented Feb 25, 2019

AndiDittrich commented Feb 25, 2019

willstocks commented Feb 25, 2019

AndiDittrich commented Feb 25, 2019

willstocks commented Feb 25, 2019

willstocks commented Feb 25, 2019

AndiDittrich commented Feb 25, 2019

AndiDittrich commented Feb 25, 2019

willstocks commented Feb 25, 2019

willstocks commented Feb 25, 2019

AndiDittrich commented Feb 25, 2019

AndiDittrich commented Feb 25, 2019

willstocks commented Feb 25, 2019

willstocks commented Feb 25, 2019 • edited Loading

willstocks commented Feb 25, 2019

AndiDittrich commented Feb 25, 2019

willstocks commented Feb 25, 2019

willstocks commented Feb 25, 2019

willstocks commented Feb 25, 2019

willstocks commented Feb 25, 2019

AndiDittrich commented Feb 25, 2019

willstocks commented Feb 25, 2019

AndiDittrich commented Feb 25, 2019

willstocks commented Feb 25, 2019

willstocks commented Feb 25, 2019

willstocks commented Feb 25, 2019

AndiDittrich commented Feb 25, 2019

willstocks commented Feb 25, 2019 via email

willstocks commented Feb 26, 2019

willstocks commented Feb 26, 2019

willstocks commented Feb 26, 2019

AndiDittrich commented Feb 26, 2019

willstocks commented Feb 26, 2019

AndiDittrich commented Feb 26, 2019

willstocks commented Feb 26, 2019

willstocks commented Feb 26, 2019

willstocks commented Feb 26, 2019 via email

AndiDittrich commented Feb 27, 2019

willstocks commented Feb 27, 2019

AndiDittrich commented Feb 27, 2019

willstocks commented Feb 27, 2019

willstocks commented Feb 27, 2019

willstocks commented Feb 25, 2019 •

edited

Loading