Static blocks: viewScript enqueue js on frontend ?
-
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.