How to Build a Custom ACF Block

1 0:00:00 In this tutorial, we are going to build a custom block from scratch for Gutenberg.

We’re going to be using ACF blocks, Advanced Custom Fields, to help make this process a little bit easier. And this is a real block. This is a block that we are going to build for giri.

co. I’m going to be doing a bunch of page builder review and rating articles, and I need a rating block for all of the scoring, basically, at the beginning of the article. And this is also going to serve as a table of contents.

So they can click on a category, it’s going to take them right down to that part of the article. It’s going to be fantastic. Now special shout out to Mark Westgard.

He got on a call with me and kind of walked me through the basics of all of this stuff just to get me comfortable enough to start exploring it on my own custom block and that’s exactly what we are going to do today. I want to preface this with this is not my wheelhouse. This is the first block that I’ve built.

So I want to give you the confidence that this is your first time building a custom block. I want to give you the confidence to go forward and make the attempt with the help of this training. Also want to mention I’m not a PHP expert by any means, so there is some PHP involved in this and we’re just going to work our way through it.

I’m like I’m one of you right for this for this tutorial okay like I am I’m at the basement right now. I am at the basement, I am not in the penthouse of of custom blocks okay I’m at the basement of custom blocks I got to work my way to the penthouse and this is the start of it okay so let’s go ahead and jump in let’s see exactly what we are going to build so here is my rating area here this is like let’s just pretend this is a blog post okay and what I’m gonna do is I’m gonna go to the ad and look at this we’ve got some Geary. co blocks so we got a little custom category here and we’ve got a PB rating block that we can just click and it’s going to add that bad boy to the page.

And then look over here on the right hand side in this column, I can go ahead and just start using these sliders to start scoring this particular page builder. And this is not, I mean I know this doesn’t look super fancy right now, it’s okay, you’re going to look on the front end, it looks totally different on the front end. And I’ll probably do a follow up on why styling is not being pulled into the editor.

Gutenberg is not super easy to work with, okay? Things just don’t work out of the box. But I’m gonna go ahead and put these ratings in.

I’m gonna hit update, and we’re gonna go view what is going on on the front end of the website. Now that looks a little bit more flashy, right? That looks a little bit better.

But look what happened. It’s pulling in all of the ratings for all of the categories exactly as I had them in the builder. It’s adding them up and putting a total at the top.

And I just did that in seconds. So imagine I’m writing a blog post and I need to put this scorecard together for that particular builder. That took me a few seconds, right?

So you do the work up front. I can add this to any rating post for a page builder review that I want to add it to, configure the scores, and move on with my life. It’s really, really, really good.

So we’re going to be, I mean there’s nothing better than a tutorial where you’re actually building something for real. This is not just an example thing. Alright, so I’m going to hop over here.

This is actually giri. co now. And I’m doing this on the live site.

I did take a backup okay but we’re not going to mess with staging and all that stuff we’re just look I’m I like to live on the edge okay uh so that’s what we’re gonna do. I got my backup it’s okay I got my backup. We’re gonna go through the stuff this is a legit this is the actual post that I’ve been working on.

Let’s take a look at this on the front end. So here is the actual this is the real post that I’ve been working on. You can see that it’s, I mean, it’s detailed, right?

These are very detailed reviews and every section gets a rating and yes, okay. So we, but here’s the, Gary. co site doesn’t have that block.

We, us together, we’ve got to build the block for this site right here. So I’ve got our steps that we’re gonna walk through together and then we’re gonna replace these steps with our actual block when it’s done. So the first thing we wanna do, install the Bricks child theme.

This assumes you’re using Bricks Builder, but it’s okay if you’re not. You need a child theme. Bricks has a child theme, so if you’re a Bricks person, just install the Bricks child theme.

If you’re not a Bricks person, just install the child theme. It’s that simple, okay? But if you’re using Bricks, you can follow along.

So what I’m gonna do is I’m gonna click back to the admin I’m going to go to appearance themes and we’re going to take a look Right there is the bricks child theme so that step right there is done I really don’t even have to do anything the next thing that we’re going to do is have an ACF JSON folder inside of The child theme folder now for this, I’m FTPing into the giri. co site into the Bricks Child theme folder, okay? So I’ll back out a little bit here.

So we’re under WP content, we’re under themes, we’re under Bricks Child, okay? And what we wanna do is we wanna have an ACF JSON folder inside. So I’m gonna say new folder, ACF JSON and then I want a functions.

php file in the BricsTel theme which is already there. So Brics supplies that and what we want to do with the functions. php is we want to register a custom block category and then we want to register a custom block.

And if you’re doing more than one block you’ll register all of them here in the functions. php file. Okay so what I’m going to do is I am going to open the functions.

php file. So I’m going to go right here and I can actually this you can just do you don’t even need like VS code or anything for this you could just go to the theme file editor right here and you can see I can see my style sheet by default but if I click on functions. php over here, that takes me right to the Bricks functions.

php file. Okay, so what I’m going to do now, because I have told you guys this many, many, many times, I am not a fan of copying and pasting code. You can’t really learn very well that way.

You can, but it’s just, it’s going to take you longer to learn. You should get in the habit and discipline of writing out the code. Even if you have the snippet available to you, write out the code.

So I’m going to go ahead and write out the code. We’re going to first, I’m going to zoom in a little bit here so you can see this a little bit easier. I’m going to say register custom category.

We’re just putting in right now what’s called a comment, okay? This is not output really in the code, it’s just a comment for us, the internal team, the developers to know what this code snippet is for. All right we’re going to start by doing an add filter and within here we’re going to say block categories categories all comma and then we’re going to do um example block category we’re going to do add add new category add new category okay and we’re gonna do 10 and 2 and then we’re gonna close that off.

Then we’re gonna come down and create a function and this is going to be called add new category and we’re gonna say categories post. So we’re just passing some arguments here. Then I’m gonna open that up.

We’ll come down and array unshift. All right, and we’re going to do categories, categories, array, and then we’re going to open that up as well. All right, and then we’re going to say slug, and we’re going to say slug is, we’ll just put example for right now, and then we want a title as well.

So think of the slug like the ID basically, and then this is kind of like the nice name, right? That would be, so we’ll just put that. And then we want to come down and let me bring this in.

I want to make sure we don’t have any extra brackets and such. Okay. We’re going to close that off.

And then we’re going to come down here and say return categories. All right. So we’re going to go, oh, I can’t hit command s to save I forgot So we have a function to add a new category and our category Slug is going to be Geary Co and then the title is going to be Geary dot Co that’s going to be the actual printed category and we’re gonna go ahead and update the file and then we’re gonna see if the front end of the website has has imploded or not and it has not so we are good to go.

Now we’re not gonna be able to see anything in that category, like that category is not even gonna be shown until there’s actually a block inside of it. So we’ll go check on this in just a minute to see if all of that code actually worked. But we’re gonna move on for right now.

