Open djmtype opened 2 years ago
@djmtype Did you find a solution? I have the same problem and am looking for a solution
Here is a temporary solution.
In setup.php if (has_block('acf/blockName')) { bundle('blockName')->enqueue(); }
@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);
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);
I found a trick to include the front style in Gutenberg :
app.css
file to the editor.css
file (with a simple configuration, an @import should be enough).postcss-prefixwrap
plugin. Use either postcss.config.js
(tested) or bud.config.js
(not tested). Set .editor-styles-wrapper
as prefix.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')),
};
};
add_action('after_setup_theme', function () {
remove_editor_styles();
}, 999);
And it's done !
@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.
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?