viewSource

[00:00:00] **Aurooba Ahmed:** You're listening to viewSource, a conversation around tech, web development, and WordPress, with hosts Aurooba Ahmed, that's me and Brian Coords.

[00:00:14] **Aurooba Ahmed:** Hey Brian, how's it going?

[00:00:16] **Brian Coords:** Good. How are you doing today?

[00:00:18] **Aurooba Ahmed:** I'm doing pretty okay. So I've got a question for you. Are you ready?

[00:00:22] **Brian Coords:** no, but that's okay.

[00:00:24] **Aurooba Ahmed:** Uh, what was the first major plugin that changed your WordPress dev life?

[00:00:30] **Brian Coords:** Oh man. You know what this, the title of this episode is all about ACF Blocks,

[00:00:39] **Aurooba Ahmed:** Yes

[00:00:39] **Brian Coords:** and there's like a part of me that wants to say like, oh, this, there's the perfect answer for this is ACF, but I would have to

[00:00:45] **Aurooba Ahmed:** but the real answer?

[00:00:46] **Brian Coords:** say that the real answer. is CMB2, which is like the one of those, it's basically like ACF, but there's no UI on to, to build your custom fields.

[00:00:59] **Brian Coords:** It was like [00:01:00] you, uh, build all your custom fields in like your PHP and, um, I do think that was the first one of like, oh, cool, like I can do like weird things here and I can make custom fields and like, I just didn't know about ACF before that.

[00:01:14] **Brian Coords:** That's my answer. What about, how do you, what do you think?

## ACF Origin Stories

[00:01:18] **Aurooba Ahmed:** Mine was a ACF 4. Like back before you had to buy the core, you could get the core plugin for free. And then there was the paid add-ons. And the first one that really changed my life was the repeater add-on. I was like, this is amazing. This is what I need. And I was building this site for a small organization here in Canada and it was the perfect fit.

[00:01:41] **Aurooba Ahmed:** And I remember thinking oh my God. I can make so much cool stuff now, now that I have the repeater. So easy.

[00:01:49] **Brian Coords:** Yeah, I mean, repeater was sort of a game changer. I, I'll grant you that.

[00:01:54] **Brian Coords:** Yeah, I, I mean, I, I guess I didn't switch to ACF that off [00:02:00] that. I mean, it would've been after you because by the time I switched, it was like ACF Pro, repeater was there

[00:02:06] **Aurooba Ahmed:** Yeah.

[00:02:06] **Brian Coords:** Flexible Content was, if not there, there pretty soon.

[00:02:10] **Brian Coords:** I remember the first time I saw that: flexible content and I was like, oh yeah,

[00:02:16] **Aurooba Ahmed:** Elliot released the flexible content add-on and I was just like, whoa. This is like the repeater, but so much better, I loved it so much. Yeah. Because I trying to use the repeater as like a flexible content field with like weird gimmicks before,

[00:02:34] **Brian Coords:** Like a ton of conditionals or something.

[00:02:37] **Aurooba Ahmed:** Yes.

[00:02:38] **Brian Coords:** I think of, um, oh, I'm trying to remember. There's like a movie. There's a couple good ones. There's one with a, I think Audrey Tautou where you, you basically go through like their whole relationship in the movie the first time and it's her perspective.

[00:02:52] **Brian Coords:** And then the second half of the movie goes through and it's like the guy's perspective, and I can't spoil it, but it's just like, it's pretty like crazy, [00:03:00] but like it's definitely this relationship that at first seems very like good. And by the end it's like, ugh. You know? And that's my, that's a, sorry for putting that sound people's ears. That's my vision of like ACF flexible content rows right now, where I'm in that second phase where I'm like, if I see another flexible content row, I'm gonna go crazy. And like, you know what I mean?

[00:03:23] **Brian Coords:** The giant, all of the settings in one screen and you're like trying to change your row and there's like, you have like 50 flexible content rows. That's where I'm at with flexible content. It used to be like a romance and now it's like a, ugh, we need, we need a divorce, flexible content.

## Switching to ACF Blocks from Flexible Content Rows

[00:03:38] **Aurooba Ahmed:** What a beautiful segue into our first question and into the topic of our conversation today. So, what would you use now? What is the alternative to, you know, flexible content in the, in the modern WordPress era?

