refine and document prod flow

Makefile

@@ -1,15 +1,21 @@
 DOCKER ?= docker
 COMPOSE ?= docker compose
-PUBLIC_URL ?= https://askar.abbiamoundominio.org
+PUBLIC_URL ?= https://askar-association-ps.org
 TMPDB_CONN = --host=127.0.0.1 --port=3307 --user=root --password=toor --ssl-verify-server-cert=FALSE
 DUMP_CONN = -h 127.0.0.1 -P 3306 --user root --password=toor --ssl-verify-server-cert=FALSE
 VERSIONED_DUMP = ./assets/db/dump.sql
 TMP_PROD_DUMP = ./out/db.tmp.sql
 PROD_DUMP = ./out/dump.sql
+REMOTE_DB_DUMP = ./out/remote.dump.sql
+WWW_USER ?= 33
+WWW_GROUP ?= 33
 
 dev-run:
 	$(COMPOSE) up
 
+dev-run-db:
+	$(COMPOSE) run --rm db
+
 dev-stop:
 	$(COMPOSE) down
 
@@ -19,6 +25,18 @@ dev-clean:
 dev-dump:
 	mariadb-dump $(DUMP_CONN) askar > $(VERSIONED_DUMP)
 
+dev-import-db:
+	cat $(REMOTE_DB_DUMP) |\
+		sed -e 's;$(PUBLIC_URL);http://localhost:8080;g' |\
+		grep -v -E '^/\*' |\
+		(echo "SET sql_mode = '';" && cat) > ./assets/db/dump.sql
+
+dev-import-website:
+	sudo tar zxvf ./out/remote.uploads.tar.gz -C ./assets/wordpress/wp-content/
+	sudo tar zxvf ./out/remote.plugins.tar.gz -C ./assets/wordpress/wp-content/
+	sudo chown $(WWW_USER):$(WWW_GROUP) -R ./assets/wordpress/wp-content/
+
+
 ./out:
 	mkdir ./out
 
@@ -48,25 +66,28 @@ tmpdb-do-dump:
 
 prepare-db: tmpdb-start tmpdb-do-dump tmpdb-stop
 
-prepare-%:
-	tar czvf ./out/$*.tar.gz -C ./assets/wordpress/wp-content/$*
+_prepare-%:
+	tar -C ./assets/wordpress/wp-content/ ./$* -czvf ./out/$*.tar.gz
 
-prepare-data: prepare-uploads prepare-plugins
+prepare-data: _prepare-uploads _prepare-plugins
 
 prepare-export: prepare-db prepare-data
 
 push-db:
-	cat $(PROD_DUMP) | ssh $(REMOTE_DB_HOST) mysql --user $(REMOTE_DB_USER) --password $$(age -d ./assets/admin.pass.age) $(REMOTE_DB_DATABASE)
+	cat $(PROD_DUMP) | ssh $(REMOTE_DB_HOST) mysql --user=$(REMOTE_DB_USER) --password=\'$$(age -d ./assets/db.prod.pass.age)\' $(REMOTE_DB_DATABASE)
 
 _push-%:
-	cat ./out/$*.tar.gz | ssh $(REMOTE_WEB_HOST) tar zxvf -C $(REMOTE_WEB_ROOT) -
+	cat ./out/$*.tar.gz | ssh $(REMOTE_WEB_HOST) tar -C $(REMOTE_WEB_ROOT) -zxvf -
 
 push-website: _push-uploads _push-plugins
 
 pull-db:
-	ssh $(REMOTE_DB_HOST) mysqldump --user $(REMOTE_DB_USER) --password $$(age -d ./assets/admin.pass.age) $(REMOTE_DB_DATABASE) > ./out/remote.dump.sql
+	ssh $(REMOTE_DB_HOST) mysqldump $(REMOTE_DB_DATABASE) > $(REMOTE_DB_DUMP)
 
 _pull-%:
 	ssh $(REMOTE_WEB_HOST) tar czvf - -C $(REMOTE_WEB_ROOT) $* > ./out/remote.$*.tar.gz
 
 pull-website: _pull-uploads _pull-plugins
