How can I use the custom asset callback to render a block properly?

This topic has 6 replies, 3 voices, and was last updated 3 years, 7 months ago by Jackky.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
February 18, 2021 at 11:41 AM #24475

Cristian D.
Participant

Hi there,
I'm trying to create a carrusel using MB Blocks and everything is working pretty well on the front-end but on backend is not loading the library to execute the carrusel and I think I need to use a custom asset callback to enqueue all the js that I need for render a block properly on backend but I don't know how to do it, anyone knows how can I solved?

https://www.dropbox.com/s/vwi18ymesm9dceo/Captura%20de%20Pantalla%202021-02-18%20a%20la%28s%29%2001.31.30.png?dl=0

I appreciate any help
Thank you

Add New Note to this Reply

February 18, 2021 at 2:57 PM #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.

Add New Note to this Reply

February 19, 2021 at 1:58 AM #24482

Cristian D.
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.

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.

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

Thank you

Add New Note to this Reply

February 19, 2021 at 1:11 PM #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.

Add New Note to this Reply
February 20, 2021 at 12:33 AM #24504

Cristian D.
Participant

Thank you very much

Add New Note to this Reply

April 2, 2021 at 2:16 AM #26891
Cristian D.
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

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',
    },
});    
```
Add New Note to this Reply
April 22, 2021 at 2:48 PM #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.

Add New Note to this Reply
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.