Creating Gutenberg Blocks with Advanced Custom Fields

Hey there and welcome back.

So the new block editor in WordPress, Gutenberg, has been around for over a year now. And while yes, there are still problems with Gutenberg, there are also a lot of positives that have come with it. And one of those is the ability to create your own blocks.

Of course, we’ve always had the ability to create shortcodes. But they weren’t visually displayed in the editor and it was kind of hard to adjust the settings for those unless you knew what you were doing.

And while you can definitely argue creating Gutenberg blocks with Javascript is, you know, just as hard if not harder because, well, we’re talking about Javascript, I’m going to counter with Advanced Custom Fields and their block feature that they introduced last year. I’ve been using this plugin for over five years and I love it. And when Gutenberg was released, the ACF team released an update to their plugin that allowed people to use PHP and their plugin to new blocks.

And this opens up a lot of things that you can do if you know just basic PHP. If you want a block so that you can display information about each member of your team or you want a testimonial block or maybe your own custom cover image block, well you can do that with PHP and ACF. So today, let’s create a staff member block and learn more about how we can create new blocks with ACF.

Okay so here we are back in VS Code. And as always I’ll have some starter code that you can use to get started with your own block in a GitHub repository that I’ll link to in the description below. And you might notice that the code I’m working with right now is going to be different than what you see in the starter code over in the GitHub repo. And that’s because this plugin will do other things. It features a lot of object-oriented programming stuff that’s not exactly essential to what we’re doing, but it’s a programming thing that I link to use to keep things nice and organized. But overall the things that I’m going to talk about, the functions primarily, are the same whether you use the regular style or object-oriented programming style.

So first off here in this file, I’m loading in the editor side styles first and then the front end styles. That’s all straightforward. Where we start to throw in some of the Advanced Custom Fields stuff is here with this function. First we check to make sure that we can actually register a block, make sure that the ACF plugin is active and that it’s basically the right version.

If so we’re going to bring in this other file that we’ll talk about here in a second that basically brings in the code on how the block is going to be laid out. And then we register the block through here. This is acf_register_block function. And this function is basically where a lot of the magic happens for us. Here you put your name, so for here we’re going to call it “staff-block”. This is more like a slug and not necessarily the title that you’ll see on the front end. This is the title that you’ll see on the front end. And then we can give it a description. And then here, this render_callback, this is where this other file comes into play. We’ll call in a function from that other file, and this is how it will render out the block we’re trying to create.

And then we can also create our own block categories so that we can find it easier inside the post. And we do this through this function right here. That’s filtered in through another action or filter here. And then the other function we were talking about is called through the “acf/init” action. But we’ll talk more about that later. Actions and filters are basically fairly simple.

And then for each category you want to give it a slug and a title and then you make sure that the slug here is the same as this one right here. And we can give it an icon. It’s an SVG file that you can create or you can use the WordPress dashicons. So for staff, we would probably want to use. Let’s pop that right there. And then we can add in up to three keywords. And they can be whatever you want. And that’s basically it for this side of things.

So now we need to create, basically create this file: staff-block.php. Okay so here we are in that file I talked about a little bit earlier. This is that callback function that we were talking about. And this is where we’ll create the layout for our block. So, the callback function takes in one parameter, block, and this has different information about the block itself such as the ID and the alignment and other things.

So we’re going to go in here and we’re going to create a div. And we’re going to add the alignment class. And that’s in case we want to use it wide, center, left, right, full, whatever. With the staff block it will be the basic alignment, but there are some cases where you want it to align wide if you have a single column layout or you want it to be full if it’s an image or a custom sort of cover image that you’re trying to build.

Okay so we’ll go in here, and then this block I’m envisioning will have a photo on the left side and then the information on the right side. Okay so over here on the right side, the person’s title is going to be an H2. And the way we get it, if you’re new to ACF, the way we get our ACF fields is by using the_field and get_field. And for right now I’m going to leave this blank because I haven’t created the fields on the backend of the website, and I need the slug for those fields to go right there. Usually I create the spot for the field first, go and create the fields and then come back and fill it in with the slug for the field.

So that’s the person’s name. And then this will be their title, email address and then phone number. And then we’ll have a bio for them. And then the proper way, because we’ll use the WYSIWYG editor, what you see is what you get editor, for this. So for this we’ll have to apply the_contents filter. And we’ll use the get_field function to get this field.

Okay and then for the left side with the photo things are a little bit different. So when we create this field, it will be an image field and we’ll get the image ID from the field and we’ll use wp_get_attachment_image using the ID to get the image and then echo it out. It’s a little bit complicated. The more complicated the field, the more complicated, obviously, the back end is going to have to be.

But the good news is that we have the layout for our block created. Now let’s go in and create those fields.

