• Resolved iontulburedev

    (@iontulburedev)


    Hi. I am building static block slider (Swiper JS). Besides importing the JS & CSS files with `”viewScript”:

    "viewScript": "file:./view.js"

    i still need to enqueue the JS & CSS files with php like the old ways. If i don’t enqueue assets then the block won’t work on frontend.

    This is my view.js file :

    import Swiper from 'swiper';
    import { Autoplay, Keyboard, Navigation, Pagination, Scrollbar } from 'swiper/modules';
    
    // Import Swiper styles
    // import 'swiper/css';
    // import 'swiper/css/navigation';
    // import 'swiper/css/pagination';
    // import 'swiper/css/scrollbar';
    
    // import styles bundle
    import 'swiper/css/bundle';
    
    // import "./styles.css";
    
    // This should only be output on the frontend of the site - NOT the editor
    
    document.addEventListener('DOMContentLoaded', () => {
        const swiper = new Swiper('.swiper', {
    
            // configure Swiper to use modules
            modules: [Navigation, Pagination, Autoplay, Keyboard, Scrollbar],
    
            // Optional parameters
            direction: 'horizontal',
            autoplay: {
                delay: 2000,
            },
            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',
            },
        });
    })

    This is my block.json file :

    {
        "$schema": "https://schemas.wp.org/trunk/block.json",
        "apiVersion": 3,
        "name": "mcx/simple-slider",
        "version": "0.1.0",
        "title": "Horizontal & vertical slider.",
        "category": "gutenberg-blocks",
        "icon": "slides",
        "description": "A simple slider with horizontal or vertical layout.",
        "attributes": {
            "images": {
                "type": "array",
                "default": []
            }
        },
        "example": {
            "attributes": {
                "preview" : true
            }
        },
        "supports": {
            "html": true,
            "color": {
                "background": true,
                "text": true
            },
            "spacing": {
                "padding": true,
                "margin": true
            },
            "anchor": true,
            "align": true
        },
        "textdomain": "simple-slider",
        "editorScript": "file:./index.js",
        "editorStyle": "file:./index.css",
        "style": "file:./style-index.css",
        "viewScript": "file:./view.js"
    }

    And this is how i enqueue via php :

    add_action('wp_enqueue_scripts', 'mcx_gsbp_enqueue_swiper_styles');
    
    function mcx_gsbp_enqueue_swiper_styles()
    {
    
        // Enqueue Swiper library JS
        wp_enqueue_script('swiper-js', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), '6.8.4', true);
    
        // Enqueue Swiper library CSS
        wp_enqueue_style('swiper-css', 'https://unpkg.com/swiper/swiper-bundle.min.css', array(), '6.8.4');
    }

    Am i doing something wrong or this is the intended behavior ?

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Static blocks: viewScript enqueue js on frontend ?’ is closed to new replies.