viewSource

## [00:00:00] Introduction and ACF's documentation

​[00:00:00]

[00:00:00] **Brian Coords:** How are we doing today?

[00:00:14] **Aurooba Ahmed:** We're doing good. It's been a rough week, but we're doing good . How about you,

[00:00:19] **Brian Coords:** Is it because you had to build native blocks or

[00:00:22] **Aurooba Ahmed:** No, I like that part.

[00:00:24] **Brian Coords:** Okay, well that makes one of us So did you see that I did get to have a little conversation with some ACF team members, which I thought was pretty appropriate since we're talking about ACF blocks today. Did you see our conversation?

[00:00:43] **Aurooba Ahmed:** Yeah, I did. I, I read your post about, you know, ACF blocks as you were experimenting with them, and they, they enjoyed that feedback, so I'm looking forward to seeing if they actually do something with it.

[00:00:55] **Brian Coords:** I'm curious. So my feedback was essentially that block [00:01:00] ACF blocks, documentation is a little bit, I would say lacking. It feels like you're kind of, you have to click through a lot of articles to get to the ones that have the most up-to-date examples and the actual like, documentation doesn't really have updated examples, but they send you to like blog posts that have really good examples.

But it's like if you don't know to keep following the links, it's pretty hard to find. I expressed a little frustration in a blog post as people tend to do.

[00:01:27] **Aurooba Ahmed:** And we came across that in our last episode too, where I was showing the documentation and I followed it. And remember the supports thing, it wasn't working right because it had changed since they had updated the documentation.

[00:01:39] **Brian Coords:** like every time I complain about ACF, which I only complain about cuz I use it and love it and I feel like every time Ian or somebody on that team, it's like immediate, they're like, oh, thanks for the feedback.

I'll bring it to the team. So

[00:01:51] **Aurooba Ahmed:** Yeah, they're pretty responsive, which I really appreciate too.

[00:01:54] **Brian Coords:** Yeah. And it's like, I mean I paid them, you know, what,

[00:01:58] **Aurooba Ahmed:** Yeah,

[00:01:58] **Brian Coords:** $200

like eight years ago. [00:02:00] So I'm, you know, that's, I, that's more than I.

[00:02:02] **Aurooba Ahmed:** all that money.

[00:02:04] **Brian Coords:** For that lifetime access.

[00:02:07] **Aurooba Ahmed:** But I think like it's also a really good example to follow just in general. Like you'll think about how they've been developing and listening to the people who use their product, and then there are some other other products that come to mind where it feels like user feedback is dismissed or is like tertiary to the goals.

[00:02:26] **Brian Coords:** Mm-hmm. Mm-hmm.

[00:02:28] **Aurooba Ahmed:** so I can really appreciate that about them.

[00:02:30] **Brian Coords:** Yeah. And you still have to like triage feedback. I'm sure they get a lot of ideas from people that they're just are like, yeah, that's not really core to what we're trying to accomplish here. So,

[00:02:40] **Aurooba Ahmed:** Oh yeah.

[00:02:40] **Brian Coords:** I do think good documentation, which most of their documentation is really good. That was kind of my point that anything with the block editor, it's just hard to get good documentation.

It's hard to write good documentation for it. So I'm. And I'm optimistic about these blocks. You're about to show us as part two of [00:03:00] ACF versus Native Blocks continues.

## [00:03:02] Reviewing Aurooba's ACF block

[00:03:02] **Aurooba Ahmed:** Okay. So just to recap, last time we created an ACF block I'd created part of it, and then we played around and made it more specific during our episode together as we were recording. So let's just go through that real quick first.

So when we're making an ACF block, we, as we just established, there has to be a block.json. It works a lot like any block.json whether you're using an ACF block or a native block, except it also has like a whole ACF key, like a section where you can sort of specify ACF specific things like, oh, do you want this block to open in preview mode or edit mode?

