Enqueue styles and scripts

[djmtype]

How do we properly enqueue styes and scripts with this plugin?

If I reference these files from the dist directory that Sage ends up building, they are appended with random characters, so that's not going to work unless this plugin understands Sage's asset handling.

Or do I need to process these files in advance?

[yannickninot]

@djmtype Did you find a solution? I have the same problem and am looking for a solution

[yannickninot]

Here is a temporary solution. In setup.php if (has_block('acf/blockName')) { bundle('blockName')->enqueue(); }

[djmtype]

@yannickninot Thanks! And here's how this looks in its entirety for anyone else in need.

Create the template:
/resources/views/blocks/testimonial.blade.php

Added the s/css file:
resources/styles/blocks/testimonial.scss

testimonial.blade.php

{{--
EnqueueStyle: 
--}}

Leave EnqueueStyle empty as this will be declared within setup.php.

Otherwise, we don't want to load the same CSS file twice – once with the hash, as will be defined in setup.php, and another time via EnqueueStyle.

bud.config.js

app.entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
      testimonial: ['@styles/blocks/testimonial']
    })

setup.php Find the add_action function for enqueuing scripts.

add_action('wp_enqueue_scripts', function () {
    bundle('app')->enqueue();
    if (has_block('acf/testimonial')) { 
        bundle('testimonial')->enqueue(); 
    }
}, 100);

[djmtype]

If you want to expose those styles to the editor, you'll have to duplicate your efforts within setup.php under enqueue_block_editor_assets.

add_action('enqueue_block_editor_assets', function () {
    bundle('editor')->enqueue();
    if (has_block('acf/testimonial')) { 
        bundle('testimonial')->enqueue(); 
    }
}, 100);

[Striffly]

I found a trick to include the front style in Gutenberg :

1. Copy the style from your app.css file to the editor.css file (with a simple configuration, an @import should be enough).
2. Add the postcss-prefixwrap plugin. Use either postcss.config.js (tested) or bud.config.js (not tested). Set .editor-styles-wrapper as prefix.
3. Make sure that the plugin is only executed on the editor.css file : from postcss.config.js, just check if the name of the processed file contains editor.css. Ex:

   module.exports = (api) => {
   return {
   ident: 'postcss',
   plugins: getPlugins(api.file.includes('/editor.css')),
   };
   };

4. Disable the editor's styles

   add_action('after_setup_theme', function () {
   remove_editor_styles();
   }, 999);

   And it's done !

[robmeijerink]

@djmtype Thank you for figuring it out for us. Saved us some research time and I used some of your code to enable Bud support. I made a PR #75 so we can enqueue our styles and scripts again like before, but this time by using the Bud bundle name instead of the path to file like before.

Sorry for the late response. I haven't had much spare time to look into it.