Merge pull request #1 from pronamic/develop

Develop

instructions.txt → README.md

@@ -1,5 +1,6 @@
 - Run `npm run start` for development
 - Run `npm run build` for production
+- Run `npm run copy` for vendor scripts
 - Run `npm run js-build` for frontend scripts
 - Create pot file with `wp i18n make-pot ./ languages/pronamic-slider.pot`
 - Create json files with `wp i18n make-json pronamic-slider-nl_NL.po --no-purge`

blocks-src/slide/block.json

@@ -0,0 +1,12 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "pronamic/slide",
+	"version": "1.0.0",
+	"title": "Pronamic Slide",
+	"category": "pronamic",
+	"parent": "pronamic/slider",
+	"icon": "smiley",
+	"textdomain": "pronamic-slider",
+	"editorScript": "file:./index.js"
+}

blocks-src/slide/index.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+import metadata from './block.json';
+
+registerBlockType(
+	metadata.name, {
+		edit: ( { attributes, setAttributes } ) => {
+			return <div className={ 'swiper-slide' }><InnerBlocks /></div>;
+		},
+		save: ( { attributes } ) => {
+			return <div className={ 'swiper-slide' }><InnerBlocks.Content /></div>;
+		},
+	}
+);

blocks-src/slider/block.json

@@ -0,0 +1,35 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "pronamic/slider",
+	"version": "1.0.0",
+	"title": "Pronamic Slider",
+	"category": "pronamic",
+	"icon": "smiley",
+	"attributes": {
+		"autoplay" : {
+			"type": "boolean",
+			"default": false
+		},
+		"navigation" : {
+			"type": "boolean",
+			"default": true
+		},
+		"pagination" : {
+			"type": "boolean",
+			"default": true
+		},
+		"effect" : {
+			"type": "string"
+		},
+		"slidesPerView" : {
+			"type": "integer",
+			"default": 1
+		}
+	},
+	"textdomain": "pronamic-slider",
+    "editorScript": "file:./index.js",
+    "editorStyle": "file:./index.css",
+	"viewScript": ["pronamic-query-loop-slider"],
+	"viewStyle": [ "pronamic-query-loop-slider" ]
+}

blocks-src/slider/editor.scss

@@ -0,0 +1,16 @@
+/**
+ * Editor styles for backend
+ */
+.block-editor-block-list__block[data-type="pronamic/slider"] {
+	max-width: 100%;
+}
+
+.pronamic-block-slider {
+	border: 3px dashed #ccd0d4;
+	padding: 30px;
+
+	.swiper-slide {
+		border: 3px dashed #ccd0d4;
+		padding: 30px;
+	}
+}

blocks-src/slider/index.js

