Support

Account

Home Forums Gutenberg JS not loading in gutenberg editor

Unread

JS not loading in gutenberg editor

    • chrion

    • January 8, 2021 at 1:01 am

    I’ve been browsing the forums and internet in general and can’t seem to figure out what i’m doing wrong.

    Issue is that the js enqueued in my block is running when editing a page. I my code below i try to run a slick slider js, but i tested with just a simple console.log() and it does not log either. Also tried adding slick and jquery to dependencies when enqueuing c1_cardslider.js which also makes no difference.

    Everything works fine on the frontend.

    block.php

    
    <?php
    
    $settings = [
        'name' => 'c1_cardslider',
        'title' => __('1 Kolonne : Kortslider'),
        'description' => __('Slides - f.eks. linjefag'),
        'category' => 'bbh-blocks',
        'post_types' => array('page'),
        'keywords' => array('quote', 'mention', 'cite'),
        'enqueue_assets' => function(){
            //slick
            wp_enqueue_script( 'slickjs', get_stylesheet_directory_uri() . '/assets/js/slick/slick.min.js', array( 'jquery' )); // slickjs
            wp_enqueue_style( 'slick', get_stylesheet_directory_uri() . '/assets/js/slick/slick.css', '1.0', 'all');
            wp_enqueue_style( 'slicktheme', get_stylesheet_directory_uri() . '/assets/js/slick/slick-theme.css', '1.0', 'all');
            //standard
            wp_enqueue_style( 'c1-cardslider-style', get_stylesheet_directory_uri() . '/include/blocks/c1_cardslider/style.css');
    		wp_enqueue_script( 'c1-cardslider', get_stylesheet_directory_uri() . '/include/blocks/c1_cardslider/c1_cardslider.js');
        },
        'render_callback' => 'bbh_render_c1_cardslider',
    ];
    
    function bbh_render_c1_cardslider(){
      //markup here
    }
    
    acf_register_block_type( $settings );
    
    

    c1_cardslider.js

    
    (function($){
    
        var initializeBlock = function( block ) {
            block.find('.slider').slick({
                arrows: false,
                dots: false,
                slidesToShow: 3,
                centerMode: false,
                responsive: [
                    {
                        breakpoint: 640,
                        settings: {
                            centerMode: true,
                            slidesToShow: 1,
                        }
                    }
                ]
            });
        }
    
        // Initialize each block on page load (front end).
        $(document).ready(function(){
            $('.c1-cardslider').each(function(){
                initializeBlock($(this));
            });
        });
    
        //Initialize dynamic block preview (editor).
        if( window.acf ) {
            window.acf.addAction( 'render_block_preview/type=c1_cardslider', initializeBlock );
        }
    
    })(jQuery);
    
Viewing 1 post (of 1 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.