So the next thing I’m gonna do is I’m going to register custom blocks, all right? That’s gonna be our comment here. And then I’m going to create a new function.

So this is going to be function register ACF blocks. And then I’m going to open this up. And we’re going to say register block type block type.

Alright. And then we’re going to do a space. We’re going to do a double underscore directory.

And then we’re going to open this up and say this is going to be in blocks testimonial. Okay, that would be like an example. We’re not going to do it on a testimonial block though.

We’re going to call this PB rating, which is the page builder rating. Okay, so we’ll say PB rating. And that I keep hitting command s to try to save.

So if I was going to register a second block, I would just duplicate that and come down here and say like block 2 or whatever okay so this this function super easy all right we’re gonna come down here and say add action and then we’re gonna do an init and we are going to comma that and we’re gonna say so initialize like register ACF blocks right register ACF blocks and then we’re gonna close that off right there. I’m going to go ahead and update file. Okay.

So that’s going to go ahead and save that. So I’ve created my custom category and I’ve registered a new block called PB rating. The problem is none of the stuff that actually like needs to exist for that block exists yet.

All we’ve done is added the functions for it. But we haven’t actually created anything in Blockland. That’s where I really need to go over back into Forklift, into our FTP.

Remember, I’m in the child theme CSS. I added this folder called ACF JSON. Let’s go back and see what our next step is.

We’ve done step 3, which is in our functions PHP, we’re going to register the custom category, we’re going to register the custom block. Now, I need a blocks folder. So I’m going to open up Forklift here, and I’m going to say new folder and I’m just going to make a folder called blocks.

The next name or you can see here one folder per block I’m going to add these three files for a block in that blocks folder. So I’m going to open up forklift and I’m going to open my blocks folder and in here I’m going to say PB rating. Okay that’s my PB rating block.

json. I need block name. php and block name.

css. And this is not literally block name. It’s like it’s the actual name of your block.

Okay? All right. So let’s go ahead and add these.

I’m going to say new file. This is going to be block. json right here.

And then I’m going to add a new file. This is going to be pbrating. The one that is literal is block.

json. Okay, that one just stays block. json.

The others are actually named after your block. So this is gonna be pbrating. php.

Perfect. And then I’m going to add a new file. This is gonna be pbrating.

css. So that’s gonna be our style sheet. Okay, I am going to open block.

json with Visual Studio Code. Perfect. I’m gonna bring this in right here.

Actually, you know what I need? I need a new window. We’ll bring that in.

And I’m gonna say block. json open with Visual Studio Code. Here we go.

I wanna say open that, perfect. Okay, so now what I have is a window for writing my block. json.

And again, we’re going to not copy and paste. We are going to type because that’s how we learn. Plus it helps me go nice and slow.

If I’m just copy and pasting stuff everywhere, it’s hard for you to follow in terms of the tutorial and really understand what’s going on. If I just write it all out, we just naturally take our time and kind of go step by step a little bit easier. All right, so I’m going to start with curly braces here, and we’re going to say that our name and this is the name of the block so we’re going to say ACF and it’s going to be PB rating all right and then we’re going to go here and we’re going to say there’s a title okay and the title is PB rating we’re going to have a description all right and all of the what you see in terms of the auto suggest here is all something called Copilot.

It’s an add-on for VS Code. It’s just AI and it looks at the structure of what you’re already doing, and it’s like, I get it. I understand what you’re doing.

Let me go ahead and suggest the next thing for you. It can be very, very, very helpful. I’m not going to use it much right now, but I do like it.

A custom rating, this is the literal description a custom rating block for page builder ratings I’ve got page also a page filter reviews. All right, so there we go. That’ll close that off right there I am missing a Quote okay.

Next thing is going to be style alright style and then we’re gonna open brackets here and we’re gonna say file and it’s going to be. pbpbrating. css.

Okay, that’s looking good. Next line is going to be category. And remember we registered a custom category called Girico.

You’re using the ID here. You’re not using the actual name of the category. This is why that ID was put in place.

Okay, next thing we’re gonna do is our icon. I’m not gonna bother with choosing an icon, but this is gonna say admin comments. It uses a, I can’t remember what the name of the icon library is, but WordPress has it, so I just dash icons, I think is what it’s called.

And you just go to dash icons to the site, actually, let’s just do that right now. Let’s go to dash icons, and let’s, I think this is it. Yeah, okay.

And you just pick like the icon that you want. What would be a good icon for our little rating widget here? And I’m pretty sure you can do a custom icon if you want to, but that’s, you know, requires extra, extra steps.

Let’s do this one. Welcome widgets menus. Okay, whatever.

So I’m gonna go back into VS Code here and I’m just going to paste the name. That’s what’s cool about dash icons, you can just paste the name of it. All right, so keywords, look, it’s already guessed, right?

It’s like keywords. Okay, so this is when you’re searching for a widget or a block, I’m sorry. When you’re searching for a block in the blocks adder thing, adder panel, and you use terms to search for that block, what terms do you want it to show up with?

So we’ll do rating, review, I don’t think we need to do star. Okay so there’s your keywords. The next thing we’re gonna have is our ACF and we’re going to open brackets again and this is going to be mode and the mode here is going to be preview.

Now there’s like edit, preview, and auto and so preview actually gives you a literal preview in the builder, in the block editor of the block. Edit will always just show you the fields of the block. So I actually kind of want this to just be on edit because I don’t actually care what it looks like in the editor.

I’m just going to put that on edit. I’m going to put it back on preview if we have a problem with it, but I think it’ll be all right. Render template, we’re going to say pbrating.

php. This is where we’re referencing the PHP file that we made, which by the way right now is empty, so it’s not really doing anything. I’m going to come down and put a comma here, and then we’re going to do a supports.

There’s a bunch of different supports. This is actually calling different tools inside of WordPress. So you can say like supports alignment, and then it’ll have the alignment controls on it, supports this, it’ll have more controls on it.

So you actually can can do that. I’m going to say anchor true as our only supports and you can go off into documentation land and find all the different supports that you can add. But that’s it.

Right now that’s all we need. That is our block. json.

Okay I’m going to go ahead and I’m going to pull back up Forklift here. So we’ve got the JSON set. Now what we need to do is we need to edit our pbrating.

php file. So I’m going to say open this with Visual Studio Code. So PHP file.

This one’s going to be a little bit, well, the beginning of it’s not super long, but this is actually where the block itself gets built. So we’re going to do a little bit of setup stuff, and then we’re actually going to build the block in this file right here. Okay, so the first thing we’re gonna do is we’re gonna open our PHP, right?

And we’re gonna come down here, and the first thing we’re gonna say is, we’re gonna make a little comment, and we’re gonna basically create variables for fields. We’ll just put a little comment in right here. All right, now, what fields do we actually need?

This is where we have to go look at our mock-up or whatever of our rating block. So we need a field for each one of these. So reputation, fundamentals, workflow, these are all going to be a basically a slider field.

