first commit

wp-content/plugins/canvas/components/slider-gallery/block/block-rtl.css

@@ -0,0 +1,13 @@
+.cnvs-block-jg-add-media-button button.components-button {
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	width: 100%;
+	height: auto;
+	margin-top: 20px;
+	padding: 20px;
+	-webkit-box-shadow: none !important;
+	box-shadow: none !important;
+	border: none;
+	border-radius: 0;
+}

wp-content/plugins/canvas/components/slider-gallery/block/block-slider-gallery-rtl.css

@@ -0,0 +1,37 @@
+/**
+ * All of the CSS for your public-facing functionality should be
+ * included in this file.
+ */
+/**
+ * Environment for all styles (variables, additions, etc).
+ */
+/*--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+.cnvs-gallery-type-slider.gallery {
+	display: block;
+}
+
+.cnvs-gallery-type-slider .gallery-item {
+	width: 100%;
+	max-width: 100%;
+	padding: 0;
+}
+
+.cnvs-gallery-type-slider .wp-caption-text {
+	margin-top: 1rem;
+}
+
+.cnvs-gallery-type-slider figure {
+	margin-bottom: 0;
+}
+
+.cnvs-gallery-type-slider img {
+	width: 100%;
+	height: auto;
+}
+
+.cnvs-gallery-type-slider > .gallery-item:not(:first-child) {
+	position: fixed;
+	top: -9999px;
+	right: -9999px;
+}

wp-content/plugins/canvas/components/slider-gallery/block/block-slider-gallery.css

@@ -0,0 +1,37 @@
+/**
+ * All of the CSS for your public-facing functionality should be
+ * included in this file.
+ */
+/**
+ * Environment for all styles (variables, additions, etc).
+ */
+/*--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+.cnvs-gallery-type-slider.gallery {
+	display: block;
+}
+
+.cnvs-gallery-type-slider .gallery-item {
+	width: 100%;
+	max-width: 100%;
+	padding: 0;
+}
+
+.cnvs-gallery-type-slider .wp-caption-text {
+	margin-top: 1rem;
+}
+
+.cnvs-gallery-type-slider figure {
+	margin-bottom: 0;
+}
+
+.cnvs-gallery-type-slider img {
+	width: 100%;
+	height: auto;
+}
+
+.cnvs-gallery-type-slider > .gallery-item:not(:first-child) {
+	position: fixed;
+	top: -9999px;
+	left: -9999px;
+}

wp-content/plugins/canvas/components/slider-gallery/block/block.css

@@ -0,0 +1,13 @@
+.cnvs-block-jg-add-media-button button.components-button {
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	width: 100%;
+	height: auto;
+	margin-top: 20px;
+	padding: 20px;
+	-webkit-box-shadow: none !important;
+	box-shadow: none !important;
+	border: none;
+	border-radius: 0;
+}

wp-content/plugins/canvas/components/slider-gallery/block/block.jsx

@@ -0,0 +1,176 @@
+/**
+ * Internal dependencies
+ */
+import "./block.scss";
+
+/**
+ * WordPress dependencies
+ */
+const {
+	__,
+} = wp.i18n;
+
+const {
+	addFilter,
+} = wp.hooks;
+
+const {
+	Button,
+	DropZone,
+} = wp.components;
+
+const {
+	MediaPlaceholder,
+	MediaUpload,
+	mediaUpload,
+} = wp.blockEditor;
+
+const {
+    createBlock,
+} = wp.blocks;
+
+/**
+ * Custom block Edit output for Slider Gallery block.
+ *
+ * @param {JSX} edit Original block edit.
+ * @param {Object} blockProps Block data.
+ *
+ * @return {JSX} Block edit.
+ */
+function editRender( edit, blockProps ) {
+	if ( 'canvas/slider-gallery' !== blockProps.name ) {
+		return edit;
+	}
+
+	const {
+		attributes,
+		setAttributes,
+		isSelected,
+	} = blockProps;
+
+	const {
+		images,
+	} = attributes;
+
+	const ALLOWED_MEDIA_TYPES = [ 'image' ];
+
+	const hasImages = images && images.length;
+
+	// show gallery with images.
+	if ( hasImages ) {
+		return (
+			<div>
+				{ edit }
+				<DropZone
+					onFilesDrop={ ( files ) => {
+						const currentImages = images || [];
+						mediaUpload( {
+							allowedTypes: ALLOWED_MEDIA_TYPES,
+							filesList: files,
+							onFileChange: ( images ) => {
+								const result = images.map( ( image ) => {
+									return image.id;
+								} );
+
+								setAttributes( {
+									images: currentImages.concat( result ),
+								} );
+							},
+							onError( e ) {
+								// eslint-disable-next-line no-console
+								console.log( e );
+							},
+						} );
+					} }
+				/>
+				{ isSelected ? (
+					<div className="cnvs-block-jg-add-media-button">
+						<MediaUpload
+							onSelect={ ( images ) => {
+								const result = images.map( ( image ) => {
+									return image.id;
+								} );
+
+								setAttributes( {
+									images: result,
+								} );
+							} }
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
+							multiple
+							gallery
+							value={ images }
+							render={ ( { open } ) => (
+								<Button isDefault={ true } onClick={ open }>{ __( 'Edit Gallery' ) }</Button>
+							) }
+						/>
+					</div>
+				) : '' }
+			</div>
+		);
+	}
+
+	// add media upload if no images selected.
+	return (
+		<div>
+			<MediaPlaceholder
+				icon="format-gallery"
+				labels={ {
+					title: __( 'Gallery' ),
+					instructions: __( 'Drag images, upload new ones or select files from your library.' ),
+				} }
+				onSelect={ ( images ) => {
+					const result = images.map( ( image ) => {
+						return image.id;
+					} );
+
+					setAttributes( {
+						images: result,
+					} );
+				} }
+				accept="image/*"
+				allowedTypes={ ALLOWED_MEDIA_TYPES }
+				multiple
+				value={ undefined }
+				onError={ ( e ) => {
+					// eslint-disable-next-line no-console
+					console.log( e );
+				} }
+			/>
+		</div>
+	);
+}
+
+/**
+ * Block transformations.
+ *
+ * @param {Object} blockData Block data.
+ *
+ * @return {Object} Block data.
+ */
+function registerData( blockData ) {
+	if ( 'canvas/slider-gallery' === blockData.name ) {
+		blockData.transforms = {
+			from: [
+				{
+					type: 'block',
+					blocks: [ 'canvas/justified-gallery' ],
+					transform: function( attrs ) {
+						return createBlock(
+							'canvas/slider-gallery',
+							{
+								images: attrs.images,
+								imageSize: attrs.imageSize,
+								linkTo: attrs.linkTo,
+							}
+						);
+					},
+				},
+			],
+		};
+	}
+
+    return blockData;
+}
+
+addFilter( 'canvas.customBlock.editRender', 'canvas/slider-gallery/editRender', editRender );
+addFilter( 'canvas.customBlock.registerData', 'canvas/slider-gallery/registerData', registerData );

