Glide.js is not mounting in Site Editor.

[abhi3315]

Issue with Custom Slider Gutenberg Block

I'm in the process of building a custom slider Gutenberg block that incorporates the use of InnerBlocks. I've chosen to implement this slider using Glide.js. Below is a demo video showcasing the custom block, which functions perfectly in the post editor:

However, I'm encountering an issue when attempting to use the same block within the site editor. The error encountered is illustrated by the following images:

Here is the code for the Edit component of the custom block:

/**
 * External dependencies
 */
import Glide from '@glidejs/glide';
import { useEffect, useRef } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import {
	InnerBlocks,
	useBlockProps,
	useInnerBlocksProps,
} from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import Controls from './controls';
import './editor.scss';

/**
 * Edit function for the block.
 *
 * @param {Object}   props               The props.
 * @param {Object}   props.attributes    The block attributes.
 * @param {Function} props.setAttributes The function to set attributes.
 * @param {string}   props.clientId      The block client ID.
 *
 * @return {WPElement} The edit component.
 */
export default function Edit( { attributes, setAttributes, clientId } ) {
	const blockProps = useBlockProps( {
		className: 'glide__slides',
	} );

	const { children, ...combinedBlockProps } = useInnerBlocksProps(
		blockProps,
		{
			renderAppender: InnerBlocks.ButtonBlockAppender,
			templateLock: attributes.templateLock && 'all',
		}
	);

	const sliderRef = useRef();

	// Get total number of slide count.
	const { blockCount } = useSelect( ( select ) => ( {
		blockCount: select( 'core/block-editor' ).getBlockCount( clientId ),
	} ) );

	// Update the number of slides when the block count changes.
	useEffect( () => {
		setAttributes( { slideCount: blockCount } );
	}, [ blockCount, setAttributes ] );

	// Initialize the slider.
	useEffect( () => {
		const {
			perView,
			gap,
			hoverPause: hoverpause,
			animationDuration,
			controls,
		} = attributes;

		const slider = new Glide( '.glide', {
			type: 'slider',
			perView,
			gap,
			autoplay: false, // Autoplay is disabled in editor.
			hoverpause,
			animationDuration,
			controls,
			keyboard: false, // Keyboard navigation is disabled in editor.
		} );

		slider.mount();

		if ( ! sliderRef.current ) {
			sliderRef.current = slider;
		}

		return () => slider.destroy();
	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps

	// Update the slider when attributes change.
	useEffect( () => {
		if ( ! sliderRef.current ) return;

		const {
			perView,
			gap,
			hoverPause: hoverpause,
			animationDuration,
			controls,
		} = attributes;

		sliderRef.current.update( {
			perView,
			gap,
			hoverpause,
			animationDuration,
			controls,
		} );
	}, [ children, attributes ] );

	return (
		<>
			<Controls
				{ ...{
					attributes,
					setAttributes,
					nextSlide: () => sliderRef.current.go( '>' ),
					prevSlide: () => sliderRef.current.go( '<' ),
				} }
			/>
			<div className="glide">
				<div className="glide__track" data-glide-el="track">
					<div { ...combinedBlockProps }>{ children }</div>
				</div>
			</div>
		</>
	);
}

[Mamaduka]

I think you'll need to provide a glide element reference instead of the class.

Related articles:

• https://make.wordpress.org/core/2021/06/29/blocks-in-an-iframed-template-editor/
• How could we use glidejs with React ? glidejs/glide#366 - check the last examples here.

[abhi3315]

Thanks @Mamaduka

The article "Blocks in an iframed (template) editor" was quite helpful and helped me understand why the slider was not working, especially in the Site Editor.

Although I have made the following change, unfortunately, the block is still behaving as before and giving errors in the Site/Template Editor.

@@ -27,20 +27,22 @@ import './editor.scss';
  * @return {WPElement} The edit component.
  */
 export default function Edit( { attributes, setAttributes, clientId } ) {
+	const sliderRef = useRef();
+	const sliderEl = useRef();
+
 	const blockProps = useBlockProps( {
-		className: 'glide__slides',
+		className: '.glide',
+		ref: sliderEl,
 	} );
 
-	const { children, ...combinedBlockProps } = useInnerBlocksProps(
-		blockProps,
+	const { children, ...innerBlocksProps } = useInnerBlocksProps(
+		{ className: 'glide__slides' },
 		{
 			renderAppender: InnerBlocks.ButtonBlockAppender,
 			templateLock: attributes.templateLock && 'all',
-		}
+		},
 	);
 
-	const sliderRef = useRef();
-
 	// Get total number of slide count.
 	const { blockCount } = useSelect( ( select ) => ( {
 		blockCount: select( 'core/block-editor' ).getBlockCount( clientId ),
@@ -61,7 +63,7 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 			controls,
 		} = attributes;
 
-		const slider = new Glide( '.glide', {
+		const slider = new Glide( sliderEl.current, {
 			type: 'slider',
 			perView,
 			gap,
@@ -83,7 +85,9 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 
 	// Update the slider when attributes change.
 	useEffect( () => {
-		if ( ! sliderRef.current ) return;
+		if ( ! sliderRef.current ) {
+			return;
+		}
 
 		const {
 			perView,
@@ -112,9 +116,9 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 					prevSlide: () => sliderRef.current.go( '<' ),
 				} }
 			/>
-			<div className="glide">
+			<div { ...blockProps }>
 				<div className="glide__track" data-glide-el="track">
-					<div { ...combinedBlockProps }>{ children }</div>
+					<div { ...innerBlocksProps }>{ children }</div>
 				</div>
 			</div>
 		</>

[Mamaduka]

Sorry, @abhi3315. The references I linked above are all I've for now. It will require more debugging.

Try having another wrapper element with sliderEl ref instead of attaching it to blockProps. WP attaches its event handles to the block wrapper element, which might conflict with the slider library.

P.S. If you're looking for help with your particular case with tailored code examples, I would recommend posting a question on WPSE - https://wordpress.stackexchange.com/.

[abhi3315]

Thank you for your support, @Mamaduka.

I have raised the question on WPSE, and I'm hopeful that I can find a solution there 🤞🏻.