[00:03:54] **Brian Coords:** Um, I think to me, I'm never gonna be a [00:04:00] page builder or even like giant block plugin library person.

[00:04:03] **Brian Coords:** So to me, I mean it's ACF blocks are like the spiritual successor to the flexible content row. Like they're, they're just almost just a better, easier way to do exactly what you were doing in flexible content rows.

[00:04:17] **Aurooba Ahmed:** I think that, you know, they've done a really good job documenting it and making it really easy. Right? To basically go from flexible content to ACF blocks. I mean, the intro, just the intro. And for those of you listening, I'm sharing a screen of the documentation of the Advanced Custom Fields website.

[00:04:36] **Aurooba Ahmed:** Where they show you how to create an ACF block and you can go from start to a real block in like 15 minutes. I know, because I timed it.

[00:04:46] **Brian Coords:** I think they very clearly have said there's a lot of people who just don't have the time or budget to dig into React, and they want to go intro Block Editing and they want to do it in [00:05:00] PHP, and it's like they're, they've just really pulled it off pretty well. Like they've really hit the idea that I can build things exactly the way, like it's the workflow, like almost perfectly transitions. There's differences, which I think we'll talk about, but it almost perfectly transitions to like, if you were building PHP layouts with ACF in the past, you can jump right into ACF Blocks.

[00:05:22] **Aurooba Ahmed:** Right. You get all the power of ACF, but you get the visual like preview power that the block editor is supposed to be like really good at. And ACF blocks allows you to do that. So now you have all of the stuff you used to do with flexible content, but now your clients or you can actually see what that looks like without leaving the editor.

[00:05:42] **Brian Coords:** That's definitely the best part. The actual field editing part is a lot better. I guess if we're thinking also in terms of like, well, what if I did wanna learn, React, like the fact that you're like ACF I have an image field, media library field, gallery field, re like all those things are still there.

[00:05:58] **Brian Coords:** And like all those [00:06:00] ways to in get content into the block are still there versus if you do move towards that native kind of blocks, you know, a lot of those things like image, you know, image uploaders and all that stuff, are actually not that easy.

[00:06:14] **Aurooba Ahmed:** Yeah. So tell me, what languages do we need to know in order to be able to use ACF blocks?

[00:06:20] **Brian Coords:** I would say, you can get away. I mean, you definitely need PHP

[00:06:23] **Brian Coords:** It's very, it's very much the cla, like all those same functions from ACF you know, get_field() and, and that sort of stuff all works

## The Pros and Cons of JSON

[00:06:32] **Brian Coords:** All of that's there though, I would say the one big difference is the use of JSON. That kind of comes to my mind as the one other sort of language, like you kind of don't really need JavaScript unless your block needs JavaScript. You kind of, obviously CSS and HTML are there, but like, that JSON, you know, you do use a JSON file to sort of do your initial settings and like define a lot of things and that's, [00:07:00] I guess, the one extra thing, which actually when you see it happen, you're like, oh, this is actually kind of nice. Like it's actually kind of easy.

[00:07:06] **Aurooba Ahmed:** Yeah. I think the really nice thing about JSON is that it is really, well, I mean, it's famous for that. It is human and machine readable. So when you look at a JSON file, it's really easy, especially if you're used to working with like a ACF or just like regular PHP. You look at it and you're like, oh, yeah. I understand this,

[00:07:25] **Brian Coords:** I have one minor complaint about JSON, do you wanna, can you guess? Do you want to, do you think, you know, my one complaint about JSON?

[00:07:34] **Aurooba Ahmed:** Is it the, the comma thing or the partials thing?

[00:07:36] **Brian Coords:** Oh, the, no. Yeah. It is a very unforgiving syntax, that's true. There's just one thing you said it's like human readable. And there's one thing that I think would make it human readable but it does not allow.

[00:07:47] **Aurooba Ahmed:** Hmm.

[00:07:47] **Brian Coords:** Which is comments in your JSON.

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

[00:07:50] **Brian Coords:** Like you cannot comment your JSON files, which I think would be an amazing thing for developers being able to learn.

[00:07:59] **Brian Coords:** I think that would [00:08:00] be, um, it would be wonderful to be able to comment inside your JSON file. That's my, my one complaint.