And they’re going to have a value which the slider is determining the value, so we don’t need a field for the value. This is the, we just need a field for each of these things. Basically, that’s it, okay?

So, reputation. Sorry, I bit my cheek earlier in the day, and now I’m paying the price for that, just over and over and over again. And it’s getting a little bit bigger, which means I’m just gonna keep repeatedly biting it, presumably until the end of my life But that’s if you if there’s mouth weird mouth stuff going on.

It’s probably what it is, okay 3 0:19:46

reputation 1 0:19:47

Fundamentals workflow, this is pretty actually you know what I’m gonna Do I can just because this is a nice little skinny little window right here. We can just do this okay? reputation equals and then what we’re going to do is a get field function.

Now you’re wondering like Kevin what where did you make this get field function that you’re just now conveniently using. I didn’t. I didn’t.

This is a either an ACF or a WordPress function. It’s already done for me. I didn’t need to make it.

Okay it’s just there. You just got to know what exists. It’s in the documentation.

Okay you’re basically getting the value of a field. Which field? Well the field called reputation.

Now you’re gonna see in just a second we don’t have the fields yet, okay? So there’s a little cart before the horse kind of stuff going on here and if you know exactly what you’re doing you can kind of do it in any order. I’m just gonna make one of these there well I’ll just make two of them so you understand what we’re trying to do.

Then I’m gonna hop over into ACF and actually create the fields and then it’ll make even more sense to you. So if you’re kind of lost right now, like where are these things coming from? It’s all gonna make perfect sense in just a second.

But I’m basically saying, hey, get the value of the field reputation and assign it to this variable, okay? So that this token, okay, we’re back into token land. If you’re new to all this stuff, we’re back into token land where we’re assigning values to tokens.

Then we can use those tokens later, all right? So get field reputation, and then it’s just as simple as coming down and saying fundamentals, and then we’re gonna say get field, and then look at this, look at copilot, and it’s already like, you probably wanna get the fundamentals field value, and so I just have to tab and it does it for me. Okay, now we are going to hop into giri.

co. So I’m gonna go over here to ACF, and I’m gonna go to field groups. We basically have to create the custom fields that we are going to attach to our custom block.

I’m going to hit Add New Field Group and we’re going to call this block PB rating. I prefix it with block to separate out what custom fields are for blocks, what custom fields are for custom post types versus for pages, versus for wherever. You get it.

We’re just trying to organize things here. All right, so I need to create a, it’s a, what is it called, a slider? 4

0:22:10 What is it called? 1

0:22:12 What is it called? Repeater, flexible content, range, range field.

Okay, it’s a range field. And we are going to do the first one, which is reputation. So reputation, fundamentals, workflow, reputation, fundamentals workflow Reputation reputation default value I’m going to set at 20 and Then I think what I can do is just duplicate that Duplicate and I need 10 of them.

I know I need 10 of them So we’re just going to do this until we have 10 and then we’re going to go rename both the name and the ID 9 and 10 awesome So the very last one, starting from the bottom, we’re going to need pricing. So pricing, innovation, ecosystem. So this is going to be pricing, pricing.

And then this one is going to be innovation, innovation. This one, ecosystem. All right.

And then I need the next three, which is accessibility, performance, logic, and interactions. Accessibility, performance, logic, and interactions. Just a little tip here, if you ever wanted to separate logic and interactions in the future for whatever reason I would just to make that easy and just to keep all this stuff really clean and easily Referenceable I would just put the first word as the ID and then if interactions needs its own thing You don’t have to worry because you don’t want to have to change IDs.

That’s not a life you want to live, right? So just go with one of them and then you’re kind of a little bit protected going forward in the future All right, so we are going to go with where were we all right templating and dynamic data workflow fundamentals templating Templating and dynamic data, so I’m just going to say templating and then workflow is the next one is that correct Yeah, workflow and then fundamentals work flow workflow, and then this one is going to be fun fundamentals Fundamentals, okay fundamentals fundamentals okay got all of them we’re gonna save changes now you know if you’ve ever used custom fields before these can’t just float freely in WordPress they have to be assigned somewhere where should they be assigned well they should be assigned to the block that we’re creating so I’m gonna come down here and say block and then it’s gonna say hey PB rating is there. It’s there because we, why?

Because we registered it. Remember when we did that step of registering the block? See, that’s why you can’t just come straight here and create a bunch of custom fields.

I mean, you can, but you would not be able to assign them to any anywhere, right? So, but it’s up to you. I mean, you could create the fields and then pause and go register the block and then come back and assign it to the box.

You could do it that way if you wanted to. It’s completely up to you. It doesn’t really matter.

You just got to get all the ingredients in the pot. All right. To make the, to make the recipe.

All right. The next thing that we’re going to do, we got the custom fields assigned. We’re going to hop back over.

We’re going to bring this up and we’re going to hop back over here to our PHP file and we need to continue creating our little variables here. So we’re gonna say get field oops no see sometimes sometimes copilot gets a little frisky it gets a little free tries to move in a little too quick you know what I’m saying oh there we go okay so workflow templating equals templating and then and this is again why I said go with the single word. It makes life a lot easier.

You’re following the same format all the way down. Logic equals get field logic, okay. And then we’re gonna say performance equals get field performance, accessibility.

So you can see it’s not AI like doing, like coming up with code for me. It’s just AI understanding the formula that I’m currently working within and and guessing the next the next step. I’m going to come down and do accessibility.

I did performance. What comes after that? Okay, ecosystem, ecosystem,

3 0:26:37 innovation,

1 0:26:38 and pricing.

Awesome. The next thing I need to do, well, I don’t need to do it quite yet, but I’m going to need to have a variable for the final score so that we can add all of these things together. Okay, but for now I can come down here and I can say create class attribute for, I’ll just say support, create class attribute support.

Now what does this mean? What does this do? So when you add a custom block, let me go back into this post right here, if needed you can go advanced tab and actually you guys can’t see because of my fat head.

Okay, so let me move that out of the way for a second. You can add additional CSS classes onto this element, this block, right? If you needed to do something special or extra.

So if you want the ability to do that, see Gutenberg stuff doesn’t just work right out of the box. You always got to tell Gutenberg, now I want to do that too. Okay, so we got to tell it to support that basically.

So I’m going to move myself back over here and the way that we do that, let me open that up so we have that as reference, I’ll bring this back. Okay, so create the class, we’re going to say class name, all right, equals pb rating, all right, and then we’re going to come down here and say if and we’ll do is not empty. We’re going to do a block and that’s going to be class name.

That looks good. We’re going to open that up and class name, and we’re going to fill that in. Awesome.

Now, we’re going to come down. If we’re going to do another if, and it says if not empty, and we’re gonna do a block alignment, okay? And then the class name equals align and then the block align, okay, close, and here.

Now, I’ve still gotta work out exactly what this does. I think the alignment is obviously separate from the class support, okay? So I’m gonna say create class attribute and alignment support.

