Title: Static blocks: viewScript enqueue js on frontend ?
Last modified: April 18, 2024

---

# Static blocks: viewScript enqueue js on frontend ?

 *  Resolved [iontulburedev](https://wordpress.org/support/users/iontulburedev/)
 * (@iontulburedev)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/static-blocks-viewscript-enqueue-js-on-frontend/)
 * Hi. I am building static block slider (Swiper JS). Besides importing the JS &
   CSS files with `”viewScript”:
 *     ```wp-block-code
       "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 :
 *     ```wp-block-code
       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 :
 *     ```wp-block-code
       {
           "$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 :
 *     ```wp-block-code
       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 ?
    -  This topic was modified 2 years, 1 month ago by [iontulburedev](https://wordpress.org/support/users/iontulburedev/).
    -  This topic was modified 2 years, 1 month ago by [iontulburedev](https://wordpress.org/support/users/iontulburedev/).

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

 *  Thread Starter [iontulburedev](https://wordpress.org/support/users/iontulburedev/)
 * (@iontulburedev)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/static-blocks-viewscript-enqueue-js-on-frontend/#post-17709430)
 * Forgot to mention that I used wordpress/create-block [https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/)
 *  Thread Starter [iontulburedev](https://wordpress.org/support/users/iontulburedev/)
 * (@iontulburedev)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/static-blocks-viewscript-enqueue-js-on-frontend/#post-17709773)
 * Posted the answer here: [https://wordpress.stackexchange.com/questions/424842/gutenberg-static-blocks-viewscript-doesnt-enqueue-js-on-frontend/424889#424889](https://wordpress.stackexchange.com/questions/424842/gutenberg-static-blocks-viewscript-doesnt-enqueue-js-on-frontend/424889#424889)
   
   In short: declare viewStyle in block.json`{ "viewStyle": [ "file:./view.css","
   example-view-style" ] }`

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

The topic ‘Static blocks: viewScript enqueue js on frontend ?’ is closed to new 
replies.

 * ![](https://ps.w.org/gutenberg/assets/icon-256x256.jpg?rev=1776042)
 * [Gutenberg](https://wordpress.org/plugins/gutenberg/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/gutenberg/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/gutenberg/)
 * [Active Topics](https://wordpress.org/support/plugin/gutenberg/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/gutenberg/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/gutenberg/reviews/)

## Tags

 * [blocks](https://wordpress.org/support/topic-tag/blocks/)
 * [gutenberg](https://wordpress.org/support/topic-tag/gutenberg/)
 * [swiper](https://wordpress.org/support/topic-tag/swiper/)

 * 2 replies
 * 1 participant
 * Last reply from: [iontulburedev](https://wordpress.org/support/users/iontulburedev/)
 * Last activity: [2 years, 1 month ago](https://wordpress.org/support/topic/static-blocks-viewscript-enqueue-js-on-frontend/#post-17709773)
 * Status: resolved