Gutenslider inside “Accordion Blocks” doesn’t initialize

I’m having the same issue with a Gutenslider block inside of the Tabs block from UAG. Resizing the window initializes the block and everything works fine after that. I’ve tried disabling lazy loading globally and within the plugin, turned of the lazy loading from the Smush plugin, and many other things to no avail.

Not sure what to do next. Using the latest version of each plugin:

Gutenslider 5.5.1
UAG 1.25.2

• This reply was modified 2 years, 12 months ago by notasausage. Reason: Versions and link

@henjak @notasausage

.gutenslider makes use of the wp.domReady function to initialize the slider and will reload on certain breakpoints (that is why resizing helps).

I would suggest you look in the documentation of the plugins you are using if the provide JavaScript events(e.g. onAccordionChange). You would have to alter the gutenslider-front.js file to also trigger a reload on that event.

Please get back to us after you contacted support of the plugins you use. We will help you along

@notasausage @henjak

Appreciate the help, looking deeper into how UAG blocks work. What I see so far is that each Tabs block is initialized with a UAGBTabs.init() function that points to a unique class for each block, and all of those init() functions are called within a document.addEventListener on the page, like so:

document.addEventListener("DOMContentLoaded", function(){ 			   
	window.addEventListener( 'load', function() {
		UAGBTabs.init( '.uagb-block-de424418' );
		UAGBTabs.anchorTabId( '.uagb-block-de424418' );
	});
	window.addEventListener( 'hashchange', function() {
		UAGBTabs.anchorTabId( '.uagb-block-de424418' );
	}, false );
})

Trying to work out what needs to happen here.

• This reply was modified 2 years, 11 months ago by notasausage. Reason: Formatting

@eedee Appreciate the help.

The following code seems to do the trick, but it would probably be better to initialize Gutenslider the correct way instead of this “hack”.

( ( $ ) => {
	$( document ).on( 'openAccordionItem', () => {
		window.dispatchEvent( new Event( 'resize' ) );
	} );
} )( jQuery );

• This reply was modified 2 years, 11 months ago by Henrik.
• This reply was modified 2 years, 11 months ago by Henrik. Reason: wrong @mention

@henjak your code is perfetly fine, as a resize will trigger the correct initialization on Gutenslider and it will most likely always work the way you put it.

I ended up calling a resize event in the tabs.js file for Ultimate Addons for Gutenberg but in a very inefficient way. In both the init and tabClickEvent functions, I’m calling a resize several times (there are several Tabs blocks with Gutenslider blocks inside them on the page). It works, but there must be a better way…