Script not loading from block.json

• jgruorch

• September 1, 2023 at 2:47 pm

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!

Block.json

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

odm-owl-carousel.js

window.onload = function() {
    setTimeout(function() {
        console.log("working");
    }, 2000); // 2000 milliseconds = 2 seconds
};

jQuery(document).ready(function($) {
    console.log('odm-owl-carousel.js loaded 1');
    jQuery('.owl-carousel').owlCarousel({
        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(event.target).find('.owl-item.center');
            centerItem.addClass('large');
        },
        onTranslated: function(event) {
            // Remove "large" class from all items
            jQuery('.owl-item').removeClass('large');

            // Add "large" class to the currently active (center) item
            var centerItem = jQuery(event.target).find('.owl-item.center');
            centerItem.addClass('large');
        }
    });
});

.

• jgruorch

• September 1, 2023 at 3:07 pm

I am not seeing any PHP or console errors from the backend or frontend.