[00:08:06] **Aurooba Ahmed:** There is an extended format of JSON that you can put comments in, but if you try to use that for the JSON in ACF, it wouldn't actually work.

[00:08:15] **Brian Coords:** Yeah. You'd need like build process or something.

## Building Blocks without a Build Process

[00:08:18] **Aurooba Ahmed:** That's right. And the great thing about ACF is you don't actually need a build process. That's one of the other advantages, right?

[00:08:24] **Aurooba Ahmed:** You can go straight from code to the actual like work unless you have like SCSS or something, but like no extra special build process specific to ACF blocks.

[00:08:36] **Brian Coords:** So what if I want just a giant node_modules/ folder sitting on my hard drive for fun? Can I still have one? I'm just kidding. But my, actually, I did have a question about that.

[00:08:47] **Aurooba Ahmed:** Yeah.

[00:08:47] **Brian Coords:** The fact that it doesn't have a build process. Like, are, do you have thoughts about performance of ACF blocks just in general, like, you know, It's kind of a lot of work to [00:09:00] render these PHP blocks and switch back and forth with them.

[00:09:02] **Brian Coords:** And, you know, it, it's, you know, one of the advantages of a native block of, in the build process is it feels like it's sort of like more injecting into the JavaScript in like a cleaner, faster way. Do you feel like there's any performance issues with ACF blocks or like drawbacks to the fact that it's kind of doing everything on the fly.

## The two main types of blocks

[00:09:20] **Aurooba Ahmed:** So with blocks, even like native blocks, there's basically two types of blocks, right? One is the dynamic block and one is like a regular block, which I call an interactive block, but I, you know, that's just the way I separate it. And the reason I separate it that way is because a dynamic block uses a PHP template to render, and you can use it to render on the backend and like in the editor and in the front end.

[00:09:43] **Aurooba Ahmed:** Or you can use it only to render the front end, but do a lot of fancy JavaScript inside the block editor. Right. But most people, they're gonna be like, why would I do it in two different ways? So they usually use the PHP template to render in both places, and that's one of the most popular [00:10:00] ways of doing blocks right now.

[00:10:02] **Aurooba Ahmed:** So in that case, you're doing exactly the same thing that ACF is doing, where you're constantly going back and forth between the PHP and the JavaScript and having to like render it.

[00:10:11] **Aurooba Ahmed:** So, oh, a ACF blocks are not any less performant than that. But that being said, yes, dynamic blocks, which is, you know, ACF blocks are a type of dynamic block. They are a little less performant than interactive blocks or static blocks, I guess, uh, where everything's happening in the JavaScript and everything gets put into html, and then it's just like a simple render in the front. So there is some performance things, but I feel like it doesn't outweigh the advantages of dynamic blocks, including ACF blocks. Not yet anyway.

[00:10:49] **Brian Coords:** Yeah. And performance always to me is like a trade off. Like you can do a bunch of extra work to increase performance, but you're, if you're just talking about backend performance on some sort of [00:11:00] site, that's not gonna get a lot of attention. It's like, you know, I'd much rather have a faster, uh, development process personally, even if I take a kind of a, you know, a little performance hit.

[00:11:11] **Aurooba Ahmed:** Yeah, totally.

[00:11:12] **Brian Coords:** Yeah.

[00:11:12] **Aurooba Ahmed:** So how much react do you think it takes to make like a native block versus like an ACF block? Do you think there's React? Like just based on your experience?

[00:11:22] **Brian Coords:** So this is what I've, I've done. I've, I've done both types of blocks. I have a pretty decent experience with it. I'm not a huge React fan cuz um, I just don't like code that's ugly to look at. But you know, that's just me. But I don't think I've ever had to use React with ACF blocks except when I've considered using the InnerBlocks feature, which is like ACF blocks kind of allows you to real regular blocks in the inside of your ACF blocks. Um, Kind of, it's a, that's the one time where I've seen [00:12:00] like you do use a little bit of a React component in there and it's like literally a line of code.

[00:12:03] **Brian Coords:** Like it's not it really doesn't change that much, but you do kind of enable that JSX like slightly different view. Do you use it?

