fix (autoplay) : disable autoplay in hero section template

build/slider/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-media-utils', 'wp-notices', 'wp-primitives'), 'version' => '13f4c60a3ce0104e3a07');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-media-utils', 'wp-notices', 'wp-primitives'), 'version' => 'b4a4ff92940cc4c046c4');

build/slider/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '6bdb5d907b4ba2962e12');
+<?php return array('dependencies' => array(), 'version' => '636c8df5b984e7ac7dca');

src/slider/slider.js

@@ -27,25 +27,41 @@ import { generateNavigationStyles } from '../utils/style';
  * @return {JSX.Element} The slider component.
  */
 const Slider = memo(
-	( { clientId, attributes, innerBlocksProps, innerBlocks } ) => {
-		const swiperContainerRef = useRef( null );
-		const swiperInstanceRef = useRef( null );
+	({ clientId, attributes, innerBlocksProps, innerBlocks }) => {
+		const swiperContainerRef = useRef(null);
+		const swiperInstanceRef = useRef(null);
 
 		const editorDeviceType = useSelect(
-			( wpSelect ) => wpSelect( 'core/editor' ).getDeviceType(),
+			(wpSelect) => wpSelect('core/editor').getDeviceType(),
 			[]
 		);
 
+		const isAnySlideFocused = useSelect((select) => {
+			const selected = select(blockEditorStore).getSelectedBlockClientId();
+			if (!selected) {
+				return false;
+			}
+
+			// if they clicked the slider container itself
+			if (selected === clientId) {
+				return true;
+			}
+
+			// otherwise see who the “root” of the selected block is:
+			const root = select(blockEditorStore).getBlockHierarchyRootClientId(selected);
+			return root === clientId;
+		}, [clientId]);
+
 		/**
 		 * Initialize the Swiper slider instance.
 		 */
 		const initializeSwiper = () => {
-			if ( swiperContainerRef.current && innerBlocks.length > 0 ) {
+			if (swiperContainerRef.current && innerBlocks.length > 0) {
 				swiperContainerRef.current.className = 'swiper';
 
 				// Destroy any existing Swiper instance.
-				if ( swiperInstanceRef.current ) {
-					swiperInstanceRef.current.destroy( true, true );
+				if (swiperInstanceRef.current) {
+					swiperInstanceRef.current.destroy(true, true);
 					swiperInstanceRef.current = null;
 				}
 
@@ -64,13 +80,13 @@ const Slider = memo(
 		 *
 		 * @param {string[]} slideOrder - Array of block client IDs representing the slide order.
 		 */
-		const manageSwiperUpdates = ( slideOrder ) => {
+		const manageSwiperUpdates = (slideOrder) => {
 			const currentSlidesOrder =
-				select( blockEditorStore ).getBlockOrder( clientId );
+				select(blockEditorStore).getBlockOrder(clientId);
 
-			if ( currentSlidesOrder.toString() !== slideOrder.toString() ) {
+			if (currentSlidesOrder.toString() !== slideOrder.toString()) {
 				const selectedBlock =
-					select( blockEditorStore ).getSelectedBlock();
+					select(blockEditorStore).getSelectedBlock();
 				const slideAdded =
 					currentSlidesOrder.length > slideOrder.length;
 				const slideRemoved =
@@ -84,18 +100,18 @@ const Slider = memo(
 
 				// Destroy and reinitialize the Swiper instance.
 				swiperInstanceRef.current?.destroy();
-				window.requestAnimationFrame( () => {
+				window.requestAnimationFrame(() => {
 					initializeSwiper();
 
 					let slideToIndex = activeIndex;
 
-					if ( slideAdded ) {
+					if (slideAdded) {
 						slideToIndex = slideOrder.length - 1;
-					} else if ( slideRemoved ) {
-						slideToIndex = Math.max( activeIndex - 1, 0 );
-					} else if ( slideMoved ) {
+					} else if (slideRemoved) {
+						slideToIndex = Math.max(activeIndex - 1, 0);
+					} else if (slideMoved) {
 						slideToIndex = slideOrder.findIndex(
-							( blockClientId ) =>
+							(blockClientId) =>
 								blockClientId === selectedBlock?.clientId
 						);
 					}
@@ -104,42 +120,54 @@ const Slider = memo(
 						slideToIndex >= 0 ? slideToIndex : 0,
 						0
 					);
-				} );
+				});
 			}
 		};
 
-		useEffect( () => {
+		useEffect(() => {
 			initializeSwiper();
 
 			const slideOrder =
-				select( blockEditorStore ).getBlockOrder( clientId );
+				select(blockEditorStore).getBlockOrder(clientId);
 
 			// Subscribe to updates in the block editor.
-			const unsubscribe = subscribe( () =>
-				manageSwiperUpdates( slideOrder )
+			const unsubscribe = subscribe(() =>
+				manageSwiperUpdates(slideOrder)
 			);
 
 			// Cleanup on component unmount.
 			return () => {
 				unsubscribe();
-				swiperInstanceRef.current?.destroy( true, true );
+				swiperInstanceRef.current?.destroy(true, true);
 			};
-		}, [ editorDeviceType, attributes, innerBlocks.length ] );
+		}, [editorDeviceType, attributes, innerBlocks.length]);
 
-		const navigationStyles = generateNavigationStyles( attributes );
+		useEffect(() => {
+			const swiper = swiperInstanceRef.current;
+			if (!swiper || !swiper.autoplay) {
+				return;
+			}
+			if (isAnySlideFocused) {
+				swiper.autoplay.stop();
+			} else if (attributes.autoplay) {
+				swiper.autoplay.start();
+			}
+		}, [ isAnySlideFocused, attributes ]);
+
+		const navigationStyles = generateNavigationStyles(attributes);
 		const applyPadding = innerBlocks.length >= 2 ? '100px' : '';
 
 		return (
 			<div
-				{ ...useBlockProps( {
+				{...useBlockProps({
 					role: 'region',
 					'aria-roledescription': 'carousel',
 					'aria-label': 'Slider block',
 					style: { ...navigationStyles, padding: applyPadding },
-				} ) }
+				})}
 			>
-				<div ref={ swiperContainerRef }>
-					<div { ...innerBlocksProps } />
+				<div ref={swiperContainerRef}>
+					<div {...innerBlocksProps} />
 				</div>
 			</div>
 		);

src/slider/swiper-init.js

@@ -78,6 +78,7 @@ export function SwiperInit(
 		autoplay: {
 			enabled: options.autoplay ?? true,
 			delay: options.delay ?? 5000,
+			pauseOnMouseEnter: true,
 		},
 		speed: options.speed ?? 300,
 		grabCursor: true,

src/templates/hero-section.js

@@ -7,7 +7,7 @@ const HeroSection = {
 	name: 'hero-section',
 	title: __( 'Hero Section', 'blablablocks-slider-block' ),
 	content: `
-             <!-- wp:blablablocks/slider {"autoplay":true,"navigation":{"desktop":false,"tablet":false,"mobile":false,"activeDevice":"desktop"},"loop":true,"paginationColor":{"activeColor":{"default":"#ffffff"}},"metadata":{"name":"Hero Section"},"align":"full","className":"wp-block-blablablocks-slider alignfull wp-block-lubus-slider","style":{"spacing":{"padding":{"top":"0px","bottom":"0px","left":"0px","right":"0px"}}}} -->
+             <!-- wp:blablablocks/slider {"autoplay":false,"navigation":{"desktop":false,"tablet":false,"mobile":false,"activeDevice":"desktop"},"loop":true,"paginationColor":{"activeColor":{"default":"#ffffff"}},"metadata":{"name":"Hero Section"},"align":"full","className":"wp-block-blablablocks-slider alignfull wp-block-lubus-slider","style":{"spacing":{"padding":{"top":"0px","bottom":"0px","left":"0px","right":"0px"}}}} -->
                 <!-- wp:blablablocks/slide {"className":"wp-block-lubus-slide"} -->
                 <div class="wp-block-blablablocks-slide swiper-slide wp-block-lubus-slide"><!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2024/01/paint-wide-3.jpg","id":13691,"dimRatio":50,"isUserOverlayColor":false,"minHeight":500,"className":"alignfull is-style-default","style":{"spacing":{"padding":{"right":"var:preset|spacing|50","left":"var:preset|spacing|50"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"default"}} -->
                 <div class="wp-block-cover alignfull is-style-default" style="margin-top:0;margin-bottom:0;padding-right:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50);min-height:500px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-13691" alt="" src="https://dotcompatterns.files.wordpress.com/2024/01/paint-wide-3.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":"var:preset|spacing|70"} -->