Creating a custom slider block from InnerBlocks using React Slick


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:
enter image description here

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 {
} from 'wordpress user/block-editor';

import {
} 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, {
     templateInsertUpdatesSelection: true
 } );
  return (
    <InspectorControls key="1">
                <PanelBody title={ __( 'Slides' ) }>

      <div { ...innerBlocksProps }>
            <Slider { ...settings }>
                { children }

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!

James Barracca 4 months 2022-07-19T13:05:03-05:00 0 Answers 0 views 0

Leave an answer