Support

Account

Register Login

Home › Forums › Gutenberg › Add script with ACF fields to footer within custom block

Solving

Add script with ACF fields to footer within custom block

  • I am trying to insert a script tag with ACF fields into my footer. I am doing this within a custom block.

    First off, I’m on WordPress 5.9 with ACF 5.12-beta2.

    In functions.php, I register the block:

    
add_action('acf/init', 'my_register_blocks');
function my_register_blocks()
{

  if (function_exists('acf_register_block_type')) {

    acf_register_block_type(array(
      'name'              => 'slider',
      'title'             => __('Slider'),
      'description'       => __('A custom slider block.'),
      'render_template'   => 'inc/blocks/slider/slider.php',
      'category'          => 'formatting',
      'icon'         => 'images-alt2',
      'align'        => 'full',
      'enqueue_assets'   => function () {
        wp_enqueue_script('swiper', 'https://unpkg.com/swiper@8/swiper-bundle.min.js', array(), '1.8.1', true);
      },
    ));
  }
}

    Next, I add my HTML/PHP into the slider.php file I’ve specified. At the bottom of the following code block, you’ll see that I’m inserting a script tag into the footer. It does insert the script tag, but I cannot use ACF fields within this script tag. It doesn’t throw an error, but it simply does not output on the front end. Looks like something to do with the ACF field being put within a function.

    
<div>Some HTML/PHP for slider markup with ACF fields</div>

<?php

function test()
{

// This if statement is needed after WP 5.8 or it throws an error in the back end, it seems. Don't think it's related
if ( is_admin() ) {
    return;
}

?>

<script>

var swiper = new Swiper(".swiper", {
    slidesPerView: <?php the_field('slides_per_view'); ?>
});

</script>

<?php
}

add_action('wp_footer', 'test', 100);

?>

    I’ve cut down this code to show the relevant parts, but you get the point. The ‘slides_per_view’ field is simply a number field.

    It does output the number properly when the script tag is outside of the function, but then I’m left with a script tag in the middle of the body (wherever the block is placed on the page) and I need to enqueue the required swiper script (this one: https://unpkg.com/swiper@8/swiper-bundle.min.js) in the head rather than in the footer, which I would prefer not to do.

    Any ideas?

    Thanks!

  • Any ideas?

  • Try it like this:

    
<script>
(function(){
  var swiper = new Swiper(".swiper", {
      slidesPerView: <?php the_field('slides_per_view'); ?>
  });
})();
</script>

  • Another option is to use wp_add_inline_script() that can add your code after the script tag that loads https://unpkg.com/swiper@8/swiper-bundle.min.js

  • Hi @hube2 , thanks for the help.

    Your first comment unfortunately didn’t work – same results as before. For the wp_add_inline_script option, how do I add my php into that script?

    The following code causes issues because I’m trying to put PHP in a JavaScript string (the $data parameter of wp_add_inline_script), I think:

    
<?php

wp_add_inline_script('swiper', '

var swiper = new Swiper(".swiper", {
      slidesPerView: <?php the_field("slides_per_view"); ?>
  });

')

?>

  • <?php

    $script = ‘var swiper = new Swiper(“.swiper”, {slidesPerView:’.get_field(”slides_per_view”.’});’;
    wp_add_inline_script(‘swiper’, $script)

  • Doh – dumb mistake on my part. Awesome, this works. Thanks.

    One last thing. This doesn’t insert the script into the editor. Any way I can have it insert on the admin side as well? I’d love to have it work with the new full site editor.

  • Unfortunately, I can’t help you with that. Normally I would say to enqueue the script on admin_enqueue_scripts. However, that would not be for gutenberg. The new editor has a different method. I don’t develop for gutenberg, but I seem to remember reading something about adding editor assets or some such thing.

  • No prob, but I just tried something that you may be able to advise on.

    When I register the block in functions.php, I can use that wp_add_inline_script to execute code in the back end. But ACF doesn’t work in functions.php. Probably because it doesn’t know which block (or at least post) to pull this “slides_per_view” value from.

    I think you need to target the post ID if you use ACF in functions.php, no? Which is why the last section of this doesn’t work as it does in my slider.php file. 

    
acf_register_block_type(array(
      'name'              => 'slider',
      'title'             => __('Slider'),
      'description'       => __('A custom slider block.'),
      'render_template'   => 'inc/blocks/slider/slider.php',
      'category'          => 'formatting',
      'icon'         => 'images-alt2',
      'align'        => 'full',
      'enqueue_assets'   => function () {
        wp_enqueue_script('swiper', 'https://unpkg.com/swiper@8/swiper-bundle.min.js', array(), '1.8.1', true);

        $script = ‘var swiper = new Swiper(“.swiper”, 
        {slidesPerView:’.get_field(”slides_per_view”.’});’;
        
        wp_add_inline_script(‘swiper’, $script);
      }

    No worries if you’re not sure. You’ve helped plenty.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.