1

I am trying to load and execute a series of script files within wp-admin, more specifically on the post edits screens. At present, I am able to successfully load the files, but nothing is actually working/executing. There are no console errors either.

I am loading the scripts as follows, in functions.php:

// Admin scripts
function my_admin_scripts($hook){

    // Only load on edit screens
    if( $hook != 'edit.php' && $hook != 'post.php' && $hook != 'post-new.php' ) 
        return;

    wp_register_script('flickity', get_template_directory_uri() .'/js/vendor/min/flickity.pkgd-min.js', false, '2.1.0', false);
    wp_register_script('single', get_template_directory_uri() .'/js/min/single-min.js', false, '1.0', false);

    wp_enqueue_script('flickity');
    wp_enqueue_script('single');
}
add_action('admin_enqueue_scripts','my_admin_scripts');

In the console, I can see both scripts have loaded as both files include a console.log() function:

loaded-flickity
loaded-single

However, the actual functionality of these scripts is not working, and as mentioned there are no console errors to help point in the right direction. I've never come across this kind of issue before, why would a script not execute if it is loaded?

Here is a snippet from single-min.js, for reference:

console.log('loaded-single');

// Init flickity
$(document).ready(function(){

// Only execute if slideshow block exists
if($('.custom-block.slideshow').length > 0 ){ 

    var slider = ('.custom-block.slideshow .flickity');

    // Init
    $(slider).flickity({
        // Options
        cellSelector: '.carousel-cell',
        cellAlign: 'left',
        imagesLoaded: true,
        adaptiveHeight: true,
        prevNextButtons: true,
        arrowShape: 'M0,49.8l33.1-33.2h27L36.8,39.8h63.3v19.7H36.7l23.5,23.4H33.2L0,49.8z',
        pageDots: false,
        fullscreen: true,
    });
}
Kashif Rafique
  • 1,273
  • 1
  • 12
  • 25
dungey_140
  • 2,602
  • 7
  • 34
  • 68
  • console log more things. console.log some text inside your if statement to ensure that it's working. console log `slider` to make sure that it finds something – mrben522 Dec 21 '18 at 14:51

1 Answers1

0

If you are accurately targeting everything then

var slider = ('.custom-block.slideshow .flickity');

is probably your problem. try this:

var $slider = $('.custom-block.slideshow .flickity');

// Init
$slider.flickity({
mrben522
  • 417
  • 6
  • 18