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

@@ -98,12 +98,31 @@ The above example code creates a slider using the core image block as each slide
 
 ## Props
 
-| Name            | Type           | Default | Description                                   |
-| --------------- | -------------- | ------- | --------------------------------------------- |
-| `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.  |
+| Name             | Type           | Default | Description                                   |
+| ---------------- | -------------- | ------- | --------------------------------------------- |
+| `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.  |
+| `showNavigation` | `bool`         | `true`  | Whether to show slide navigation/pagination.  |
 
+## Examples
+
+### Managing the state externally.
+
+If you need to sync the slider component state it with some other external functionality, you may need to manage state in your code. In order to to this, you need to import the InnerBlockSliderStateless rather than the standard container component exposed by the library.
+
+```js
+import InnerBlockSliderStateless from '@humanmade/block-editor-components';
+
+const [ currentItemIndex, setCurrentItemIndex ] = useState( 0 );
+
+<InnerBlockSlider
+	// ... other props
+	parentBlockId={ clientId }
+	currentItemIndex={ currentItemIndex }
+	setCurrentItemIndex={ setCurrentItemIndex }
+/>
+```
 
 ## Credit
 

src/components/InnerBlockSlider/index.js

@@ -1,101 +1,26 @@
-import PropTypes from 'prop-types';
-import { useState, useRef, useEffect } from 'react';
+import { useState } from 'react';
 
-import { createBlock } from '@wordpress/blocks';
-import { useSelect, useDispatch } from '@wordpress/data';
-
-import InnerBlocksDisplaySingle from './inner-block-single-display';
-import Navigation from './navigation';
+import InnerBlockSlider from './inner-block-slider.js';
 
 /**
- * InnerBlockSlider component.
+ * InnerBlockSlider container component.
+ *
+ * This container component is recommended for typical usage, as it handles state management.
+ * However for further info on supported props, refer to the InnerBlockSlider component, as all props are passed through.
  *
- * @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.
  * @returns {React.ReactNode} Component.
  */