And how, and what is a render template for this? And it's a pretty simple block. Now I'm switching over to the actual rendering template for it and it's, you get a lot of like really helpful variables from ACF that bring in like context and the post ID and all the block attributes. And then you can just use that to build [00:04:00] the actual block.

Very similar to how you would do something like that for like ACF flexible content field. Right.

[00:04:08] **Brian Coords:** Yeah, and I feel like they've done a really good job of being, like the JSON file is so close to native except they, you add your own little, like ACF area and the template PHP stuff is so close to how you would work with ACF in the past. It feels like, whichever direction you're coming from, it's, it's nice that they're not like just going off in some weird third way.

Like they really are conceptually keeping it really close to those two places. The, the PHP and the, the traditional JavaScript stuff.

[00:04:40] **Aurooba Ahmed:** Yeah, and then that same block, which I called ACF like, Hello World In the block editor, I have it in preview mode. So when you first add the block, or if you have the block already added from the last episode you can see exactly how it's gonna look on the front end. And then you can click on it and either see the edit fields in the sidebar in the [00:05:00] inspector, or you can click the pencil in the block toolbar to edit the fields

within the main content area. And I just have an image on one side and then heading on the other side. And so it's just an image field and a text field that's labeled heading, but under, under the hood it's an H 3, and that's my A C F block.

[00:05:20] **Brian Coords:** It's like a nice, nice clean block.

[00:05:23] **Aurooba Ahmed:** Yeah. But now for those of you watching, and for those of you listening underneath it, I have two other variations that look almost exactly the same with the grand exception of the wording that I have in there because I played around and I made two other types of native blocks that have the same capabilities, but are done in totally different ways so that we can talk about like what those advantages and disadvantages are.

[00:05:49] **Brian Coords:** Yeah, I think so. I mean, I kind of feel like you're showing off a little bit here, but I'm gonna let it go cuz it's, you probably should. It's pretty impressive stuff.

## [00:05:55] Estimated timeframe for different types of blocks

[00:05:55] **Brian Coords:** What I want to draw attention to first before you leave the screen is [00:06:00] that. You have three blocks, one built with ACF, one built kind of innerblocks style, and one like super custom. But then you actually gave us like your timeframe for how long you kind of guess it took you to build each of them. So like, break me down what was the fastest, medium and slowest. And then, and and and then we'll kind of see why I think as we dig into

[00:06:21] **Aurooba Ahmed:** them.

So the caveat I'll put it here is that these are my times from already being kind of familiar with building blocks natively and also have had a, having had some experience with ACF blocks before, I built this as well. So it does like assume some, some level of knowledge and familiarity with it. But ACF blocks was by far the fastest.

It took me under 15 minutes to write the logic, style it, and even like, go ahead and test it in the browser. Because, you know, it's literally just two fields that you re write in ACF, and if you work with ACF all the time, then you're gonna be really, really fast at it.

## [00:06:58] A native block with innerBlocks

[00:06:58] **Aurooba Ahmed:** Then the next one is the [00:07:00] custom block that I built with inner blocks.

What that means is I have a sort of a custom. Like a wrapper block, but inside it, all of the stuff is built with existing blocks. In this case, I've used the core image block and the core heading block, and then added some styling to it, and that took me about 20 minutes from start to finish.

[00:07:20] **Brian Coords:** Is that the closest to ACF in terms of- you're kind of reusing components, right? Like you're, you're kind of just in ACF you're saying like, gimme an image ACF field, gimme a text ACF field. In this case you're saying give me a react component for an image. Gimme WordPress's default react component for a heading. So it's like maybe a little bit of scaffolding that's already there for you.

[00:07:44] **Aurooba Ahmed:** Well, the thing is, it's not the react component for the imagery. It's like the WordPress image block, which also comes with like its own settings and attributes and everything else, and. Right. It's not, it's much more difficult to like say, oh, when I'm using the image block in this [00:08:00] block, only give me these settings.

Right?

[00:08:02] **Brian Coords:** Mm-hmm.

[00:08:02] **Aurooba Ahmed:** You,

