Home Forums Gutenberg How to handle embedded JavaScript in the footer with Gutenberg blocks


How to handle embedded JavaScript in the footer with Gutenberg blocks

  • 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>
       <?php foreach($pictures as $picture) { ?>
       /*... do stuff in javascript */
       <?php } ?>
    <?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:


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


      "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"


    <?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'); ?>
                    <?php $pictureID++;
    		<?php }; // end foreach ?>
    <?php } ?>

    Any help would be much appreciated. Thanks.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.