## Creating a custom slider block from InnerBlocks using React Slick

Question

I’m trying to create a somewhat basic custom block that creates a slider based off of the element’s inner/nested blocks. Using React Slick, I’ve ran into an issue where ALL of the inner blocks are being wrapped in a single tag inside of the initialized slick slider element. This means, no matter how many inner blocks I add, there’s only a single slide inside of the slick slider element.

Here’s a screenshot of what’s happening:

I’ve highlighted the to show you how the inner blocks elements (two basic paragraph blocks) are being combined as one singular slide.

Here’s my edit.js:

import { __ } from 'wordpress user/i18n';

import React from "react";

import Slider from "react-slick";

import {
InnerBlocks,
useBlockProps,
useInnerBlocksProps,
InspectorControls
} from 'wordpress user/block-editor';

import {
PanelBody,
PanelRow,
} from 'wordpress user/components';

import './editor.scss';

import classnames from 'classnames';

export default function Edit(props) {

const blockProps = useBlockProps( {
className: classnames( {
'slider': true
} )
} );

var settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};

const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, {
} );
return (
<>
<InspectorControls key="1">
<PanelBody title={ __( 'Slides' ) }>
<PanelRow>
<fieldset>
Test
</fieldset>
</PanelRow>

</PanelBody>
</InspectorControls>
<div { ...innerBlocksProps }>
<Slider { ...settings }>
{ children }
</Slider>
</div>
</>
);
}



My gut is telling me this could have something to do with the timing of how the inner blocks get rendered, but I am a bit of a newbie when it comes to building custom blocks. Can anyone steer me in the right direction? I’d really really appreciate it. Thanks!

0
1 month 2022-07-19T13:05:03-05:00 0 Answers 0 views 0