Slideshow Block

block.js

(function ($) {
	'use strict';

	const flickityOptions = {
		autoPlay: 6000,
		cellAlign: 'left',
		cellSelector: '.block-slideshow__slide',
		dragThreshold: 25,
		imagesLoaded: true,
		pageDots: true,
		prevNextButtons: true,
		setGallerySize: true,
		wrapAround: false
	};

	/**
	 * Initialize slideshow(s) within a passed scope.
	 *
	 * @param {jQuery|HTMLElement|Document} scope
	 */
	function initSlideshow(scope) {
		const $scope = $(scope);

		// Find matching sliders inside the scope.
		// .addBack() also handles the unlikely case that scope itself is the slider.
		$scope
			.find('.block-slideshow__slides')
			.addBack('.block-slideshow__slides')
			.each(function () {
				const $slider = $(this);

				// Flickity's jQuery integration stores its instance in jQuery data.
				// Do not initialize a slider a second time after an ACF re-render.
				if ($slider.data('flickity')) {
					return;
				}

				// Optional but useful: do not try to make an empty/one-slide
				// editor preview behave like a carousel.
				if ($slider.find('.block-slideshow__slide').length < 2) {
					return;
				}

				$slider.flickity(flickityOptions);
			});
	}

	/**
	 * Front end.
	 */
	$(function () {
		initSlideshow(document);
	});

	/**
	 * ACF block-editor preview.
	 */
	if (window.acf) {
		window.acf.addAction(
			'render_block_preview/type=wd/acf-slideshow',
			function ($block) {
				initSlideshow($block);
			}
		);
	}
})(jQuery);

block.json

{
	"name": "wd/acf-slideshow",
	"title": "Slideshow Block",
	"description": "A simple slideshow block.",
	"style": "block-slideshow",
	"category": "wd-blocks",
	"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.5 22.5'><defs><style>.a{fill:#222;}.b{fill:#1fa8af;}</style></defs><path class='a' d='M20.17,4a10.17,10.17,0,0,0-7-3.5L11.91.38h-.18a.64.64,0,0,0-.47.13A.68.68,0,0,0,11,.93L10.6,3.79a.48.48,0,0,0,.12.43.54.54,0,0,0,.44.18h.11l1.44.17c3.94.45,6.12,2.69,5.84,6a8.37,8.37,0,0,1-2.49,5.12A8.14,8.14,0,0,1,10,18.06l-.65,0H9.15a.8.8,0,0,0-.5.17.68.68,0,0,0-.25.44L8,21.5a.49.49,0,0,0,.12.42.57.57,0,0,0,.45.18h.17l1,0h.34a11.61,11.61,0,0,0,8.21-3.39,12.76,12.76,0,0,0,3.77-7.92A9.49,9.49,0,0,0,20.17,4Z'/><path class='b' d='M9.2,17h.15L10,17a7.61,7.61,0,0,0,3.64-.77L15,6.15a8.65,8.65,0,0,0-2.33-.57l-1-.12-1,7.35L9.23,7c-.11-.45-.33-.67-.65-.67H7.16c-.29,0-.5.22-.65.67L5.1,12.81,3.82,3a.55.55,0,0,0-.61-.55H.78a.36.36,0,0,0-.29.16A.6.6,0,0,0,.37,3a.5.5,0,0,0,0,.18L2.53,19.22a1.07,1.07,0,0,0,.23.6.64.64,0,0,0,.53.23H5.16c.37,0,.61-.21.73-.65l2-7.19Z'/></svg>",
	"apiVersion": 3,
	"keywords": [
	],
	"acf": {
		"blockVersion": 3,
		"renderTemplate": "render.php"
	},
	"supports": {
		"align": [
			"wide",
			"full"
		],
		"alignContent": false,
		"alignText": false,
		"anchor": true,
		"color": {
			"background": false,
			"gradients": false,
			"link": false,
			"text": false
		},
		"fullHeight": false
	}
}

blocks.php

/**
 * Load blocks.
 */
function load_blocks() {

	$blocks = scandir( get_template_directory() . '/blocks/' );
	$blocks = array_values( array_diff( $blocks, array( '_base', '.DS_Store' ) ) );

	if ( ! empty( $blocks ) ) {

		foreach ( $blocks as $block ) {

			// Empty scripts array.
			$scripts = [];

			// Regsiter block scripts if they exist (must register script before block).
			if ( file_exists( get_template_directory() . '/blocks/' . $block . '/block.js' ) ) {

				// Set proper dependencies.
				$deps = [
					'acf',
					'jquery',
				];

				// Additional dependencies per block.
				if ( $block === 'slideshow' || $block === 'logo-scroller' ) {
					$deps[] = 'wd-flickity';
				}

				// Register script.
				wp_register_script(
					'block-' . $block . '-js',
					get_stylesheet_directory_uri() . '/blocks/' . $block . '/block-min.js',
					$deps,
					WD_THEME_VERSION,
					false
				);

				// Populate scripts array.
				$scripts = [
					'script' => 'block-' . $block . '-js',
				];

			}

			// Register the block.
			register_block_type(
				get_template_directory() . '/blocks/' . $block,
				$scripts
			);

			// Register block styles if they exist.
			if ( file_exists( get_template_directory() . '/blocks/' . $block . '/style.css' ) ) {
				wp_register_style(
					'block-' . $block,
					get_stylesheet_directory_uri() . '/blocks/' . $block . '/style.css',
					null,
					WD_THEME_VERSION
				);
			}
		}
	}
}
add_action( 'init', __NAMESPACE__ . '\load_blocks', 5 );