[00:12:11] **Aurooba Ahmed:** That's fair. Well, you know, my experience with ACF blocks is very new because I literally jumped headfirst into native blocks. So I am working on a project right now and I'm using ACF blocks on that, but before that, I generally haven't that much more ex much experience with ACF blocks past like knowing it existed.

## Why Aurooba never tried ACF Blocks before

[00:12:34] **Brian Coords:** Okay. Why would you, why did you choose native blocks? And as you're doing ACF blocks now, I'm curious, do you kinda look at it and go like, uh, that was worth the time I spent, or, eh, I probably could have just done it faster with ACF if I had tried that.

[00:12:48] **Aurooba Ahmed:** I jumped into native blocks immediately because at the time, ACF blocks was in like serious alpha mode. It wasn't even like beta yet. So it wasn't that usable and it was kind of awkward and a little bit [00:13:00] janky feeling. Uh, so that was like the primary reason. So I was just like, okay, but I need to build for clients and I can't have this be the experience, so I'm just gonna learn how to use native blocks.

[00:13:11] **Aurooba Ahmed:** And it was like three months of hardcore banging my head against a wall every single day going, why is this like this? Why isn't it working? I don't understand why. Where's the documentation for this? But I think it was all really worth it because it made me realize more than ever, how important con like user experience is, even on the administrative side and the kind of user experience you can create with Native Blocks is just like when they're done well, wow. Like it can be an amazing experience to like, like a true joy to edit create your content with it. But on the flip side, if it's not done well, oh my God. The nightmare that it looks like in the Block Editor.

## The fragility of Blocks in the early days

[00:13:57] **Brian Coords:** Yeah. Which is basically, [00:14:00] and, and this is ACF or native, any block that was built like more than two years ago feels kind of gross when you look at on the backend right now. Things start to fall apart. Um, there's only been one major ACF thing that they deprecated, which was like giving blocks, unique IDs. So if you were using that at all, that just stopped working.

[00:14:20] **Brian Coords:** But other than that, it's pretty good. Native blocks on the other hand, it feels like, feels like they were so much more fragile. And you see a lot of sites where they kind of crumbled a little bit over time. I don't think that's the case now going forward, but it definitely seemed to be the case, you know, a few years ago, up to now.

[00:14:40] **Brian Coords:** Have you logged into an old site and looked at your blocks?

[00:14:43] **Aurooba Ahmed:** I logged into the very first site that I ever built with blocks, and it looks okay because the blocks in that one was like, were fairly simple, but you can definitely tell that I wasn't paying as much attention to the user experience.

[00:14:57] **Aurooba Ahmed:** Um, so that, that feels a little bit [00:15:00] janky even in the o even in that very first one I made, whereas the last uh Native blocks website I built that is this like, beautiful. And everything is like nice and smooth. Nothing is broken.

[00:15:11] **Aurooba Ahmed:** And it makes me really happy because that means that we can truly start to advocate more for native blocks when appropriate. Uh, cuz they won't like, just like break in a year or two, which is like the worst part before.

## Approaching design atomically instead of as rows and columns

[00:15:25] **Brian Coords:** Now can I give, can I take a side tangent, cuz I have this thing. Hopefully by the time this episode is released, I'll have figured out my thoughts and finished a blog post on this, but I'm still in the process of writing it.

[00:15:38] **Brian Coords:** This is my question for you. ACF flexible content rows was a really row based way to look at design.

[00:15:46] **Brian Coords:** So you were really looking at an entire like width of your browser, like a row of content. So you know everything from like the heading, the text, the columns, all of that stuff. And in flexible content, you really just built like [00:16:00] rows almost like single rows of content that's stacked on top of each other.

[00:16:04] **Brian Coords:** And that's – the, the whole row concept makes sense and like a lot of people think of that, you use page builders, it's rows and columns, like it's a very normal way to think of things. But with a ACF blocks, you can, you can do that, like you can make an entire row as one, ACF block, but like blocks themselves are really a lot smaller.

[00:16:25] **Brian Coords:** They're like little pieces that can just kind of go anywhere. So if you're using ACF blocks or blocks in general. Do you think there's a mental shift you have to take from like, don't make an entire row start making little blocks?