And we’re just going to rock and roll with that. OK. More or less, our block is ready to be built now.

And below this ending PHP close tag is where we’re going to build the block. This is where all of our HTML is going to be. And this is why I say it’s important.

It is important to know, minimum, HTML, right? like minimum like HTML right because the blocks in your head like what you’re seeing right here has to be built and if you don’t even know HTML I mean you can’t really even go further here. PHP snippets you could copy and paste from documentation there’s no documentation on how to build the thing that we want to build right here that’s HTML and CSS that’s got to come out of your head you know there’s no there’s no API for that there’s no documentation for that.

You just gotta know how to build it. And so that’s what we have to do next. Okay, so what I’m gonna do now, first of all, what I would recommend doing at this stage, and what we’re gonna do at this stage of the game, is we’re just gonna see if it’ll output anything.

Like when I add that block, what gets put into the editor and on the front end of the web does anything come out okay so we’re gonna say div and I’ll say I just want to put a class on it just so it’s there we’ll just say tests and I’ll say close div tag and then we’ll put a paragraph in here set that says am I showing up okay literally that’s all that’s all you want to do all right now one thing I need to do I think this is auto uploading and everything. So I think we’re good to go in that regard. I do want to save this as a draft and we are going to refresh this page.

And I don’t know about you, man, but Gutenberg when it’s saving, it’s much slower than Bricks, I’ll tell you that. Can I, there we go, draft saved. Okay, I’m gonna refresh this page.

And we’re, I mean moment of truth my friends, moment of truth, I hit add. Guys, Geary. co, little category here, PB rating, it’s got our little icon in there, look at that, look how cute that little icon is.

Okay, let’s just add it to the block. Oh wow, wow, wow, wow, wow, wow, okay. And I’ve got it in edit mode, which means that all my sliders are basically just going to be right here.

I’m gonna go ahead and save draft. I don’t want to publish this. I did this is a live site.

We don’t want to publish it. We want to stay away from the publish button. Okay, hopefully we can do everything in draft mode.

But at least what have we accomplished? We do have a block. It is in the right category.

It has the icon that we wanted. We’ve got some sliders in with labels, okay? Some sliders attached here.

This is looking really, really, really good. So we’re gonna preview. And we’re gonna see if anything is output on the front end.

In fact, I’m just gonna refresh this post right here. Look at that, am I showing up? Guys, guys, we’ve got HTML on the page.

Let’s inspect this. Let’s inspect. Okay, there it is, div class.

Look, it’s clean, too. No extra wrappers, no extra nonsense. It’s just div class equals test, am I showing up?

So now what we’re able to do, now we’re in the wheelhouse, okay? Now we’re in the wheelhouse, we can actually get to work. The only problem is I just hate having to like bounce back and forth from this.

Okay, so we’re going to come over here and can I, what’s the easiest way to do this? All right. Just had to do a little editing cause there were some windows up that I didn’t want you to see ACSS 3.

0 and a Figma file. Didn’t want anybody seeing any of that stuff. Okay.

Uh, so I had to do a little pause, a little, we got to do a little cut in the editing room. Uh, but we haven’t gone any further on the block. We’ve, I haven’t done anything in that regard.

I got our little page layout here ready to go so we can see everything. I’m gonna actually zoom in a little bit over here. Let’s actually bring that over a little bit wider.

There we go. Okay, this should be a good environment so everybody can see exactly what is going on. All right, what I wanna do now is I wanna get the CSS file opened up and I want to put my CSS file right below basically my HTML file that way I can kind of see both at the same time and work in both at the same time.

So I’m gonna go back to forklift and I’m gonna open pbrating. css. Okay that’s gonna open right there but I’m gonna go up down I’m gonna go to view and I’m gonna say editor layout I’m gonna say split down and it’s gonna put pbrating down here pbrating.

css down here and pbrating. php up here. Okay, now the pbrating.

css file is literally you just write CSS here. You don’t need any of the intro stuff, names, descriptions, you don’t need any of that stuff. It’s literally just, you can just start writing CSS and you are good to go.

All right, so the first thing that we obviously need, whoops, I didn’t mean to do that, is this outer container here, right? Our main box, our main wrapper for everything. So that’s gonna be div class equals pbRating.

And so that’s our page builder rating widget, basically. And I can get rid of the paragraph inside of there. Now, I am seeing that I need rows, effectively.

So, like, each one of these things is a row in this, it’s not really a table, but I can refer to it, I guess, as a rating table. So I just need rows, right? So I’m gonna say div class equals, so I wanna say this is a PB rating double underscore row, and I’ll just put a closing div tag in there.

Okay, so now I can literally just go row, row, row, row, row. And so we’ll have 11 rows, because there’s 10 categories, and then there’s a header row, effectively. Now what we have to figure out is what’s going on inside the row.

And this is actually gonna be PB rating row and PB rating row modified to the header. And actually, I don’t even know if we need to do that. That might be over-engineered.

I’m gonna say header, PB rating header, and then right here, I’m gonna say this is a PB rating row. All right, perfect, just like that. I like it, I like it.

Inside of this, I need to think about grouping associated content, right? Looks to me like we have for the row, this is like a row, we’ll say row content. We’ll call this row content.

And then down here, we’ll call this the row rating wrapper. The row rating wrapper. Okay, so inside of a row, I want div class equals, and I’m using BEM for all of this, so pbRating, and we want the row content, okay?

And we’re gonna close that off. And then below that, no, not a closing div, no, not, nope, I don’t want the closing div, thank you. We’re gonna say div class equals pb rating, and this is gonna be the, we’ll say this is the rating content, how about that?

3 0:36:17 Div, okay.

1 0:36:19 So that’s the basic structure of my row right there.

I haven’t really put any content in there yet, I’m just, I’m organizing wrappers is what I’m doing. Okay, so in row content what do I need? I need a, well, is it really a heading?

Actually it’s going to be a link. It’s a link and I don’t want these to be headings because these exact headings more or less are going to be later in the article as H2s and so we don’t want to duplicate those effectively. So I’m just gonna make these links.

So we’re gonna say a href equals and The class is going to it’s gonna have a class and then we’re gonna close that tag and this one is gonna say Reputation. Okay, and the href is gonna be the reputation Okay, so that’s an anchor link and then the class is gonna be PB rating and this will be label, all right, so, because it’s the label for the row, effectively. Actually, I need to call it row label.

That would be much more organized. Because it’s not just any label, it’s a row label. All right, the next thing I’m going to do is a paragraph, and that paragraph is going to have a class.

Remember, everything gets a class, right? PB, when in doubt, BIM it out. PB rating, row description.

That seems like it would get the job done. And this is a description. Perfect.

Okay, so I’ve got my link in there. I’ve got my description in there. We need our bar now.

Okay, so inside our rating content we’re gonna say div class equals and then we’re gonna close that off. This is gonna be PB pbRating double underscore rating bar. Okay.