wp-content/plugins/canvas/components/slider-gallery/block/public-block-slider-gallery.js

@@ -0,0 +1,83 @@
+/**
+ * Slider Gallery
+ */
+( function( $ ) {
+
+	function canvasInitSliderGallery() {
+
+		/**
+		 * Get Page Info
+		 */
+		function canvasSliderPageInfo( cellNumber, cellsLength ) {
+			var sep = canvas_sg_flickity.page_info_sep;
+
+			return '<span class="current">' + ( cellNumber + 1 ) + '</span><span class="sep">' + sep + '</span><span class="cells">' + cellsLength + '</span>';
+		}
+
+		/**
+		 * Slider Init
+		 */
+		$( '.cnvs-gallery-type-slider:not(.cnvs-gallery-type-slider-ready)' ).imagesLoaded( function( instance ) {
+
+			$( instance.elements ).each( function( index, el ) {
+				var $el = $( el );
+
+				$el.filter(':not(.cnvs-gallery-type-slider-ready)')
+					.addClass( 'cnvs-gallery-type-slider-ready' )
+					.flickity( {
+						pageDots: $el.data( 'sg-page-dots' ),
+						prevNextButtons: $el.data( 'sg-nav' ),
+						adaptiveHeight: true,
+						cellAlign: 'left',
+						contain: true,
+						on: {
+							ready: function() {
+								var data = Flickity.data( el );
+
+								$el.addClass( 'is-animate slider-loaded' );
+
+								if ( $el.data( 'sg-page-info' ) ) {
+
+									if ( $el.data( 'sg-page-dots' ) ) {
+										$el.find( '.flickity-page-dots' ).wrap( '<div class="flickity-pages"></div>' );
+									} else {
+										$el.append( '<div class="flickity-pages"></div>' );
+									}
+
+									var cellNumber = data.selectedIndex;
+
+									$el.find( '.flickity-pages' ).append( '<div class="flickity-page-info">' + canvasSliderPageInfo( cellNumber, data.cells.length ) + '</div>' );
+								}
+
+								$( document.body ).trigger( 'image-load' );
+							},
+							change: function( cellNumber ) {
+								var data = Flickity.data( el );
+
+								if ( $el.data( 'sg-page-info' ) ) {
+
+									$el.find( '.flickity-page-info' ).html( canvasSliderPageInfo( cellNumber, data.cells.length ) );
+								}
+							}
+						}
+					} );
+			} );
+		} );
+	}
+
+	$( document ).ready( function() {
+		canvasInitSliderGallery();
+		$( document.body ).on( 'post-load', function() {
+			canvasInitSliderGallery();
+		} );
+
+		if ( 'undefined' !== typeof wp && 'undefined' !== typeof wp.hooks ) {
+			wp.hooks.addAction( 'canvas.components.serverSideRender.onChange', 'canvas/slider-gallery.init', function( props ) {
+				if ( 'canvas/slider-gallery' === props.block ) {
+					canvasInitSliderGallery();
+				}
+			} );
+		}
+	} );
+
+} )( jQuery );