[00:16:39] **Aurooba Ahmed:** Yeah, so I think when they started building the block editor, right, like the block editor, it is basically atomic design and practice where each atom is like it's isolated piece that you can move around, right? Whereas before, I think we were all sort of component design based where you took a like a [00:17:00] page and you split into like bigger components and you said, okay, this component works like this and this component works like this.

[00:17:07] **Aurooba Ahmed:** And now with the block editor, like the paradigm is you have blocks, which are the atomic pieces inside a component, and then you would make like a block pattern, which is the component, but it's just a suggestion. You could always like move things around and things are not locked down, which I think, yeah.

[00:17:27] **Aurooba Ahmed:** So I feel like it's a paradigm shift in that way. Like using block patterns for components and thinking of block, like actual blocks as the tiny things. Like this is the text and this is the button and this is the image. Instead of saying, this is a testimonial block, you know, which has an image and a quote and a heading and a link.

[00:17:46] **Aurooba Ahmed:** That would be how we thought about it before. But now you would be like, okay, I need like an image block and I need a title block, and the ability to have, have a link, and I wanna put that together in a really nice, pretty style. And that's gonna be a block pattern. [00:18:00] And maybe I put it inside the group block and give it a testimonial block style to make it maybe easier to apply styles.

[00:18:09] **Aurooba Ahmed:** So I think it, I think on the outset it feels like a lot of work. A lot more work, but in a good design that actually would reduce you work, because you would just style those atomic pieces and then put them together. And if they're designed well, they will just work well together. Right?

[00:18:30] **Brian Coords:** Yeah, so if you're, you know, in the old school way, like your content row would have everything from like the columns, the padding, the spacing, and you could really like handcraft that each one. And I honestly think like if you're in that mindset and all you want is just ACF blocks stacked on top of each other, similar to a flexible content rows, I actually think like that's a good first step and like that's kind of a good way to go just to get used to that idea cuz it's still so much better than like flexible content rows hidden [00:19:00] at the bottom of the Gutenberg like little drawer.

[00:19:03] **Brian Coords:** Like, you could, you could really do that and just say no. But like, like you said, like if you're building something in, swapping out just like a text or a headline or whatever, that probably doesn't need to be inside of an ACF block.

[00:19:14] **Brian Coords:** You can start to experiment with bringing in real native block or like, you know, already existing Core blocks.

[00:19:21] **Aurooba Ahmed:** Right. Yeah. And I mean, in this project that I'm working on, there is this like hero component, which is like a background image with some text on top of it and a couple buttons. And I can literally just do that with core blocks. There is the cover block that allows you to add a, you know, background image and then you can add text inside it.

[00:19:37] **Aurooba Ahmed:** So you add a heading, two buttons, you're done. I can style that correctly and then save it as a pattern, and now the client can just pull that pattern in whenever they need a hero. Like that, that sort of that section, right? So I think that instead of thinking that you have to create everything from scratch, you can say, okay, what can I do with the existing basic atoms of content and design [00:20:00] that already exist and how can I package them or suggest a package for them that works well for design?

## Building a block with ACF Blocks

[00:20:06] **Aurooba Ahmed:** But I did wanna know how efficient, well, okay. One of the things that it, that, uh, we know there's a big conversation around is that a lot of agencies still haven't jumped to blocks. Right. But ACF blocks could be a really good transition point. So before this episode, I was like, how quickly can I get going with an ACF block? Do you wanna see what I came up with?

[00:20:31] **Brian Coords:** I want to see. Yeah. What, I'm curious what, what was your like idea when you were like, all right, I'm gonna make a block. What block, like were you like a hero section, carousel, some testimonials? What I wanna, I'm curious, what was it? Let's see it.

[00:20:45] **Aurooba Ahmed:** So this is a very simple block because I was like, you know, a simple block, but a common block that you see in a lot of designs. What would that look like?

[00:20:54] **Aurooba Ahmed:** Okay. So I built a block that allows you to have an image and an, and a text, [00:21:00] uh, field beside it because this is literally a component very similar component to something that I am looking at in a different design that I have to start coding soon.

[00:21:09] **Brian Coords:** Okay.

[00:21:09] **Aurooba Ahmed:** Um, so it's, it felt really applicable. And it's also like, not super simple, but you could imagine this being like, you know, like a image with a bunch of text beside it or like an image and like contact information.

