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.Why does this happen with a static block ? Isn't viewScript supposed to handle this ?

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": "m/simple-slider",
    "version": "0.1.0",
    "title": "Horizontal slider.",
    "category": "gutenberg-blocks",
    "icon": "slides",
    "description": "A simple slider",
    "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', 'm_gsbp_enqueue_swiper_styles');

function m_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 ?