Sage 10, Bud 6.12.2 unable to get block scripts to load

bud
,
1

I am trying to load in custom styles via JS using roots.register.filters, however, no matter what I do, I cannot get any of these to load in. I am trying to follow the documentation on Bud’s website, but it’s a bit vague on how it’s meant to filter or pull in. I’m not sure if I’m missing an import or what.

The editor.js file is enqueued, and I can see the code in browser if I visit the URL. Even if I add a console.log or an alert, nothing triggers.

setup.php


/**
 * Register the theme assets with the block editor.
 *
 * @return void
 */
add_action('enqueue_block_editor_assets', function () {
    bundle('editor')->enqueue();
}, 100);

This is all I have in my editor.js

roots.register.blocks('@scripts/backend/blocks');
roots.register.filters('@scripts/backend/filters');
roots.register.formats('@scripts/backend/formats');
roots.register.plugins('@scripts/backend/plugins');
roots.register.styles('@scripts/backend/styles');
roots.register.variations('@scripts/backend/variations');

and this is in my /backend/filters/button.filter.js

/**
 * @see {@link https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
 */
export const hook = 'blocks.registerBlockType';

/**
 * Filter handle
 */
export const name = 'core/button';

/**
 * Filter callback
 *
 * @param {object} settings
 * @param {string} name
 * @returns modified settings
 */
export function callback(settings, name) {
    if (name !== 'core/button') return settings;

    return {
        ...settings, // merging the styles, or replacing does nothing
        styles: [
            {
                label: 'Button',
                name: 'btn',
                inlineStyle: '.btn',
                isDefault: true,
            },
            {
                label: 'Arrow Left Button',
                name: 'arrow-left',
                inlineStyle: '.btn.arrow-left'
            },
            {
                label: 'Arrow Right Button',
                name: 'arrow-right',
                inlineStyle: '.btn.arrow-right'
            },
            {
                label: 'Secondary Button',
                name: 'btn--secondary',
                inlineStyle: '.btn.btn--secondary'
            },
            {
                label: 'Large Button',
                name: 'btn--large',
                inlineStyle: '.btn.btn--large'
            },
            {
                label: 'Large Secondary Button',
                name: 'btn-secondary-large',
                inlineStyle: '.btn.btn--secondary.btn--large'
            },
        ],
    };
}
2

Initially I suspected it’s because your filter name is core/button, which could easily be in conflict with something else. But, I pulled down sage@main and that didn’t seem to matter.

Putting your styles into resources/scripts/filters/button.filter.js works as expected:

/**
 * @see {@link https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
 */
export const hook = 'blocks.registerBlockType';

/**
 * Filter handle
 */
export const name = 'core/button';

/**
 * Filter callback
 *
 * @param {object} settings
 * @param {string} name
 * @returns modified settings
 */
export function callback(settings, name) {
  if (name !== 'core/button') return settings;

  return {
    ...settings,
    styles: [
      {
        label: 'Button',
        name: 'btn',
        inlineStyle: '.btn',
        isDefault: true,
      },
      {
        label: 'Arrow Left Button',
        name: 'arrow-left',
        inlineStyle: '.btn.arrow-left',
      },
      {
        label: 'Arrow Right Button',
        name: 'arrow-right',
        inlineStyle: '.btn.arrow-right',
      },
      {
        label: 'Secondary Button',
        name: 'btn--secondary',
        inlineStyle: '.btn.btn--secondary',
      },
      {
        label: 'Large Button',
        name: 'btn--large',
        inlineStyle: '.btn.btn--large',
      },
      {
        label: 'Large Secondary Button',
        name: 'btn-secondary-large',
        inlineStyle: '.btn.btn--secondary.btn--large',
      },
    ],
  };
}

Editor:

image
image1564×628 28.3 KB

Checked in both dev mode and in production. Is there any way for you to reproduce this problem in a repository I can pull down?

Also, you say your button.filter.js file is in /backend/filters/button.filter.js but I am assuming you mean /resources/scripts/backend/filters/button.filter.js. If backend is really in the root of sage you need to move it into /resources/scripts.

3

You’re correct, the file path is /resources/scripts/backend/filters. Since I am specifying the path in roots.register, should this not matter? Or is it because of how the bud.config.js is setup for scripts? Even moving the file into resources/scripts/filters I was unable to get it to show up using the “Buttons” Gutenberg block. Even changing name to core/button or core/buttons yielded no results.

I don’t have a public facing repo, but I can create a private repo and invite you to it. It’s for a client that we privatize code for.

4

Turns out if you add an entry that has nothing in the file, it’ll cause anything afterwards to fail to close.

Actually, looking again, if you use ACF Composer, and are enqueuing a bundle in the enqueue method, that’s actually what breaks.

5

It’s not ACF Composer itself, but using bundle('component')->enqueue() which will break this. Got the same issue, while trying to enqueue some component specific entry in a render_block_ hook.

Hope, I find the related trace to this…

I had to call this with

add_action('wp_enqueue_scripts', function () {
    bundle('bundle')->enqueue();
}, 100);

to fix this. Initially, I called it directly in render_block_ filter hook.