wp-content/plugins/canvas/components/slider-gallery/block/render.php

@@ -0,0 +1,67 @@
+<?php
+/**
+ * Slider Gallery block template
+ *
+ * @package Canvas
+ */
+
+$images = (array) ( isset( $attributes['images'] ) ? $attributes['images'] : array() );
+
+if ( empty( $images ) ) {
+	return;
+}
+
+echo '<div class="' . esc_attr( $attributes['className'] ) . '" ' . ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ) . '>';
+
+?>
+
+<div
+	class='gallery cnvs-gallery-type-slider'
+	cnvs-flickity="init"
+	data-sg-page-dots="<?php echo esc_attr( $attributes['showBullets'] ? 'true' : 'false' ); ?>"
+	data-sg-page-info="<?php echo esc_attr( $attributes['showCaptions'] ? 'true' : 'false' ); ?>"
+	data-sg-nav="<?php echo esc_attr( $attributes['showPrevNextButtons'] ? 'true' : 'false' ); ?>"
+>
+	<?php
+	foreach ( $images as $img ) {
+		$link = false;
+
+		switch ( $attributes['linkTo'] ) {
+			case 'post':
+				$link = get_the_permalink( $img );
+				break;
+			case 'file':
+				$link = wp_get_attachment_image_src( $img, 'full' )[0];
+				break;
+		}
+
+		?>
+		<figure class="gallery-item">
+			<?php if ( $link ) : ?>
+				<a href="<?php echo esc_url( $link ); ?>">
+			<?php endif; ?>
+
+			<?php echo wp_get_attachment_image( $img, $attributes['imageSize'] ); ?>
+
+			<?php if ( $link ) : ?>
+				</a>
+			<?php endif; ?>
+
+			<?php
+			if ( $attributes['showCaptions'] ) {
+				$caption = wp_get_attachment_caption( $img );
+
+				if ( $caption ) {
+					echo '<div class="caption wp-caption-text gallery-caption">' . wp_kses( $caption, 'post' ) . '</div>';
+				}
+			}
+			?>
+		</figure>
+		<?php
+	}
+	?>
+</div>
+
+<?php
+
+echo '</div>';

wp-content/plugins/canvas/components/slider-gallery/class-block-slider-gallery.php