by default, will get all of the different settings that are available to the image block. So if I were to click on the image block right now, you can see that I have the ability to make it bigger and make it take up more of the block than just 50%, which is what I actually wanted to do. I can add a border to it.

I can add a radius to it, you know, I can do all the things that you can with a regular image block. And the same thing goes for the heading. I have it locked right now, but that in the, in the case of this heading block, it doesn't actually do what I would want it to do, which is like, I wanna lock it to an H three.

I'd wanna take away the ability for them to remove, like change the heading level of it. But I can't because it's a heading block and it comes with all those settings and I. You can, but it's like a lot more involved and sometimes it's not worth it to go in and modify like, oh, only this is available to you right now when you're inside this inner Blocks component.

Right.

[00:08:59] **Brian Coords:** So, [00:09:00] so I guess it's, I mean, it's nice that it kind of brings every, everything that's, that's part of that core block. Like yeah, I guess I was definitely misinterpreting thinking, oh, it's, you're bringing in the react component, like you're bringing in. The full block, like the ui,

[00:09:14] **Aurooba Ahmed:** right.

[00:09:16] **Brian Coords:** everything that a WordPress block.

Could you, if you thought, like, if you had more time or something, do you think it's possible for you to bring in that block and then disable some of the settings? Like I want, I want the image block. I really don't want it to have border settings in this one particular situation. Do you think you could do that if like,

[00:09:36] **Aurooba Ahmed:** Yes, I haven't played with that enough, but I know that you can filter it and say, oh, I wanna turn this off and I wanna turn that off. But I feel like the amount of work it could be is not, maybe not worth it, but I could be wrong and it could have changed a little bit in the last couple of versions since I've tested this.

[00:09:56] **Brian Coords:** Interesting.

[00:09:56] **Aurooba Ahmed:** yeah.

[00:09:57] **Brian Coords:** the third block?

## [00:09:57] The native block with React components

[00:09:57] **Brian Coords:** Give us the, the third block that took [00:10:00] 35 minutes. This is the

[00:10:01] **Aurooba Ahmed:** Yes.

[00:10:02] **Brian Coords:** clearly. The longest. Clearly something's different. What's the third one?

[00:10:07] **Aurooba Ahmed:** Yeah, so the, this one is the one that you were saying where I'm taking React components, like default WordPress, react components, and using it to build the experience as I want. So in this case, this block, if I want to just change the image, I click on the image and the, the media library will open up and I could choose a different image.

In this case, I'm gonna go ahead and choose the view source logo, and if I click on the text section, , I don't see any heading things. I had no option to change the headings. It's just a text area. I do have the bold and I can add a link, and these are things I

allowed,

so I was able to control this far more finely and say that I only want to be able to do this in this text field.

Right. So and then in general, all I have aside from that is the ability to change the color, which shows up in the inspector for the text and the background. . [00:11:00] And that's also different from the inner block one, because in that one you have to, you click on it and you can change the color and text on the block level, but then you can click on the heading and you can change the color of the heading specifically as well.

Right? So, but in my custom block, it's a lot more like, it's very tightly controlled.

[00:11:20] **Brian Coords:** So the custom block, it's like the most amount of maybe effort, but it's the most amount of control. Cuz you're really, you're at that like react level where you're, you're really owning what you put on there, but you're

[00:11:32] **Aurooba Ahmed:** Exactly.

[00:11:33] **Brian Coords:** anything you wanna bring, you kind of have to bring along for the ride and write the code for that versus the innerblocks

[00:11:37] **Aurooba Ahmed:** That's right.

[00:11:38] **Brian Coords:** method where you're just like, gimme the heading block.

Gimme this block. But like. So if you open the list view. For this page, you know that nice like org, like hierarchy of all the blocks on the page. Your native block that uses the inner blocks really is three blocks. It's a block with two in two blocks inside of it that just,

They can't moved or

changed, but they're in [00:12:00] there.

