Custom Fields
Re-Envisioned
Support MB Blocks How can I use the custom asset callback to render a block properly?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
    Replies
  • #24478
    Long Nguyen
    Moderator

    Hi Cristian,

    You can put all JS code to the file certificaciones.js to enqueue for this block or use the code to enqueue more JS files. Follow this document https://docs.metabox.io/extensions/mb-blocks/#enqueue_assets.

    #24482
    Cristian A.
    Participant

    Hi Long, Thank you for your help.
    I was reading the documentation and I tried to use some custom assets on the block render area (using the AIO plugin) I can't get it work correctly.

    Block render settings

    When I did a preview of the code I saw that the functions() is displaying as a string and not outside of that string to call more assets.

    Code preview

    Do you have some ideas that can I use to solve that?

    Thank you

    #24487
    Long Nguyen
    Moderator

    Hi,

    To use the custom assets in the Builder, you need to add your function code to the file functions.php in the theme/child theme folder.

    Ex:

    function my_callback() {
        wp_enqueue_script( 'my-script', 'link-to-js-file', [ 'jquery' ], '', true );
    }

    then add the function name to Custom assets callback input. Screenshot https://share.getcloudapp.com/yAu60e2J.

    #24504
    Cristian A.
    Participant

    Thank you very much

    #26891
    Cristian A.
    Participant

    Hi there!,
    I created an slider for images using a custom block and custom assets for that block and everything is working fine on the front-end but isn't working completely because when I'm editing the page that contain that block the javascript files are not executing because the carousel isn't moving I think I called them correctly and are loading without problems but something isn't working and I can't figure it out what is the problem.
    Do you know if I need to put something else to make this slider works correctly?
    I would like to know if anyone can help me with this please.
    Thank you

    ADMIN SETTINGS

    CUSTOM ASSETS CALLBACK

    function slider_js(){
        if(is_admin()){
            //ADMIN NOT EXECUTING THE JAVASCRIPT INIT BUT ARE LOADING WITHOUT PROBLEMS
            $template_url = get_template_directory_uri();
            wp_enqueue_style('swiper-slider-css', $template_url .   '/assets/css/swiper-bundle.min.css', [], null);
            wp_enqueue_script('swiper-slider-js', $template_url .   '/assets/js/swiper-bundle.min.js', [], null, true);
            wp_enqueue_script('swiper-slider-init', $template_url. '/blocks/slider/js/slider.js', ['swiper-slider-js'],null, true);
        }else{
            //FRONT-END WORKS PRETTY WELL
            $template_url = get_template_directory_uri();
            wp_enqueue_script('swiper-slider-init', $template_url. '/blocks/slider/js/slider.js', [],null, true);
        }
    }

    SWIPER SLIDER INIT

    const slider = new Swiper('.slider-swiper .swiper-container', {
        speed: 700,
        loop:true,
        lazy: {
          loadPrevNext: true,
          loadPrevNextAmount: 2,
        },
        parallax: true,
        autoplay: {
              delay: 4600,
              disableOnInteraction: false,
        },
        pagination: {
          el: '.slider-swiper .swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.slider-swiper .swiper-button-next',
          prevEl: '.slider-swiper .swiper-button-prev',
        },
    });    
    #27501
    Jackky
    Participant

    Hi! I think you no need this. I'm acieving the same (working custom js on backend, like on frontend), by calling my libs.js and main.js files (custom ones) within a 'enqueue_block_editor_assets' action. And in main.js I have the stucture like this:

    
    ( function( $ )
    {
    
        window.initScripts = function()
        {
            // HERE ALL CONCATENATED CUSTOM JS 
        }
        
        if ( $('#editor').length )
        {
            $( document ).on( 'mb_blocks_preview', initScripts ) //call scope on 'mb_blocks_preview' event in gutenberg
        }
        else
        {
            $( initScripts ) // frontend call e.g. $(document).ready()
        }
        
    })(jQuery)
    

    This solution works excellent with any custom js. For example I'm using Swiper in all my projects too and it works perfectly on frontend either in the backend and without the need to make any 'special' js-file for gutenberg previews.

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