Then I’m gonna say we need, is that a, that’s probably just a span over there. So I’ll say span class equals and we’ll just say 92 for right now. Close that off.

And the class is gonna be pbRating rating value. Okay, so I’m just trying to keep everything organized, everything nice and logical, named appropriately. Okay, so I’ve got my 92, I’ve got my bar, I’ve got my link, I’ve got my description, I’ve got all this stuff in a wrapper that’s called row, and then the row has content, has row content and rating content.

I think we’re looking pretty good. So what we’re gonna do is we’re going to save, and we are going to refresh in the, do we need to refresh in the builder? No, we just need to refresh, I believe, on the front end.

Look at this, a link called reputation. That’s an anchor link, and then we have this is a description, and then we have 92. So what do we need in our header now?

In our header, if we go back here and look, we need, this will be an H2, so that’s an overall score. So we’re gonna go inside of our header, and we’re gonna say H2, overall score. And then what we wanna do is another span class equals, and this is gonna be the PB rating.

And we’re gonna call this value, right? PB rating, rating value, and then we’re gonna say featured. Or I’ll say total.

That probably makes more sense to people. We’ll put a 90 in here, and then close off that span, okay? And then we’ll save and we’ll go back to our front end.

And now we have overall score, 90, and then reputation. So we’re getting HTML onto the page. It has no styling yet.

Why does it have no styling? Because we haven’t written any CSS yet. So of course it has no styling, right?

We’re just getting the structure down and then we’ll be able to copy, paste, copy, paste, copy, paste, copy, paste. Then we just have to inject the values and then we’ll be done. And this will be another tutorial in the books and we’ll, you know, do whatever we want after that.

Okay. It is very late in the day. In fact, the time right now 7 52 p.

m. It’s been a long day so I’m a little loopy but that’s okay some of you like loopy Kevin if you don’t I don’t know what to tell you. Okay so what do we need to do now?

Probably start styling some things so let’s go in and just target PB rating. Now we’re gonna say this is This is display flex, flex direction. It’s gonna be column.

Padding is gonna be, and guess what? I don’t have to come up with variable. I can just use ACSS, right?

I’m gonna say it’s gonna be space L, okay? We’ll just see how that works. I’m gonna do a border of 1.

5 pixel solid var action light. Okay, and I’m gonna do a border radius of var radius m. Okay, see how automatic CSS even like saves the day in custom code land.

Like I’m not even in Bricks, I’m not even in a page builder. I’m not even in, I’m not, I’m not even in WordPress. I’m in VS Code, but this all hooks in and my style sheets are loaded, which means ACSS can help me here.

All right, so I’ve got, now if you don’t have ACSS, you gotta come up with your own values for all this stuff and maybe create all your own tokens and things like that. This is already done for you, so you don’t have to think about that part. All right, I do wanna come up here and I probably am gonna be creating some locally scoped variables.

And I’m even gonna come up here and put in a comment. Okay, local variables for this, all right. And then this is pb rating styles something like something like that.

All right so just kind of organizing our css file a little bit. So I’ve got pb rating just to put here I’ll just say placeholder okay one m and then I any any locally scoped variables that I need to create I can just I already have a place for them. All right so the next thing I need to do is on our header.

So we’re going to come down here to PB rating. I believe I just called it header. Display of flex and flex direction of, well, row is the default.

So you don’t really need to write it, but we’ll just do that anyway. Okay. So it’s putting overall score 90 here.

We want some justified content. We do want space between. Thanks for suggesting that.

And that’s probably it for the header for right now. And I want to also use a gap in our main PB rating. This is going to be our content gap, but I already know just experience I already know what’s about to happen here we’re gonna need a row gap variable and that’s gonna be for right now content gap but I need to be able to math some of this stuff and I want one reference for our row gap in this table okay we’ll say rating row gap just just just so that’s easier for anybody else who comes along later to decipher what’s going on here.

Alright so we’ll do rating row gap and the gap is right here rating row gap. Okay now we can refresh this. Okay so now you see we have a gap between our header and our first row right there that’s exactly what we want.

I’m not liking how the reputation, the link and the and the paragraph, there must be some, yeah, there’s a top margin going on here. So one thing I want to do is PB rating and inside of our header we’re just gonna say P and then PB rating header A, both of those. I want to do margin block start.

That’s margin top. It’s a fancy way of saying margin top. We want that to be zero.

And I don’t know if I’m going to be able to override the defaults here. 2 0:44:37

Not default. 1 0:44:38

I want, my brain is thinking default. Important. Let’s just see if that gets the job done here.

Cause I don’t want to be messing with margins and stuff in here and what is going on here PB oh it’s not a P inside of PB rating oh yeah it is it is it is it is PB rating header P PB rating header yeah PB or any header oh oh that’s not in there that’s not in the header that’s not a better that’s in the row okay and this is in the row. All right maybe I don’t need the important. We’ll see.

Save. Refresh. Okay we do.

We do need the important. Okay. Save.

Refresh. And there we go. Okay.

Much much much much much much better. Good. We are making making making progress.

So if you notice the link should not look like a link, right? So I want the, and this is the A with the class PB rating label, row label, and we want to say color is base, text decoration is none, and font size is the size of my h3. Okay, and let’s refresh that and see what we get.

Okay, I want it to be actually the size of my h4. Text decoration, none. Let’s important that.

Row, oh yeah, row label, that’s correct. Okay, come down. There we go.

I go I need a little font weight here font weight 700 excellent now the description let’s grab that and this is going to be a paragraph with that class and this needs to be row description this is going to be base Let’s do dark trans 60 Okay, save that let’s refresh see what we get Okay, that’s looking really really really really good that’s nice that’s nice, okay Let’s do our bar perhaps. How about that? Let’s get a bar on the screen.

Okay. PB, rating. And this is called a rating bar.

Imagine that. So we’re going to style our rating bar. Let’s display it flex.

Let’s do width of 100%. Let’s do a height on it of 25 pixels just for now. Background color is going to be action for now.

I know all this stuff is going to change and that’s okay. We just got to get something on the page. Border radius is going to be radius m.

And let’s just see what that gets us. There we go. Okay, so we got a little bar on the page.

Now the background color actually needs to be base light trans 20, somewhere around there. Because we have a bar color and then a bar fill color that’s different, right? So if you look at here, here’s the fill, here’s the normal bar color.

This is the fill, the active color of the bar more or less. So we got to keep that in mind. All right, let’s refresh.

Now what we want to do, that’s perfect. We want the rating value to be next to the bar. They’re both in rating content right here.

So if I grab rating content and I want to put that probably here, this is going to be rating content. I want to display this as flex and flex direction row is the default, so I don’t need to put that. Align items center.

Okay, that’s going to vertically align them next to each other. And there you go, you see that. And then I want to justify content space between, but I also want to put a gap in there.

Okay, so we’re going to do a gap of var contentGap. This is not the row gap, so we don’t have to use that variable we created earlier. There we go, right there.