[00:12:00] **Aurooba Ahmed:** exactly. Yeah. It functions almost like a group, like it groups them together, but by doing that, you get a lot more power. And like, let's say you had, let's say that this had to have the image and the heading as an inner blocks, but we also wanted a static component. Something else we wanted to add.

We can have inter blocks be doing the editing, but then add that extra stuff to it too, so it is faster. It's faster production time. If you are okay with bringing along all the other settings of the inner blocks that you're gonna be using, you.

[00:12:32] **Brian Coords:** Yeah, I, like really like that, that it's like, it reminds me of ACF where you're not doing all the legwork, but you do have a little bit more control over what gets like thrown together.

[00:12:43] **Aurooba Ahmed:** Yes. Yes. And I can also imagine like a workflow where you know that you always wanna control certain things about certain blocks. And as you start working with these blocks, That just becomes part of like, you know, the code that you're constantly reusing, it becomes part of your toolkit. So if that's the [00:13:00] approach that makes the most sense for the kind of work you're doing, it would, it would speed up very significantly, pretty quickly, I think.

## [00:13:08] Inner blocks versus block patterns

[00:13:08] **Brian Coords:** So do you think we should take a look at the backend and the code? Because I think I have questions like you said, like sometimes you want to have some like extra HTML pizzazz around things, how hard

that looks, you know?

Cause I could imagine how

nice it would be to, it's like a step past a block pattern. A block pattern where you, you kind of group a bunch of blocks together and you kind of, it becomes a template you can use over and over. This idea that you're actually creating a custom block that has blocks inside of it.

It's like similar but different. So I'm kind of curious to see what it looks like from like a code point of view.

[00:13:42] **Aurooba Ahmed:** Yeah. So here's my code editor and I have, this is actually all inside a theme, and it's available on GitHub. If you wanna play around with it, we'll link it in the show notes, but we have a source folder. and inside the source folder there's a hello world block, which is like the one with inner blocks.

And the [00:14:00] block dot json for it is actually identical, like almost identical to the ACF version, except that it doesn't have the ACF section. , you know and it does have the editor script editor style and style scripts which you have to specify for like a regular block. Whereas I think in a, yeah, in an ACF block, you don't really need to do that because it just sort of knows

But in, in, in a regular block, you want to specify those things.

[00:14:30] **Brian Coords:** And that's, if you wanna like bundle some like CSS and extra sort of backend JavaScript, just thing outside of like the actual JavaScript that you need to write to build a block. Like

[00:14:41] **Aurooba Ahmed:** No, the editors script is the actual JavaScript of the block. There is a front end script version that you can also add if you need external stuff, but yeah, this, because you could literally call this whatever, right? It's typical to call it index js for the editor script, like the one that's actually building the block, but you don't actually have to call it that.

A lot of people [00:15:00] actually call it block dot js. That's very common as well.

[00:15:03] **Brian Coords:** The difference from ACF blocks was you, you were really just writing PHP and a JSON file. Now that you are moving to native blocks, like there is a build process, right? I mean, you do

[00:15:12] **Aurooba Ahmed:** Yes.

[00:15:13] **Brian Coords:** you know, have some sort of a, like a node script on your local environment to kind handle the build process.

What's that look like?

[00:15:20] **Aurooba Ahmed:** Yeah, so if we go into my package dot json, I installed the at WordPress slash scripts, which is we by the shorthand for it is WP Scripts. I installed that and then I had to add the script for it, which is like, NPM run start, which just starts WP Scripts, and it will build a code in development mode, not in production, not production ready.

Once it's production ready, it actually gets a lot more cleaned up, but I didn't add that script in this particular case. So you, you can just have the WP Script start and then run it, and it will detect anything inside the source folder and create blocks from those folders if it has a [00:16:00] block-dot-json.

[00:16:01] **Brian Coords:** So it's pretty intelligent in terms of you just need to make a source folder and then like a sub folder for all of your blocks and it's pretty intelligent that it knows and like that's that, like we were talking about earlier, the benefit of like naming files kind of the same way. Cuz now you don't have to

[00:16:16] **Aurooba Ahmed:** yeah.