@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { TextControl, SelectControl, ToggleControl, RangeControl, PanelBody } from '@wordpress/components';
+import { registerBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+import metadata from './block.json';
+
+import './editor.scss';
+
+registerBlockType(
+	metadata.name, {
+		edit: ( { attributes, setAttributes } ) => {
+			const allowedBlocks = [ 'pronamic/slide' ];
+
+			const autoplay      = attributes.autoplay ? true : false;
+			const effect        = attributes.effect ? attributes.effect : 'slide';
+			const slidesPerView = attributes.slidesPerView ? attributes.slidesPerView : 1;
+			const navigation    = attributes.navigation ? true : false;
+			const pagination    = attributes.pagination ? true : false;
+
+			const blockClasses = `swiper pronamic-block-slider`;
+
+			var swiperConfig = {
+				'autoplay': autoplay,
+				'effect': effect,
+				'slidesPerView': slidesPerView,
+				'navigation': navigation,
+				'pagination': pagination
+			};
+
+			swiperConfig = JSON.stringify( swiperConfig );
+
+			return (
+				<div>
+					<InspectorControls>
+						<PanelBody title={ __( 'Settings','pronamic-slider' ) } initialOpen={ true }>
+							<RangeControl
+								label={ __( 'Slides per view', 'pronamic-slider' ) }
+								value={ attributes.slidesPerView }
+								onChange={ ( slidesPerView ) => setAttributes( { slidesPerView } ) }
+								min={ 1 }
+								max={ 10 }
+							/>
+
+							<ToggleControl
+								label={ __( 'Autoplay', 'pronamic-slider' ) }
+								checked={ attributes.autoplay }
+								onChange={ ( autoplay ) => setAttributes( { autoplay } ) }
+							/>
+
+							<ToggleControl
+								label={ __( 'Pagination', 'pronamic-slider' ) }
+								checked={ attributes.pagination }
+								onChange={ ( pagination ) => setAttributes( { pagination } ) }
+							/>
+
+							<ToggleControl
+								label={ __( 'Navigation', 'pronamic-slider' ) }
+								checked={ attributes.navigation }
+								onChange={ ( navigation ) => setAttributes( { navigation } ) }
+							/>
+
+							<SelectControl
+								label={ __( 'Effect', 'pronamic-slider' ) }
+								value={ attributes.effect }
+								options={ [
+									{ label: __( 'Slide', 'pronamic-slider' ), value: 'slide' },
+									{ label: __( 'Fade', 'pronamic-slider' ), value: 'fade' },
+								] }
+								onChange={ ( effect ) => setAttributes( { effect } ) }
+							/>
+						</PanelBody>
+					</InspectorControls>
+
+					<div className={ blockClasses } data-swiper-settings={ swiperConfig }>
+						<div class="swiper-wrapper">
+							<InnerBlocks allowedBlocks={ allowedBlocks } />
+						</div>
+					</div>
+				</div>
+			);
+		},
+		save: ( { attributes } ) => {
+			const autoplay      = attributes.autoplay ? true : false;
+			const effect        = attributes.effect ? attributes.effect : 'slide';
+			const slidesPerView = attributes.slidesPerView ? attributes.slidesPerView : 1;
+			const pagination    = attributes.pagination ? true : false;
+			const navigation    = attributes.navigation ? true : false;
+
+			const blockClasses = `swiper pronamic-block-slider`;
+
+			var swiperConfig = {
+				'autoplay': autoplay,
+				'effect': effect,
+				'slidesPerView': slidesPerView,
+				'pagination': pagination,
+				'navigation': navigation
+			};
+
+			swiperConfig = JSON.stringify( swiperConfig );
+
+			return (
+				<div className={ blockClasses } data-swiper-settings={ swiperConfig }>
+					<div class="swiper-wrapper">
+						<InnerBlocks.Content />
+					</div>
+				</div>
+			);
+		},
+	}
+);

blocks/slide/block.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "pronamic/slide",
+  "version": "1.0.0",
+  "title": "Pronamic Slide",
+  "category": "pronamic",
+  "parent": "pronamic/slider",
+  "icon": "smiley",
+  "textdomain": "pronamic-slider",
+  "editorScript": "file:./index.js"
+}

blocks/slide/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'd531c795a7a49ad1a196');

blocks/slider/block.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "pronamic/slider",
+  "version": "1.0.0",
+  "title": "Pronamic Slider",
+  "category": "pronamic",
+  "icon": "smiley",
+  "attributes": {
+    "autoplay": {
+      "type": "boolean",
+      "default": false
+    },
+    "navigation": {
+      "type": "boolean",
+      "default": true
+    },
+    "pagination": {
+      "type": "boolean",
+      "default": true
+    },
+    "effect": {
+      "type": "string"
+    },
+    "slidesPerView": {
+      "type": "integer",
+      "default": 1
+    }
+  },
+  "textdomain": "pronamic-slider",
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css",
+  "viewScript": [
+    "pronamic-query-loop-slider"
+  ],
+  "viewStyle": [
+    "pronamic-query-loop-slider"
+  ]
+}

blocks/slider/index-rtl.css

@@ -0,0 +1 @@
+.block-editor-block-list__block[data-type="pronamic/slider"]{max-width:100%}.pronamic-block-slider,.pronamic-block-slider .swiper-slide{border:3px dashed #ccd0d4;padding:30px}

blocks/slider/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => 'f869356a49703e7ab04e');

blocks/slider/index.css

@@ -0,0 +1 @@
+.block-editor-block-list__block[data-type="pronamic/slider"]{max-width:100%}.pronamic-block-slider,.pronamic-block-slider .swiper-slide{border:3px dashed #ccd0d4;padding:30px}

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'eb990b90c7b2cf34ce2913dd0da92131');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => 'd008f6efe91c281346e6');