Support

Account

Home Forums Gutenberg js fires before block is rendered

Solving

js fires before block is rendered

    • yueng

    • May 19, 2019 at 2:28 am

    I followed the docs and my block (a block using slickjs) works on the fronted but doesn’t render properly inside the Gutenberg editor.

    
    (function($){
    
        var init_banner = function ($block) {
            console.log($block);
            $block.slick({
                adaptiveHeight: true
            });
        }
        
        $(document).ready(function(){    
            init_banner($('.banners'));
        });
    
        // Initialize dynamic block preview (editor).
        if (window.acf) {
            window.acf.addAction('render_block_preview/type=banner', init_banner);
        }
    
    })(jQuery);
    

    When $block is dumped to the console it has a length of zero. During this time the editor has the spinning animation until it eventually renders the block. Since the js has already fired the slider doesn’t initialize. If I call slick in the console, the block starts working: jQuery(‘.banners’).slick()

    Is there a way to fire the script when the block has rendered in the editor?

  • I actually had exactly the same issue after creating a slideshow block with slick, as well as all of my other blocks that use javascript.

    The problem was, I copied and pasted the wp_enqueue_script some documentation at some point and I had (notice the lack of a version #):
    wp_enqueue_script( 'slideshow-block-library', get_template_directory_uri() . '/template-parts/block/js/slick.min.js', array('jquery'), true );

    When I should have had:
    wp_enqueue_script( 'slideshow-block-library', get_template_directory_uri() . '/template-parts/block/js/slick.min.js', array('jquery'), '1.0.0', true );

    For more info, see the WordPress Docs here.

    • yueng

    • May 28, 2019 at 11:35 pm

    Thanks, @graphix but that enqueues for the site not the Gutenberg editor. The problem I’m having is that the slider javascript doesn’t fire at the correct time inside Gutenberg.

  • @yueng actually, the wp_enqueue_script, when included in the enqueue_assets part of acf_register_block should include it in the frontend and backend for your block, here’s what mine looks like:

    ...
    'enqueue_assets' 	=> function(){ 
        	//Stack the Assets in the Order we Need Them
        	wp_enqueue_style( 'slideshow-block-style', get_template_directory_uri() . '/template-parts/block/css/slideshow.css', array('general-block-style') ); //Requires all-blocks.css
    	wp_enqueue_style( 'slick-main', get_template_directory_uri() . '/template-parts/block/css/slick/slick.css' );
    	wp_enqueue_style( 'slick-theme', get_template_directory_uri() . '/template-parts/block/css/slick/slick-theme.css' );
    	wp_enqueue_script( 'slideshow-block-library', get_template_directory_uri() . '/template-parts/block/js/slick.min.js', array('jquery'), '', true ); 
    	wp_enqueue_script( 'slideshow-block-script', get_template_directory_uri() . '/template-parts/block/js/slideshow.js', array('jquery'), '', true ); 
    },
    ...

    Also, I took a second look at my slideshow javascript and the only real difference I have is an each jQuery function (which might help):

    $(document).ready(function(){
            $('.banners').each(function(){
                init_banner( $(this) );
            });
        });

    Let me know if that helps.

  • @yueng actually, wp_enqueue_scripts() should load on the frontend & backend for your blocks when within the enqueue_assets attribute in acf_register_block(), here’s my code that is loading the JS file in the frontend and backend:

    'enqueue_assets' 	=> function(){ 
    	//Stack the Assets in the Order we Need Them
    	wp_enqueue_style( 'general-block-style', get_template_directory_uri() . '/template-parts/block/css/all-blocks.css', array('foundation') ); //Requires Foundation
    	wp_enqueue_style( 'slideshow-block-style', get_template_directory_uri() . '/template-parts/block/css/slideshow.css', array('general-block-style') ); //Requires all-blocks.css
    	wp_enqueue_style( 'slick-main', get_template_directory_uri() . '/template-parts/block/css/slick/slick.css' );
    	wp_enqueue_style( 'slick-theme', get_template_directory_uri() . '/template-parts/block/css/slick/slick-theme.css' );
    	wp_enqueue_script( 'slideshow-block-library', get_template_directory_uri() . '/template-parts/block/js/slick.min.js', array('jquery'), '', true ); 
    	wp_enqueue_script( 'slideshow-block-script', get_template_directory_uri() . '/template-parts/block/js/slideshow.js', array('jquery'), '', true ); 
    },

    I took a second look at my slideshow JS file and the only other difference I’m seeing is the each jQuery function (that iterates through every slideshow block on the frontend/backend) like so:

    $(document).ready(function(){
        $('.banners').each(function(){
            init_banner( $(this) );
        });
    });
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.