[00:16:17] **Brian Coords:** as long as it knows.

I know there's a block dot JSON. I know there's gonna be some sort of an index js. I know. Well usually.

[00:16:24] **Aurooba Ahmed:** That's it.

[00:16:24] **Brian Coords:** everything could be in there, but we see people break the save and the edit functions into their own separate files, just for like, kind of to keep things clean.

and then what about like the, like the SCSS files, like the styles?

Does it process all that too, or?

[00:16:40] **Aurooba Ahmed:** Yeah. So basically for that it, it will process them. So I, in my folders you'll only see SCSS file. So I have an editor dot SCSS and a style dot scss. And. You can choose where, what is enqueued. Like, oh, in the editor. Do I want the style dot scss or the editor dot scss? Do I want both? And what do [00:17:00] I want in the front?

In the front it's typically going to assume it's just style dot scss, but you also could change that if you want it.

## [00:17:08] The code behind the " wrapper" block

[00:17:08] **Brian Coords:** So let's look at what do you think? Like the edit js is really, the edit js to me is like, kind of like the meat of it.

[00:17:15] **Aurooba Ahmed:** Yeah.

[00:17:15] **Brian Coords:** Is

[00:17:15] **Aurooba Ahmed:** that

[00:17:16] **Brian Coords:** where you wanted to start? Or give us like

[00:17:18] **Aurooba Ahmed:** Yeah, let's, let's go with that.

[00:17:20] **Brian Coords:** Okay.

[00:17:21] **Aurooba Ahmed:** Yeah. So in a, whenever you are using inner blocks, there's always going to be some extra like, I guess modules that you have to import, and that is U, it's literally called use inner block Props, which is like, gives a, gives us way more control over how we want our inner blocks to be presented.

And then in my case, I create, I said, Hey, there's only two types of inner blocks that are allowed in this block. And that's the heading and the image. So you can leave inner blocks open, let it so people can add whatever inner blocks they want. And that's what I did in my super list plugin block. So people could create

sub blocks for each [00:18:00] list item. But in here, because of the, the nature of what we wanted to create, I made it so only those two blocks are allowed. And you can also set up a template for them. So when you first add the block to the editor, what do you want it to populate with? In my case, I had it populate with an image, an empty one, and a heading that's set to level three.

So an H 3 and the tertiary text.

[00:18:25] **Brian Coords:** So those like names, allowed blocks, block template are names that you kind of came up with and you're gonna pass there. But like in those variables, you know, you could basically just give a giant list of blocks that you want. inside of your block. And I mean, you could build a whole pattern from that.

And will

[00:18:45] **Aurooba Ahmed:** Mm-hmm.

[00:18:45] **Brian Coords:** it just like a stack and then you have to kind of like give it a little CSS to like lay it out the way you want? Or can you

put HTML around it? Or can you do anything else? Or is it just a list of blocks?

[00:18:57] **Aurooba Ahmed:** It is just a list of blocks. It's just an array of [00:19:00] them. So any styling you wanna do of how they're placed, that has to be handled by your styles like your css.

[00:19:06] **Brian Coords:** Okay, so you couldn't like hard code some HTML in there. If you do this method, you kind of like, everything is a block. The blocks are the only things you can put in there.

[00:19:15] **Aurooba Ahmed:** Well in that template, yes. But then how you could do stuff around it when. In when you have your actual like block,

[00:19:24] **Brian Coords:** Oh,

[00:19:25] **Aurooba Ahmed:** can either say this block only has inner blocks, or you can say, Hey, this block has inner blocks, but it also has a static like extra component to it, which doesn't have to be static, but like it has something else in it as well.

So you can do that as well. So anything around it, yes, but within whatever is the actual inner block section, that's it. That's what it is. There's no like extra control per se.

## [00:19:47] Deciding which type of block to build

[00:19:47] **Brian Coords:** If you were doing a client project and you were, you know, you had that design that you are showing with the image on one side and the text on the other, and we did it as an ACF block. We did it as a native [00:20:00] block here. You could probably do that pattern with just a block pattern , right?

