Controlling or disabling Gutenberg editor panning/focus on a custom slider block

[ad_1]

Hello, I am currently building a custom slider Gutenberg block using SwiperJS. My slider block has a custom Slide block set as an InnerBlock template, and each slide has its own InnerBlocks component. I have it 90% working, but I need help with some UX improvements in the Gutenberg editor.

I have built a feature that allows Swiper to update its active slide based on the currently selected block. If a slide or an InnerBlock of a slide is selected, Swiper’s instance is updated so that the selected slide comes into view (with transition disabled so it happens instantly). This also updates the slider navigation/pagination, and then I can edit the contents. However, in certain instances this conflicts with whatever feature the Gutenberg editor leverages to bring elements into view when they are selected/focused. So the end result is: Swiper slides the selected slide into view while the editor pans to where the slide is, resulting in my active slide moving twice as much as it needs to and throwing off my slider navigation.

As far as how I am thinking about approaching this issue, I’d like to disable whatever handles the editor’s panning/focusing functionality only for my custom block. I am struggling to find what actually handles the panning/focusing of selected blocks in the Gutenberg editor. Can anyone point me in the right direction? Am I able to disable this functionality on a block-by-block basis?

Thanks in advance for any advice or help you can provide.

  • This topic was modified 4 hours, 8 minutes ago by Ethan.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer