Autoptimize conflicts with WP Beaver Builder

Hi Bowo;
Multiple things (issues/ solutions) here;
1. you could exclude pages where beaverbuilder is active using the API (with the “autoptimize_filter_noptimize”-filter) see autoptimize_helper.php_example for an example of how, in this cased based on a string in the URL, a page can be excluded from optimization).
2. you can access the non-optimized version of any page by adding ?ao_noptimize=1 to the URL
3. you could also exclude the specific JS needed for beaverbuilder to function from being aggregated/ minified.
4. as to the point raised in the beaverbuilder-support forum; you can immediately add “text/html” to the comma-seperated list of things to exclude from JS optimization. text/html (and text/template) will automatically be excluded in the next release (1.9.3, will probably be pushed out early next week).

Hope this helps,
frank

Thanks for lightning fast reply Frank!

1. Is this excluded on the front-end logged-out view?… Or on the backend logged-in view?

2. The way beaver builder works is that it is called via a URL that looks like this: https://wwww.thesite.com/?fl_builder …I’ve just tested and this works: https://new.thesite.com/?ao_noptimize=1&fl_builder Thanks!

3. Tried that. Did not work.

4. GREAT!… I can use solution no. 2 above while waiting for 1.9.3.

Thanks again Frank!

Cheers,
Bowo

(1) AO is only active on frontend (anonymous or logged in), never on backend. the api-filter would allow you to disable AO when there’s “fl_builder” in the URL (see the example mentioned above, you’d just have to change “no-autoptimize-now” to “fl_builder”)
(4) you could even add “text/html” (without quotes) to the JS exclusion list immediately

If you want you can test-drive 1.9.3 by downloading the zip-file from Autoptimize’s Github repository.

frank

I had the same issue with beaver and autooptimize. The new version (zipfile above) seems to work just fine though ??

I have to revert my statement that beaver builder works fine now. It does start up and some modules work but for instance when I add a picture module and then try to add a picture from the media libary, the media library will not open to let me select the picture to add. When I deactivate autoptimize, this problem disappears.

Any ideas?

as with any advanced javascript-based solution (which beaver builder clearly is), you’ll have to find the right JS to exclude from optimization.

chances are beaver-builder loads wordpress’ native media manager to access the media library. i’ve been looking into what the media manager adds (a huge amount of JS, inline and external) and how to optimize that, but I haven’t been able to tame that monster yet. so if beaver builder uses media manager api, my advise would be exclude that entire page from optimization using the autoptimize_filter_noptimize-filter (see autoptimize_helper.php_example for an example of how to exclude a page based on the URL).

frank

Hey Frank,

if I exclude every page I build with beaver builder from optimization then whats the point of using autooptimize? I would basically deactivate it for the entire site? Or maybe I misunderstood … ??

I am still testing beaver builder in my localhost installation. So far I havent decided on using a page builder yet. It looks nice but these incompatabilities are not fun.

nah, you misunderstood; exclude only those pages that have the media-library included (until I have time to tame media-manager’s JS, if indeed beaver builder uses that) ??

frank

What exactly do you mean by “have media library included” ? Basically all my pages will have some sort of picture included from the media library. I think I am still not getting it ?? sorry ??

ah, it’s me who misunderstood actually; you want to be able to use Beaver builder yourself to add images, after which your visitors will see that image, but won’t be able to add images themselves? something like that?

two options (as also explained earlier in this thread);
1. add ?ao_noptimize=1 to the URL of the page you’re going to edit
2. exclude pages that have beaver builder active (i.e. for you, the administartor, not for visitors) from being optimized based on the presence of ‘fl_builder’ in the URL, using the API like this:

add_filter('autoptimize_filter_noptimize','beaver_noptimize',10,0);
function beaver_noptimize() {
	if (strpos($_SERVER['REQUEST_URI'],'fl_builder')!==false) {
		return true;
	} else {
		return false;
	}
}

frank

ah, it’s me who misunderstood actually; you want to be able to use Beaver builder yourself to add images, after which your visitors will see that image, but won’t be able to add images themselves? something like that?

excactly! ??

add_filter('autoptimize_filter_noptimize','beaver_noptimize',10,0);
function beaver_noptimize() {
	if (strpos($_SERVER['REQUEST_URI'],'fl_builder')!==false) {
		return true;
	} else {
		return false;
	}
}

Cool … I add this to a autoptimize_helper.php in the root folder of the plugin I assume ? ??

you could add this either in your (child-)theme’s functions.php (but updates to your theme could overwrite this) or in a new plugin in wp-content/plugins (where you could use autoptimize_helper.php_example as an … example ?? )

frank

thanks for the tip!

I didnt realize I could simply add functions as a new plugin.I think I will do that for all my changes in functions.php from now on.

Excellent. I just tried the filter as part of my site-specific plugin and it works beautifully. No need to manually type down the exclusion URL string. Thanks Frank!