Bud.js Gutenberg Style Register Does Not Inject CSS Class

bud
, , , ,
1

Greetings,

I’m following the documentation over at Styles | bud.js to set up my Gutenberg block development.
I’ve successfully registered a block, and nominally registered related styles, but when I toggle to a style variant, the block does update with the style variant class name, e.g.:

// foo.block.js
export default {
    name: `bud-project/foo-block`,
    title: `Foo block`,
    edit: () => <div><h1>Hello world!</h1></div>,
    save: () => <div><h1>Hello world!</h1></div>
}

// fooDefault.style.js
export default {
    block: `bud-project/foo-block`,
    name: `default`,
    label: `Default`,
    isDefault: true,
}

// fooCustom.style.js
export default {
    block: `bud-project/foo-block`,
    name: `variant`,
    label: `Variant`,
    isDefault: false,
}

Is there documentation which details completing the rest of this basic implementation step?

Here’s a screenshot if it’s helpful. The variant button can be clicked, but it seems to do nothing, including not adding the is-style-variant css class name

Screenshot 2024-02-12 at 12.07.06 PM
Screenshot 2024-02-12 at 12.07.06 PM1964×3096 390 KB

Thank you!
Jess

2

Looks like you have to pass in the props explicitly:

// foo.block.js
export default {
    name: `bud-project/foo-block`,
    title: `Foo block`,
    edit: props => <div className={props.className}><h1>Hello world!</h1></div>,
    save: props => <div className={props.className}><h1>Hello world!</h1></div>
}
1 Like