So now we’ve got our value next to our bar. Let me see if these are still there’s a line height situation going on here this may just be line height going on. So what I want to do is the A and the P I want to say your line height is 1.

25. Let’s just see if that gets us what we want and while we’re here on the row content gap var content gap. That has the bar and the value.

It’s row content, not rating content, but row content. So we have row content, and that’s where we’re going to say display flex, flex direction is column gap is and I am going to use we’ll do a calc and I’ll say our row gap what was it called rating row gap okay rating row gap divided by two okay now we refresh just trying to get our spacing in here yeah okay actually no Oh, this put the description way down here. Why did that happen?

Is that what that gap does? That is what that gap does. Did I put that gap in the wrong place?

2 0:50:58 Row content.

1 0:50:59 Rating row.

Oh, no, it just needs to be in a row. Did I already do one for row? This is where getting, when it gets late and you’re like, well, have I done that part yet okay let’s do that make that change and then see there we go I just my brain got them got them backwards there for a second okay guys we’re making progress this is looking really good what I want to do is I want to put in another row so we’re gonna actually yeah I don’t want to do too many of these because we haven’t put in our dynamic data in yet so we don’t want to get too far because we’re gonna have to do some copy paste jobs, but look at this Look at this guys.

It’s coming together Okay, I think what we can do up here is I want to change this from space L to space M I don’t want that quite that much padding inside of our our main block. There we go. It’s looking really good Maybe I do maybe I do want the L.

Maybe I do want the L All right. I’m just nitpicking at this point. All right, what is that called?

It’s not called reputation, it is called fundamentals. Okay, so let’s go back here. And what we need to do is change reputation to fundamentals.

And that should be good. Okay, and let’s just refresh that. Oh, you know what the link right here.

Aha, don’t forget this. Fundamentals. That’s got to go to a new anchor destination.

All right, guys, we’re looking really, really, really good. Let’s do our bar progress, right? Okay, how are we going to do that?

We’re going to do that with a pseudo element. So we’re going to find our rating bar right here, and we’re going to position this relative. I was going to say we’re going to absolutely position that relative.

No, we’re just going to position that relative. Then we’re going to come down and we’re going to say, I’m going to steal you, and we’re going to say before. Actually, I’m going to do an after since this is going to be on top anyway.

Let’s just do an after. The content is going to be blank, and then the width is going to be, how do you do this? This is actually inline size instead of width now.

You want to be up on the modern modernization of the CSS. Okay, we want to do 75 percent. Then I’m going to say height is 100 percent.

I’m going to say inset inline start of zero, that’s left-hand side, inset block start of zero, that’s the top, giving it just a little positioning coordinates here. Height is 100%. Okay I think we just put a background color on there now and say for now it’s going to be action and what in the world have we gotten?

Did we? Hey guys we got a progress bar! Okay I want to do overflow of hidden on here because right now the pseudo element is covering up our border radius that we had.

So a little just hiding the overflow will preserve that border radius and that’s looking really really really good. Okay well guess what the border inline ends that’s the right side over there can have a three pixel solid action dark kind of situation going on and that’s going to give it out that little bar that little stopper bar that you see there, and that’s clearly not dark though so what I’m going to do is I’m going to switch this to action medium and Then that should give us that look that we’re going for Actually media. Oh yes when this is action light Then you’ll be able to see it and that actually needs to be a gradient.

So I’m gonna I’m gonna make that into a gradient just a second. But that’s that’s looking really really really fantastic. Okay kind of exactly what we’ve been looking for.

Now we need some dividers in between all of these rows. Okay we’re gonna use pseudo elements for that too. So I need to find my row my PB rating row right here.

Guess what? Position relative. PB rating row.

After. But, but, not, not, the last child. Okay?

So we’re going to do on the after, but not on the last one because we don’t want to, we don’t want that awkward little divider not dividing anything down there and just floating. Okay? Blank content.

Position absolute. And we’re going to say the inline size, yeah inline size is 100 percent, the block size, oh that’s the height right, I think I used height up there somewhere, height height height height, there it is, oh and I see I’m still training my brain to switch over to logical properties, this is going to be block size, this is going to be inline size. So instead of width and height, height is block size and we have inline size there already.

Okay so we’re just making sure all of our standards are up to date here. Okay here is our after block size is going to be one pixel and background Let’s just do base ultra light and see how that goes. Okay, let’s display this as flex.

Let’s just see what we’ve got. Oh, I didn’t give it any coordinates yet. Yeah, so position relative, row not last child after.

Okay, that seems to make sense. Let’s give it some coordinates. inset it inline start of zero and inset blocked end that’s the bottom of zero and that should drop down to the bottom of this.

Let’s refresh and see and look at that it did. Now we need to position it in set, where’s my after? Here we go.

Yes, right here. In set block end. Let’s just put in the variable of rating row gap.

And then let’s see what that does. That pushes it up from the bottom, the equivalent of the rating row gap value. So what I need to do is make that a negative number.

So I’m gonna calc it, put that variable in, times negative 1 is now going to make it go the other direction. I could also, just to show you, there’s two different ways to do this. And you notice it went too far, right?

Why? Because I need it in the middle of the gap. Well the middle of the gap is half of that value, okay?

So what I want to actually do is divide that by 2 and then multiply it by negative 1 and that’s going to put it right in the center. I already know a little magic wand go down and bang there you go. Instead of base ultralight I want to do action actually actually I want to do yeah yeah we’ll keep this action light trans 20 something like that.

For all these like transparency tokens really come in handy. That’s way too faint though. Let’s do 50 and refresh.

Just kind of dial that in. There we go. I like that.

I don’t think I want action light trans 50 though. I want the normal action colors. Like a little, little too, I don’t know, a little too something.

That’s better. That’s better. Okay.

At least for now, at least for now I think we’re good. Okay, notice it’s not putting it on the last child, right? Now you could also, instead of inset block end, you could have done inset block start and then gone 100% from the top plus half the gap.

That’s just another way to do, to get it in the same position with a different method. It’s completely up to you. I went from the bottom and then negative, you could go from the top 100% then positive.

Whatever you want to do. It’s up to you. All right, so got that in.

Let’s get this, let’s get that to be a gradient right there. So my rating bar background color is baselight trans 20. That’s the regular color.

Here’s the after. So this is the active part of the bar. Action light.

Okay, so I want to grab this and I want to just do backgrounds and I want to do a linear gradient and I want that to be 90 degrees and then action light and then we could say action medium perhaps or just action I don’t even know yet. Let’s just refresh and see what we’ve got Okay, it’s a little too aggressive. So I’m going to make my own colors.

So this is where ACSS, the power of ACSS coming in, I can create my own colors without leaving ACSS. I can hook into ACSS so that if my action color ever changes, these things update as well, it never breaks, which is really, really, really nice. So I’m gonna say rating bar start color, and then I’ll do rating bar end color.

This is gonna be an HSL string, okay? Rating bar end color, HSL. Now what goes in the HSL?

