We’re adding custom CSS and JavaScript files to WordPress core blocks. Modify any block.json with simple PHP to load your own custom CSS and JavaScript.
Transcript
AI-generated and not yet edited
Introduction
So today we’re going to take a quick demo of how to add your own CSS and JavaScript to any core block. So really any block at all, if a block is loading and you want some CSS or some JavaScript to load, but you want to take advantage of what WordPress does, which is, you know, if a block’s not being used, it doesn’t load the CSS or JavaScript for it.
So you want to like use kind of that feature, but you want to add your own CSS file or JavaScript file to a dish, to a specific block to have it load. We’re going to walk through that process. And so what I have here is two example files. I have a JavaScript file and a CSS file, and we’ll just use them as examples.
They’re not like. The pest examples, um, the CSS file literally just adds a background color to the button block. Um, you know, it’s just so we can kind of see that it’s working and then we have a JavaScript file that’s literally just going to, you know, console log something out. So it’s not really, um, you know, a super practical use case in these examples, but this is something that kind of gets done a lot of, a lot of time.
And so there’s a few different things to keep in mind. So our plan here is that whenever somebody adds a button block to the page, We want to have a piece of JavaScript that gets added, uh, you know, into WordPress, and we want to have a piece of CSS that gets added. And there’s a few things to keep in mind.
We’re going to start with the JavaScript, but what’s really important about the JavaScript is that the JavaScript is only going to be on the front end of our website. So let’s go over to the front end. This is what the page looks like. You’ll see here. There’s, there’s no, um, there’s no buttons anywhere on the page.
Registering custom JavaScript for a block
So if I jump into the console, that’s where I would see it. I’ll zoom in a little bit. Nothing comes out on the console. So we want to basically say is, hey, if there is, um, a button on the page, run this piece of JavaScript. So let’s make a new function and we’ll just call it register, Custom JavaScript, and really, this is pretty basic.
We’re just gonna register a piece of JavaScript. So you know, when you in QA script and WordPress, there’s like the WP in Q script function. Um, we’re going to use a similar one called WP Register Script. What this does is it tells WordPress that a piece of JavaScript exists, but it doesn’t actually, uh, load it on the front end.
It’s just kind of letting WordPress know, Hey, this is a piece of JavaScript. Load it if I ask for it later. So here we’ve filled it out. Here’s the name of our script. We’re just calling it example block assets. We’re gonna need that name later We’re gonna Reference the URL of where to find that JavaScript file There’s no dependencies do a little quick versioning with the file time on the file and true loaded in the footer.
That’s fine and we’re just gonna add this to the WP InqScripts hook, just like we would in any theme or plugin where you’re going to register scripts. And so this means that there’s no button, the script is registered, but it’s not going to actually load on the front end. Now what we’re going to do is we’re going to actually filter the custom, the block.
How to filter Block.json
Now what we’re going to do is we’re going to filter the button block. and add it to the block. json array of the button block. So for reference, this is the block. json file. This is actually coming from Gutenberg Core. This is for the buttons block. We’re actually going to do the buttons block, like the container, instead of the individual button block.
Um, in either case they both show up. So in here, this is the block. json and it does things like It tells them what style sheet to load, um, in the block editor and what style sheet to load on the front end. And there’s another attribute here called view script that there’s nothing set to it now, but we’re going to use that view script attribute and we’re going to add our JavaScript and say, Hey, when you’re viewing on the front end, Load this piece of JavaScript.
So we’re going to make a new function where we’re going to filter that block. json file. They call it the metadata here. Cause we just like to call it something different in different places. It’s going to be the block type metadata filter. And let’s just pass our namespace. You definitely don’t have to use namespaces.
Uh, I just find that I kind of like them. Oops, we just need this function name here. And since it’s a filter, we know at the end of the day it needs to return metadata. So what’s going to happen here is every time block. json gets parsed for every single block, this is going to run and it’s going to filter that block.
json. And so what we want to do is basically add ours if it’s the core button blocks. So the first thing we need to do is add that. Is make sure that the name
is core slash buttons and that would be this right here, right? So we want to match that name and say, Hey, if this is the name, um, then run our logic. And if so, what we want to do is we’re going to edit the view script cause that’s the attribute that basically says, Hey, load some JavaScript. Now, the funny thing about ViewScript is that it can be an array of strings.
So it could be like, Hey, open this file, open this tag, open this, whatever. Or it could just be one string. And a lot of times it’s one string by default. So what we need to do is kind of basically deal with it being multiple strings. So what we’re going to do is we’re actually going to do an array merge and we’re going typecast the original.
Metadata view script. We’re basically going to say, let’s start with an array.
So what we’re basically, it’s a little tricky here. What we’re saying is if there’s a view script already, then make sure it’s set as an array, so that way, if it’s just one string, it’ll like turn it into an array for us. Um, and if there’s nothing there, like this is completely unset, then just return an empty array, and then we are going to pass our array.
And what’s in our array is basically the name of the script right here.
And that’s it. So it’s going to take, if there’s anything in the original view script, it’s going to make sure it’s an array. It’s going to merge it with our array, or it’ll just pass this. And so now the block metadata will be updated. So let’s jump over. To here. Now if we do a quick check, again, no console log.
Let’s go back to our page. Now we’ve added some example buttons. Let’s save the page. So now when we reload it, there should be buttons on the page. Our JavaScript should run. And look at there. It console logs out exactly what we asked it to do. So now, the buttons block basically is always going to load this JavaScript anytime it’s loaded on the page.
So that’s the kind of quick and easy way to get JavaScript loaded with any sort of block.
Registering custom CSS for a block
Now, CSS is a little bit different. With JavaScript, like, we pretty much only ever want it on the front end. If you’re trying to do JavaScript, like, inside the block editor, that’s, I mean, that’s way outside the scope of this video.
That’s really kind of, like, a long, complicated thing. So, that, we’re not going to do. CSS, on the other hand, typically, Um, when you load CSS for a block, it actually loads it on the front end and the back end because CSS is a little bit easier. I will say sometimes it’s a little tricky getting the back end to look perfect, but like, it’s generally you want that CSS on the front end and the back end.
So we’ve made a CSS file that’s basically just going to take the buttons and make the background color red. And, you know, this isn’t something you’d normally do. You’d just use the block editor for that. But we’re just doing it so we can easily see our changes. Okay, so let’s make a new function, registerCustomCSS, we’re just gonna hook in a little earlier, we’re gonna hook in on the init,
and pass the name. So when WordPress initializes, we’re gonna say, register this custom CSS. So we’re actually gonna do the same thing, where we’re gonna call wp registerStyle. And we’re going to pass the same thing. We’re going to make a name for our style sheet, pass it all the appropriate parameters and everything.
So I’ve named my new stylesheet example block assets. I’m pointing to that CSS file that was in our plugin. Um, I don’t have any dependencies for it and I just did a little version based on the file time. So we’ve just registered this piece of CSS and right now it’s just registered. It’s not going to load anywhere, but for, actually a nice core function called WPNQ block style.
And what’s nice about this is instead of having to like filter the metadata, which we could do, we could do the same thing here and, and update the styles, uh, attribute for the block. json. Um, but since they give us a nice little handy function, let’s just use it. The block name is core slash buttons. And this is where it’s a little bit weird.
Um, It basically wants an array of arguments for the second parameter, um, and it basically wants the same things that you can get in here, but because, um, because it’s an array and not a function, you have to kind of name them as well. So what I usually do is I just do the handle, And that’s example block assets.
And that’s really all I need because you can actually, you could actually skip this step and pass each individual parameter. Like you could say, here’s the source. Here’s this, here’s that. Um, that’s definitely an option, but I just find it easier to use WP register style and, uh, what’s nice about that is we can take a look at queer monitor and show how it’s working too.
Okay. So let’s refresh. So now our button block has that red. Background for it. And if I go to the block editor, it’s going to load that style sheet here as well. So I get to see it in both contexts, which is really nice for CSS. And so the last thing I’ll add is sometimes you’re just not sure if you’re seeing what you’re supposed to be seeing.
Using Query Monitor to debug assets
And that’s where query monitor comes in. It’s where you can debug a lot of different things. So I’m going to open query monitor. I’m going to go to scripts. I’m going to scroll down and if you look right here, I can see that my example block assets script is being loaded. So that’s something that’s available coming from my plugin.
And so if you’re not seeing the effects of it, come down here and make sure it’s actually getting loaded because if it’s just registered and not in Qt, it won’t show up here. Similar with my style sheet, I can scroll on down and I can see. Example block assets. That’s what we named our style sheet. That CSS file is being loaded.
So this is a good final way to kind of do some like debugging, checking, make sure that like everything is actually loading where you need it to load. So that’s basically it. I’m going to push this code up to GitHub, but it’s pretty simple. Registering some scripts, registering styles.
Other uses for custom block assets
One additional thing that’s super handy about this is say you have a piece of JavaScript, that’s like a dependency for multiple blocks, like say you’re using a slider library or.
A countdown library, something like that, one piece of JavaScript, and you want it to just load once, if it’s ever being used by any block, and then not load a bunch of other times. Uh, or not load multiple copies of the same JavaScript file, that sort of thing. That’s where register script comes in handy.
Cause then you can start adding it to multiple blocks doing this. You can put it in multiple block JSON files. You can make one style sheet and enqueue it to multiple different types of blocks. So that way it only loads if those blocks are on the page, but it’s not loading the same thing multiple times.
There’s a lot of benefits here to like learning and understanding the system and really tying the All of your assets to the individual blocks, uh, to get that like more performance site in the long run. So let me know if you have any questions, like this video, if this was helpful and put anything you need in the comments below.
Leave a Reply