# Running bud dev breaks gutenberg blocks **URL:** https://discourse.roots.io/t/running-bud-dev-breaks-gutenberg-blocks/24924 **Category:** sage **Tags:** gutenberg, bud, sage10 **Created:** 2023-03-08T08:36:26Z **Posts:** 5 ## Post 1 by @Twansparant — 2023-03-08T08:36:27Z Hi there, I was wondering how other people here develop their Gutenberg blocks with **bud**. I’m using this workflow regarding ACF blocks: > [@Bud config for outputting multiple css files (from scss for ACF Blocks)](https://discourse.roots.io/t/bud-config-for-outputting-multiple-css-files-from-scss-for-acf-blocks/22498/19): > > @Log1x is there a way to generate with acf-composer a nested resources/views/blocks/acf-block-a foldering like the one mentioned before? Thx This all works great, running `bud build` compiles all my separate styles and scripts for each block and my **gutenberg editor** and **app** look almost identical. I’m using this **bud config** : ``` import path from 'path'; import glob from 'glob'; const toKebabCase = string => string.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g).join('-'); /** * Get list of entrypoints for blocks */ const blockFiles = {}; glob.sync('app/Blocks/**/*.php').map(block => { const name = toKebabCase(path.basename(block, '.php')).toLowerCase(); const files = glob.sync(`resources/views/blocks/${name}/*.{js,scss}`); if (files?.length > 0) { const filesResult = files.map(file => file.replace(/resources\/views\/blocks/g, '@blocks')); blockFiles[name] = filesResult; } return blockFiles; }); /** * Build configuration * * @see {@link https://roots.io/docs/sage/ sage documentation} * @see {@link https://bud.js.org/guides/configure/ bud.js configuration guide} * * @typedef {import('@roots/bud').Bud} Bud * @param {Bud} app */ export default async (app) => { /** * Global sass imports * @see {@link https://bud.js.org/extensions/bud-sass/} */ app.sass.importGlobal([ '@src/styles/common/variables', '~bootstrap/scss/bootstrap-utilities', '@src/styles/common/mixins', '@src/styles/common/global', '@src/styles/common/blocks' ]) /** * Application entrypoints * @see {@link https://bud.js.org/docs/bud.entry/} */ app .alias('@blocks', app.path('@src/views/blocks')) .provide({jquery: ['$', 'jQuery']}) .entry({ app: ['@scripts/app', '@styles/app'], editor: ['@scripts/editor', '@styles/editor'], admin: ['@styles/wp-admin'], login: ['@styles/wp-login'], ...blockFiles }) /** * Directory contents to be included in the compilation * @see {@link https://bud.js.org/docs/bud.assets/} */ .assets(['images', 'fonts']) /** * Matched files trigger a page reload when modified * @see {@link https://bud.js.org/docs/bud.watch/} */ .watch(['resources/views', 'app']) /** * Proxy origin (`WP_HOME`) * @see {@link https://bud.js.org/docs/bud.proxy/} */ .proxy('https://example.test') /** * Development origin * @see {@link https://bud.js.org/docs/bud.serve/} */ .serve('http://localhost:3000') /** * URI of the `public` directory * @see {@link https://bud.js.org/docs/bud.setPublicPath/} */ .setPublicPath('/app/themes/sage/public/') /** * Generate WordPress `theme.json` * * @note This overwrites `theme.json` on every build. * * @see {@link https://bud.js.org/extensions/sage/theme.json/} * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/} */ .wpjson.settings({ color: { custom: false, customDuotone: false, customGradient: false, defaultDuotone: false, defaultGradients: false, defaultPalette: false, duotone: [], }, custom: { spacing: {}, typography: { 'font-size': {}, 'line-height': {}, }, }, spacing: { padding: true, units: ['px', '%', 'em', 'rem', 'vw', 'vh'], }, typography: { customFontSize: false, }, }) .enable(); }; ``` However whenever I start using bud in the watch mode with `bud dev`, my whole editor breaks because it’s missing all acf block styles and scripts. My custom Gutenberg blocks are also missing and I get these messages everywhere: ``` Your site does not support the sage/custom-block block. You can leave this block, convert its content to a Custom HTML block, or remove it altogether. ``` I can only fix it again by running `bud build` again, but then my `bud dev` stops working. In previous Sage setups (Laravel Mix, Webpack etc.) I believe you could run `yarn start` while preserving previously build assets with `yarn build`? Is this not possible with bud or am I missing something? Thanks! --- ## Post 2 by @kellymears — 2023-03-08T19:35:56Z By default `bud dev` does not clean previously built files, so the earlier assets should be persisted with your config. It sounds like Acorn isn’t enqueuing the desired assets at all or WordPress isn’t accepting them. 1. Assuming they are being enqueued in Sage’s PHP setup files. 2. Looking at the `Sources` and `Network` tabs of chrome inspector, do you see 404s for the assets? If not, the question is really: why are these assets not being enqueued by Acorn or WordPress? 3. What does the code that enqueues the assets in PHP look like? The block in question looks like this by default: ``` /** * Register the theme assets with the block editor. * * @return void */ add_action('enqueue_block_editor_assets', function () { bundle('editor')->enqueue(); }, 100); ``` I would expect you need to do some sort of globbing here as well? --- ## Post 3 by @Twansparant — 2023-03-09T08:26:10Z I can see what’s going wrong here; Running `bud build` compiles all my assets to my `public` folder **including** `*.css` files and adds it’s corresponding entries to the `manifest.json`. I enqueue these assets like this in my blocks & setup: **app/setup.php** : ``` add_action('enqueue_block_editor_assets', function () { bundle('editor')->enqueue(); }, 100); ``` **app/Blocks/MyBlock.php** : ``` /** * Assets to be enqueued when rendering the block. * * @return void */ public function enqueue() { bundle('my-block')->enqueue(); } ``` This all works fine! However everytime I run `yarn dev` all my assets are recompiled to the `public` folder and it adds the corresponding entries to a new `manifest.json` but it **excludes** all the `*.css` files? The `.css` files itself are still there from the previous build but they’re not in the `manifest.json` anymore. I don’t get any **404’s** in my console because they don’t get enqueued since they don’t exist according to the **Acorn** manifest? I’m using these versions in my **package.json** : ``` "@roots/bud": "6.9.1", "@roots/bud-sass": "6.9.1", "@roots/sage": "6.9.1", ... ``` Any idea how to fix this? Thanks! --- ## Post 4 by @kellymears — 2023-03-13T22:00:02Z bud.js doesn’t generate css files in development at all. you can’t hot reload a stylesheet so style updates are applied using javascript in development. --- ## Post 5 by @Twansparant — 2023-03-17T09:43:27Z Yes correct, and that used to work fine! In a previous project (with **tailwind** & bud **v6.6.10** ), I could see styles being inserted in the admin via webpack. But in my current project with (with **sass** & bud **v6.11.0** ), these styles are not? The only difference I can see in the compiled files in `/public` is in the `hmr.json` file: In the bud **6.11.0** file it has proxy defined as: ``` "proxy": { "protocol": "http:", "hostname": "0.0.0.0", "hash": "", "search": "", "pathname": "/", "path": "/", "href": "http://0.0.0.0/" }, "publicPath": "/app/themes/sage/public/" ``` In the **6.6.10** file it has the actual domain name defined as proxy: ``` "proxy": { "protocol": "https:", "hostname": "example.test", "hash": "", "search": "", "pathname": "/", "path": "/", "href": "https://example.test/" } ``` Even though I define the `proxy` the same way like: ``` .proxy('https://example.test') ``` Is that supposed to be like that? I tried downgrading to bud **6.9.1** but the same happens? Thanks!