How to handle embedded JavaScript in the footer with Gutenberg blocks

• cannon303

• April 17, 2023 at 8:55 am

Hi I’m familiar with ACF (great plugin) but only just getting to grips with using it in the WordPress Gutenberg blocks. I’m creating a pop up lightbox slider gallery block and have successfully got the thumbnail pictures to render how I want them in the front end but I now need to create the javascript to handle the pop up slider.

Previously I would just create the javascript in the footer.php like this:

<?php if get_field('pictures'){ ?>
<script src="<?php bloginfo('template_url'); ?>/assets/js/lightbox_slider_plugin.js"></script>
<script>
   <?php foreach($pictures as $picture) { ?>
   /*... do stuff in javascript */
   <?php } ?>
</script>
<?php } ?>

However this doesn’t work because that field is now not accessible like that. I’m struggling to find what is the correct way to do this. Can anyone point me in the right direction please?

Here is what I’ve got working so far:

functions.php:

/**
 * ACF Blocks
 */
add_action( 'init', 'register_acf_blocks' );
function register_acf_blocks() {
	register_block_type( __DIR__ . '/blocks/gallery' );
}

gallery/block.json

{
  "name": "acf/gallery",
  "title": "Gallery Block",
  "description": "A custom block for pictures.",
  "editorStyle": "file:./gallery.css",
  "category": "formatting",
  "icon": "format-gallery",
  "keywords": ["gallery", "pictures", "images"],
  "supports": {
    "mode": false
  },
  "acf": {
    "mode": "edit",
    "renderTemplate": "gallery.php"
  },
  "align": "full"
}

gallery.php

<?php if(get_field('pictures'){ 
global $img;
$pictureID = 1; ?>
<div class="container">
		<?php foreach($pictures as $picture) { ?>
			<div class="picture">
				<a class="lightShow<?php echo $pictureID; ?>" href="#">
				<?php $img = $picture;
                               get_template_part('includes/picture-thumbnail'); ?>
				</a>
                       </div>
                <?php $pictureID++;
		<?php }; // end foreach ?>
</div>
<?php } ?>

Any help would be much appreciated. Thanks.