[00:20:07] **Aurooba Ahmed:** Yes.

[00:20:07] **Brian Coords:** So when do you sort of decide just like big picture, like I want to make this as a custom block. I wanna make this as a pattern. I wanna make this you know, fully react. I mean, what are all the things that

[00:20:22] **Aurooba Ahmed:** Mm-hmm.

[00:20:23] **Brian Coords:** when you're trying to decide, how do I make, how do I, how do I make those? There's so many options. There's so many like decisions, you know.

[00:20:31] **Aurooba Ahmed:** Yeah. There are, I think that normally I will default to a block pattern whenever I can. That's like my, like go-to like, can this be just a block pattern with existing core blocks that we add a block style to or add a little bit of CSS to? Right. In that case, just do a block pattern. I mean, yes. It could just be an image and a text component and then you could put it inside a group block.

Right. And that's basically the same thing that we just did here except it's now editable and it's something that's super easy to [00:21:00] move around just in case. So it has that extra flexibility. As soon as you need something extra on top of it that a core block cannot do, or the style is more involved like, oh, this needs to open up in a specific type of carousel because it's an image gallery.

Or this needs to be hidden from certain users and not hidden from other users. Then it makes sense that even if you are doing inner blocks, that you create a block. because it gives you a lot more control in how to build those settings or build those capabilities on top of it, which you couldn't as easily do with a block pattern or at all.

## [00:21:37] Building a block with React components

[00:21:37] **Brian Coords:** So then you also have the version where you built it with more react components than like using blocks. How different does that kind of code look? Do you feel like there's a lot more going on? I mean, it definitely requires a little more just like comfort with that component based like react mindset, because you [00:22:00] really do have to get used to all the weird intricacies of React's, you know, class

names, camel case attributes, and like all that which just weird JSX looking weird stuff that, you know, some people love and some people don't. Would you give us, like the walkthrough of that? One of the

more custom one.

[00:22:17] **Aurooba Ahmed:** so for reference, just with like, even though my spacing and style of coding is obviously very consistent through between those two files, so the inner blocks version, the edit js for that is 58 lines. And for the very custom one, the edit dot js is 86 lines.

It, it's not a big difference to create the same stuff, but I have a lot more control in the custom one.

So when you do need more control, instead of jumping hoops with block patterns or with like an inner blocks thing, it is worth it to go ahead and make your own custom block in the long run. I think that it would save you a lot of pain in a lot of situations. [00:23:00] And also I think it's just, in some ways it's almost more maintainable because you have control over every single thing, you know?

[00:23:06] **Brian Coords:** It's like the, the native blocks, it's like the ease of like an ACF where you're like, oh, just gimme this, this, this, and this. And I'll put some styles on it. But then a lot of times the reason we're using ACF is like, I really want to control the HTML. I really want to control the markup. And that

[00:23:21] **Aurooba Ahmed:** Yeah.

[00:23:21] **Brian Coords:** I feel like constantly that's what people struggle with.

The block editor in general is like, I really want to control that markup a little bit. I really want to have some say in where my HTML looks like, so I definitely can see how, you know, if you're gonna go that route and you need that HTML control and, and maybe some other kind of fancy things. Yeah, I

think this

[00:23:42] **Aurooba Ahmed:** Mm-hmm.

[00:23:42] **Brian Coords:** would make a little more sense.

[00:23:44] **Aurooba Ahmed:** Yeah. And so in this custom block, like I have to do the rendering and the saving of those values, whereas over there in the inner block version, those core blocks are already handling that, and it's all hidden from view, from my view. But here, for [00:24:00] example in the block json for the custom one, I had to create some attributes.

One is called content, which is where the heading content lives. And then I have image URL, which is where I save the actual URL that I want to show for the image. And so in the index, sorry, the edit js, I have to not only grab that information. I also have to save that information. So I have to use the, you know, it's a provided function in the block.

