Enqueue scripts in ACF block with bud and acf-composer

bud
1

Hello,

I’ve been having some trouble enqueing scripts in ACF blocks.
Here’s my setup :

  • sage10
  • bud
  • acf-composer

Bud config:

  app
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
      example: ['@scripts/blocks/example'],
    })

ACF block enqueue function:

    public function enqueue() {
        bundle('example')->enqueue();
    }

This is working fine in the frontend but not in editor. You can check by adding a simple console.log(‘test’) to editor.js or blocks/example.js file, and it doesn’t show in the editor.

Alternatively, the following seems to be working for simple js:

ACF block enqueue function:

    public function enqueue() {
        wp_enqueue_script('example_js', \Roots\asset('example.js')->uri(), [], '', true);
    }

Then console.log(‘test’) is showing both in the frontend and in the editor.

But then I tried a more complex script for the block, importing Swiper. Using wp_enqueue_script() doesn’t work anymore as swiper is not initialized. Using the bundle() function makes it work in the frontend but still breaks js in the editor.

Am I doing something wrong ? I can’t get why this is happening :wink:

BTW thank you for all your amazing work, I’ve been using Sage for years and I love it !

2

I don’t personally use the enqueue method so I may not be much help but, Sage uses enqueue_block_editor_assets (docs) to enqueue assets in the block editor.

See /app/setup.php

3

Thanks for your fast reply !

I’ve seen it as it’s how the editor.js file is added. But I’ve been using the enqueue() function in ACF blocks to load scripts only when the block is used.

I could of course add all my blocks’ scripts in the editor, but I would still need the enqueue() function in ACF blocks for the frontend. And then I would still have the issues mentioned.

4

In the meantime I did the following, but I don’t find it elegant :wink:

ACF block enqueue function:

    public function enqueue() {
        if (!is_admin())
        {
            bundle('example')->enqueue();
        }
    }

setup.php:

add_action('enqueue_block_editor_assets', function () {
    bundle('editor')->enqueue();
    bundle('example')->enqueue();
}, 100);

If you have a better way or can explain why I’m having those issues I’m interested !

Thanks

5

After adding the code, I’m getting an error

I’ve put the code below in the head of the block file.

use function Roots\bundle;

But I’m getting the error below

Fatal error: Uncaught TypeError: Roots\Acorn\Assets\Bundle::__construct(): Argument #2 ($bundle) must be of type array, null given

What am I doing wrong?

6

Hi @wouter_dev !

You should check two things.

First, in your block enqueue method, the bundle function needs a parameter.

Second, you need to list the scripts and styles in the bud config file. I believe it’s a bud.config.json file located at your theme’s root.

Look how I set it in my first post. For a block Example, I added an entry named ‘example’ in the bud config file, which is an array containing the needed scripts and/or styles for the block. Then in the bundle function I set the parameter to be this entry ‘example’.

Even if you have only one script or style file, it still needs to be an array.

Hope it’s clear enough :wink:

7

Thanks @mk2lj

But this is what I have added to the enqueue section:

public function enqueue() {
       bundle('maps')->enqueue();
    }

And in bud.config.js I have have added the maps as the third line:

    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
      maps: ['@scripts/maps'],
    })

After running yarn build it worked :wink:

8

@wouter_dev

That’s it. Just make sure it doesn’t break your JS in the admin when you use your maps block as it did for me.

If it does you can read my previous post where I explained how I solved it.