How to use enqueue() function with Bud

sage
,
1

Greetings to all. I’m trying to figure out how to use the enqueue () function from ACF Composer (GitHub - Log1x/acf-composer: Compose ACF Fields, Blocks, Widgets, and Option Pages with ACF Builder on Sage 10).

I’m using Sage10 with Bud.

I have defined scripts in bud.config.js like that:

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      logoSlider: ["@scripts/logoSlider", "@styles/logoSlider"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets("images")

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch("resources/views/**/*", "app/**/*")

    /**
     * Target URL to be proxied by the dev server.
     *
     * This should be the URL you use to visit your local development server.
     */
    .proxy("http://local.test")

    /**
     * Development URL to be used in the browser.
     */
    .serve("http://0.0.0.0:3000");
};

Then in the block I try to add logoSlider as follows:

    /**
     * Assets to be enqueued when rendering the block.
     *
     * @return void
     */
    public function enqueue()
    {
        //
        wp_enqueue_style('slick-slider-css', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css', array(), null, 'all');
        wp_enqueue_script('slick-slider-js', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery'), null, true);

        add_action('enqueue_block_editor_assets', function () {
            enqueueJs('logoSlider');
        }, 100);
    }

I also tried command enque() to load the whole bundle, but CSS doesn’t load either.

I have one more question on this matter. If I have two blocks that use the same CSS and JS package from npm packages. The result of this should be that for the first block the whole bundle with CSS and JS is loaded together with its own JS file and for the second block only the last own JS, because the CSS and JS bundles will be loaded on the page from the previous block. ( For example, I have two blocks that use a slick slider)

Thank you so much for any help.

2

Hello,

Maybe you can try :

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

Don’t forget to add :

use function Roots\bundle;

In top of your file.

3

Thanks for you answer.

However, I still failed to get it up and running. The bundle is not on page after load :confused:

Right now I have these files:

bud.config.js

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      swiperBundle: ["@scripts/swiperBundle", "@styles/swiperBundle"],
      logoSlider: ["@scripts/logoSlider"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets("images")

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch("resources/views/**/*", "app/**/*")

    /**
     * Target URL to be proxied by the dev server.
     *
     * This should be the URL you use to visit your local development server.
     */
    .proxy("http://local.test")

    /**
     * Development URL to be used in the browser.
     */
    .serve("http://0.0.0.0:3000");
};

slider-try.php (I added the use function Roots\bundle; on top of the file).

    /**
     * Assets to be enqueued when rendering the block.
     *
     * @return void
     */
    public function enqueue()
    {
        add_action('wp_enqueue_scripts', function () {
            bundle('swiperBundle')->enqueue();
        }, 100);

        add_action('wp_enqueue_scripts', function () {
            bundle('logoSlider')->enqueueJs();
        }, 100);
    }

logoSlider.js

import { domReady } from "@roots/sage/client";

/**
 * app.main
 */
const main = async (err) => {
  if (err) {
    // handle hmr errors
    console.error(err);
  }

  // application code

  console.log("my logo slider");

  $(document).ready(function () {
    const swiper = new Swiper(".swiper", {
      // Optional parameters
      direction: "vertical",
      loop: true,

      // If we need pagination
      pagination: {
        el: ".swiper-pagination",
      },

      // Navigation arrows
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // And if we need scrollbar
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });
  });
};

/**
 * Initialize
 *
 * @see https://webpack.js.org/api/hot-module-replacement
 */
domReady(main);
import.meta.webpackHot?.accept(main);

swiperBundle.js

import Swiper, { Navigation, Pagination } from "swiper";

swiperBundle.scss

@import "swiper/css";
@import "swiper/css/navigation";
@import "swiper/css/pagination";

.swiper {
  background-color: blue !important;
  color: gold !important;
}

Either the CSS or JS files are not appearing on page.

4

I think you have error in slider-try.php

Could you try :

public function enqueue()
{
        bundle('swiperBundle')->enqueue();
        bundle('logoSlider')->enqueueJs();
}

If i’m not mistaken, the enqueue is made by acf.

See enqueue_assets in ACF | acf_register_block_type()

2 Likes
5

Thank you so much for your answer. It seems to me to be right. Even JS/CSS files are not loaded multiple times.

6

I tried this solution and it works flawlessly. It should be explained in Acf composer docs, in case someone wants to do a PR…

1 Like