Learn how to quickly and easily create custom ACF blocks for the WordPress block editor (Gutenberg) using our ACF Theme Code Pro plugin.
Theme Code Pro will generate all the necessary block registration and template logic – you just need to bring the HTML & CSS to suit your project needs.
Video Transcript
Hey. Phil here from Hookturn and in this video I want to show you how easy it is to use our ACF Theme Code Pro plugin to build quick and easy custom ACF blocks for the WordPress block editor. Okay, so what you're seeing at the moment is a WordPress installation using a very basic WordPress theme. So, in the theme I have an index.php template which will be serving our content. I also have a template partial, which currently contains the markup for the component that we'll be converting to an ACF block. So the component is titled author card and it's currently hard coded into the index.php file. You can see it right here. And we're doing that just simply so we can get a glimpse of what it looks like on the front end. And if we take a look at the front end of the site, you can see the author card here in all its hard coded glory. The component has a few images, a title, and a few other data points. The first thing we need to do is register our custom block type with ACF. Now, ACF provides us with a fantastic API for doing this, but we're going to be using a few conveniences provided by the ACF Theme Code Pro plugin just to make life that little bit easier. So, I'm going to head over to the custom fields menu and I'm going to click on tools. Now, in the tools page you'll see there's a metabox titled register ACF blocks or options pages. And this is provided by Theme Code Pro. So we're going to use this now. We're going to leave the location set to block, and we're going to change the block name to author card. And you'll notice that the code updates on the fly as we type. And so this is basically what we need now to get our block registering. So, our code is here. We're going to copy that to our clipboard and we're going to jump back across to our editor. And I'm going to paste this into the functions.php file. So I'm going to save that file and I'm going to come across to our WordPress editor. So we'll find the page that we were working on and we'll open up the editor. And now, when I go and add a new block and I search for our author card, we'll see it comes up in the block selector, and when I hit enter, you'll notice that there's nothing to really see yet. Okay, so there's no content in the block and there are no sittings over here. And this is basically because we still need to set up our block template file, our block CSS file, and, of course, our ACF fields for this block. So, now that our block type is registered, we need to tell ACF where the template file is and where the CSS is, okay? So it's going to use the template file to, obviously, load the preview here in the admin and it's going to use the CSS to style it. So, what we'll do is we'll come back over to our editor and we'll come back to where we've registered our block. And there are two things we need to work with here. One is the render template arg, and the other one is the enqueue style. So, let me uncomment that. And one thing I'll quickly point out is that we've got a different expected directory structure to what we currently have in our theme. So what I'm going to do is I'm just going to basically mimic this directory structure now. So, under template parts I'm going to create a new directory called blocks, and I'm going to move the author card part into the blocks directory. And the other thing I'm now going to do is I'm going to have a look at the enqueue style path. So we've got this expectation that it's going to be in template-paths/blocks/author-card/author-card.css. Now, I've already got author-card.css, but I've got it in the CSS directory within the theme. So what I'm going to do is I'm just going to move it to this expected path just so we can keep things organized in a sensible way. So I'm going to say new dir and we're going to say author card and then we're going to move the author-card.css into the author card directory. And so now we've essentially got a template and an assets directory for the author card block. All right, so, if I save all that and I come over here. I'm, just going to reload this page. Okay. So now when I create a new block and we drop in our author card, basically what's going to happen is it's going to load up the template and the CSS necessary to display a preview, which is fairly accurate. I say fairly accurate because the CSS for the author card, like if we look at the front end, it's not exactly the same, right? And the reason being is the CSS, it's a CSS partial and it's basically rendering on top of whatever base CSS exists in the editor. So it's not going to be … And that's not going to be the same base CSS as you see on the front end of the site. So you've got an opportunity here. You could spend time writing a separate admin CSS file that refines this and tweaks it so it looks identical, or you could just leave it looking very close to but not 100% the same as the front end. It just comes down to budget and time. I guess it's totally up to you. But now we've managed to get our card rendering here in the editor and if we go and create another one, so if I say, author card, okay, let it render again. So I've got two cards. Obviously, the template's hard coded, so they're going to look identical. If I update this now and I come over to our front end and reload this page, we're now going to see that we've got two cards. So now what we're seeing here is basically just what is being added to the block editor. So just to illustrate that further, if I come back over here and I drop a block in between the two and we'll just do a very quick, simple text block. Okay. And then we drop one here at the bottom. Update that. View the front end, we're going to see that we now get our text in between and after our cards. Okay, so we've got our block registered with ACF. We've got ACF loading the template and the CSS that we need to preview that block in the admin. Now what we need to do is enter the final phase and that is to create ACF fields to make the block dynamic and get those fields rendering in the template. Okay, so to do that, basically what we need to do is create an ACF field group and assign that to this block. All right? So what we're going to do is I'm going to come over to custom fields and I'm going to go to field groups and to save us the trouble of going through and creating all these fields, I've already created a group called author card. All right. It's got our banner, avatar, name, title, URL, and description in there. And what I'm going to do is change the location to block, and then I'm going to choose our block type in there, which is author card. Now when I save this and I come back over to our page if I click on this block, now, what you're going to see is that it flips, the card basically flips over and we get all these fields. Okay? So we have the opportunity now to enter data. But if I were to enter data at this stage and save it and reload the front end, nothing's going to change because we haven't quite yet loaded, or we haven't made our template dynamics. So, the templates are not yet feeding from these values. So to do that, what we're going to do is we're going to use the next convenience that Theme Code Pro offers, and we're going to basically grab the template code that we need to use in our templates. So down here in the theme code metabox, we've got all this code that we can essentially copy and paste. So, I'm just going to copy all of that and I'm going to come over to our editor. And what we're going to be doing is basically mixing our theme code in amongst our existing markup. So I'm just going to paste all this at the top. And then what we're going to do is essentially integrate all of this into our markup here. So, I'm going to do this now and I'm going to speed up the video a little bit so we can just move through this quickly. But you can still watch along. (silence) Theme code has been implemented into our custom markup. And so now we should be able to populate fields or ACF fields on the block and see those changes render on the front end. So, let's make sure this is all saved and we'll come back over to our editor here. I'm just going to reload this page. Okay, cool. So now our block's kind of rendering as empty and that's essentially, that's okay. Like that basically just tells us this is probably working right because what we're seeing is a more or less empty block. It's got the outside bits and pieces and it's probably got some padding or some margin on the inside. That's spacing it all out. But the fields that … The HTML markup that requires data doesn't have any data. So, let's click on it and let's go and start populating this with some data. All right, so I've got Phil Kurth, web dev, hookturn.io, hookturn.io, sure, add a link. And then we'll just do some description in here. So I'll just do some lorem ipsum. Okay. And then what we'll do is we'll just create another one as well and we'll create it with some different data points here. Also, we want that as the banner, we want this as the avatar. We'll call this person Fake McPerson. And they can be the director because that's fine. And we'll link them to some sample page and this person isn't actually real. Cool. So, now what I'll do is update this page and then if we come back over to the front end, reload this page, we're going to have our two author card style blocks loading in our page contents. So these are now loading dynamically from ACF fields that we've placed on the block. And basically that means that you can use this block as many times as we want in our block editor. Okay. So, that's basically all there is to creating your own custom ACF blocks using Theme Code Pro. If you have any questions about Theme Code Pro, reach out to us at support@hookturn.io and if you want to stay on top of our news and announcements, you can follow us on Twitter @hookturn_io.
