Skip to content

Gutenberg: Enqueuing Styles and Scripts

It’s been a while since my last post. I had a big event where I had to have heart surgery to replace a valve. It was expected, and things went well. (I may write a post about that later possibly, I’m just looking forward to resuming life!) But while I was away from writing posts I got a lot of feedback about outdated posts and specifically questions about enqueuing styles and scripts.

My previous article is… a bit outdated. Not to mention I don’t really use the same methods in my newer Guty Blocks 2 boilerplate. Do it’s time to update!

What’s changed since last year for enqueuing?

We don’t really use the same actions that were recommended from spring a year ago. Last year we used enqueue_block_assets as our action and enqueued all our styles and scripts with that action.

Instead, WordPress is now recommending that we enqueue using the init hook in php.

function gutenberg_example_register_block() {
    ...
}
add_action( 'init', 'gutenberg_example_register_block');

Not only that, but now we will compile the scripts and styles into an array, and pass that array to the register_block_type function we know and love.

function gutenberg_example_register_block() {
    // do all your registering here...

    register_block_type('namespace/block-name', array(
        'style' => 'view-style-handle',
        'editor_style' => 'editor-only-style-handle',
        'editor_script' => 'regular-block-script-handle'
    ) );
}
add_action( 'init', 'gutenberg_example_register_block');

Again, the style and editor-style keys in the array are specific. style means that style is seen in the editor and view. editor-style is a stylesheet specific to the editor.

What’s changed for class names?

It used to be that className was passed as a prop to the edit() and the save() methods in your block. Now, className is added as the default class in your save method, but not to your edit method.

I have no idea why the discrepancy.

So basically, you still need to pull the className attribute from the edit() props, and place that className manually. In the save() you don’t:

edit(props) {
    const { className, setAttributes } = props;

    return (
        <div className={className}>
            testing
        </div>
    );
},

save(props) {
    return (
        <div> // className is automagically added
            testing
        </div>
    );
},

Not a big fan of this, especially because you may want to use naming conventions like BEM, etc. If you want to use WordPress Gutenberg’s className you will need to use a function to retrieve it in save().

save(props) {
    const className = getBlockDefaultClassName('namespace/block-handle');
    return (
        // className is available here now
        <div>
            testing
        </div>
    );
},

I’m sure there’s more…

I’m finding so many changes in Gutenberg that have happened a while ago that I ‘m sure I’m missing a ton that could be said here. Please let me know if I missed something below or @jschof

Leave a Reply

Your email address will not be published. Required fields are marked *