Start a Project

Using ACF blocks to conditionally enqueue scripts

Adam - a lead web developer with Wibble web design Belfast
By Adam Cherry 5 June, 20205 MIN READ
Conditionally Enqueuing with ACF Blocks | Wibble Blog

There are many situations in which you may want to only enqueue specific JavaScript and CSS libraries, dependant on which page a user is viewing. The main reason for doing so is to prevent loading these libraries on every single page, rather than where it is needed. In WordPress, this is very easy to achieve. You can use WordPress functions such as is_page(page-id) in order to enqueue a script on a specific page.

In other scenarios, you may only want to enqueue these libraries if a specific page contains a certain Gutenberg Block, in this case, a custom ACF Block. On a recent project, there was a use case for the creation of a custom ACF Gallery block, which would use chocolat.js to enable lightbox capabilities. I wanted to have these libraries available everywhere on the site but only if the page/post contained my custom gallery block. After doing what every struggling developer does, I went to Google for this issue but I found there was very little covering this topic.

Hence in this blog, I will be doing a quick rundown of how to achieve this using the has_block() function along with small parts of custom code.

Creation of custom gallery

First, we have to register our custom ACF Block. I do so by using the acf_register_block_type function (you can find more on this in our blog Creating Gutenberg Blocks with ACF). Once the block has been registered, we create the gallery field to appear when the block is selected. This can be done by going to the Custom Fields section and creating a gallery field that will be linked to our custom gallery block.

Now that the block is registered and we have our gallery fields linked up, we can now create the custom code for the gallery block. I have created a directory in my theme folder called “blocks” and in there I will create the file block-news-gallery.php (Note: I have registered my block directory and block prefix beforehand, you can read more about this in the blog mentioned above).

Custom Gallery Block Code Sample
Custom block created with Tailwind CSS

As we are using a gallery field, I have created a simple foreach loop to display every image in the gallery in a half column structure. I have also defined are lightbox properties, with chocolat.js we have to define are lightbox wrapper (in this case the chocolat-parent class) and our lightbox images which are wrapped in an A tag with the class chocolat-image.

Now with the gallery layout set, we can now create a new post/page and select our custom gallery block by searching for it in the WordPress block editor.

Searching for custom gallery block
Custom gallery selected in content editor

In order to specifically enqueue the lightbox JS libraries, we need to use the WordPress function has_block(). We can now create a piece of code that will check if a post or page contains our new custom block. The has_block function requires a category before the block name, as this is a custom block the category is “acf” (to check for any of the default WordPress blocks, you would simply type core as the category). With the category structure sorted we use an if statement to check if has_block(‘acf/news-gallery’), the parameters satisfy, the lightbox libraries are then enqueued on this page.

Enqueuing Via Custom Block Code

With the libraries enqueued we now have a fully functioning lightbox gallery.

Custom gallery in use
Custom gallery lightbox in action

This lightbox tutorial is only one example, you could create your own slider/carousel block and enqueue the files using the above method. This technique not only reduces load-times/console errors from enqueuing libraries on every page but could potentially change the way you structure WordPress sites completely. I have went from creating single use templates for pages with a set structure to using blocks to give you and the user the overall freedom of bringing cool features from one page over to another.


Share this blog post

Adam - a lead web developer with Wibble web design Belfast

Adam Cherry

More from author