Well, color partials, okay? Action H, that’s the hue value of my action color. Let me grab that right there.

Action S, action L, so I just changed this to L. I changed this to S. Now I’m gonna show you right here how this works.

We’re just gonna piece this together, okay? Right now, the start color and the end color are just my action color, because they’re referencing the H, the S, and the L from my action color. So if I go down here to our linear gradient and we do rating bar start color and then we do rating bar end color rating bar ends color right there then we refresh see what we get there you go an action color but now what I can do is I can come in instead of referencing the actual lightness value of my action color, I can put on my own value.

So I can say something like 60% and then here, the end value, I can do something like 80% and then I just have kind of two custom colors for this specific purpose. And I actually want to switch that around. So this is 80 and this is 60.

And then I, wait, no, yes, that’s correct. I think that’s correct. I want it to start light and go dark.

I need to look at our reference. Do I want to start light and go dark? Or do I.

. . no.

I want to start dark. I had it right the first time. This is where the dyslexia really comes in handy.

See that? You just bounce back and forth between two binaries all day long because you can’t remember what the fuck which one was. Okay refresh.

I told you guys it’s late. It’s late. Alright, this is looking good.

A little bit different shade of action color on the test site than on our regular site, but that’s okay. I’m liking it, I’m liking it, I’m liking it. I think that that little border on the right hand side, right here, I think that is kind of like a action dark, but maybe like trans 50 or something let’s just take a little this a little second to adjust that a little bit and we can even go down to like 20 see if that does the trick okay I’m good with that I’m good with that I like it it’s a little bit more subtle okay what do we need to do with these numbers over here check that out so that’s a rating value, isn’t it?

Rating value, rating value, rating value. Did I not style a rating value yet? I did not.

Okay. So we’re gonna come down and do a PB rating, rating value. And what we’re gonna do here is font size var h4 and we will do a font weight of 700 and we will do a color of base.

It’s already see the AI is already like dog. I see what you trying to do here I see what you’re trying to do. Okay, so that that’s nice Once again, I need to position that relative and then we’re gonna come down here and we’re gonna draw these pseudo elements guys like if you’re not a Pseudo element fiend over here dog like they’re so handy content width 100% height two pixels Height 2 pixels.

I don’t need that. What am I doing here? Inline size, block size.

Okay block size is 2 pixels. Background color, var, action, bang. We need to block end 0.

25 M. Pop that off, refresh, come down. Not there.

Not there in the slightest. Display flex. Okay.

Rating value. Rating value before. Okay.

I’m thinking that should do the trick. There it is. It needs to be minus 0.

25. And actually probably do this one. Pick inset block end.

0. 25. Let’s do an after.

Make it an after. Sorry. This would be.

. . It should have done with the before anyway, but that’s fine, whatever.

You know what I want to do with this value just to make sure this is not having extra spacing going on? Line height one. There we go.

2 1:05:22 Now that underline is sitting much closer

1 1:05:24 to where we want it to be.

Does that look like, okay, yeah, that’s good. That’s good, okay. Now what I want to do, is it the right size?

Yeah, I think it’s the right size. Okay, let’s do the main rating up here. And what class did we give that?

A rating value with a modifier of total, okay? So now we have the rating value, rating value after, and then the PB, rating value total, what are we doing to change this? It also needs, by the way, it needs the normal class on it because the normal class is going to get the normal styling.

We’ll save that just to show you what that does and then we’ll refresh here. That’s going to get the styling that these got down here. But what I can do is I can change it based on that modifier.

So I’m not copying the same styles, I’m just adding new things, new instructions. So this is actually going to be the size of our H2. That’s going to match this heading right here.

See, I don’t need to know what the actual value of my H2 is or anything like that. I just have tokens for all these things. So that’s 90, and that’s good to go.

It’s exactly that’s all that’s what modifiers are for right there. Just modified one of them. I do think that this block size needs to be like maybe three pixels make that underline a little thicker.

There we go. There we go. I’m liking that a lot.

I’m liking that a This does need the row on it. So our header is a row as well. Okay so that’s gonna get the normal row styling.

Hopefully I didn’t. . .

okay. Oh you know what? The way that that’s stacking.

. . I actually kind of like that.

I don’t know I’m gonna put it the way that it is in the original. But you could definitely do something like that, you know? Okay, so where’d my rating header go?

I want the header to actually be down here, rating row. Okay, that’s going to override that row styling right there, because it comes later in the style sheet. And I should just be able to save that and it’s gonna put it back to the way that it was.

See that? So now I’m leveraging the cascade order to sort out my styling. But now I’ve gotten the little separator bar that’s between all of them, which is nice, nice to have.

Okay, all right, I’m liking this a lot. 2 1:08:24

Tsk, tsk, tsk, tsk, tsk. 1 1:08:25

What do we need to do now? We need to get the actual values in here guys. Before we go any further, you guys are probably dying for this part of it.

You’re like, dog, I can do CSS, HTML, okay, show me how to get the values into the table. All right, we’ll do that right now. All right, so what we want to do, remember how we assigned the values to these variables over here, these tokens, we can now just echo their value.

Okay, so like the total, well the total’s a different beast. Let’s come down here to this rating value right here. And let’s say, we’re gonna say PHP echo, and it’s gonna give us a little string action, echo, sorry, open, all right.

And then we wanna do this. Okay, what are we going to echo? Well, we’re going to echo reputation, the value of reputation, because this is the reputation row.

Okay, now let’s just see if that changes from 92 to 66, see that? So we just echoed the value of reputation. So now what I’m gonna do is come down here and instead of 92, so we can’t have these static values, I now have to reference fundamentals.

And watch 92 change to whatever the value of fundamentals is, which is, is it 66? Is that correct? It is, hey, look at that, 66, 66.

I don’t remember doing that, but maybe I did. Okay, guys, we’re getting somewhere. Now what about this bar?

Like how do we get that bar? Remember I gave that bar a width? Okay, so we come down here to the rating bar after, and I gave that an inline size of 75%.

How can we, because you can’t just, or can you? Can you just, can you just throw an echo in there? I mean let’s find out okay um so we’re going to php echo oh look it’s trying to finish it for me and it’s going to put a little percent on there can I do this in css?

No you can’t do this in CSS. All right, so remember it had a value there. What we can do is give it a token value, okay?

And we’re gonna call this the rating value. Imagine that, the rating value. And then we’re gonna assign a value to the rating value.

And how are we going to do that? Well, we’re gonna do that with a, well, we can just use an inline style. You could use a data attribute.

You could, you know, there’s more than one way to skin a cat, as they say. But what I’m going to do is I’m going to come up here to the row. So every row, I’m going to set the token value of the rating, okay, like this, just with an inline style tag.

So for all of those people who have said inline styles are bad, avoid inline styles, well, this is one of those situations where inline styles are really, really, really, really handy. Okay, this is gonna be called rating value. And then the, now, the here, because it’s HTML, we can actually PHP echo this, okay?