group_5f0468056011f.json

{
    "key": "group_5f0468056011f",
    "title": "Block - Slideshow",
    "fields": [
        {
            "key": "field_5f0468115bd79",
            "label": "Slides",
            "name": "wd_block_slideshow_slides",
            "type": "repeater",
            "instructions": "",
            "required": 1,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "collapsed": "",
            "min": 0,
            "max": 0,
            "layout": "table",
            "button_label": "Add Row",
            "sub_fields": [
                {
                    "key": "field_5f0468205bd7a",
                    "label": "Image",
                    "name": "wd_image",
                    "type": "image",
                    "instructions": "",
                    "required": 0,
                    "conditional_logic": 0,
                    "wrapper": {
                        "width": "",
                        "class": "",
                        "id": ""
                    },
                    "return_format": "array",
                    "preview_size": "full",
                    "library": "all",
                    "min_width": "",
                    "min_height": "",
                    "min_size": "",
                    "max_width": "",
                    "max_height": "",
                    "max_size": "",
                    "mime_types": "",
                    "parent_repeater": "field_5f0468115bd79"
                }
            ]
        }
    ],
    "location": [
        [
            {
                "param": "block",
                "operator": "==",
                "value": "wd\/acf-slideshow"
            }
        ]
    ],
    "menu_order": 0,
    "position": "normal",
    "style": "default",
    "label_placement": "top",
    "instruction_placement": "label",
    "hide_on_screen": "",
    "active": true,
    "description": "",
    "show_in_rest": 0,
    "modified": 1661520727
}

render.php

<?php
/**
 * Slideshow Block
 *
 * @package      ShredRight
 * @author       Matt Whiteley
 * @since        1.0.0
 * @license      GPL-2.0+
 */

// Block ID.
$block_id = str_replace( '_', '-', $block['id'] );

// Add anchor if present.
if ( ! empty( $block['anchor'] ) ) {
	$block_id = $block['anchor'];
}

// Block Classes.
$block_classes = 'acf-block block-slideshow';

// Custom CSS class.
if ( ! empty( $block['className'] ) ) {
	$block_classes .= ' ' . $block['className'];
}

// Optionally disable pointer events (prevent clicking links within block editor).
$disable_pointer_events = false;
if ( $disable_pointer_events === true && is_admin() ) {
	$block_classes .= ' disable-pointer-events';
}

// Set up the wrapper attributes.
$wrapper_attributes = get_block_wrapper_attributes(
	[
		'id'    => $block_id,
		'class' => $block_classes,
		'style' => '',
	]
);
?>

<?php if ( ! $is_preview ) : ?>
	<div <?php echo wp_kses_post( $wrapper_attributes ); ?>>
<?php else : ?>
	<div id="<?php echo esc_attr( $block_id ); ?>" class="<?php echo wp_kses_post( $block_classes ); ?>">
<?php endif; ?>

	<?php if ( have_rows( 'wd_block_slideshow_slides' ) ) : ?>
		<div class="block-slideshow__slides">

			<?php while ( have_rows( 'wd_block_slideshow_slides' ) ) : ?>
				<?php the_row(); ?>

				<?php
				$wd_image = get_sub_field( 'wd_image' );
				?>

				<div class="block-slideshow__slide">
					<img src="<?php echo esc_url( $wd_image['url'] ); ?>" data-flickity-lazyload="<?php echo esc_url( $wd_image['url'] ); ?>" alt="<?php echo esc_attr( $wd_image['alt'] ); ?>" />
				</div>

			<?php endwhile; ?>

		</div>
	<?php endif; ?>

</div>

style.css

/**
 * /assets/scss/partials/base/mixins.scss
 *
 * Let's define our universal mixins for use throughout the theme
 */
/**
 * Base text styles
 */
/**
 * Base button styles
 */
/**
 * Button reset
 */
/**
 * Label styles
 */
/**
 * Transitions
 */
/**
 * Placeholder Color
 */
/**
 * Media queries
 */
.block-slideshow {
  padding-bottom: var(--wp--custom--spacing--block-gap);
  position: relative;
}
.block-slideshow__slides {
  width: 100%;
}
.block-slideshow__slide {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block-slideshow__slide img {
  display: block;
  width: 100%;
}