[00:21:22] **Aurooba Ahmed:** Like these are, this is a very basic, like like design pattern that we see. So in the backend, what that looks like, and I'm switching over to the block editor here. If I click on the block, which is in preview mode, so I see exactly how it should look on the front end, there is a little pencil that I can click if I wanna edit it in the main block editor area, or I can see all the fields in the inspector sidebar as well.

[00:21:50] **Aurooba Ahmed:** This is something I really like about ACF blocks, the ability to edit in the main area instead of having your fields all stuck inside the [00:22:00] inspector, which I see a lot of custom blocks do, which is totally against the philosophy of block editor. Where you know, the inspector is supposed to be for extra settings, not the main settings, not the main content.

[00:22:11] **Aurooba Ahmed:** So I love that you can just edit in here. So now I've clicked on the edit section or the edit button, and in the main editor I can see there's an area for an image, which I could remove and add just a regular image field from ACF. And on the side I have the heading, uh, which says, "Hello World," and I, because I know that these are gonna be side by side in the actual design, in the ACF side, I also made them, so they're side by side, you know, so it feels a little bit more natural.

[00:22:39] **Brian Coords:** I was waiting to see this cuz I was like, I know Aurooba, I know that they're gonna be side to side. I know your backend fields aren't just gonna be a, a row of fields. Like you're gonna, there's gonna be a little bit of like, contextual awareness to them and stuff, and I was like, waiting for you to, to flip it cuz I wanted to, uh, confirm my [00:23:00] theory and of course I was right about you. The question I have is, for example, when I'm looking at this block, I'm seeing like the standard little floating Gutenberg toolbar and there's a couple of icons on it that you have access to, just like on any block. And you have the alignment option there. So that's like, know, basically the alignment lets you take a block and make it go even wider or full width. Um, but that's like a standard core thing.

## Enabling Core Supports in ACF Blocks

[00:23:25] **Brian Coords:** So did you consciously choose to enable that? Um, did you have to do any work to enable that? How did, how did using that core feature of like alignment and width, um, play into building the ACF Block?

[00:23:38] **Aurooba Ahmed:** So I didn't test if it actually worked, so let's test it first. So I'm gonna make it a wide block. And I preview it. Okay. It does work. So it went wide and the image is like a fixed width, so it stayed on the side. And the text area, which is like a light blue, which is from our view source branding, uh, is like wider now. [00:24:00] um,

[00:24:00] **Brian Coords:** So it worked just straight out. I mean, did you have to decide it? Did you have to decide it in, um, your block.json.

[00:24:09] **Aurooba Ahmed:** Yeah. Yeah, I, I'll show you that in a second here. Okay. So I've moved into VS code and I'm gonna show you what the code looked like to build this Hello World block, which is what I called it. And the one thing that any block, whether it's a ACF blocks, dynamic blocks or like a regular interactive native block needs is a block.json like we, like you talked about before, right?

[00:24:31] **Aurooba Ahmed:** So in here, there is a section called, um, supports and all bl all blocks can do this. And there you define like what kind of alignment you want to allow it essentially. So I have this set to only full, so I feel like it's weird to me that it's showing the rest of them. So that's something that I still need to dig into in ACF blocks. Like how do I make it so it'll only show the alignments I want it to show. [00:25:00] Have you played with that?

[00:25:01] **Brian Coords:** Well, I, yeah, and I thought you nest it under supports. But um, also on the, the ACF side, but it's been a while since I haven't dug into it as much recently. But I, my, other question is like, you can, you can extend this, like if you need a color picker, say you just want in your block, the text color, the background color, like you can just use, you can just say, give me the Gutenberg color picker. Like, I don't even need to add a custom field, give me the Gutenberg color picker.

[00:25:29] **Aurooba Ahmed:** Yeah, I think so.

[00:25:30] **Brian Coords:** And it'll, you know, do all those things like pull in your brand colors and all that stuff. And like if you've ever done in the past, like ACF Fields where you wanna like set the default color palette for them with like the ACF color picker field and stuff.

[00:25:42] **Brian Coords:** And it's like kind of a bit of a process, like now you can just do it. Now you can just pull those things in.