@@ -0,0 +1,163 @@
+<?php
+/**
+ * Slider Block.
+ *
+ * @package Canvas
+ */
+
+/**
+ * The initialize block.
+ */
+class CNVS_Block_Slider_Gallery {
+
+	/**
+	 * Initialize
+	 */
+	public function __construct() {
+		add_action( 'init', array( $this, 'block' ) );
+		add_filter( 'canvas_register_block_type', array( $this, 'register_block_type' ) );
+	}
+
+	/**
+	 * Enqueue the block's assets for the editor.
+	 */
+	public function block() {
+		// Scripts.
+		wp_register_script( 'flickity', plugin_dir_url( __FILE__ ) . 'block/flickity.pkgd.min.js', array( 'jquery', 'imagesloaded' ), cnvs_get_setting( 'version' ), true );
+
+		wp_register_script( 'canvas-slider-gallery', plugin_dir_url( __FILE__ ) . 'block/public-block-slider-gallery.js', array( 'jquery', 'flickity', 'imagesloaded' ), cnvs_get_setting( 'version' ), true );
+
+		wp_localize_script(
+			'canvas-slider-gallery', 'canvas_sg_flickity', array(
+				'page_info_sep' => esc_html__( ' of ', 'canvas' ),
+			)
+		);
+
+		wp_register_script(
+			'canvas-slider-gallery-block-editor-script',
+			plugins_url( 'block/block.js', __FILE__ ),
+			array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor', 'lodash', 'jquery', 'flickity', 'canvas-slider-gallery' ),
+			filemtime( plugin_dir_path( __FILE__ ) . 'block/block.js' ),
+			true
+		);
+
+		// Styles.
+		wp_register_style(
+			'canvas-slider-gallery-block-style',
+			plugins_url( 'block/block-slider-gallery.css', __FILE__ ),
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'block/block-slider-gallery.css' )
+		);
+
+		wp_style_add_data( 'canvas-slider-gallery-block-style', 'rtl', 'replace' );
+	}
+
+	/**
+	 * Register block
+	 *
+	 * @param array $blocks all registered blocks.
+	 * @return array
+	 */
+	public function register_block_type( $blocks ) {
+		$intermediate_image_sizes = get_intermediate_image_sizes();
+		$image_sizes              = array();
+
+		foreach ( $intermediate_image_sizes as $size ) {
+			$image_sizes[ $size ] = $size;
+		}
+
+		$blocks[] = array(
+			'name'          => 'canvas/slider-gallery',
+			'title'         => esc_html__( 'Slider Gallery', 'canvas' ),
+			'category'      => 'canvas',
+			'keywords'      => array(),
+			'icon'          => '
+				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path d="M2 7H6V18H2V7ZM7 20H17V5H7V20ZM9 7H15V18H9V7ZM18 7H22V18H18V7Z" fill="currentColor" />
+				</svg>
+			',
+			'supports'      => array(
+				'className'        => true,
+				'anchor'           => true,
+				'html'             => false,
+				'canvasSpacings'   => true,
+				'canvasBorder'     => true,
+				'canvasResponsive' => true,
+			),
+			'styles'        => array(),
+			'location'      => array(),
+
+			'sections'      => array(
+				'general'        => array(
+					'title'    => esc_html__( 'Block Settings', 'canvas' ),
+					'priority' => 5,
+					'open'     => true,
+				),
+			),
+			'layouts'       => array(),
+			'fields'        => array(
+				array(
+					'key'     => 'images',
+					'label'   => esc_html__( 'Images', 'canvas' ),
+					'section' => 'general',
+					'type'    => 'gallery',
+					'items'   => array(
+						'type' => 'integer',
+					),
+				),
+				array(
+					'key'     => 'imageSize',
+					'label'   => esc_html__( 'Images Size', 'canvas' ),
+					'section' => 'general',
+					'type'    => 'select',
+					'default' => 'thumbnail',
+					'choices' => $image_sizes,
+				),
+				array(
+					'key'     => 'linkTo',
+					'label'   => esc_html__( 'Link To', 'canvas' ),
+					'section' => 'general',
+					'type'    => 'select',
+					'default' => 'file',
+					'choices' => array(
+						'post' => esc_html__( 'Attachment Page', 'canvas' ),
+						'file' => esc_html__( 'Media File', 'canvas' ),
+						'none' => esc_html__( 'None', 'canvas' ),
+					),
+				),
+				array(
+					'key'     => 'showPrevNextButtons',
+					'label'   => esc_html__( 'Display Previous & Next Buttons', 'canvas' ),
+					'section' => 'general',
+					'type'    => 'toggle',
+					'default' => true,
+				),
+				array(
+					'key'     => 'showBullets',
+					'label'   => esc_html__( 'Display Bullets', 'canvas' ),
+					'section' => 'general',
+					'type'    => 'toggle',
+					'default' => true,
+				),
+				array(
+					'key'     => 'showCaptions',
+					'label'   => esc_html__( 'Display Captions', 'canvas' ),
+					'section' => 'general',
+					'type'    => 'toggle',
+					'default' => false,
+				),
+			),
+			'template'      => dirname( __FILE__ ) . '/block/render.php',
+
+			// enqueue registered scripts/styles.
+			'style'         => 'canvas-slider-gallery-block-style',
+			'script'        => is_admin() ? '' : 'canvas-slider-gallery',
+			'editor_style'  => 'canvas-slider-gallery-block-style',
+			'editor_script' => 'canvas-slider-gallery-block-editor-script',
+		);
+
+		return $blocks;
+	}
+}
+
+new CNVS_Block_Slider_Gallery();