-const InnerBlockSlider = ( {
-	parentBlockId,
-	allowedBlock,
-	template,
-	slideLimit,
-} ) => {
-	const innerBlockTemplate = template || [ [ allowedBlock ] ];
-
-	const slideBlocks = useSelect(
-		( select ) =>
-			select( 'core/block-editor' ).getBlock( parentBlockId ).innerBlocks
-	);
-
+const InnerBlockSliderContainer = ( props ) => {
 	const [ currentItemIndex, setCurrentItemIndex ] = useState( 0 );
 
-	// Track state in a ref, to allow us to determine if slides are added or removed.
-	const slideCount = useRef( slideBlocks.length );
-
-	const { insertBlock } = useDispatch( 'core/block-editor' );
-
-	/**
-	 * Function to add a new slide to the group of slides.
-	 */
-	const addSlide = () => {
-		const created = createBlock( allowedBlock );
-		insertBlock( created, undefined, parentBlockId );
-	};
-
-	/**
-	 * If a slide is added, switch to the new slide. If one is deleted, make sure we don't
-	 * show a non-existent slide.
-	 */
-	useEffect( () => {
-		if ( slideBlocks.length > slideCount.current ) {
-			// Slide added
-			setCurrentItemIndex( slideBlocks.length - 1 );
-		} else if ( slideBlocks.length < slideCount.current ) {
-			// Slide deleted
-			if ( currentItemIndex + 1 > slideBlocks.length ) {
-				setCurrentItemIndex( slideBlocks.length - 1 );
-			}
-		}
-
-		// Update ref with new value..
-		slideCount.current = slideBlocks.length;
-	}, [ slideBlocks.length, currentItemIndex, slideCount ] );
-
 	return (
-		<div className="inner-block-slider">
-			<InnerBlocksDisplaySingle
-				allowedBlocks={ [ allowedBlock ] }
-				className="slides"
-				currentItemIndex={ currentItemIndex }
-				parentBlockId={ parentBlockId }
-				template={ innerBlockTemplate }
-			/>
-
-			<Navigation
-				addSlide={ addSlide }
-				addSlideEnabled={ slideBlocks.length < slideLimit }
-				currentPage={ currentItemIndex + 1 }
-				nextEnabled={ currentItemIndex + 1 < slideBlocks.length }
-				prevEnabled={ currentItemIndex + 1 > 1 }
-				setCurrentPage={ ( page ) => setCurrentItemIndex( page - 1 ) }
-				totalPages={ slideBlocks.length }
-			/>
-		</div>
+		<InnerBlockSlider
+			{ ...props }
+			currentItemIndex={ currentItemIndex }
+			setCurrentItemIndex={ setCurrentItemIndex }
+		/>
 	);
 };
 
-InnerBlockSlider.defaultProps = {
-	slideLimit: 10,
-	template: null,
-};
-
-InnerBlockSlider.propTypes = {
-	parentBlockId: PropTypes.string.isRequired,
-	allowedBlock: PropTypes.string.isRequired,
-	template: PropTypes.array,
-};
-
-export default InnerBlockSlider;
+export default InnerBlockSliderContainer;

src/components/InnerBlockSlider/inner-block-slider.js

@@ -0,0 +1,109 @@
+import PropTypes from 'prop-types';
+import { useRef, useEffect } from 'react';
+
+import { createBlock } from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+import InnerBlocksDisplaySingle from './inner-block-single-display';
+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 {number} props.currentItemIndex      Override current index, if managing this externally.
+ * @param {Function} props.setCurrentItemIndex Override set item Index
+ * @param {Function} props.showNavigation      Override display nav
+ * @returns {React.ReactNode} Component.
+ */
+const InnerBlockSlider = ( {
+	parentBlockId,
+	allowedBlock,
+	template,
+	slideLimit,
+	currentItemIndex,
+	setCurrentItemIndex,
+	showNavigation,
+} ) => {
+	const innerBlockTemplate = template || [ [ allowedBlock ] ];
+
+	const slideBlocks = useSelect( ( select ) => select( 'core/block-editor' ).getBlock( parentBlockId ).innerBlocks );
+
+	// Track state in a ref, to allow us to determine if slides are added or removed.
+	const slideCount = useRef( slideBlocks.length );
+
+	const { insertBlock } = useDispatch( 'core/block-editor' );
+
+	/**
+	 * Function to add a new slide to the group of slides.
+	 */
+	const addSlide = () => {
+		const created = createBlock( allowedBlock );
+		insertBlock( created, undefined, parentBlockId );
+	};
+
+	/**
+	 * If a slide is added, switch to the new slide. If one is deleted, make sure we don't
+	 * show a non-existent slide.
+	 */
+	useEffect( () => {
+		if ( slideBlocks.length > slideCount.current ) {
+			// Slide added
+			const newIndex = slideBlocks.length - 1;
+			setCurrentItemIndex( newIndex );
+		} else if ( slideBlocks.length < slideCount.current ) {
+			// Slide deleted
+			if ( currentItemIndex + 1 > slideBlocks.length ) {
+				const newIndex = slideBlocks.length - 1;
+				setCurrentItemIndex( newIndex );
+			}
+		}
+
+		// Update ref with new value..
+		slideCount.current = slideBlocks.length;
+	}, [ slideBlocks.length, currentItemIndex, slideCount, setCurrentItemIndex ] );
+
+	return (
+		<div className="inner-block-slider">
+			<InnerBlocksDisplaySingle
+				allowedBlocks={ [ allowedBlock ] }
+				className="slides"
+				currentItemIndex={ currentItemIndex }
+				parentBlockId={ parentBlockId }
+				template={ innerBlockTemplate }
+			/>
+
+			{ showNavigation && (
+				<Navigation
+					addSlide={ addSlide }
+					addSlideEnabled={ slideBlocks.length < slideLimit }
+					currentPage={ currentItemIndex + 1 }
+					nextEnabled={ currentItemIndex + 1 < slideBlocks.length }
+					prevEnabled={ currentItemIndex + 1 > 1 }
+					setCurrentPage={ ( page ) => setCurrentItemIndex( page - 1 ) }
+					totalPages={ slideBlocks.length }
+				/> ) }
+		</div>
+	);
+};
+
+InnerBlockSlider.defaultProps = {
+	slideLimit: 10,
+	template: null,
+	showNavigation: true,
+};
+
+InnerBlockSlider.propTypes = {
+	parentBlockId: PropTypes.string.isRequired,
+	allowedBlock: PropTypes.string.isRequired,
+	template: PropTypes.array,
+	showNavigation: PropTypes.bool,
+	currentItemIndex: PropTypes.number.isRequired,
+	setCurrentItemIndex: PropTypes.func.isRequired,
+};
+
+export default InnerBlockSlider;

src/index.js

@@ -4,6 +4,7 @@ export { default as FileControls } from './components/FileControls';
 export { default as GenericServerSideEdit } from './components/GenericServerSideEdit';
 export { default as ImageControl } from './components/ImageControl';
 export { default as InnerBlockSlider } from './components/InnerBlockSlider';
+export { default as InnerBlockSliderStateless } from './components/InnerBlockSlider/inner-block-slider';
 export { default as LinkToolbar } from './components/LinkToolbar';
 export { default as PlainTextWithLimit } from './components/PlainTextWithLimit';
 export { default as PostTitleControl } from './components/PostTitleControl';