Bang, bang, just like that. And what are we gonna echo? My friends, we are going to echo reputation.

Okay, now, what we need to do is refresh and we just need to see now the bar has not done anything yet. Maybe it has, maybe it has. It has, it’s gone away, it’s gone away.

Okay, so you’ll see why in just a second. So we’re going to inspect this. But look, I have style rating value 66.

The one thing I need to do to finish this off, remember it can’t just be a raw value, it has to have a percentage, like a unit attached to it, and with a PHP echo like this, you can just attach the percent to it. Okay, and that’s gonna transform it into a percentage, and now when we refresh, look at that, we have it right there. Now, why isn’t it down here on fundamentals?

Well, because we haven’t taken the style tag, that’s why I said you don’t wanna create all of your rows yet. You wanna bring this down and target this row with the same thing except here instead of reputation it’s going to be fundamentals. And now I refresh and now we have it there and now the the real moment of truth I’m going to change that to 48 and I’m going to hit save draft and then we’re going to come over and refresh I don’t know if it’s done saving yet.

It is look at that so now my bar and my value are responding to the actual slider that I’m using inside of ACF. Okay, fantastic, right? Guys, we’re just making really good progress here.

All right, the next thing I want to tackle is we’re going to have to be able to add this thing up, right? So let’s make another variable and let’s call this the rating total. Okay, so this is our rating and sorry, in PHP underscores in your variables here.

So rating total and I am going to say reputation. Now watch what Copilot does here. Look at that, it knows I’m like maybe I want to just add all these together.

Okay, and so I can just hit tab, tab and it’s going to do all of that writing for me. But actually what I wanna do is I wanna wrap this in parentheses and I wanna divide it by the number. It already knew, it’s like, hey dog, you got 10 variables there, you probably wanna divide this by 10.

So I’m gonna divide that by 10. I’m gonna go ahead and hit save. Excellent.

And I think that’s gonna get us to where we wanna go. So no, no, we have to echo the total. So see why I did this echo reputation.

I’m just gonna come up here and instead of 90 we’re gonna say echo. What are we gonna echo? The rating total.

Save. Now refresh. Come down.

Uh-oh. 27. 4.

I mean yes it’s working okay but I don’t want decimals. So what can we do? Well in PHP you can use what’s called a ceiling function.

Okay so you can say seal and I can wrap everything that I just did in that ceiling function and that should round this up to the next whole number. 28. Okay so now we’ve got our total in here.

Next thing we need to think about? First of all, do I need padding above or margin above this? We’re gonna look at that in just a minute.

I don’t think so. I don’t think so, but if needed, we can find a way to put that in. Okay.

Descriptions. I wanna grab this description right here for reputation. And I wanna come in here and here’s my description for reputation.

Excellent. I’m going to grab the next one. Basic elements or for fundamentals.

Put this in here. Excellent. Okay and let’s make sure our description is coming in properly.

It is. Let’s animate the bar before I fill everything out. Let’s go ahead and animate the bar and then I’m more or less I think we’ll be done is there anything else you guys need to really see here I think we’ve done the meat and potatoes you know all the hard stuff pretty much covered I’m gonna continue to do some like design tweaks and all that but you don’t have to watch me do that we’ve done the vast majority of it what we do need is see that animation right there we need to animate the bar.

So we’ll do that and then I guess we’ll close this out. Okay, so let’s go ahead and here’s our bar after. I’m gonna come down to, actually I’m gonna come up here and we’ll say animation.

And I’m gonna do a keyframes and we’re gonna name this, I’m gonna say PB rating bar as our animation, right? And then Copilot’s already like you need a from, you need a to, so I’m just gonna fill that out. And where are we going?

From inline size of 0 to inline size of the rating value. It’s already got it in here because it knows what’s going on. The next thing I need to do is go down to the bar.

And I’m thinking, let me put our animation at the end. Okay, let’s go all the way down here, animation. Okay, now I gotta find the bar, rating bar after.

And I’m gonna add the animation, PB rating bar. We’ll do four seconds, ease out. I just wanna make it super slow so it’s super obvious.

Look at that. Okay, we can drop it down to one second. We probably could go the extra step of like, only start the animation when, you know, it’s in view, more or less.

I’m not going to tackle that right now. 2 1:18:02

What time is it? 1 1:18:03

Yeah, it’s getting late, it’s getting late. I think we’ve done the hard part. We can easily add little comments and stuff to this training to be like, okay, if you wanna do this little tweak, if you wanna do that little tweak, here’s how you do it, that kind of thing.

I really wanted to get all the hard stuff taken care of. I’m trying to make sure there’s nothing else. We got the ratings on the side.

Let’s go ahead and look at how this is all going to behave on. . .

oh, oh, let’s get rid of the steps. Okay, so let’s get rid of this stuff and let’s see what it’s actually going to look like at the top of the article. So I’m going to refresh.

There we go. So you’re gonna see the heading, and you’re gonna come down, and you’re just gonna immediately see this. And then reputation fundamentals.

So if I come down, where’s reputation? Right here, reputation. So I can go to advanced, anchor, reputation.

And then if I come down to fundamentals, I can say the anchor here is gonna be fundamentals, and I can save. Then I can refresh and then if I click on reputation, see this is not just a rating block, it also serves as a table of contents. Really, really, really nice.

Okay, I’m actually gonna make little, probably another little block for this right here, that’s actually going to pull the reputation score from right here into there. So that this doesn’t, you don’t want to do this manually and this with ACF because they can get out of sync. So I’m going to have to build a second block.

We’re not going to do that now, but I’m going to build the second block for these little, what’s going to be called a PB rating label, okay? So I’ve got my PB rating, you know, table and I can have a PV rating label now. 2

1:20:05 Okay. 1

1:20:05 I think that’s the end of this. Let me, let me go back to the screen and make sure that our recording is looking good.

Go back to camera. 2 1:20:12

All right. 1 1:20:13

Thank you guys for watching this. I hope I, you know, it’s close to 90 minutes. I really hope that this was helpful for you.

If I left anything out, if anything I did did not make sense, please don’t hesitate to drop comments below the video. We can clarify anything we need to clarify. I will provide you with starter code snippets, but I highly, highly, highly recommend you don’t just copy and paste them.

You write them out. It’s going to help you learn faster. It’s going to help your brain process this stuff better.

You know, it’s like going to the gym. You don’t, there’s no magic pill. You go to the gym, you do the heavy lifting, you get sore, okay, and then you get stronger.

In the coding world, I found this out, it’s like one of the secrets, you got to go to the gym with the code. That means you got to lift every line, okay. You lift every line and your muscle is going to get stronger.

If you just copy paste, it’s going to take a lot longer. Okay. So just take my word for it.

Anyway, thanks again for watching. I’ll be longer. Okay.

So just take my word for it. Anyway, thanks again for watching. I’ll be back with more great premium tutorials right here in the inner circle.

Peace.