Merge pull request #143 from Automattic/add/carousel

Carousel Block

newspack-blocks.php

@@ -159,7 +159,7 @@ public static function dependencies_from_path( $path ) {
 	 *
 	 * @return string Class list separated by spaces.
 	 */
-	public static function block_classes( $type, $attributes = array() ) {
+	public static function block_classes( $type, $attributes = array(), $extra = array() ) {
 		$align   = isset( $attributes['align'] ) ? $attributes['align'] : 'center';
 		$classes = array(
 			"wp-block-newspack-blocks-{$type}",
@@ -168,6 +168,9 @@ public static function block_classes( $type, $attributes = array() ) {
 		if ( isset( $attributes['className'] ) ) {
 			array_push( $classes, $attributes['className'] );
 		}
+		if ( is_array( $extra ) && ! empty( $extra ) ) {
+			$classes = array_merge( $classes, $extra );
+		}
 		return implode( $classes, ' ' );
 	}
 

package.json

@@ -23,7 +23,9 @@
     "test": "tests"
   },
   "private": true,
-  "dependencies": {},
+  "dependencies": {
+    "swiper": "4.5.1"
+  },
   "scripts": {
     "build:webpack": "calypso-build --config='./webpack.config.js'",
     "clean": "rm -rf dist/",

src/blocks/carousel/create-swiper.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { mapValues, merge } from 'lodash';
+import Swiper from 'Swiper';
+import '../../../node_modules/swiper/dist/css/swiper.css';
+
+export default function createSwiper(
+	container = '.swiper-container',
+	params = {},
+	callbacks = {}
+) {
+	const defaultParams = {
+		effect: 'slide',
+		grabCursor: true,
+		init: true,
+		initialSlide: 0,
+		navigation: {
+			nextEl: '.swiper-button-next',
+			prevEl: '.swiper-button-prev',
+		},
+		pagination: {
+			bulletElement: 'button',
+			clickable: true,
+			el: '.swiper-pagination',
+			type: 'bullets',
+		},
+		preventClicksPropagation: false /* Necessary for normal block interactions */,
+		releaseFormElements: false,
+		setWrapperSize: true,
+		touchStartPreventDefault: false,
+	};
+	// const [ { default: Swiper } ] = await Promise.all( [
+	// 	import( /* webpackChunkName: "swiper" */ 'swiper' ),
+	// ] );
+	return new Swiper( container, merge( {}, defaultParams, params ) );
+}