[00:25:49] **Aurooba Ahmed:** Okay. So you're right. Um, the reason I had align on its own is because that's what it has in the ACF blocks example. But I think that they [00:26:00] need to update that because that's thing anymore.

[00:26:02] **Brian Coords:** cause remember that move to the supports.

[00:26:05] **Aurooba Ahmed:** Yeah, which makes total sense, but, and that's why I was confused about it when I looked at it.

[00:26:09] **Aurooba Ahmed:** So let me switch over to my other screen now.

## Live Coding: Adding Background Color Support to the Block

[00:26:11] **Brian Coords:** It is super cool that they have been matching their block, dot JSON. So like if you do transition to native blocks, like

[00:26:19] **Brian Coords:** they kind do give you like a lot of the same things and you, you kinda start picking up on the patterns. Oh yeah. we, now we see it.

[00:26:25] **Aurooba Ahmed:** Exactly. So now on the sidebar, you can see we added some color support for text and background. It's not gonna actually work because I didn't make it happen in the PHP template, but here you can see the theme colors and the default colors cause they're not turned off. Same for the background. And now that the alignment stuff is inside supports, you can see just none and full width, the way I wanted it to be.

[00:26:48] **Brian Coords:** Yeah, and like those values from the, like whether you use an ACF field or you like turn on some of the default Gutenberg, like the color pickers and you know, there's a lot [00:27:00] of 'em you can turn on.

[00:27:01] **Brian Coords:** It's like, you kind of get the values the same way in your php, like it's very similar, like there's not like some extra work you have to do. Like it really just like in your PHP file for your block, like it's very easy to just grab that color, grab that alignment, grab those things.

[00:27:16] **Aurooba Ahmed:** Yeah, so, and that part actually works the same whether you're in ACF blocks or in like a dynamic native block where you get basically an array that has all the settings and attributes in it.

[00:27:28] **Aurooba Ahmed:** And yeah, they basically also provide you with like a block variable that you can use. And if I was to [var_] dump, if I was to dump, like, what's in there? So if you dump everything that's inside the block variable that ACF provides, you see the render, you see the context, you see all of what, everything that it supports, and you see the values of all of the different, um, what do you call them, uh, attributes that you can have, right?

[00:27:57] **Aurooba Ahmed:** And it even has like the words, [00:28:00] the description. and the information about the image and the alignment, which is set to none. So I think if I were to set the color to the text, let's say the background color, and I set it to like green,

[00:28:14] **Brian Coords:** I love that it – oh,

[00:28:16] **Aurooba Ahmed:** Yeah. Yeah. It, it, yeah. shows it in the backend. The, all the var_dump-ing as well.

[00:28:22] **Aurooba Ahmed:** Uh, but yeah, now in the background color, there's a background field color, and that tells me that it's secondary, so I can use that to apply the correct background class in PHP.

[00:28:31] **Brian Coords:** Which, is actually great because some of the native things kind of get easier cuz they just give you like a class and you can just like add it to your classes. And then like in the back, in the old days, like when you pulled a color picker out of ACF, it gave you like a hex and okay, so I'm gonna use like an inline style or like, you know what I mean?

[00:28:49] **Brian Coords:** A hex value that was a little less useful than like here where it's like we're just gonna give you a class and you just like stick it on and it's gonna work and you're not writing anything.

[00:28:59] **Aurooba Ahmed:** This code [00:29:00] from ACF, which is, I literally just copied copy pasted from them. It's already creating like a class area and it adds like the hello-world-block class to it. But we can also say, you know, uh, $background_class is what, so if block has a background, uh, property, then we will use that property.

[00:29:23] **Aurooba Ahmed:** And there's GitHub Copilot helping me right there.

[00:29:27] **Brian Coords:** There it is. I mean, it's like this is classic Copilot, like it's not right. Right?

[00:29:33] **Aurooba Ahmed:** Yeah. It's not.

[00:29:35] **Brian Coords:** GitHub Copilot, like showing up with like 80% of what you need and you're like, all right, good enough. I'll fix it.

[00:29:43] **Aurooba Ahmed:** Okay, so it's basically has, oh, sorry, this you, you go, has dash and then the background, which in this case secondary. And then it's just say background and then dash color. So this will become, has secondary background color.

