-1

I am developing a WordPress that utilises gulp to build the frontend of the application (scss, js) files.

In my functions.php I am using enqueue to load my css and js so that they can be used in the editor.

add_action( 'enqueue_block_editor_assets', function() {
   wp_enqueue_style( 'editor-styling', get_theme_file_uri( '/dist/styles/main.css', __FILE__) );
   wp_enqueue_script( 'editor-scripts', get_theme_file_uri( '/dist/scripts/main.js', __FILE__) );

} );

Running running a simple gulp command I can do the above as the file will be named main.css. However, I am facing an issue that when I use gulp --production the style and javascript are suffixed with a random value.

For example my main.scss will (once I run the above command) turn into main-9acd4829.css.

My question is, how can I get a file from a certain directory where file name like main<whatever>.css.

I have tried using something such as

get_theme_file_uri(glob('/dist/styles/main*.css'), __FILE__)

However that returned null

JamesS
  • 2,167
  • 1
  • 11
  • 29

1 Answers1

1

I guess you have to check yourself in the different folders, inspired by the code of get_theme_file_uri, something like this (note that glob returns an array while get_theme_file_uri takes a string):

add_action( 'enqueue_block_editor_assets', function() {
    $style_file = glob(get_stylesheet_directory() . '/dist/styles/main*.css');
    if(!$style_file || !count($style_file)){
        $style_file = glob(get_template_directory_uri() . '/dist/styles/main*.css');
    }
    //NOTE: you can use foreach if your glob returns multiple files and this is what you want
    //NOTE2: in theory you could skip the use of get_theme_file_uri here because you already tested in which folder it is, this is just an example
    if($style_file && count($style_file)){
        wp_enqueue_style( 'editor-styling', get_theme_file_uri( '/dist/styles/' . $style_file[0], __FILE__) );
    }
    
    $script_file = glob(get_stylesheet_directory() . '/dist/scripts/main*.js');
    if(!$script_file || !count($script_file)){
        $script_file = glob(get_template_directory_uri() . '/dist/scripts/main*.js');
    }
    //NOTE: you can use foreach if your glob returns multiple files and this is what you want
    //NOTE2: in theory you could skip the use of get_theme_file_uri here because you already tested in which folder it is, this is just an example
    if($script_file && count($script_file)){
        wp_enqueue_script( 'editor-scripts', get_theme_file_uri( '/dist/scripts/' . $script_file[0], __FILE__) );
    }
} );
Kaddath
  • 5,933
  • 1
  • 9
  • 23
  • That is perfect for the stylesheet. In regards to the js file. I can't see any corresponding function javascript. – JamesS May 10 '23 at 10:01
  • @JamesS I have replaced the TODO with the code for the script, it should work now – Kaddath May 10 '23 at 10:08
  • Yeah you're correct. As my js file is in `/dist/scripts/main*.js` I changed the location to that in the `glob` and it works. Marking as correct – JamesS May 10 '23 at 10:22
  • @JamesS yes that would be weird to have a script in `get_styleshet_directory`, but this is where `get_theme_file_uri` checks first. Anyway it would do no harm checking there first. My bad for the wrong path, just a brainless copy paste – Kaddath May 10 '23 at 10:25