API called set attributes, but I have to grab that whenever someone edits and then I have to save it. So that's an extra like thing that you don't have to do when you use any other blocks.

[00:24:38] **Brian Coords:** Yeah, so all that extra control comes at the cost of, now you have to do things more .

[00:24:43] **Aurooba Ahmed:** Yeah.

[00:24:43] **Brian Coords:** You know, you can give up control and it'll happen a lot faster. Or you can take control, but then you're gonna have to do a lot more legwork to get it, to get it there.

## [00:24:52] Matching the block editor's UI

[00:24:52] **Aurooba Ahmed:** Exactly, and like in this case, I did try to make it a little bit more accessible, but like the way I have the media uploads set up, this is a very basic [00:25:00] implementation of it that wraps the media. Upload in a button so that it's easy to recognize that you can click on it, but like, . I didn't do any visual edits to make it seem like a button, and it's hard to detect if you don't know that, oh, I can go change this image, or how do I go and change this image?

If I was actually making this block for production for a client, I would've actually added an entire block toolbar section to this where I would add a little pencil icon, and then they can click on that and then edit the image. Or I would hover, like, you know, I would float a little pencil icon on top of the image so that they can click on that

and then edit the image. So just like usability things that with the, with the inner blocks, you don't have to think about it because someone's already thought about all of that for you. In this one, now you have to not only think about the output and the saving, but also what is that experience like for the person creating the content with your block.

[00:25:54] **Brian Coords:** Yeah, that's actually something I feel like I've noticed and I've heard a lot of people say, which is that: with a lot of [00:26:00] custom blocks coming out, block pattern, like block libraries, like plugins that give you a bunch of blocks and stuff. A lot of them, I think, do go this route where they start having just like their own little like user interface flavor that's just not consistent across all blocks.

And it's kind of annoying, I think to people because it's like the block editor really was supposed to be like one visual language interface that we. know, and you can't, like, like you said, like if you wanted to add like a toolbar to your block, the same way that all the WordPress blocks have one, like you can add buttons there, you can do that stuff.

Like it's all there. You can

[00:26:35] **Aurooba Ahmed:** Yes.

[00:26:36] **Brian Coords:** stuff. But like if you start doing a little hover pencil icon here, but nobody else does or you know, it's like all those differences they do start to add up. They do add like a bit of a visual weight and so I think I've

[00:26:47] **Aurooba Ahmed:** And also like a mental weight, right?

[00:26:49] **Brian Coords:** of just context switching and stuff, so, know, that's just something to be aware of.

I.

[00:26:55] **Aurooba Ahmed:** Yeah, a hundred percent. And I mean, as a person who works with clients, [00:27:00] one, I try to avoid plug-ins as much as I could. Right. Use them absolutely when necessary, because the more plug-ins you have, the more conflicts you could have. But in the same way, I try to make my blocks use that same visual language that the block editor is using.

So I spend a lot of time playing with those blocks. I, if I don't know the core blocks very well, then I'm not gonna understand their language and the way they interact and communicate with the user and be able to replicate that in my own blocks. And I think that that's also another thing, like a lot of developers have just not spent enough time in the block editor themselves, you know?

And that is a very big issue,

[00:27:38] **Brian Coords:** I, yeah, that's an extremely big issue. Like if you are building, I mean, when I look at this, the first thing I think is, know, if I'm building something for a client and I could take 15 minutes, or I could take 35 minutes, it's like I kind of know what I'm gonna pick. For the most part.

I don't mind taking longer on something if I wanna learn a new skill and I see a value in it.

And sometimes you should always include that, [00:28:00] but you know,

it's hard to say that I wanna do that. But I think you're right. Where. You know, even ACF blocks, you run the risk of kind of losing the point of the block editor or missing, kind of missing the goal of having it when you get a little too custom and bespoke and full of custom fields again and stuff like, that's

something in mind

[00:28:21] **Aurooba Ahmed:** Yeah.

## [00:28:21] Wrap up - how to decide?

