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
Thank you so much for these fantastic articles
is still recommended to use init action to enqueued all Gutenberg styles and scripts ?
I see many developers now recommend using enqueue_block_assets action
Thanks