Okay so here in ACF we’re going to add in a new field group. And we’re going to name it. For blocks now, I like to use “Block” first so that they’re all going to be grouped, because they group them by name, so all of the blocks are going to be grouped together. Let’s call it staff. And then here, basically show if the block is the staff block. So here we go. First we’ll do photo and then here image, image ID. And then name. That’s just a simple text field. Email, also just a simple text field. And office phone, that’s also just a simple text field. And then Bio is going to be what’s called a WYSIWYG editor and if you haven’t explored ACF yet I highly suggest that you do. There are a ton of different fields that make it so much easier. I love the repeater fields. I have built repeater fields on my own for other things that I couldn’t use ACF for and man is it a pain in the butt. But with ACF fields and ACF Pro, it’s amazing what you can do without having to write any lines of code. So I just highly suggest that you try it out. And I’m not paid to say that. I promise. I have just used it for almost five years now and it’s absolutely amazing.

So now we’re going to hit publish on this first before we forget. And then now we’re going to bring in the name or the slug over to our code. So photo is there. Alright there we go. Hit save on that. Hit save on that just to make sure. You can never be too careful when you’re saving things. Okay so here we are in our page that we want to add the block to. So we’re going to go down here and my little dashicon isn’t showing up. I should probably look into seeing how that needs to be fixed. I have an idea, but first let’s just get through this part.

Obviously because we have nothing in our ACF fields right now for the block, obviously we’re not going to see anything. So we hit the switch to edit icon. And now we’ll add an image. I’d call it a face reveal but I’ve shown my face on this channel plenty of times. Alright. And there we go.

And when we preview it — oh that’s a problem — nope there we go. It showed up. Okay so here’s that. Let’s update. And we’ll go to the page. And there it is. And there’s no styling here obviously although we are having a problem with the bio not showing up. And it’s because I didn’t fill that in yet. Fill that in and reload the page. It also helps to echo. See us web developers, we’re not perfect either. So, if you mess something up that’s okay.

And there we go. There’s the bio. One of the best parts that I like about use ACF blocks is that you can change the blocks and not have to do some sort of weird deprecated thing that you would with the other Javascript stuff when you’re building Gutenberg blocks. It just makes it some much easier.

Okay so our last step in this process is going to be adding in the styling. Now you can use basic CSS and in fact that’s what I have in the starter code up in the GitHub repository. Personally I like to use either SCSS or PostCSS. Just the structure, the ability to use essentially functions and variables inside CSS makes it so much easier to do styling and what not. So that’s what I have mine set up to do right now. But it really doesn’t matter.

So first I find it easier to style them in the front end. So for that, I’m going to create a style dot SCSS file. And then I’m going to use a combination of Flexbox and CSS Grid to create the layout that we’re looking to do. So first I’m going to set my styling for browsers that aren’t using Grid but are using Flexbox. And now I add in my support for the CSS Grid. And I’m thinking this will be a one-thirds, two-thirds situation. We can leave in the row-gap.

So the way I have it set up, if you’re doing this in pure CSS, you’re fine to hit save and reload the page. But because I’m doing it sort of a combination of the ACF and the Gutenberg way, I need to go in here. I import that stylesheet basically and then I come down to my terminal and should be able to build it out. Okay there we go, maybe.

Okay there, it’s compiled our CSS. We should be good to go. Now refresh this page. And there we go. Now we have our layout. The left side. The right side. Looks pretty good. There’s additional styling that I’ll probably go back in and do to get this ready, you know, for the actual internet. But for now that works for us.

And then finally we want to be able to see that over here so that we can get a good idea for what the page is going to look like without having to go between the front end and back end. So we’ll go back in here, create a new file and call it editor dot scss. Basically we’re going to copy all of this to right there. Hit save on this and then import it. And then it runs.

Okay so now it’s all saved. We come back in here. And there we go. It’s a little bit different. The width in here is different than the width here which is causing a little bit of an issue. But nonetheless, we have our block and we’ve done it through ACF fields. We haven’t touched any lines of Javascript. All we have do is have ACF, some PHP knowledge. And you can do this for staff blocks, testimonials, custom cover images. Basically opens up a whole bunch that you can do. So you know, just try it out and ideally hopefully you have a development environment where you can go and you can make mistakes and you can break it, reset it and try it again.

So there you have it. If you’ve followed this tutorial all the way through, you now have a functioning staff member block that you can use anywhere on your website. And you can start building other blocks if you want or need to.

Again, feel free to head over to the GitHub repository to get started. If you have any questions about Gutenberg, blocks, ACF or anything like that, be sure to leave them down in the comments below and I’ll do my best to answer all of them. And if you want more WordPress tips and tricks, be sure to hit that subscribe button.

But until next time, happy WordPressing!