+
+clean:
+	rm ./out/*

README.md

@@ -34,3 +34,60 @@ The website will be a Wordpress with some customization. It will have the follow
 ## Dev
 
 We use GNU make + docker
+
+Set the environment variables as appropriate
+
+```
+export REMOTE_WEB_HOST=root@amelia.abbiamoundominio.org
+export REMOTE_WEB_ROOT=/var/www/askar
+export REMOTE_DB_HOST=root@comandantaramona.abbiamoundominio.org
+export REMOTE_DB_USER=wordpress_askar
+export REMOTE_DB_DATABASE=wordpress_askar
+export PUBLIC_URL=https://askar-association-ps.org
+```
+
+### Pull content from production site
+
+Pull the content (uploads+plugins)
+
+```
+make pull-website
+```
+
+Dump the remote db and pull it
+
+```
+make pull-db
+```
+
+### Push to production
+
+Prepare the local content to be pushed (note that the following requires the dev site to be running with `make dev-run`):
+
+```
+make prepare
+```
+
+Stop the remote website
+
+```
+ssh ${REMOTE_WEB_HOST} docker stop wordpress_askar
+```
+
+Push the database
+
+```
+make push-db
+```
+
+Push the website content
+
+```
+make push-website
+```
+
+Restart the website
+
+```
+ssh ${REMOTE_WEB_HOST} ./ wordpress_askar.sh
+```

assets/askar.pass.age

@@ -0,0 +1,6 @@
+age-encryption.org/v1
+-> scrypt ZsvmNNNAOTwpt3k8D59PMg 18
+8+DAfiRZkiaiDol6+vbUij/n8iHul7egJ9VQNjtqT3U
+--- YCZGkX9+aBvfbl2lRxhRtI2ql/00Tixi2p58ZwXCtv4
+¶"s¢
+Va¥]þ‘œð}ªfÕr™ð–ô»©J«6:d§¾l㦲깻?™éG”rʆÈE

assets/aurora.pass.age

@@ -0,0 +1,6 @@
+age-encryption.org/v1
+-> scrypt QPnc38eDy9SOflZuKFHMsA 18
+Ke6fUjpQjBkBwyYUVLFncxAracLkZ+KkpyLOwz7Gejk
+--- xdQGEqKMOhv1G6sMNi9KiOlyt3yDzz3Qw7x1/upQvvk
+ðOJ1–Q@êåv¬Îƒ‹Y
+ïmÇ^Ù©“ØëÓR‡Ë
;1)÷cEÝ¿v*óEð›öjë¾ýZ

assets/db.prod.pass.age

@@ -0,0 +1,6 @@
+age-encryption.org/v1
+-> scrypt 6QrVQqHCz74QP99Wdncdlg 18
+6pKNpuQEpUOPQRo/EBndnQS6SiX5Vk5SarrCQyQV76I
+--- 3HNXyrypprIaex+N5i6H9aqV/r38nYg2jYj+aG4xShA
+öÞ–³ú¥öhrè’-í
+$jYÿŸ¹õ"Æù<C386>±MRÀ¯7‰áƵãùöKÈ<p‹ŽÇ_Á¦Û

assets/mariam.pass.age

@@ -0,0 +1,6 @@
+age-encryption.org/v1
+-> scrypt rANUm1DqFtwf3eZDluBAvg 18
+UM0AVX+SloEjHC76jZzw3daY7I/wovKguXLm5NPNUfk
+--- y0/4l3ExLo/2sceGpLMa5Rov175jKdXfygy/nv/WEE0
+}W“¢ú÷-A5#£šƒ<^µ…¸
Ô>ÐK!ŸüùššF›vcšêdþDšéà<C3A9>ê\8ჿ˜Í
+Ì

assets/wordpress/wp-content/plugins/super-block-slider/assets/super-block-slider-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 457 527.6400146484375"><path d="M65.28 207.3L359 376.9l32.65-18.85v-37.71L97.93 150.75l-32.65 18.84zm163.2 245l65.27-37.68L0 245V131.91L228.48 0 457 131.91v75.38L228.48 75.37l-65.28 37.69L457 282.65v113.08L228.48 527.64 0 395.73v-75.37z" fill="#FFF"/></svg>

assets/wordpress/wp-content/plugins/super-block-slider/build/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => '307ac8a38a353c4230a73358bbd4e886');

assets/wordpress/wp-content/plugins/super-block-slider/includes/superblockslider_post_type.php

@@ -0,0 +1,165 @@
+<?php
+/**
+ * Register superblockslider post type
+ */
+function register_superblockslider_post_type() : void {
+    $menu_icon = file_get_contents( plugin_dir_path( __FILE__ ) . '../assets/super-block-slider-icon.svg' );
+
+	$labels = [
+		'name' => _x( 'Super block slider', 'Super block slider', 'superblockslider' ),
+		'singular_name' => _x( 'Super block slider', 'Super block slider', 'superblockslider' ),
+		'menu_name' => __( 'Super block slider', 'superblockslider' ),
+		'name_admin_bar' => __( 'Super block slider', 'superblockslider' ),
+		'archives' => __( 'Super block slider Archives', 'superblockslider' ),
+		'attributes' => __( 'Super block slider Attributes', 'superblockslider' ),
+		'parent_item_colon' => __( 'Parent Super block slider:', 'superblockslider' ),
+		'all_items' => __( 'All slider', 'superblockslider' ),
+		'add_new_item' => __( 'Add New Super block slider', 'superblockslider' ),
+		'add_new' => __( 'Add New Slider', 'superblockslider' ),
+		'new_item' => __( 'New Super block slider', 'superblockslider' ),
+		'edit_item' => __( 'Edit Super block slider', 'superblockslider' ),
+		'update_item' => __( 'Update Super block slider', 'superblockslider' ),
+		'view_item' => __( 'View Super block slider', 'superblockslider' ),
+		'view_items' => __( 'View Super block slider', 'superblockslider' ),
+	];
+	$labels = apply_filters( 'superblockslider', $labels );
+
+	$args = [
+		'label' => __( 'Super block slider', 'superblockslider' ),
+		'description' => __( 'Super block slider for use with shortcode', 'superblockslider' ),
+		'labels' => $labels,
+		'supports' => [
+			'title',
+			'editor',
+		],
+		'hierarchical' => false,
+		'public' => true,
+		'show_ui' => true,
+		'show_in_menu' => true,
+		'menu_position' => 10,
+		'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode( $menu_icon ),
+		'show_in_admin_bar' => true,
+		'show_in_nav_menus' => true,
+		'exclude_from_search' => true,
+		'has_archive' => false,
+		'can_export' => false,
+		'capability_type' => 'page',
+		'show_in_rest' => true,
+	];
+	$args = apply_filters( 'superblockslider', $args );
+
+	register_post_type( 'superblockslider', $args );
+    // flush_rewrite_rules();
+}
+add_action( 'init', 'register_superblockslider_post_type', 0 );
+
+// Define superblockslider shortcode
+function superblockslider_shortcode($atts) {
+    // Extract the ID from the shortcode attributes
+    $atts = shortcode_atts(array(
+        'id' => '',
+    ), $atts);
+
+    // Check if ID is provided
+    if (empty($atts['id'])) {
+        return 'Please provide a post ID.';
+    }
+
+    // Retrieve the post using the ID
+    $post = get_post($atts['id']);
+
+    // Check if the post exists
+    if (!$post) {
+        return 'Post not found.';
+    }
+
+	// Process shortcodes and Gutenberg blocks in the post content
+    $content = apply_filters('the_content', $post->post_content);
+    return do_shortcode($content);
+}
+
+// Register superblockslider shortcode
+add_shortcode('superblockslider', 'superblockslider_shortcode');
+
+/**
+ * Load superblockslider frontend scripts if the post content uses [superblockslider] shortcode.
+ */
+function load_shortcode_frontend_scripts() {
+	global $post;
+	if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'superblockslider') ) {
+		wp_enqueue_script('superblockslider');
+		wp_enqueue_style('superblockslider');
+	}
+}
+add_action( 'wp_enqueue_scripts', 'load_shortcode_frontend_scripts');
+
+/**
+ * Block-editor mode: Add notice message
+ */
+function add_messsage_to_superblockslider_edit_page() {
+    $post_types = array('superblockslider');
+
+    // superblockslider post type edit screen
+    if (in_array(get_current_screen()->post_type, $post_types)) {
+
+		if (is_block_editor_active()) {
+			// Block editor is being used
+			global $post;
+			?>
+			<script>
+				// Wait for the editor to be ready.
+				wp.domReady(function() {
+					setTimeout(() => {
+						/**
+						 * Add superblockslider if no block exist
+						 */
+						var editor = wp.data.select('core/block-editor');
+						var isFirstBlock = editor.getBlockCount() === 0;
+						
+						if (isFirstBlock) {
+							var superblockslider_block = wp.blocks.createBlock('superblockslider/slider');
+							wp.data.dispatch('core/block-editor').insertBlock(superblockslider_block);
+						}
+						
+						// Get notice element.
+						var editorElement = document.querySelector('.components-editor-notices__pinned');
+						if (editorElement) {
+							// Insert HTML content in admin notice section.
+							editorElement.insertAdjacentHTML('afterbegin', '<div class="components-notice is-warning"><div class="components-notice__content"><p>This section should only be used if a shortcode is needed for other editors. Super Block Slider can be inserted directly in the block editor.</p><p>Shortcode: <strong>[superblockslider id="' + <?php echo $post->ID; ?> + '"]</strong></p><div class="components-notice__actions"></div></div></div>');
+						}
+					}, 100);
+				});
+			</script>
+			<?php
+		}
+    }
+}
+add_action('admin_footer', 'add_messsage_to_superblockslider_edit_page');
+
+/**
+ * Classic-editor mode: Error notice if in classic editor mode
+ */
+function classic_editor_error_notice() {
+    global $current_screen;
+	$post_types = array('superblockslider');
+
+	// check if classic editor and post type is superblockslider screen and in edit post mode
+	if (!is_block_editor_active() && in_array($current_screen->post_type, $post_types) && $current_screen->base == 'post') {
+	$message = '<p>The block editor is required to create the slider and generate the shortcode to be used with classic or other editors.</p><p>Install <a href="https://wordpress.org/plugins/gutenberg/" target="_new">WordPress\'s block editor</a>, go to Settings > writing and <strong>Allow users to switch editors</strong> click "Yes". a "Switch to block editor" will appear on this page.</p>';
+	echo '<div class="notice notice-error">' . $message . '</div>';
+	}
+}
+add_action('admin_notices', 'classic_editor_error_notice');
+
+/**
+ * check if using block-editor
+ */
+function is_block_editor_active() {
+    global $current_screen;
+
+    if (method_exists($current_screen, 'is_block_editor') && $current_screen->is_block_editor()) {
+        return true;
+    }
+
+    return false;
+}

assets/wordpress/wp-content/plugins/super-block-slider/readme.txt