[00:28:21] **Brian Coords:** What advice would you give to somebody if they were like, I don't know. Should I go to ACF blocks? Should I just start learning native blocks? Should I skip over that? Should I stick with my custom fields? What are like the things you look for in making those decisions for somebody who maybe doesn't know?

[00:28:37] **Aurooba Ahmed:** if you're learning on a project, budget is gonna be a big consideration and how you pitched it to the client, you know, if you just pitch them like the most affordable budget possible, then it's just, it's a no-brainer. You go with ACF, you know ACF, you can build with ACF really well, and you probably are gonna find yourself in a situation where you say, I'm [00:29:00] not gonna use a single core block.

Everything is gonna be ACF, just in the block editor frame . But if you have the ability or your client is interested and you can pitch them a larger budget so you can experiment and learn as you're doing it, I think it's worth it to then say, oh, I'm gonna try like an inner blocks thing where some of the blocks we're gonna build with inner blocks or play with a few custom blocks and do a bunch of patterns and try to be as block editor first as possible.

I think that would be like the second, second thing. It's very hard to be in a scenario where you have an unlimited budget or a very large budget and you can like learn completely on the client's dime. So it's like that middle ground is a good place. And then as you do a few projects like that, I bet you there is gonna come a time where you feel so confident that you could say, yes, I will do everything in the custom blocks.

And you might have some things to learn, but it will be reasonable in a decent budget and not feel [00:30:00] like you're blowing your budget like constantly . So I think it's like a gradual thing.

[00:30:05] **Brian Coords:** yeah, and I, I think what I've learned with trying things that are different in development and WordPress and like React being one of them, but like other sort of like frameworks and stuff, it's like you kind of have to commit to doing a little bit on a regular basis. Because I feel like if you go and learn a bunch of stuff on blocks, but then you have no projects using it for the next, you know, few months, like it's kind of gonna be a waste of time.

Like if you're not gonna use, it's like, like learning a language. Like if you're not gonna be like immersed in it on just

somewhat of a regular basis, you're probably not gonna remember it. You know, at least based on my experience from taking like four years of high school French that I don't remember any of. It's like if you don't use it, you're gonna lose it. So, like, if you're gonna do it, like maybe commit to like just doing a little bit each week and like getting a little bit of practice and keeping like the weirdness of different languages fresh in your mind.[00:31:00]

[00:31:00] **Aurooba Ahmed:** Yeah, it's not reasonable to expect from yourself to go from one way of doing something to a completely other way of doing something without like some runway, you know? And you have to give yourself enough room and time to figure out and have that runway before you go and, like Have a budget and then say, oh look, I wanna do this thing.

And now instead of the hundred hours that I scoped, it's taking me like 600 hours. Like that's not good for anyone.

[00:31:31] **Brian Coords:** You need to say that to a few people on Twitter, I think, because there's definitely some people who are very like, you should have already learned this two years ago.

[00:31:38] **Aurooba Ahmed:** Yeah. Two years ago when the block editor wasn't even like good enough to be able to easily pitch to a complicated client. No, no, no. Just

[00:31:48] **Brian Coords:** no.

no I agree. Well, thank you so much for doing this because honestly, I'm just gonna go at the code myself and play with it, because I just feel like, [00:32:00] you know, there's not enough, like good, just like really over high level views of just like what is, what are the options now? Everything is so outdated instantly, it's like kind of mind blowing.

So we're

gonna put the repo in github and put that in the show notes. People can click through. You can actually just install it as a theme on like a little, like throwaway, know, ins, what is it instaWP or

local

[00:32:22] **Aurooba Ahmed:** Or local.

[00:32:24] **Brian Coords:** Yeah, probably on local, if you wanna mess around with the build process, it's kind of super cool that it's just one dependency for all of this.

So thank you again

[00:32:32] **Aurooba Ahmed:** Yeah, it was fun

[00:32:34] **Brian Coords:** yeah, it was all right. We'll see you next time.

[00:32:37] **Aurooba Ahmed:** See ya.