Inner Block Slider: Optionally manage state externally

dist/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-dom', 'wp-element', 'wp-html-entities', 'wp-i18n', 'wp-server-side-render', 'wp-url'), 'version' => '27efa55df920e54bd9f2');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-dom', 'wp-element', 'wp-html-entities', 'wp-i18n', 'wp-server-side-render', 'wp-url'), 'version' => '54039a5cff8ef8014072');

src/components/InnerBlockSlider/README.md

@@ -103,8 +103,24 @@ The above example code creates a slider using the core image block as each slide
 | `allowedBlock`  | `string`       | `''`    | Block types to be allowed inside the slider   |
 | `slideLimit`    | `integer`      | `10`    | Maximum number of slides.                     |
 | `parentBlockId` | `string`       | `''`    | Client ID of parent block. This is required.  |
+| `externalCurrentItemIndex`    | `string`   | `null` | Optional. Current slide index. If you need to access to the current item index externally, then you need to manage that state externally. |
+| `setExternalCurrentItemIndex` | `function` | `null` | Optional. Function to update the current slide index. If you need to access to the current item index externally, then you need to manage that state externally.  |
 
 
+## Examples
+
+### Managing the state externally.
+
+```js
+const [ currentItemIndex, setCurrentItemIndex ] = useState( 0 );
+
+<InnerBlockSlider
+	parentBlockId={ clientId }
+	externalCurrentItemIndex={ currentItemIndex }
+	setExternalCurrentItemIndex={ setCurrentItemIndex }
+/>
+```
+
 ## Credit
 
 This component is adapted from the [InnerBlockSlider component from 10up's Block Components]( https://github.com/10up/block-components/tree/develop/components/inner-block-slider).

src/components/InnerBlockSlider/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
 
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -10,18 +10,22 @@ import Navigation from './navigation';
 /**
  * InnerBlockSlider component.
  *
- * @param {object} props               Component props.
- * @param {string} props.parentBlockId Parent block clientId.
- * @param {string} props.allowedBlock  Allowed block type.
- * @param {Array}  props.template      Initial block template.
- * @param {number} props.slideLimit    Maximum allowed slides.
+ * @param {object} props                               Component props.
+ * @param {string} props.parentBlockId                 Parent block clientId.
+ * @param {string} props.allowedBlock                  Allowed block type.
+ * @param {Array}  props.template                      Initial block template.
+ * @param {number} props.slideLimit                    Maximum allowed slides.
+ * @param {number} props.externalCurrentItemIndex      Override current index, if managing this externally.
+ * @param {Function} props.setExternalCurrentItemIndex Override set item Index
  * @returns {React.ReactNode} Component.
  */
 const InnerBlockSlider = ( {
 	parentBlockId,
 	allowedBlock,
 	template,
 	slideLimit,
+	externalCurrentItemIndex = null,
+	setExternalCurrentItemIndex = null,
 } ) => {
 	const innerBlockTemplate = template || [ [ allowedBlock ] ];
 
@@ -30,7 +34,17 @@ const InnerBlockSlider = ( {
 			select( 'core/block-editor' ).getBlock( parentBlockId ).innerBlocks
 	);
 
-	const [ currentItemIndex, setCurrentItemIndex ] = useState( 0 );
+	const [ internalCurrentItemIndex, setInternalCurrentItemIndex ] = useState( 0 );
+
+	// Current Item Index is either the internally managed index, OR the externally managed state.
+	const currentItemIndex = useMemo( () => {
+		return ( externalCurrentItemIndex !== null ) ? externalCurrentItemIndex : internalCurrentItemIndex;
+	}, [ externalCurrentItemIndex, internalCurrentItemIndex ] );
+
+	// Update current item index. Either the internally managed or externally managed state.
+	const setCurrentItemIndex = useMemo( () => {
+		return ( setExternalCurrentItemIndex !== null ) ? setExternalCurrentItemIndex : setInternalCurrentItemIndex;
+	}, [ setExternalCurrentItemIndex, setInternalCurrentItemIndex ] );
 
 	// Track state in a ref, to allow us to determine if slides are added or removed.
 	const slideCount = useRef( slideBlocks.length );
@@ -52,17 +66,19 @@ const InnerBlockSlider = ( {
 	useEffect( () => {
 		if ( slideBlocks.length > slideCount.current ) {
 			// Slide added
-			setCurrentItemIndex( slideBlocks.length - 1 );
+			const newIndex = slideBlocks.length - 1;
+			setCurrentItemIndex( newIndex );
 		} else if ( slideBlocks.length < slideCount.current ) {
 			// Slide deleted
 			if ( currentItemIndex + 1 > slideBlocks.length ) {
-				setCurrentItemIndex( slideBlocks.length - 1 );
+				const newIndex = slideBlocks.length - 1;
+				setCurrentItemIndex( newIndex );
 			}
 		}
 
 		// Update ref with new value..
 		slideCount.current = slideBlocks.length;
-	}, [ slideBlocks.length, currentItemIndex, slideCount ] );
+	}, [ slideBlocks.length, currentItemIndex, slideCount, setCurrentItemIndex ] );
 
 	return (
 		<div className="inner-block-slider">