I would like to see an action hook added so that we can enqueue scripts/stylesheets for specific elements. This would allow us to enqueue these files if and only if the element is being used. For example, I like to add a custom javascript file that enhances the functionality of the checkbox filters. Right now, I have to add a conditional to target the specific page(s) or else it gets added across the entire site.
It looks like this would be a very easy thing to do. Something like this…
Hi @thekendog ,
As you were trying to enqueue additional script only if a specific JS is enqueued, you should be able to do it like this without an additional hook
add_action( 'wp_print_footer_scripts', function() {
if ( wp_script_is( 'bricks-filters', 'enqueued' ) ) {
wp_enqueue_script(
'my-bricks-filters-extension', // Unique handle for your script
get_stylesheet_directory_uri() . '/jenn.js', // Path to your custom JS file
[], // Dependencies
'1.0.0' // Version
);
}
}, 0 );
Not every element has a script or stylesheet I could use that for. The filters do, but other elements don’t enqueue anything. I used filters as an example.
Also, it’s not just scripts I want to enqueue. Using the method you mentioned for stylesheets will cause a FOUC.
Maybe introduce a new action like
do_action( 'bricks/assets/on_demand_enqueue_asset, $bricks_settings_string ); in assets.php, placed before Font Awesome is enqueued. This would run early enough for developers to access $bricks_settings_string and conditionally enqueue their own assets in the <head> or footer.
The Element API’s enqueue_scripts() method currently only loads assets in the footer.
Easiest way without hook would be to extend element itself like this:
class Filter_Checkbox_Extended extends \Bricks\Filter_Checkbox {
public $scripts = [ 'bricksFilters', 'checkboxExtended' ];
public function enqueue_scripts() {
parent::enqueue_scripts();
wp_enqueue_script( 'filter-checkbox-extended' );
}
}
Bump. Would really like to see this happen. Seems like such an easy thing to implement and would be useful for developers.
This is a nice solution but my problem with this is, that if ever they change a property like $scripts that you override, you would have to manually adjust it in your code I guess. It’s cleaner if they would provide a hook for this.
That’s why I’m using filters such as bricks/element/set_root_attributes to enqueue styles /scripts and bricks/elements/{element_name}/scripts to extend the scripts instead replacing the $scripts property.
But there are a few pitfalls, like e.g. Elements that are being rendered with a VUE-JS Template or that you need to enqueue your Assets inside the Canvas/Iframe no matter what, to apply those styles whenever a new Element is added via the builder etc.