@@ -0,0 +1,254 @@
+=== Super block slider - Responsive image & content slider ===
+Contributors:       Mikemmx
+Donate link:        https://www.paypal.com/paypalme/wpslider
+Tags:               image slider, slider, parallax, content slider, responsive slider
+Requires at least:  6.3
+Tested up to:       6.5
+Stable tag:         2.7.7
+Requires PHP:       7.0.0
+License:            GPL-2.0-or-later
+License URI:        https://www.gnu.org/licenses/gpl-2.0.html
+
+Lightweight, responsive, image & content slider for block and classic editor.
+
+== Description ==
+
+[youtube https://www.youtube.com/watch?v=6c2Rdi4o5MU]
+<a href="https://superblockslider.com/slider-showcase/" target="_new">Slider examples</a>
+
+Super Block Slider is a lightweight image & content slider plugin for creating dynamic and engaging sliders.
+
+= Lightweight =
+
+Standalone 5KB JavaScript file, optimize for loading speed and performance.
+
+= Image slider =
+
+Customize each slide's background image and customize the visual presentation of your sliders.
+
+= Content slider =
+
+Utilize any WordPress block in the content area, giving you full control over the slider layout and design.
+
+= Supports block & classic editor =
+
+Works for block editor and classic editor(via shortcode. example: [superblockslider id="123"]).
+
+= Gradient / color overlay =
+
+Enhance the visual impact of your sliders by applying gradient or solid color overlays, creating an eye-catching backdrop for your content.
+
+= Responsive slider =
+
+Set different background images for desktop, tablet, and mobile screen sizes, allowing for optimal visual presentation across various devices.
+
+= Live Editor Preview =
+
+Preview your slider's appearance in real-time within the WordPress editor, making it easy to fine-tune and perfect the design before publishing.
+
+= Touch & mouse drag =
+
+Supporting both touch and mouse swipe gestures, providing a seamless user experience on touchscreen devices and desktops.
+
+= Title or Dot Icon Navigation =
+
+Customize the navigation with title-based navigation or dot icons, allowing your users to easily navigate through your sliders.
+
+= Parallax Effect =
+
+Add a visually appealing parallax effect to your slider, this effect creates a captivating scrolling experience by moving the background at a different speed than the foreground content.
+
+= Adaptive slider height =
+
+The slider's height adjusts automatically based on the background size, ensuring that your slides are displayed properly.
+
+= Transition Animations =
+
+Choose from 20 transition animations to add dynamism and flair to your sliders.
+
+== Featured highlight ==
+
+* <a href="https://superblockslider.com/slider-showcase/#transition-efect" target="_new">Slide</a>, <a href="https://superblockslider.com/slider-showcase/#transition-efect" target="_new">fade</a> effect
+* <a href="https://superblockslider.com/slider-showcase/#adaptive-height" target="_new">Adaptive slider height</a>
+* Set multiple background image for responsive screen size
+* <a href="https://superblockslider.com/slider-showcase/#demo" target="_new">Title-based</a> navigation or <a href="https://superblockslider.com/slider-showcase/#transition-efect" target="_new">dot icons</a>
+* <a href="https://superblockslider.com/slider-showcase/#demo" target="_new">Parallax background effect</a>
+* 20 slide <a href="https://superblockslider.com/slider-showcase/#transition-animations" target="_new">transition animations
+* <a href="https://superblockslider.com/slider-showcase/#overlay" target="_new">Gradient or solid color overlay</a>
+
+= Links =
+
+<a href="https://superblockslider.com/slider-showcase/" target="_new">Slider examples</a>
+<a href="https://superblockslider.com/documentations/" target="_new">Documentations</a>
+
+== Changelog ==
+
+= 2.7.7 =
+
+* Fix editor styles: remove global editor styles
+* clean up invalid registerBlockType parameter
+
+= 2.7.6 =
+
+* Fix bug Gutenberg blocks not being process when embeding using shortcode.
+
+= 2.7.5 =
+
+* Add load sueprblockslider.js in defer.
+* Use passive listeners for touchstart, touchmove event.
+
+= 2.7.3 =
+
+* Fix WordPress 6.3 gradient crashes, bugs.
+* Fix animating class
+
+= 2.7.1 =
+
+* Add class superblockslider__slide--animating-in, superblockslider__slide--animating-out when slide is animating.
+
+= 2.7 =
+
+* Added shortcode support for use in classic editor.
+
+= 2.6.3 =
+
+* Fix bug: Frontend autoplay not stopping when it should.
+
+= 2.6.2 =
+
+* Fix bug: Overlap timing of transition animate speed timing and autoplay timing.
+
+= 2.6.1 =
+
+* Fix bug: Reduce mobile touch sensitivity.
+
+= 2.6 =
+
+* Added content overflow options.
+* Added mouse drag event changes slide
+* Fix bug: Adaptive height not working in editor when slider is created.
+* Optimise touch event code
+* Add 6 more gradients
+* Add donation link
+
+= 2.4.7 =
+
+* Fix Editor description for parallex.
+* Fix Parallax code.
+* Fix mobile gesture not stopping autoplay.
+
+= 2.4.5 =
+
+* Added "Adaptive slider height".
+* Fix bug causing slider to disappear if transsition effect is set to "Fade".
+* Fix bug: GradientPicker component causing crashes on full-site-editing mode.
+* Fix ful-site-editing errors
+
+= 2.3.2 =
+
+* Fix bug: JS defer causes supersliderblock not to run.
+
+= 2.3.1 =
+
+* Add Mobile swipe gesture.
+* Update responsive settings descriptions.
+
+= 2.2.1 =
+
+* Fix bug causing crashes if 2 or more slider is created.
+* Changed editor text and rearange controls.
+* Lock move control of single slide by default.
+
+= 2.1.1 =
+
+* Fix bug - CSS style causes slider arrow to overlaps content.
+
+= 2.0 =
+
+* Add custom responsive screen size images option.
+* Fix bug - Added overflow style to content container.
+
+= 1.5.5 =
+
+* Fix bug - Slide index not set correctly if Super slider block is a child block.
+* Slide title line height style.
+* Update descriptions in editor.
+
+= 1.5.4 =
+
+* Fix parallax effect.
+* Fix slide title line height in slide editor.
+* Add src/js/
+* minor bug fixes.
+
+= 1.5.3 =
+
+* Add support for WordPress version 5.9
+
+= 1.5.2 =
+
+* fix bug - WordPress version 5.8.1 cause slide index to be undefine.
+
+= 1.5.1 =
+
+* fix bug - Editor fade effect : selected slide not visible if child block selected.
+
+= 1.5 =
+
+* fix bug - track css transition all
+
+= 1.4.9 =
+
+* fix bug - Firefox transition-timing-function.
+* fix bug - Chrome background image flicker.
+
+= 1.4.8 =
+
+* fix bug - fade effect not changing in editor.
+
+= 1.4.7 =
+
+* Add Parallax background image
+
+= 1.3.7 =
+
+* Add slide link option
+
+= 1.2.7 =
+
+* Fix bug - Title indicator to render html.
+* Fix bug - Title indicator word-wrap.
+* Fix editor .wp-block max-width css.
+
+= 1.2.6 =
+
+* Changed Super block slider category to 'Media' from 'Widgets'.
+
+= 1.2.5 =
+
+* Fix bug - initial active slide not correct cause by older versions.
+
+== Installation ==
+
+1. Visit **Plugins > Add New**.
+2. Search for **super block slider**.
+3. Install and activate the super block slider plugin.
+
+= Manual installation =
+
+1. Upload the entire `super-block-slider` folder to the `/wp-content/plugins/` directory.
+2. Visit **Plugins**.
+3. Activate super block slider.
+
+= After activation =
+
+While in Page/Post edit mode simply add/search for **super block slider**.
+
+== Screenshots ==
+
+1. Editor screenshot 1
+2. Editor screenshot 2
+3. Editor screenshot 3
+4. Live results screenshot 4
+5. Editor screenshot 5
+6. Editor screenshot 6

assets/wordpress/wp-content/plugins/super-block-slider/src/editor.scss

@@ -0,0 +1,136 @@
+.wp-block-superblockslider-slider {
+	margin: 0 auto;
+}
+.editor-styles-wrapper .wp-block-superblockslider-slider .wp-block {
+    max-width: unset;
+}
+.superblockslider__slide {
+	min-width: 100px;
+	min-height: 100px;
+
+	.superblockslider__button--remove {
+		position: absolute;
+		z-index: 99;
+		top: 0;
+		right: 0;
+		border: 1px solid;
+		margin: 5px;
+		background-color: rgba(255, 255, 255, .25);
+		display: none;
+	}
+	&.is-selected, &.is-hovered, &:hover {
+		.superblockslider__button--remove {
+			display: flex;
+		}
+	}
+}
+.superblockslider__window {
+	width: 0;
+	min-width: 100%;
+	.superblockslider__slide_inner {
+		top: 2%;
+	}
+}
+.superblockslider__navigation {
+	top: 50%;
+	height: 0px;
+}
+.superblockslider__button__navigation {
+	height: auto;
+}
+
+.superblockslider__buttons {
+	align-items: center;
+}
+.superblockslider__button {
+	display: flex;
+    justify-content: center;
+	text-align: center;
+	button {
+		line-height: 0;
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+
+		&:focus {
+			outline-style: none;
+		}
+	}
+	.rich-text {
+		min-width: 20px;
+		opacity: .5;
+		transition: all .5s;
+		line-height: 1em;
+	}
+
+	&--active .rich-text {
+		opacity: 1;
+	}
+}
+
+.editor-styles-wrapper .superblockslider__track {
+
+	> .block-editor-inner-blocks {
+		width: 100%;
+
+		> .block-editor-block-list__layout {
+			display: flex;
+			width: 100%;
+    		height: 100%;
+		}
+	}
+
+	.inner-blocks {
+		overflow: auto;
+	}
+}
+.editor-styles-wrapper div[data-type='superblockslider/slide'] {
+	position: relative;
+	display: flex;
+	margin: 0;
+	max-width: unset;
+	width: 100%;
+	
+	.block-editor-inner-blocks {
+		width: 100%;
+	}
+}
+
+button.components-button.has-icon.has-text.button-full-width {
+	width: 100%;
+	justify-content: center;
+}
+/* fade slider */
+.editor-styles-wrapper div[data-transition-effect='fade'] div[data-type='superblockslider/slide'] {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+
+	opacity: 0;
+
+	&.superblockslider__slide--active-editor {
+		z-index: 1;
+		opacity: 1;
+	}
+}
+
+.components-panel__row {
+	.superblockslider__button.is-secondary {
+		margin-left: auto;
+	}
+}
+
+.superblockslider__slide__bg > img {
+	min-height: 100%;
+}
+
+.superblockslider__slide__image {
+	display: none;
+} 
+.extraLarge .visible--xl,
+.desktop .visible--lg,
+.tablet .visible--md,
+.mobile .visible--sm {
+	display: block;
+}

assets/wordpress/wp-content/plugins/super-block-slider/src/js/superblockslider.js

@@ -0,0 +1,341 @@
+"use strict";
+(function () {
+    document.onreadystatechange = function () {
+        if (document.readyState === 'complete') {
+            superblockslider('.superblockslider');
+        }
+    };
+    var superblockslider = function (superblocksliderSlides) {
+        var superblocksliderSlider = document.querySelectorAll(superblocksliderSlides);
+        superblocksliderSlider.forEach(function (slider, index) {
+            var initialActiveSlideAttr = slider.getAttribute('data-initial-active-slide');
+            var loopSlideAttr = slider.getAttribute('data-loop-slide');
+            var autoplayAttr = slider.getAttribute('data-autoplay');
+            var autoplayIntervalAttr = slider.getAttribute('data-autoplay-interval');
+            var slideNavigationAttr = slider.getAttribute('data-slide-navigation');
+            var hoverPauseAttr = slider.getAttribute('data-hover-pause');
+            var transitionEffectAttr = slider.getAttribute('data-transition-effect');
+            var transitionDurationAttr = slider.getAttribute('data-transition-duration');
+            var animationAttr = slider.getAttribute('data-animation');
+            var transitionSpeedAttr = slider.getAttribute('data-transition-speed');
+            var arrowNavigationAttr = slider.getAttribute('data-arrow-navigation');
+            var variableHeightAttr = slider.getAttribute('data-variable-height');
+            var settings = {
+                initialActiveSlide: initialActiveSlideAttr ? parseInt(initialActiveSlideAttr) : 0,
+                loopSlide: loopSlideAttr ? false : true,
+                autoplay: autoplayAttr ? false : true,
+                autoplayInterval: autoplayIntervalAttr ? autoplayIntervalAttr : '1.5s',
+                slideNavigation: slideNavigationAttr ? slideNavigationAttr : 'dots',
+                hoverPause: hoverPauseAttr ? false : true,
+                transitionEffect: transitionEffectAttr ? transitionEffectAttr : 'slide',
+                transitionDuration: transitionDurationAttr ? transitionDurationAttr : '.6s',
+                animation: animationAttr ? animationAttr : 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',
+                transitionSpeed: transitionSpeedAttr ? transitionSpeedAttr : '.6s',
+                arrowNavigation: arrowNavigationAttr ? false : true,
+                variableHeight: variableHeightAttr ? true : false,
+            };
+            var currentSlideIndex = settings.initialActiveSlide;
+            var currentSlideId = settings.initialActiveSlide;
+            var previousSlideId = settings.initialActiveSlide;
+            var animating = false;
+            var el_superblockslider__track = slider.querySelector('.superblockslider__track');
+            var el_superblockslider__slides = slider.querySelectorAll('.superblockslider__slide');
+            var el_superblockslider__button__previous = slider.querySelector('.superblockslider__button__previous');
+            var el_superblockslider__button__next = slider.querySelector('.superblockslider__button__next');
+            el_superblockslider__track.addEventListener('transitionstart', transitionStart);
+            el_superblockslider__track.addEventListener('transitionend', transitionEnd);
+            var offsetPercent = 100 / el_superblockslider__slides.length;
+            var translateXOffset = currentSlideIndex * offsetPercent;
+            var translateX = "translateX(-" + translateXOffset + "%)";
+            var parallaxSlides = slider.querySelectorAll('.superblockslider__slide[data-parallax="true"]');
+            if (parallaxSlides) {
+                parallaxInit();
+                window.addEventListener('scroll', function (event) {
+                    parallaxSlides.forEach(function (parallaxSlide, index) {
+                        var parallaxAttribute = parallaxSlide.getAttribute('data-parallax-speed');
+                        var el_slide_bg = parallaxSlide.querySelectorAll('.superblockslider__slide__bg')[0];
+                        if (parallaxAttribute) {
+                            var sliderPositionY = parallaxSlide.getBoundingClientRect().y;
+                            if (sliderPositionY <= window.innerHeight && sliderPositionY >= Math.abs(window.innerHeight) * -1) {
+                                var parallaxSpeed = parallaxAttribute ? parseInt(parallaxAttribute) / 100 : 0;
+                                var parallaxOffset = (parallaxSpeed) * ((window.innerHeight - sliderPositionY));
+                                var totalParallaxOffset = (parallaxSpeed) * ((window.innerHeight));
+                                el_slide_bg.style.transform = "translateY(" + (parallaxOffset - totalParallaxOffset) + "px)";
+                            }
+                            else {
+                                el_slide_bg.style.transform = "translateY(0px)";
+                            }
+                        }
+                    });
+                });
+                window.addEventListener('resize', parallaxInit);
+            }
+            function parallaxInit() {
+                parallaxSlides.forEach(function (slide, index) {
+                    var parallaxAttribute = slide.getAttribute('data-parallax-speed');
+                    var parallaxSpeed = parallaxAttribute ? parseInt(parallaxAttribute) / 100 : 0;
+                    var sliderBoundingRect = slider.getBoundingClientRect();
+                    var sliderPositionY = sliderBoundingRect.y;
+                    var sliderHeight = sliderBoundingRect.height;
+                    var windowHeight = window.innerHeight;
+                    var el_slide_bg = slide.querySelectorAll('.superblockslider__slide__bg')[0];
+                    var el_slide_bg_img = el_slide_bg.querySelectorAll('img')[0];
+                    var imageHeight = (parallaxSpeed * windowHeight / 2) + sliderHeight;
+                    el_slide_bg_img.style.height = imageHeight + "px";
+                    var totalParallaxOffset = (parallaxSpeed) * ((windowHeight));
+                    var parallaxOffset = 0;
+                    if (sliderPositionY <= windowHeight && sliderPositionY >= Math.abs(windowHeight) * -1) {
+                        parallaxOffset = (parallaxSpeed) * ((windowHeight - sliderPositionY));
+                    }
+                    el_slide_bg.style.transform = "translateY(" + (parallaxOffset - totalParallaxOffset) + "px)";
+                });
+            }
+            var autoplayTime;
+            var autoplayInterval;
+            var autopayToggle;
+            function onMouseOutAutoplay() {
+                autopayToggle = autoplayInterval;
+            }
+            if (settings.autoplay == true) {
+                if (settings.autoplayInterval.indexOf('ms') > 0) {
+                    autoplayInterval = parseInt(settings.autoplayInterval.split('ms')[0]);
+                    autopayToggle = autoplayInterval;
+                }
+                else {
+                    var seconds = Number(settings.autoplayInterval.split('s')[0]);
+                    autoplayInterval = seconds * 1000;
+                    autopayToggle = autoplayInterval;
+                }
+                if (typeof autoplayInterval === 'number') {
+                    window.requestAnimationFrame(autoplayTimerFrame);
+                    if (settings.hoverPause == true) {
+                        slider.addEventListener('mouseover', function (event) {
+                            autopayToggle = 'pause';
+                        });
+                        slider.addEventListener('mouseout', onMouseOutAutoplay);
+                    }
+                }
+            }
+            function autoplayTimerFrame(timestamp) {
+                if (autopayToggle === 'stop')
+                    return;
+                if (autoplayTime === undefined || autopayToggle === 'pause')
+                    autoplayTime = timestamp;
+                var elapsed = timestamp - autoplayTime;
+                window.requestAnimationFrame(autoplayTimerFrame);
+                if (elapsed >= autopayToggle) {
+                    autoplayTime = timestamp;
+                    nextSlide();
+                }
+            }
+            var el_superblockslider__buttons = slider.querySelectorAll('.superblockslider__button');
+            if (settings.slideNavigation != 'none') {
+                el_superblockslider__buttons.forEach(function (button) {
+                    button.addEventListener('click', function () {
+                        if (!animating) {
+                            var buttonIdValue = parseInt(button.getAttribute('data-button-id'));
+                            animateTrackToSlideId(buttonIdValue, true);
+                        }
+                    });
+                });
+            }
+            function animateTrackToSlideId(slideId, toggleAutoplay) {
+                if (toggleAutoplay === void 0) { toggleAutoplay = false; }
+                if (!animating) {
+                    if (toggleAutoplay) {
+                        slider.removeEventListener('mouseout', onMouseOutAutoplay);
+                        autopayToggle = "stop";
+                    }
+                    if (currentSlideId != slideId) {
+                        el_superblockslider__slides = slider.querySelectorAll('.superblockslider__slide');
+                        var slideIndex_1 = slideId;
+                        if (settings.loopSlide == false) {
+                        }
+                        else if (settings.transitionEffect == 'slide' && settings.loopSlide == true) {
+                            if (currentSlideIndex === 0 && el_superblockslider__slides.length > 2) {
+                                el_superblockslider__track.style.transition = 'none';
+                                var lastSide = el_superblockslider__slides[el_superblockslider__slides.length - 1];
+                                el_superblockslider__track.prepend(lastSide);
+                                currentSlideIndex = 1;
+                                var trackOffset = currentSlideIndex * offsetPercent;
+                                translateX = "translateX(-" + trackOffset + "%)";
+                                el_superblockslider__track.style.transform = translateX;
+                            }
+                            else if (currentSlideIndex === el_superblockslider__slides.length - 1) {
+                                el_superblockslider__track.style.transition = 'none';
+                                currentSlideIndex = el_superblockslider__slides.length - 2;
+                                var trackOffset = currentSlideIndex * offsetPercent;
+                                translateX = "translateX(-" + trackOffset + "%)";
+                                el_superblockslider__track.style.transform = translateX;
+                                var firstSlide = el_superblockslider__slides[0];
+                                el_superblockslider__track.append(firstSlide);
+                            }
+                            var slideMatch = slider.querySelectorAll("[data-slide-index=\"" + slideId + "\"]");
+                            if (slideMatch[0] && slideMatch[0].parentNode) {
+                                var slideMatch_parent_children = slideMatch[0].parentNode.children;
+                                var closeSlide = Array.from(slideMatch_parent_children).indexOf(slideMatch[0]);
+                                slideIndex_1 = closeSlide;
+                            }
+                        }
+                        setTimeout(function () {
+                            animate(slideId, slideIndex_1);
+                        }, 100);
+                    }
+                }
+            }
+            function animate(slideId, slideIndex) {
+                if (settings.transitionEffect == 'slide') {
+                    el_superblockslider__track.style.transition = "all " + settings.transitionDuration + " " + settings.animation;
+                    var trackOffset = slideIndex * offsetPercent;
+                    translateX = "translateX(-" + trackOffset + "%)";
+                    el_superblockslider__track.style.transform = translateX;
+                    currentSlideIndex = slideIndex;
+                    currentSlideId = slideId;
+                }
+                else if (settings.transitionEffect == 'fade') {
+                    currentSlideIndex = slideIndex;
+                    currentSlideId = slideId;
+                    transitionEnd();
+                }
+            }
+            function transitionStart() {
+                animating = true;
+                if (autopayToggle !== "stop")
+                    autopayToggle = "pause";
+                if (settings.transitionEffect == 'slide') {
+                    el_superblockslider__track.style.transition = "all " + settings.transitionDuration + " " + settings.animation;
+                }
+                if (settings.variableHeight) {
+                    updateSliderHeight();
+                }
+                slider.querySelector("[data-slide-index=\"" + currentSlideId + "\"]").classList.add('superblockslider__slide--animating-in');
+                slider.querySelector("[data-slide-index=\"" + previousSlideId + "\"]").classList.add('superblockslider__slide--animating-out');
+            }
+            function transitionEnd() {
+                slider.querySelector('.superblockslider__slide--active').classList.remove('superblockslider__slide--active');
+                slider.querySelector("[data-slide-index=\"" + currentSlideId + "\"]").classList.add('superblockslider__slide--active');
+                if (settings.slideNavigation != 'none') {
+                    slider.querySelector('.superblockslider__button--active').classList.remove('superblockslider__button--active');
+                    el_superblockslider__buttons[currentSlideId].classList.add('superblockslider__button--active');
+                }
+                animating = false;
+                if (autopayToggle !== "stop")
+                    autopayToggle = autoplayInterval;
+            }
+            if (el_superblockslider__button__previous && el_superblockslider__button__next) {
+                el_superblockslider__button__previous.addEventListener('click', function () {
+                    prevSlide(null, true);
+                });
+                el_superblockslider__button__next.addEventListener('click', function () {
+                    nextSlide(null, true);
+                });
+            }
+            function prevSlide(event, toggleAutoplay) {
+                removeAnimatingClasses();
+                previousSlideId = currentSlideId;
+                var prevSlideId = currentSlideId - 1;
+                if (prevSlideId < 0) {
+                    prevSlideId = el_superblockslider__slides.length - 1;
+                }
+                animateTrackToSlideId(prevSlideId, toggleAutoplay);
+            }
+            function nextSlide(event, toggleAutoplay) {
+                removeAnimatingClasses();
+                previousSlideId = currentSlideId;
+                var nextSlideId = currentSlideId + 1;
+                if (nextSlideId > el_superblockslider__slides.length - 1) {
+                    nextSlideId = 0;
+                }
+                animateTrackToSlideId(nextSlideId, toggleAutoplay);
+            }
+            function removeAnimatingClasses() {
+                slider.querySelector("[data-slide-index=\"" + currentSlideId + "\"]").classList.remove('superblockslider__slide--animating-in');
+                slider.querySelector("[data-slide-index=\"" + previousSlideId + "\"]").classList.remove('superblockslider__slide--animating-out');
+            }
+            if (settings.variableHeight) {
+                slider.style.transition = "height ease " + settings.transitionDuration;
+                updateSliderHeight();
+                window.addEventListener('resize', updateSliderHeight);
+            }
+            function updateSliderHeight() {
+                var sliderWidth = slider.offsetWidth;
+                var currentSceenSize = getScreenSize();
+                var currentImage = slider.querySelector("[data-slide-index=\"" + currentSlideId + "\"] img.visible--" + currentSceenSize);
+                if (currentImage) {
+                    var imageOriginalWidth = Number(currentImage.getAttribute('width'));
+                    var imageOriginalHeight = Number(currentImage.getAttribute('height'));
+                    var imageVariableHeight = calculateVariableHeight(imageOriginalWidth, sliderWidth, imageOriginalHeight);
+                    slider.style.height = imageVariableHeight + 'px';
+                }
+            }
+            function calculateVariableHeight(originalWidth, newWidth, originalHeight) {
+                var percentageDifference;
+                if (originalWidth < newWidth) {
+                    var widthDifference = newWidth - originalWidth;
+                    percentageDifference = widthDifference / originalWidth;
+                    return (percentageDifference * originalHeight + originalHeight);
+                }
+                else {
+                    var widthDifference = originalWidth - newWidth;
+                    percentageDifference = widthDifference / originalWidth;
+                    return (originalHeight - percentageDifference * originalHeight);
+                }
+            }
+            function getScreenSize() {
+                var windowWidth = window.innerWidth;
+                if (windowWidth > 1280) {
+                    return 'xl';
+                }
+                else if (windowWidth < 1280 && windowWidth >= 1024) {
+                    return 'lg';
+                }
+                else if (windowWidth < 1024 && windowWidth >= 768) {
+                    return 'md';
+                }
+                else {
+                    return 'sm';
+                }
+            }
+            var pressDownX = null;
+            var mouseXtriggerThreshold = 150;
+            slider.addEventListener('mousedown', function (event) {
+                pressDownX = event.pageX;
+            });
+            slider.addEventListener('mouseup', function (event) {
+                var diffX = event.pageX - pressDownX;
+                if (diffX > 0 && diffX < mouseXtriggerThreshold) {
+                    nextSlide(null, true);
+                }
+                else if (diffX < 0 && diffX > -mouseXtriggerThreshold) {
+                    prevSlide(null, true);
+                }
+            });
+            var touchXtriggerThreshold = 6;
+            slider.addEventListener('touchstart', handleTouchStart, { passive: true });
+            slider.addEventListener('touchmove', handleTouchMove, { passive: true });
+            function handleTouchStart(event) {
+                var firstTouch = event.touches[0];
+                pressDownX = firstTouch.clientX;
+            }
+            ;
+            function handleTouchMove(event) {
+                if (!pressDownX) {
+                    return;
+                }
+                var xUp = event.touches[0].clientX;
+                var xDiff = pressDownX - xUp;
+                if (xDiff > touchXtriggerThreshold) {
+                    nextSlide(null, true);
+                    autopayToggle = 'stop';
+                }
+                else if (xDiff < -touchXtriggerThreshold) {
+                    prevSlide(null, true);
+                    autopayToggle = 'stop';
+                }
+                pressDownX = null;
+            }
+            ;
+        });
+    };
+})();
+//# sourceMappingURL=superblockslider.js.map

assets/wordpress/wp-content/plugins/super-block-slider/src/js/superblockslider.ts

@@ -0,0 +1,522 @@
+(() => {
+    document.onreadystatechange = function () {
+        if (document.readyState === 'complete') {
+            superblockslider('.superblockslider')
+        }
+    }
+    
+    const superblockslider = (superblocksliderSlides: string)=> {
+        // slides query
+        const superblocksliderSlider = document.querySelectorAll<HTMLElement>(superblocksliderSlides)
+        superblocksliderSlider.forEach((slider, index) => {
+            // load settings
+            
+            const initialActiveSlideAttr = slider.getAttribute('data-initial-active-slide')
+            const loopSlideAttr = slider.getAttribute('data-loop-slide')
+            const autoplayAttr = slider.getAttribute('data-autoplay')
+            const autoplayIntervalAttr = slider.getAttribute('data-autoplay-interval')
+            const slideNavigationAttr = slider.getAttribute('data-slide-navigation')
+            const hoverPauseAttr = slider.getAttribute('data-hover-pause')
+            const transitionEffectAttr = slider.getAttribute('data-transition-effect')
+            const transitionDurationAttr = slider.getAttribute('data-transition-duration')
+            const animationAttr = slider.getAttribute('data-animation')
+
+            const transitionSpeedAttr = slider.getAttribute('data-transition-speed')
+            const arrowNavigationAttr = slider.getAttribute('data-arrow-navigation')
+            const variableHeightAttr = slider.getAttribute('data-variable-height')
+
+            const settings: {
+                initialActiveSlide: number;
+                loopSlide: boolean;
+                autoplay: boolean;
+                autoplayInterval: string;
+                slideNavigation: string;
+                hoverPause: boolean;
+                transitionEffect: string;
+                transitionDuration: string;
+                animation: string;
+
+                transitionSpeed: string;
+                arrowNavigation: boolean;
+                variableHeight: boolean;
+            } =  {
+                initialActiveSlide: initialActiveSlideAttr ? parseInt(initialActiveSlideAttr!) : 0,
+                loopSlide: loopSlideAttr ? false : true,
+                autoplay: autoplayAttr ? false : true,
+                autoplayInterval: autoplayIntervalAttr ? autoplayIntervalAttr! : '1.5s',
+                slideNavigation: slideNavigationAttr ? slideNavigationAttr! : 'dots',
+                hoverPause: hoverPauseAttr ? false : true,
+                transitionEffect: transitionEffectAttr ? transitionEffectAttr! : 'slide',
+                transitionDuration: transitionDurationAttr ? transitionDurationAttr! : '.6s',
+                animation: animationAttr ? animationAttr! : 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',
+
+                transitionSpeed: transitionSpeedAttr ? transitionSpeedAttr! : '.6s',
+                arrowNavigation: arrowNavigationAttr ? false : true,
+                variableHeight: variableHeightAttr ? true : false,
+            }
+
+            let currentSlideIndex = settings.initialActiveSlide
+            let currentSlideId = settings.initialActiveSlide
+            let previousSlideId = settings.initialActiveSlide
+            let animating = false  
+    
+            const el_superblockslider__track = slider.querySelector('.superblockslider__track')!
+            let el_superblockslider__slides = slider.querySelectorAll('.superblockslider__slide')
+
+            const el_superblockslider__button__previous = slider.querySelector('.superblockslider__button__previous')
+            const el_superblockslider__button__next = slider.querySelector('.superblockslider__button__next')
+            
+            // console.log(settings)
+            
+            el_superblockslider__track.addEventListener('transitionstart', transitionStart)
+            el_superblockslider__track.addEventListener('transitionend', transitionEnd)
+            
+            // calculate slide width percentage
+            const offsetPercent = 100 / el_superblockslider__slides.length
+            const translateXOffset = currentSlideIndex * offsetPercent
+            // generate translateX
+            let translateX = `translateX(-${translateXOffset}%)`
+    
+            /**
+             * parallax
+             */
+
+            const parallaxSlides = slider.querySelectorAll('.superblockslider__slide[data-parallax="true"]')
+
+            if(parallaxSlides) {
+                parallaxInit()
+
+                window.addEventListener('scroll', (event)=> {
+                    parallaxSlides.forEach((parallaxSlide, index)=> {
+                            let parallaxAttribute = parallaxSlide.getAttribute('data-parallax-speed')
+                            const el_slide_bg: HTMLElement = (<HTMLElement>parallaxSlide.querySelectorAll('.superblockslider__slide__bg')[0])
+                            if(parallaxAttribute) {
+                                const sliderPositionY = parallaxSlide.getBoundingClientRect().y
+                                if(sliderPositionY <= window.innerHeight && sliderPositionY >= Math.abs(window.innerHeight) * -1) {
+                                    let parallaxSpeed:number = parallaxAttribute ? parseInt(parallaxAttribute) / 100 : 0
+                                    let parallaxOffset = (parallaxSpeed) * ((window.innerHeight - sliderPositionY));
+                                    const totalParallaxOffset = (parallaxSpeed) * ((window.innerHeight));
+                                    (<HTMLElement>el_slide_bg).style.transform = `translateY(${parallaxOffset - totalParallaxOffset}px)`
+                                }
+                                else {
+                                    (<HTMLElement>el_slide_bg).style.transform = `translateY(0px)`
+                                }
+                            }
+
+                    })
+                })
+
+                window.addEventListener('resize', parallaxInit)
+            }
+            function parallaxInit() {
+                parallaxSlides.forEach((slide, index)=> {
+                    let parallaxAttribute = slide.getAttribute('data-parallax-speed')
+                    const parallaxSpeed:number = parallaxAttribute ? parseInt(parallaxAttribute) / 100 : 0
+                    const sliderBoundingRect = slider.getBoundingClientRect()
+                    const sliderPositionY = sliderBoundingRect.y
+                    const sliderHeight = sliderBoundingRect.height
+                    const windowHeight = window.innerHeight
+                    
+                    const el_slide_bg: HTMLElement = (<HTMLElement>slide.querySelectorAll('.superblockslider__slide__bg')[0])
+                    
+                    const el_slide_bg_img = el_slide_bg.querySelectorAll('img')[0]
+                    
+                    const imageHeight = (parallaxSpeed * windowHeight / 2) + sliderHeight;
+                    el_slide_bg_img.style.height = `${imageHeight}px`
+                    const totalParallaxOffset = (parallaxSpeed) * ((windowHeight));
+                    let parallaxOffset = 0
+                    if(sliderPositionY <= windowHeight && sliderPositionY >= Math.abs(windowHeight) * -1 ) {
+                        parallaxOffset = (parallaxSpeed) * ((windowHeight - sliderPositionY));
+                    }
+                    el_slide_bg.style.transform = `translateY(${parallaxOffset - totalParallaxOffset}px)`
+                })
+                
+            }
+            
+            /**
+             * autoplay
+             */
+            let autoplayTime: number
+            let autoplayInterval: number
+            let autopayToggle: any
+            function onMouseOutAutoplay() {
+                autopayToggle = autoplayInterval
+            }
+            if(settings.autoplay == true) {
+                
+                if(settings.autoplayInterval.indexOf('ms') > 0) {
+                    autoplayInterval = parseInt(settings.autoplayInterval.split('ms')[0])
+                    autopayToggle = autoplayInterval
+                }
+                else {
+                    const seconds = Number(settings.autoplayInterval.split('s')[0])
+                    autoplayInterval = seconds * 1000
+                    autopayToggle = autoplayInterval
+                }
+                // autoplay
+                if(typeof autoplayInterval === 'number') {
+                    window.requestAnimationFrame(autoplayTimerFrame)
+
+                    if(settings.hoverPause == true) {
+                        /**
+                         * mouse over slider
+                         */
+                        slider.addEventListener('mouseover', (event)=> {
+                            autopayToggle = 'pause'
+                        })
+                        
+                        slider.addEventListener('mouseout', onMouseOutAutoplay)
+                    }
+                }
+                
+            }
+            // timer
+            function autoplayTimerFrame(timestamp: number) {
+                if(autopayToggle === 'stop') return
+
+                if (autoplayTime === undefined || autopayToggle === 'pause') autoplayTime = timestamp
+
+                const elapsed = timestamp - autoplayTime
+                
+                window.requestAnimationFrame(autoplayTimerFrame);
+
+                if (elapsed >= autopayToggle) {
+                    // reset timer
+                    autoplayTime = timestamp
+                    
+                    nextSlide()
+                }
+            }
+
+            let el_superblockslider__buttons = slider.querySelectorAll('.superblockslider__button')
+            if(settings.slideNavigation != 'none') {
+                /**
+                 * slide button events
+                 */
+                 el_superblockslider__buttons.forEach((button)=> {
+                    button.addEventListener('click', () => {
+                        if(!animating) {
+                            const buttonIdValue = parseInt(button.getAttribute('data-button-id')!)
+                            
+                            animateTrackToSlideId(buttonIdValue, true)
+                        }
+                    })
+                 })
+            }
+            
+            /**
+             * animate track function
+             * @param {int} slideId 
+             */
+            function animateTrackToSlideId(slideId: number, toggleAutoplay: boolean = false) {
+                if(!animating) {
+                    if(toggleAutoplay) {
+                        slider.removeEventListener('mouseout', onMouseOutAutoplay)
+                        autopayToggle = "stop"
+                    }
+                    if(currentSlideId != slideId) {
+                        el_superblockslider__slides = slider.querySelectorAll('.superblockslider__slide')
+    
+                        let slideIndex = slideId
+                        if(settings.loopSlide == false) {
+                            
+                        }
+                        // if infinite loop
+                        else if(settings.transitionEffect == 'slide' && settings.loopSlide == true) {
+                            /**
+                             * move Last slide to first
+                             */
+                            if(currentSlideIndex === 0 && el_superblockslider__slides.length > 2) {
+                                (<HTMLElement>el_superblockslider__track).style.transition = 'none'
+                                const lastSide = el_superblockslider__slides[el_superblockslider__slides.length - 1]
+    
+                                el_superblockslider__track.prepend(lastSide)
+                                
+                                currentSlideIndex = 1
+                                
+                                let trackOffset = currentSlideIndex * offsetPercent
+                                translateX = `translateX(-${trackOffset}%)`;
+    
+                                (<HTMLElement>el_superblockslider__track).style.transform = translateX
+                            }
+                            /**
+                             * move First slide to last
+                             */
+                            else if(currentSlideIndex === el_superblockslider__slides.length - 1) {
+                                (<HTMLElement>el_superblockslider__track).style.transition = 'none'
+                                
+                                
+                                currentSlideIndex = el_superblockslider__slides.length - 2
+                                
+                                let trackOffset = currentSlideIndex * offsetPercent
+                                translateX = `translateX(-${trackOffset}%)`;
+    
+                                (<HTMLElement>el_superblockslider__track).style.transform = translateX
+    
+                                const firstSlide = el_superblockslider__slides[0]
+                                el_superblockslider__track.append(firstSlide)
+                            }
+    
+                            const slideMatch = slider.querySelectorAll(`[data-slide-index="${slideId}"]`)!
+                            if(slideMatch[0] && slideMatch[0].parentNode) {
+                                const slideMatch_parent_children = slideMatch[0].parentNode.children
+                            
+                                let closeSlide = Array.from(slideMatch_parent_children).indexOf(slideMatch[0])
+                                slideIndex = closeSlide
+                            }
+                        }
+                        
+                        // run on new thread to apply move translateX
+                        setTimeout (() => {
+                            animate(slideId, slideIndex)
+                        }, 100);
+                        
+                    }
+                }
+            }
+            function animate(slideId: number, slideIndex: number) {
+                // console.log(animating)
+                if(settings.transitionEffect == 'slide') {
+
+                    (<HTMLElement>el_superblockslider__track).style.transition = `all ${settings.transitionDuration} ${settings.animation}`;
+                    
+                    let trackOffset = slideIndex * offsetPercent
+                    translateX = `translateX(-${trackOffset}%)`;
+                    
+                    (<HTMLElement>el_superblockslider__track).style.transform = translateX
+                    
+                    currentSlideIndex = slideIndex
+                    currentSlideId = slideId
+                }
+                else if(settings.transitionEffect == 'fade') {
+                    currentSlideIndex = slideIndex
+                    currentSlideId = slideId
+                    transitionEnd()
+                }
+            }
+    
+            function transitionStart() {
+                animating = true
+
+                if(autopayToggle !== "stop") autopayToggle = "pause"
+                
+                if(settings.transitionEffect == 'slide') {
+                    (<HTMLElement>el_superblockslider__track).style.transition = `all ${settings.transitionDuration} ${settings.animation}`;
+                }
+
+                /**
+                 * variable height animation
+                 */
+                if(settings.variableHeight) {
+                    // set slider height to inital slide
+                    updateSliderHeight()
+                }
+
+                /**
+                 * Add superblockslider__slide--animating
+                 */
+
+                slider.querySelector(`[data-slide-index="${currentSlideId}"]`)!.classList.add('superblockslider__slide--animating-in')
+                slider.querySelector(`[data-slide-index="${previousSlideId}"]`)!.classList.add('superblockslider__slide--animating-out')
+            }
+    
+            function transitionEnd() {
+                // remove slide active class
+                slider.querySelector('.superblockslider__slide--active')!.classList.remove('superblockslider__slide--active')
+                
+                // add slide active class
+                slider.querySelector(`[data-slide-index="${currentSlideId}"]`)!.classList.add('superblockslider__slide--active')
+
+                if(settings.slideNavigation != 'none') {
+                    // remove button active class
+                    slider.querySelector('.superblockslider__button--active')!.classList.remove('superblockslider__button--active')
+                    // add button active class
+                    el_superblockslider__buttons[currentSlideId].classList.add('superblockslider__button--active')
+                }
+    
+                animating = false
+                if(autopayToggle !== "stop") autopayToggle = autoplayInterval
+            }
+
+            // next, prev button event
+            if(el_superblockslider__button__previous && el_superblockslider__button__next) {
+                el_superblockslider__button__previous.addEventListener('click', ()=> {
+                    prevSlide(null, true)
+                })
+                el_superblockslider__button__next.addEventListener('click', ()=> {
+                    nextSlide(null, true)
+                })
+            }
+    
+            /**
+             * prev slide
+             */
+
+            function prevSlide(event?: any, toggleAutoplay?: boolean) {
+                removeAnimatingClasses()
+                previousSlideId = currentSlideId
+
+                let prevSlideId = currentSlideId - 1
+
+                if(prevSlideId < 0) {
+                    // get last slide Id
+                    prevSlideId = el_superblockslider__slides.length - 1
+                }
+                animateTrackToSlideId(prevSlideId, toggleAutoplay)
+            }
+            
+            /**
+             * next slide
+            */
+            
+           function nextSlide(event?: any, toggleAutoplay?: boolean) {
+                removeAnimatingClasses()
+                previousSlideId = currentSlideId
+
+                let nextSlideId = currentSlideId + 1
+                if(nextSlideId > el_superblockslider__slides.length - 1) {
+                    nextSlideId = 0
+                }
+                animateTrackToSlideId(nextSlideId, toggleAutoplay)
+            }
+            
+            /**
+             * remove animating classes
+             */
+            function removeAnimatingClasses() {
+                // remove slide animating class
+                slider.querySelector(`[data-slide-index="${currentSlideId}"]`)!.classList.remove('superblockslider__slide--animating-in')
+                // remove slide animating class
+                slider.querySelector(`[data-slide-index="${previousSlideId}"]`)!.classList.remove('superblockslider__slide--animating-out')
+            }
+
+            /**
+             * Variable height
+             */
+
+            if(settings.variableHeight) {
+                slider.style.transition = `height ease ${settings.transitionDuration}`
+                
+                // set slider height to inital slide
+                updateSliderHeight()
+
+                window.addEventListener('resize', updateSliderHeight)
+            }
+            function updateSliderHeight() {
+                let sliderWidth = slider.offsetWidth
+                let currentSceenSize = getScreenSize()
+                let currentImage = <HTMLImageElement>slider.querySelector(`[data-slide-index="${currentSlideId}"] img.visible--${currentSceenSize}`)
+                if(currentImage) {
+                    let imageOriginalWidth = Number(currentImage.getAttribute('width'))
+                    let imageOriginalHeight = Number(currentImage.getAttribute('height'))
+                    let imageVariableHeight = calculateVariableHeight(imageOriginalWidth, sliderWidth, imageOriginalHeight)
+                    // currentImage.style.objectFit = 'cover'
+                    slider.style.height = imageVariableHeight + 'px'
+                }
+            }
+
+            /**
+             * 
+             * @param originalWidth Original width of image
+             * @param newWidth Current rendered width of image
+             * @param originalHeight Original height of image
+             * @returns Number variable image height
+             */
+            function calculateVariableHeight(originalWidth:number, newWidth:number, originalHeight:number,) {
+                // percenage increase
+                let percentageDifference:number;
+                if(originalWidth < newWidth) {
+                    let widthDifference:number = newWidth - originalWidth;
+                    percentageDifference = widthDifference / originalWidth;
+                    return(percentageDifference * originalHeight + originalHeight)
+                }
+
+                // percentage decrease
+                else {
+                    let widthDifference:number = originalWidth - newWidth;
+                    percentageDifference = widthDifference / originalWidth;
+                    return(originalHeight - percentageDifference * originalHeight)
+                }
+                
+            }
+            
+            /**
+             * 
+             * @returns String window screen width
+             */
+            function getScreenSize() {
+                let windowWidth = window.innerWidth
+                if(windowWidth > 1280) {
+                    return 'xl'
+                }
+                else if (windowWidth < 1280 && windowWidth >= 1024) {
+                    return 'lg'
+                }
+                else if (windowWidth < 1024 && windowWidth >= 768) {
+                    return 'md'
+                }
+                else {
+                    return 'sm'
+                }
+            }
+
+            /**
+             * Mouse, touch drag change slide
+             */
+
+            let pressDownX: any = null;
+
+            /** 
+             * Mouse drag
+             */
+            const mouseXtriggerThreshold = 150
+            slider.addEventListener('mousedown', function (event) {
+                pressDownX = event.pageX
+            })
+            
+            slider.addEventListener('mouseup', function (event) {
+                const diffX = event.pageX - pressDownX
+                
+                if(diffX > 0 && diffX < mouseXtriggerThreshold) {
+                    nextSlide(null, true)
+                }
+                else if(diffX < 0 && diffX > -mouseXtriggerThreshold) {
+                    prevSlide(null, true)
+                }
+            })
+            
+            /**
+             * Touch drag
+            */
+           const touchXtriggerThreshold = 6
+           slider.addEventListener('touchstart', handleTouchStart, {passive: true})
+           slider.addEventListener('touchmove', handleTouchMove, {passive: true})                                                   
+                                                                                        
+            function handleTouchStart(event: any) {
+                const firstTouch = event.touches[0];
+                
+                pressDownX = firstTouch.clientX;
+            };                                                
+            
+            function handleTouchMove(event: any) {
+                if ( ! pressDownX) {
+                    return
+                }
+    
+                let xUp = event.touches[0].clientX;                                    
+    
+                let xDiff = pressDownX - xUp;
+                       
+                if ( xDiff > touchXtriggerThreshold) {
+                    nextSlide(null, true)
+                    autopayToggle = 'stop'
+                } else if(xDiff < -touchXtriggerThreshold) {
+                    prevSlide(null, true)
+                    autopayToggle = 'stop'
+                } 
+                /* reset values */
+                pressDownX = null;                                         
+            };
+        })
+    }
+})()

assets/wordpress/wp-content/plugins/super-block-slider/src/style.scss

@@ -0,0 +1,286 @@
+.superblockslider {
+	position: relative;
+}
+.entry-content > .superblockslider {
+}
+
+.superblockslider__window, .superblockslider__track {
+	height: 100%;
+}
+/* window */
+.superblockslider__window {
+	width: 100%;
+	overflow: hidden;
+}
+/* track */
+.superblockslider__track {
+	width: 100%;
+	display: flex;
+
+	transition: all .7s ease-in-out;
+}
+
+.superblockslider__controls {
+	display: flex;
+	justify-content: space-between;
+}
+.superblockslider__buttons {
+    position: absolute;
+	z-index: 2;
+    bottom: 3%;
+    left: 50%;
+    transform: translateX(-50%);
+	align-items: center;
+	min-height: 2rem;
+
+	display: flex;
+    width: 100%;
+    justify-content: center;
+}
+.slide__button {
+	display: inline-block;
+}
+
+
+.superblockslider__navigation {
+	position: absolute;
+	z-index: 1;
+	top: 50%;
+
+	width: 100%;
+	height: 0;
+	align-items: center;
+}
+
+.superblockslider__button, .superblockslider__button__navigation {
+	// height: 100%;
+	background-color: transparent !important;
+	border: none;
+	cursor: pointer;
+
+	&:focus {
+		outline-style: none;
+	}
+}
+.superblockslider__button__title {
+	margin: .5rem;
+	line-height: 1em;
+}
+/* navigation arrows */
+.superblockslider__button__navigation {
+	padding: 0;
+	opacity: .5;
+	transition: all .5s;
+	
+	svg {
+		transition: all .5s;
+		width: 58px;
+		height: 58px;
+	}
+	&:hover {
+		opacity: 1;
+	}
+}
+
+/* slide buttons */
+.superblockslider__button {
+	margin: 0 .1rem;
+	padding: 0;
+	opacity: .5;
+	transition: all .5s;
+	min-width: 2.5rem;
+	cursor: pointer;
+
+	span {
+		transition: all .5s;
+		display: flex;
+    	justify-content: center;
+		word-break: break-word;
+	}
+	svg {
+		transition: all .5s;
+		width: 1rem;
+		height: 1rem;
+	}
+	&--active, &:hover {
+		opacity: 1;
+		svg {
+			width: 1.5rem;
+			height: 1.5rem;
+		}
+	}
+}
+/* slide */
+.superblockslider__slide {
+	position: relative;
+	width: 100%;
+	overflow: hidden;
+
+	&.is-vertical-center {
+		.superblockslider__slide_inner {
+			justify-content: center;
+		}
+	}
+	&.is-not-horizontal-center {
+		.superblockslider__slide_inner {
+			justify-content: initial;
+		}
+	}
+	&.is-vertical-bottom {
+		.superblockslider__slide_inner {
+			justify-content: flex-end;
+		}
+	}
+}
+/* fade slider */
+.superblockslider[data-transition-effect='fade'] .superblockslider__slide {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+
+	opacity: 0;
+
+	&.superblockslider__slide--active {
+		z-index: 1;
+		opacity: 1;
+	}
+}
+.superblockslider__slide__bg, .superblockslider__slide__overlay {
+	display: flex;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+
+	& > img {
+		height: 100%;
+    	width: 100%;
+		-webkit-backface-visibility: hidden;
+	}
+}
+.superblockslider__slide_inner {
+	display: flex;
+	flex-direction: column;
+	
+	position: absolute;
+
+	width: calc(100% - 58px * 2 - 10px * 2);
+	height: 81%;
+    top: 9%;
+    left: calc(58px + 10px);
+
+	padding-bottom: 32px;
+	overflow: hidden;
+}
+.inner-blocks {
+	overflow: auto;
+	width: 100%;
+}
+
+.superblockslider__slide__link {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+/* responsive */
+.visible--md,
+.visible--lg,
+.visible--xl
+{
+	display: none;
+}
+
+.visible--sm,
+.visible--md.visible--sm {
+	display: block;
+}
+
+@media (min-width: 768px) {
+	.visible--sm,
+	.visible--lg,
+	.visible--xl,
+	.visible--xl.visible--lg {
+		display: none;
+	}
+
+	.visible--md,
+	.visible--md.visible--lg {
+		display: block;
+	}
+
+	.superblockslider__slide_inner {
+		width: calc(100% - 68px * 2 - 15px * 2);
+		height: 83%;
+		top: 8.5%;
+		left: calc(68px + 15px);
+	}
+	.superblockslider__buttons {
+		bottom: 2.5%;
+	}
+	.superblockslider__button__navigation svg {
+		width: 68px;
+		height: 68px;
+
+	}
+}
+@media (min-width: 1024px) {
+	.visible--sm,
+	.visible--md,
+	.visible--xl,
+	.visible--md.visible--sm
+	{
+		display: none;
+	}
+
+	.visible--lg,
+	.visible--lg.visible--md,
+	.visible--xl.visible--lg {
+		display: block;
+	}
+
+	.superblockslider__slide_inner {
+		width: calc(100% - 70px * 2 - 15px * 2);
+		height: 86%;
+		top: 6%;
+		left: calc(70px + 15px);
+	}
+	.superblockslider__buttons {
+		bottom: 2%;
+	}
+	.superblockslider__button__navigation svg {
+		width: 70px;
+		height: 70px;
+
+	}
+}
+
+@media (min-width: 1280px) {
+	.visible--sm,
+	.visible--md,
+	.visible--lg,
+	.visible--lg.visible--md
+	{
+		display: none;
+	}
+	.visible--xl,
+	.visible--xl.visible--lg {
+		display: block;
+	}
+
+	.superblockslider__slide_inner {
+		width: calc(100% - 85px * 2 - 15px * 2);
+		height: 90%;
+		top: 5%;
+		left: calc(85px + 15px);
+	}
+	.superblockslider__buttons {
+		bottom: 3%;
+	}
+	.superblockslider__button__navigation svg {
+		width: 85px;
+		height: 85px;
+	}
+}

assets/wordpress/wp-content/plugins/super-block-slider/super-block-slider.php

@@ -0,0 +1,79 @@
+<?php
+/**
+ * Plugin Name:     Super block slider
+ * Description:     Lightweight, responsive, image & content slider for block and classic editor.
+ * Version:         2.7.7
+ * Author:          mikemmx
+ * Plugin URI:		https://superblockslider.com/
+ * Author URI:  	https://wordpress.org/support/users/mikemmx/
+ * License:         GPL-2.0-or-later
+ * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
+ * Text Domain:     superblockslider
+ * Domain Path:		/languages
+ *
+ */
+
+$dir = __DIR__;
+/**
+ * Load superblockslider post type
+ */
+$superblockslider_post_type = "$dir/includes/superblockslider_post_type.php";
+require( $superblockslider_post_type );
+ 
+ /**
+  * Register superblockslider
+  */
+function superblockslider() {
+	$dir = __DIR__;
+
+	$script_asset_path = "$dir/build/index.asset.php";
+
+	$index_js     = 'build/index.js';
+	$script_asset = require( $script_asset_path );
+	wp_register_script(
+		'superblockslider-editor',
+		plugins_url( $index_js, __FILE__ ),
+		$script_asset['dependencies'],
+		$script_asset['version']
+	);
+	wp_set_script_translations( 'superblockslider-editor', 'slider' );
+
+	$slider_js = 'build/superblockslider.js';
+	wp_register_script(
+		'superblockslider',
+		plugins_url( $slider_js, __FILE__ ),
+		array(),
+		$script_asset['version'],
+		array(
+			'in_footer' => true,
+			'strategy'  => 'defer',
+		)
+	);
+
+	$editor_css = 'build/index.css';
+	wp_register_style(
+		'superblockslider-editor',
+		plugins_url( $editor_css, __FILE__ ),
+		array(),
+		filemtime( "$dir/$editor_css" )
+	);
+
+	$style_css = 'build/style-index.css';
+	wp_register_style(
+		'superblockslider',
+		plugins_url( $style_css, __FILE__ ),
+		array(),
+		filemtime( "$dir/$style_css" )
+	);
+
+	register_block_type(
+		'superblockslider/slider',
+		array(
+			'editor_script' => 'superblockslider-editor',
+			'editor_style'  => 'superblockslider-editor',
+			'style'         => 'superblockslider',
+			'script'        => 'superblockslider',
+		)
+	);
+}
+add_action( 'init', 'superblockslider' );