Can I jump over a InnerBlocks component to target content inside with react-flickity-component?

Question

I'm trying to create a slider with react-flickity-component in Gutenberg Wordpress Editor.

So my problem is that Gutenberg has InnerBlocks component and I want to target its content inside of it with Flickity.

So it looks like this:

<Flickity options={flickityOptions}>
  <InnerBlocks />
</Flickity>

where <InnerBlocks /> is a Gutenberg Component, which has inside, for example:

<img src="..."/>
<img src="..."/>
<img src="..."/>

So I need to jump over InnerBlocks to target images. Because InnerBlocks create two divs after Flickity Component.

And in html it will look like:

<div class="flickity">
  <div class="inner-block">
    <div class="block-list">
      <img src="...">
      <img src="...">
      <img src="...">
    </div>
  </div>
</div>

Is it possible? Thanks in advance.

Answer 1

Old question, but there is a simple answer for this if anyone's still searching. The issue is that WP's InnerBlocks component adds in some wrappers before you get to your repeatable elements, so it can't work out how to present the slider the way you want. You can select the 'repeatable' elements even if they're nested a few layers deep by setting up the selector for your slide:

<Flickity options={{cellSelector : '.mySlide'}}>
    <InnerBlocks />
</Flickity>