Home Forums Gutenberg Script not loading from block.json


Script not loading from block.json

  • I am struggling to find an answer to this issue, and I am not sure what I am doing wrong. I have looked at several examples of adding JS files to the block.json, and I am doing it the same way as the examples. I am using the 2021 WordPress theme as my parent theme and the latest version of WordPress/ACF. I have registered the block, the CSS files show up in the inline CSS, but my scripts are not working/showing up at all. Any help is appreciated, thank you!


        "name": "acf/gallery-slider",
        "title": "Gallery Slider",
        "description": "A custom Gallery Slider.",
        "style": [ "file:./owl.carousel.min.css", "file:./owl.theme.default.min.css", "file:./gallery-slider.css" ],
        "script": "file:./odm-owl-carousel.js",
        "category": "ODM",
        "icon": "cover-image",
        "keywords": [ "ODM", "gallery", "slider", "owl" ],
        "acf": {
            "mode": "preview",
            "renderTemplate": "gallery-slider.php"


    window.onload = function() {
        setTimeout(function() {
        }, 2000); // 2000 milliseconds = 2 seconds
    jQuery(document).ready(function($) {
        console.log('odm-owl-carousel.js loaded 1');
            loop: true,
            margin: 0,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 1,
                875: {
                    items: 3, // Display 3 items on screens wider than 768px
            nav: true, // Enable navigation
            navText: ['<img src="/wp-content/uploads/2023/08/arrow-orange-light.png" alt="arrow" />', '<img src="/wp-content/uploads/2023/08/arrow-orange-light.png" alt="arrow" />'], // Custom nav icons
            center: true, // Center the active item
            onInitialized: function(event) {
                // Add "large" class to the initially centered item
                var centerItem = jQuery('');
            onTranslated: function(event) {
                // Remove "large" class from all items
                // Add "large" class to the currently active (center) item
                var centerItem = jQuery('');
  • I am not seeing any PHP or console errors from the backend or frontend.

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

You must be logged in to reply to this topic.