[00:29:57] **Brian Coords:** Do you need another dash or are you good? You're all [00:30:00] dashed up.

[00:30:01] **Aurooba Ahmed:** Oh, ye. I do need a dash. Thank you. Um, there's there.

[00:30:05] **Brian Coords:** I could be your GitHub copilot.

[00:30:08] **Aurooba Ahmed:** Yes! Uh, okay. And then I would probably just add this in the class area. How do I wanna do that? I want, I wanna splice these together. So It already knows. Yeah. So Copilot has given me an if statement that, hey, if the background color is not empty, add that to the class name variable that we have. So this should just work. It looks right. Um, so let me get rid of our var_dump() so we don't see the, some of that extra code.

[00:30:36] **Brian Coords:** You know, when I, like, I have that variable dump for my block, usually like sitting there the whole time until I'm done. Like, just show me everything. Gimme that whole array so I can like find my values and stuff like that. Until you start getting the hang of it.

[00:30:49] **Brian Coords:** But it's kind of nice how, and even when you're editing on the back end, like, because it's Gutenberg, it's like make an edit and you quickly see it and like you can just like

[00:30:58] **Brian Coords:** you actually kind of like get that [00:31:00] live reloading, like instant feedback.

[00:31:03] **Aurooba Ahmed:** Yeah, totally. So I made the background color green. So now technically if I were to switch it, it should just work, and then if I go to the front end, it works there as well. So we just added a core, you know, block editor support in like, I don't know, five, 10 minutes.

[00:31:22] **Brian Coords:** I mean it. I hope it was faster than that, but yes.

[00:31:26] **Aurooba Ahmed:** Yeah, it was faster than that, but we were also like doing a lot of like stuff live here and we're over 30, 30 minutes. So what do you think about a ACF Blocks?

[00:31:37] **Brian Coords:** Me?

## Are ACF Blocks here to stay?

[00:31:37] **Aurooba Ahmed:** Do you think they're here to stay?

[00:31:39] **Brian Coords:** I think um, you know, we didn't get to dig too deep into all the code that it takes to make your just dynamic native block, which is like, I would say the closest thing because it's a block, a native block that uses PHP, um, but I promise you that it did not move, go as fast as [00:32:00] that. It was probably not as easy as that.

[00:32:01] **Brian Coords:** It was probably not. Um, as you know, developer friendly as that, and it was probably you know, one thing I always think about is like, what happens when I need to hand this to somebody else? You know, how much work do they have to do? How many build process installations, node version, like all this stuff. So to me it's like, as long as ACF blocks continues, its active development and like to me, it's been very well developed so far.

[00:32:25] **Brian Coords:** I think ACF blocks is like something I, I think it'll be a long time before, it's not like in my immediate toolkit.

[00:32:33] **Aurooba Ahmed:** Yeah, I think that one, we're gonna do a part two about this, and two, I think you're right. You know, I just don't think that native blocks are at a place where they are, where they feel efficient enough for agencies, you know, unless the agency are doing really big custom bespoke projects, which some agencies are doing, but that's not all agencies, you know?

[00:32:56] **Brian Coords:** Yeah, I, I do love seeing people do really [00:33:00] cool things with native blocks, like, um, editing your post thumbnail. You know, your featured image inside. Like, I, I think those things are cool things that I, I hope we get to see, like, become part of core where like things move away from the sidebar and they just like really move into the content.

[00:33:17] **Brian Coords:** But I kind of agree. I don't see the value. I think we should officially claim that this is part one, and

[00:33:23] **Aurooba Ahmed:** yes.

[00:33:24] **Brian Coords:** We record part two, which is the native block deep dive. Of the same block.

[00:33:29] **Aurooba Ahmed:** Yeah, yeah,

[00:33:31] **Brian Coords:** Like what did that look like?

[00:33:33] **Aurooba Ahmed:** Yeah, I agree. So I hope, uh, you all enjoyed our tangent filled conversation about ACF blocks part one of Blocks conversation.

[00:33:44] **Brian Coords:** Visit viewsource.fm for the latest updates and links to the show notes. Review and subscribe to viewSource in iTunes, YouTube, or wherever you get your podcasts.