Custom Fields
Re-Envisioned
Support MB Blocks mb_blocks_preview event not firing

  • Creator
    Topic
  • #15958
    Resolved SG
    Participant

    I have made a custom slider block, unfortunately it does not execute in gutenberg for preview.

    
    $meta_boxes[] = [
                'title'           => 'Slider',
                'id'              => 'slider',
                'description'     => 'Flexibler Slider',
                'type'            => 'block',
                'icon'            => 'images-alt',
                'category'        => 'common',
                //'context'         => 'side',
                'render_template' => get_template_directory() . '/blocks/slider/template.php',
                'enqueue_style'   => get_template_directory_uri() . '/blocks/slider/style.css',
                'enqueue_script'   => get_template_directory_uri() . '/blocks/slider/slick.min.js',
                'supports' => [
                    //'align' => ['wide', 'full'],
                    'customClassName' => true,
                    'anchor'          => true,
                ],
    
            // Block fields.
            'fields' => [
                [
                    'id' => 'slider_group',
                    'type' => 'group',
                    'name' => 'Slides',
                    'default_state' => 'expanded',
                    'clone'  => true,
                    // Drag and drop clones to reorder them?
                    'sort_clone' => true,
                    'fields' =>
                        [
                            array (
                                'id' => 'slide_image',
                                'type' => 'single_image',
                                'name' => 'Hintergrundbild',
                                'required' => true,
                            ),
                            array (
                                'id' => 'slide_text',
                                'type' => 'wysiwyg',
                                'name' => 'Text',
                                'raw' => true,
                                'required' => false,
                                'options' => array(
                                    'textarea_rows' => 4,
                                    'media_buttons' => false,
                                    'wpautop' => false,
                                    'teeny'         => false,
                                ),
                            ),
                        ]
                ]
            ],
        ];
    
    ( function( $ ) {
        function initSlider() {
            console.log("initSlider!");
            $('.slider').slick({
                lazyLoad: 'ondemand',
                dots: true,
                infinite: true,
                speed: 500,
                fade: true,
                cssEase: 'linear',
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 9000,
            });
        }
        // Run when a document ready on the front end.
        $( document ).ready( initSlider );
        // Run when a block preview is done loading.
        $( document ).on( 'mb_blocks_preview/slider', initSlider );
    } )( jQuery );
    

    Is there more information about the mb_blocks_preview event?

    Script is executed fine in frontend.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #15978
    SG
    Participant

    Okay the script is working if I include it directly to the enqueue_script JS.
    But it’s not working from the template.php with <script> tag.

    #15989
    Anh Tran
    Keymaster

    Hi SG,

    The reason for this behavior is that the script should not be triggered when document ready. It should be triggered using a custom event: mb_blocks_preview/block_name. For details, please see the docs:

    https://docs.metabox.io/extensions/mb-blocks/#enqueue_script

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