Support » Plugin: WordPress Slider Block Gutenslider » Gutenslider inside “Accordion Blocks” doesn’t initialize

  • Resolved henjak


    If you create a gutenslider block inside an “Accordion“-block the gutenslider block is not initialized inside the preview or published page. It initializes on window resize though.

    If you copy the gutenslider block code underneath the Accordion-block, then only the gutenslider block outside of the accordion is initialized correctly. Both are initialized in the editor.

    Using Gutenslider v5.5.1 and Accordion Blocks v1.4.1.

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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 1 month, 2 weeks ago by notasausage. Reason: Versions and link
    Plugin Author eedee


    @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

    Plugin Contributor Gutenberg Slider


    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 1 month, 2 weeks ago by notasausage. Reason: Formatting
    Thread Starter henjak


    @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 1 month, 2 weeks ago by henjak.
    • This reply was modified 1 month, 2 weeks ago by henjak. Reason: wrong @mention
    Plugin Contributor Gutenberg Slider


    @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…

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.