 Welcome back to the channel in today's video. I want to work with you to show you how to build a Gutenberg block Now from the time the WordPress 5.0 version was released We've had things like these little blocks that you can actually pick from your holding area here You drag them you drop them. You can use them. You can edit the content. You can actually right click You can delete them and they make writing a little bit easier Now one of the things that we've been doing as people who make custom websites is Doing things that are good in design. For example, if I came up with a complex design like this This would make a perfect candidate for a block and this is simply because we have this one block Which is a day one if this is day two. This is day three. They have content that is repetitive But they have some little information that's changing in different areas with a little image. That's also dynamic now building this Traditionally with a custom post type and being so many things brings about a bunch of headache all together So what I'm going to do is build this into a block And then we can reuse it on a page and see how easy that is Now I will do this as a native block in the next video that I release about blocks But in today's video, I'm going to show you how to do this with advanced custom fields And the reason is ACF is just great. It makes building these blocks really really easy and so fast So if you are interested in watching me build a block with ACF Then this is the video for you. Otherwise, let's jump into the actual building of our block now the first step to building this block using ACF of course is to go back into the plugins territory and We'll find that I have advanced custom fields pro already installed here and I'm going to activate it Let me say this you cannot build blocks with ACF if you do not have the pro version So please watch out for the version that you have if not You can actually go and purchase this for a very small price and you'll be able to use it and all the features that are involved Now we need to go into the custom fields area And this is just like what you have in the free version and we are going to create some field groups Now what we shall do here is we're going to set block I'll call this the travel itinerary block And that's the name of our block. This block is going to have a number of items So let me reduce this so that we can see the fields that we actually need So this is going to be dynamic. So we need a title for our one block. So we need to have the time or I'll say day stroke time and then this will be automatically filled if I don't have anything added here It would be a text and I'll add instruction and say insert for example day one Then I'll say this is required because we need to have it We don't have a placeholder, but I can also add a default value so that if someone forgets That can be added and then they will always be able to change that if they see that something is a mess So we have the day time already involved. I'll close that field. I'm going to add a new field and Inside here. I need to add an image. So I'll say image It will have a field of image and then that's where we shall add the image You can always just have either the image URL or we can add the image Arabic so that we can get all the information about the image itself So we can always get this and then I'll add a new field right here, but let me close this Now in this new field, I'm actually going to add a title of what we are having here. So I'll set title All the days activity or days activity title. So I'll cut this Make it easier to read Days activity title I'll leave that as that and remove this space and this underscore. This will be a text as well I would say it can either be required or not. I'll leave it as that I'll close this field and then we shall create a new field here. We're going to have the stuff like AM So we'll have the AM description It will be a text as well It will not be required because sometimes we have an AM or we don't have it So I'm going to close this and then I will duplicate it so that we can have a PM as well So we'll have PM description I'll change this to PM I'll leave this as a text and then close this field as well And then I'm going to open up an overnight That will be a text as well I'll close it Now the next important part that I need to do is this area with breakfast lunch and dinner So I can have different fields here showing me breakfast lunch dinner But I'm going to use a different field altogether. So I'm going to say Available service And I'm not just going to use a true false in this case I'm going to have something that's more like a group I can either use a group or I can use a repeater But for now I'm going to use a group and that's going to allow me to have another field group here So I'm adding a field which I'm going to say this is going to be breakfast Our available service of course will be required because we need someone to know so we'll have breakfast Which is going to be a true false So the default will always be false someone needs to just turn it on and Then I'll close this field I'll just duplicate it two times and then we can change this to lunch it will be true false and Then I'll have this as dinner And it will also be a true false. So I'll close these groups as well and Once I'm done with having this information that I need I Can go to the next part which tells me show this field if and this is the important part Where we describe our particular block? So if we go here and say choose post type pages user Forms and all of this you will see that we have an option here of saying block So when I choose the block, you will see that we don't have any blocks that are registered So for now, I'm just going to save this data and publish it here And then I'm going to first go and create my block. That's the next step that we need to do So I'll open up my editor here and I'm going to go into the plugins. I'll create a new folder Which I'm going to call travel dash block And inside here is where I'll have our travel block travel dash block dot php Now the reason I'm using a plugin is quite simple With plugins they handle how data is entered how it's stored And how we have it in different places so that in the event that we change our theme We still have our data available But if you put this block, which of course you can in your theme The theme is changed in the future and we lose the data we will be in trouble So that's why I choose a plugin right now to know that even if the theme is changed We'll still have this data showing up So I'm going to start off with my php right here And then I'll use my shortcode that will allow me to start the plugin And then I'll just add here the travel itinerary block And then I'll change this to my link that I'll have on github And of course my plugin author will be take your place And then I'll just say this is the travel block I'll add this here as well as the description and then I'll change this to gpl 2 And then of course I'll just copy this And use this as a prefix or the text domain for my particular plugin Of course, I'll add the simple security for my plugin as I always do And say We either check to see that this plugin was loaded correctly through wordpress in the right channels By using abs path Or we just tell the person who is trying to hack our system That they have no authorized Access And once we do that then we are ready to start registering our block So the process of developing the block is actually well documented on the scf website And we're going to open up the blocks page right here And in here We'll actually get some code samples and I'm just going to copy this code then I'll explain What's going on? So I'll paste this here And you're going to see that the first thing that happens is we have an action And this action looks for this hook that comes from the scf namespace And it says if scf has been initialized Then you run this function right here below So I'm just going to do a little bit of changes here on this word my And add techie press And then I'll change scf And I'll say travel travel its block And then I can just delete the rest of the parts that are here And this will give us a good function name so that we don't have any other places where this is clashing And the next thing we'll look at is that it checks for the function if The scf register block type function actually exists Now this function only exists in the scf pro version If you have the free version then this is not going to work at all You're just going to get a message telling you to either install scf pro or that you can use this plugin So after doing that we then register this method for this function And this function takes in an array of information And the first thing it does is that it takes in the name Our name is going to be the travel its block That will be the name And then I'm going to change the name here that we'll see I'll copy this And come back here and I'll change it as our title So that we'll see the block as that and then I'll also change this description add it here Add good information or traveler And then the next thing that I will do is we need to have this render template Right here, which is going to be a file that we shall add to our block And if you don't use this template, you can actually use something that's called a render callback So in here we can write render underscore callback And then I'll map this on to maybe an anonymous function So you can write a function here and then you can run this Instead of having the template. So for now, let me comment out my template and let's use a function right here So in this function, what I'll do is I'll say echo And here we're going to say our scf block. So I'll add an h3 I'm going to say close this h3 And inside here we'll say our travel Block and that will allow us to see our block before we start doing so many crazy things to it So I'm going to save this as that We'll say the category we want to have this is in the formatting or we can have it in the common Or we can have it in media and I'm not getting those ideas and words out of my head If I go back inside our let's say a post here and I open up this post And I try to add a block You'll see that we have these different categories. We have the texts which are the common We have the media. We have the design. We have the widgets We have the embeds And these are the categories that we can use embeds widgets design media and texts and for our particular block right here I actually want to send it inside the media right here Because it will have an image. It will have a couple of things on it So I'm going to come back here and I'll change this to media And then the icon that it's going to use is going to be the format gallery And I'm getting this from dash icons And after that the keywords that I want to use so that when someone comes in this space and types for gallery For example, you'll see this shows up. I want to be able for someone to write travel And then they'll be able to get that right here when they search. So I'm going to come back here. I'll say travel I'll add itinerary as a word as well travel itinerary And you can add any other thing or even say take your price So I'll add that And also here I'll save this So on saving this I'm going to go back to our plugin section first and foremost I'll go to plugins And inside here you're going to see that we have this block here. I'm going to click activate right here And after doing that I'm going to go back to posts right here I'll go to that post and when I come here And click this and then try to look for the media you will see we have there the travel itinerary block right here And if I click on it, you'll actually see that when it drops here, it echoes our particular text we added that says our travel block and that's using the render callback Here in this function. So I'm going to comment out this callback And allow us to use a template and see how that would look like So inside our plugin here I'm going to open up a new folder called template parts and it will be for the blocks right here So I'll copy this and let parts And this is not a must but it's a good design pattern I'm going to do the template parts because we can actually extend this and use themes to Influence the way our templates should actually look So inside here, I'm going to have our travel block So I'll add a new file and call it travel dash block dot php And the reason I do that is because we're actually going to have some html In here. So I'll say let's comment this and say layout of our travel Block and that's just a comment to remind us what this file is actually doing So I'll come back here. We're going to say travel and I'm going to say travel dash block If I use this, we shall actually have an issue because I have not properly linked this file to this render template In this particular area. I'm actually just going to say let's go and look for the plugin Directory and we want to get the path And I'm going to say look inside this file And after looking inside this file, let's appendage to these template parts But if you look at this file, it is actually inside this travel block So after getting to the travel block, we shall go into the template parts And then we shall get into that travel block. So this is going to work very well And inside here what I'm going to do is I'm going to echo and say new travel Block and that's what we shall do in this part And I realized I made a mistake right here by saying the plugin directory URL We actually need the path Because we need to embed an absolute path in this particular section. So I'll save this I'm going to go back I'll reload our browser here in our area for editing and then I'll go to this location And then when we see here, you'll see the travel block itinerary, which you can click to add here And you'll see that all our fields actually show up in this section So we can actually change the day one. We can add the days activity title We can see the am the pm the overnight And then we can check for the services we actually want to have Now these settings will affect this block once we add them to the block But I realize these are very small boxes to do their descriptions for my am pm and overnight So I am going to actually stretch those out Into a text area and then I'll move the available service Right under the days activity title So that we can be able to have that showing up before it's overshadowed By all these other parts. So let's go back into the fields group editor And then I'll move the services Just below days activity. I'll edit the am and change this into a text area I'll change the pm as well And then I'll change also the overnight into a text area So once I've done that I can then now come here and say updates So that when we come back to our block, let me just update this and reload our block here You will see that when I click on this travel block We have this information that can actually be set in this particular section Now that's one of the beautiful things about sef blocks Is that as you develop them and you do different things They don't break the way native blocks actually do because you're using javascript And because you've changed it and compiled it Things sort of break along the way so easily So that's one of the beautiful things of using sef Now I'm going to add day one here as information And then I'm going to copy a couple of things from this So activity we shall say this is going to be in tewe To Kampala and this is just a city to city move And then we shall say we'll provide you with lunch and dinner And then in the pm we'll say transfer from the airport to Kampala transfer from Ntewe To Kampala And then I'll add of course it's going to be one hour And then overnight I'll say Stay at the grand grand emperor hotel And that will be all the information that I need to add here So I'll click update for this and we'll stick with this Let's now add this information into our block right here So I'm going to go back to our editor. I'll come to our travel block here And we're going to realize that we did a couple of things to get our block moving So I'm going to minimize the area we have here I'll bring this in so that I can see what I am dealing with And then we're going to have a couple of things so In this little area we have a span That span will be the one that has the day one We're going to have our image And the image will actually have a source So I'll put source and have that here We're going to have a div With a class of Content info And then we're going to have this part where the services are so I'm going to display this And say this is going to be services info So services info And the one thing that I'm going to do is since this is this has a border I'm just going to wrap everything here in a div and then I'll call this the travel dash it block I'll press enter and then I'll run everything else inside this Because at some point we're going to have to write some css for this But we need to determine our html at this particular point So we have the span of day one. We have our image We have our Thieves. We have our services So after doing this we're going to go back into our documentation Of the sef blocks And you will see that they give you all this information that you can actually pick from here But I'm going to use it to get just a couple of things So I'll just copy from here to about the part where we get our information from the fields And I'm going to paste it here And I'll explain what's going on Now I'll remove this php line that is duplicate and allow us to have something that's usable And what I'm going to do now is explain to you what this first comment means And I'll do that by opening up my editor So when I come back to my editor, of course, I'm going to right click this block so that you can see the attributes We're going to talk about and when I go to its root You're going to see that it has a block id with this information. It has a class It has all this different information like the area level And all the data type and all this information that comes from boot and bug or the block editor itself And then you will see that we have the sef component and the sef body Now that's something introduced by our sef plugin And then we have the preview then we have our block here the html that we have written But all this information we don't see it and that information sef passes it to us using this block variable right here So let's get this variable and then we're going to dump it and see what exists inside it So I'll paste it in there and then I'm going to save this I'll reload what we have here And when you look at that you're going to see that we have all this information inside that array We have the name the title of the block the description the category Icons keywords the post type the render template the callback and all this information From this particular block So you can actually have all this information and dump it in your block if you need to use it But I just wanted to show you this so that you can understand what this comment is all about Then we have the content that's also exposed to us through the sef api We have the preview and then we can also get the post id of where this block is And I cannot think of any way to use this post id unless we wanted to get like the title of This page and then add it to our block for example You would say maybe echo and then you're going to get the title And then inside that you're going to pass this post id that sef is exposing to us And then add a semicolon. Let's save this come back here. Let's reload And then you'll be able to see the post or the name of this post right here So you can use that as part of your block But we don't need to use this information right now. So what I'm going to do is just remove all of this And then we can start building our block using what we really need I hope that gives a clear picture of the information that you have available coming from sef Which you can pass down into your block So the first thing that we do is that if we want our block to have an id For storage of information for styling we can do that So I'm going to change this and the class name as well. I'm going to change them to travel It's dash block And then of course it will have a dash and then it will add on the id of the block So if the id is actually empty, then we shall have something that's given by default To give us an id and then we shall have a class name that we're going to attach To our block. So we're going to have this travel it block as the class name of our block We'll actually get this class name And we're going to append a space to it and then we're going to append the class name from the block itself Now one of the things that you see as you use the blocks is that they have alignment We have left right center wide width and full width And those can actually be picked up and that's where we're using them in this section So we shall be able to get the alignment as well And then the next thing that we're going to do is that we start picking the fields that we registered In our block right here And then we're going to get them for the individual blocks to get this information right here So for my first field the name that I used here is called daytime So I'll come here and I will have My daytime is actually going to get the field Which is called daytime So I'll just rub all of this and say our field is called daytime So I'll duplicate this line so that we can get all the other fields that have been assigned and also store them inside their own variables I'll copy this as well image Go back and add it here And then I'm going to come back and get the days activity as well Store it in a variable And then I'll get the service which is a group and you'll see how we shall handle that So let's first get it in here And then we're going to get the m description, which is a text area Then I'll get the p.m. Description as well And then I'll get the overnight information also and we'll dump it where it needs to be so We have the overnight we have it here. So let me just clean this out so that I have something easier to read I'll just add spaces which don't affect the language at all Nothing happens. This just makes it easier for me to read and a little bit easier on the eye for you as well So now I'm going to escape php So now we're going to change this class Into something that's dynamic We also are going to add an id That's also going to be dynamic And I'm just going to pick the id from here and the class name from here as well So I'll come down here I'll open up my php tags And then I'm going to say echo And I'll use the wordpress escape attribute, which is basically a function That helps you clean up texts and strings And then gives you something without things that can be pushed into your database Or to your user and they are harmful So I'm going to also escape here and I'll say add the class name as well Now the next thing we need to do is add the daytime So I'll copy this as well Change it here. And then I'll pass in the daytime, which is a text And then for our image here, I'm going to do something that's a little bit different. I'm going to copy this I'll comment out this image and I'm going to dump what we get from our image. So I'll copy this dump Change this and this is not going to be a string It's actually going to be a blast of information that will be dumped on the front end So we'll push this down there and then I'm going to get the days activity pass it here in the content So this is going to be something that's a little bit different So we'll get the days activity ampm and overnight. So I'll just copy those I'm going to drop them here I'm going to choose this information here. I'll paste it before the title And then I'll close off the php as well After the title Now this allows me to actually wrap this in a paragraph if I need to Or in any other kind of markup So I'll duplicate this over so that we can have The aim description as well here Can have the pm here And then the overnight as well here And then the only thing that's left is for the available service which we're going to add in our services info So I'll copy this right here I'll paste it in here and then I'm going to get available service And then I'll just echo it out because it's going to be an array of information I'll echo it out that way. So let me remove this And then I'll change this to print r Because it's an array It's not a string We don't want to have any kinds of issues. So I'll print r that And then I'm also going to print r Our image as well I'll save this Let's go back Let's look in our post. We're going to reload it And you're going to see our information is actually showing up here Based on what we have here. So if I change this to two You will see that it automatically changes to two here If I had another block And say let me add another travel Itinerary you will see that we have this block here And then I'm going to change this to three If I choose to say let's let's have the dinner breakfast and everything You'll see that our array shows each one of those with a one right here The only thing that we are not seeing is the image And we don't have an image here because we've not actually loaded one. So I'll click add image I'm going to just drag and drop something And you see that when I select this And on adding that image, you will see that we actually have an array of data Showing up here. It gives us the title It gives us the file name the size The link which is the url we get the author We get all different kinds of information on this And that's information we can actually throw in our html and have it working very well So in here, I'm going to get the url I'm also going to get the title and I'll pass the title for our SEO Or I can actually use the alt tag from here I'm going to get the alt tag. I'm going to get the url Come back here. I'll undo this. So I'm going to copy this echo from here Put it in our source here and say we want to get the image And on the image we actually want to get the url And then I'm going to copy this as well. I'll come here at the alt tag I'm going to change this to the alt And then we don't need a source set right now But the source set is actually available Right here And if you want to get something that's close to what we'll have in WordPress You can actually just ignore this You'll open up your php in here And then you'll say echo wp get attachment And then you'll say attachment image And inside here you need to pass the attachment id Which you can actually get from the image id so copy Press the id in here And then you'll add a comma And then you'll add the size of the image you want so you can say full And that is all you need to have here I'll comment out the print r because we don't need it anymore I'm going to reload here and you will see that we have our image showing up here And also on our side here, you're going to see that we actually see our image right here And if I want, I can actually remove this Which I'll add And you'll see that this image is actually showing up here The only thing that we are left with in all of this is actually just to style up our code So I'm going to go back to my editor. I'll reduce this a bit So that I can see what's going on And inside here I'm going to create a new folder which I'll call assets And inside assets I'm going to have a new folder which I'll call CSS I'll have a new file inside that CSS called style.css Now the reason I'm going to have one style sheet for both of these because you can differ Whether you want something to only be on the front end on the back end But I'm going to have one CSS file to make this look like what we want to have on the front end And it will be the something that we have on the back end So once we have this style sheet, we just need to hook it inside our block right here In order to add our CSS file to our PHP right here We're actually going to use something called enqueue Assets in q underscore assets and that uses a function in here And in here you can actually add all your CSS or your JavaScript It doesn't matter which JavaScript you're using or CSS It could be from a pre-built service Maybe you're trying to build a block that has graphs and so on and this beautiful script you saw You can import that and make sure that you have the right html structure To help you to unpack that inside your block So inside here, I'm going to do a wp enqueue Enqueue and I want to enqueue style in here and it expects a handle Which is going to be our It's going to be travel it block And then the next thing we shall do is we need to add the particular File where this plugin is actually set. So I'm going to do something similar and say plugin underscore directory underscore url And that's going to allow us to use the file constant And that of course will give us the location of this file via url And we just need to go next to the assets. So this will be in assets And then I'm going to put css then I'll add style dot css And once we do that I need to add a semicolon at the end here so that I don't have the errors showing up We can add the dependencies if we have any dependencies We can add whether this has a version and we can say maybe this is version one to match our plugin version So here it expects to have the different media types. So I can say all Or I can say tablet or desktop Or media or whatever, but I'm going to choose for all because that's what I want to have I'm going to right click on this block and inspect it And you're going to see that we have the id here and then we have travel it block And that's what we're going to use to style in here. So I'll say by looking for the class travel dash it dash block And then I'm going to give this a border of two pixels Solid And I'm going to say it's going to be a lime green I'll save this Let's go back and see whether this is actually applying. So I'm reload here We'll see that we have our lime green here And that means we can add all the other missing styles to make this work out So the next thing that I'm going to do is just have this here I'll reduce this portion So that I can clearly see what I'm styling And have something that is more complete in a look I'm going to take a mental picture of what I have here I'm going to just roll this down a little bit So that I can be able to follow through as I see what I'm doing here as well So I'll I'll also go ahead and minimize this So that I have my block fully showing up here And then I'll drag this up so that I maximize the size of my screen To see my block To see my sketch and also to see my code So let's kick this off number one this green that we have here that's lime Is not the best. So we're going to have a green here. So I'll change this to green number one Then number two, we're going to have about four different sections So we have section one with our day Section two with the image three with all this code and finally four With our breakfast lunch and dinner showing up right here Now, all I need to do is use grid and I'm going to say display Greed To have that and then I would use our grid template columns And in this space, I'm going to have something that's a little bit different So the first thing that I'll do is I'll say let this be 20 pixels For the first section the next section will be 200 pixels for our image Then we're going to have one effort to get all the remaining space For this middle section and then finally we're going to select this big auto So that this auto sizes itself And if I save that come back here and reload You will see that we are now starting to have something as close as to what we have here But of course it still has its issues So let's start off with the day item And you realize that these spaces are all collapsing inside each other. They are squeezed tightly So I'm going to have what we call a grid gap of about 20 pixels To make that better. So if I reload this here, you'll see that the space that we have here is actually much better than what we had before So that's starting to look nice as we want it to So the next thing we're going to do is work with this day item And I'm going to just go back here and look at the html And you're going to see that we have this div here and we have this span I'm going to attach a class to this span and I'll call it day Just to be very very particular about my css that it's going on into this block I'll add it here and I'll say let's go for that day And then we're going to style that span In fact, we can even just say here span just to be so clear this span needs some Border radius it needs some background and the change in color So that it looks like what we have here We're going to give it a display of inline block Because a span by default has only inline for display. That means you cannot give it a height You cannot give it the different properties that you would give to a div So declaring it to be inline block will allow us to treat it like it's a div So after doing that, I'm going to say we need to text align and say that would be center And the next thing we're going to do is give this a padding of about 12 pixels On all sides and then the next thing we'll do is we'll give this a background And the color will be a green just to match what we have here And after doing that, we need to give it a color for the text and say let this be white After giving it a white color for text The next thing we'll do here is I'm going to give it a height of 60 pixels And then I'll give it a width of 60 pixels similarly And the reason I'm trying to do that is just to get a square So let me just serve this and we preview what we've so far done And you'll see we have this square here with the text and that is showing up nicely So all I need to do right now is actually say let's give this a border radius Of a hundred percent And that will make it look like a circle so in reload It will now look like a circle which is neatly done So the next thing we'll do is just say let this come off the top So we're going to give it a margin dash top And we're going to give it something of 40 pixels Then I'm going to say let's give this a margin left Because we want to transfer it a little bit to the left. We're going to give it a minus 50 And I'll actually make it minus 60 so that it balances out in the middle Right on this border like what we have here. So let me save this and reload And we've gone off a little bit. We've gone way way way off So I'll change this to minus 30 So that we are not taking it. We just want to meet it halfway And voila very nicely done 30 is 50 percent Of this particular diameter. So we're doing that properly I'm just going to increase this to 70 Because I want to have that word all in one line So I'll do this and reload And maybe I'll just add a padding top to that particular place So I'll copy this Make sure everything else is 12 18 pixels And I think we now have it where we want it to be It's in the right place So we have this the way we want it to look like for now And now I'm going to focus on this particular image So I'll come back to our html. Have a look at it And I see we have so many things that are locked in here So I'll remove all those things that have been commented out like this print R I'm going to give this its own container And I was I'm going to call this div with image And then I'll push this PHP inside here And then I can go to my styles and actually add it here So I'll copy this travel it right here It block And then I'll say if we go to a div with img as a class We can actually give this a display of block And then after doing that we can give it a width of 200 pixels And also a height of 200 pixels to be very exact And then we can just say if we have any overflow we can hide it And after doing that we now want to style this image so that it's square in nature So to do that I need to just duplicate this right here And so we're going to target the image that's inside this class So this image will get the display block of this We'll give it the height and the width And right here we're going to select this have an object fit And we're going to let it cover and I'll save this I'll come back here and reload And you'll see that our image gets this square feel right here So we're having that square and it's as neat as we wanted it to be So the next thing that I need to work on But we see that our space is sort of disappearing here Because our little span right here is actually going off the center So I'm just going to go back to span day and then I'm going to look for a margin left I'll give this a 35 because that's half And then this can still be 30. I think we changed we changed the wrong value. So I'll reload this Yeah, it's now more center and giving the space off here I think we can now increase our grid gap and say let this be 30 And then tweak it and that's the thing about CSS You can never get it right the first time So you sometimes have to keep on trying over and over and over again until you get it right So I think we are now at a place where we are happier So the next thing that I will do is go to this content info And I'm going to just copy this I'll come back here duplicate this And then I just want to get a few things off here So content info and with the content info, I think everything looks almost just about right Apart from the font weight font dash weight And I'm going to go for something like 100 because it's very light in nature I'll save that Now if you look here, you realize that we don't have the am we don't have the pm We don't have the night and overnight showing up here So we need to fix that So I'm going to come back here and I'm going to add some little content here The first thing is the title The next thing is the am then we have the pm then we have the overnight here So I need to just wrap this with a strong tag I'll close the strong tag And we just need to get this and duplicate it over in the different places So I'll paste it here and here and then we change this to pm I'll change this to overnight Save this And then if we come back here and reload You'll see that we have that thin font lettering And we have our am and pm just showing up nicely here So I can just give this a little bit of space And that will be as good as we want it to be Now I'm going to focus on this area now where we have the breakfast, lunch and dinner And that's sort of the part that is a little bit tricky I'm going to first style it with this default html that's there And after doing that, then I'll introduce our dynamic content coming from our block So number one, this span can have a class Of unavailable and then these others can have a class of available Because we see them when they are green right here means they're available If they're unavailable, then it's gray So I'm going to remove this and just leave this for now And then I'm going to come back to my style and I'm going to get the services Info so I'll copy this come back here Duplicate this of course change this to services info Remove the extra space right here I'll move this a little bit up so that I have all this space to work with So the first thing that I will do here is I'm going to change the font size And I'll say let this be about 0.85 ram Save that and then I'll give this a margin of 00 and I'll give this 10 pixels at the bottom Then I'll have another zero just to control what we have here for the paragraphs So I'll reload this and you'll see that this is a little bit thinner as we have here And that is brilliant. That's doing it very well. Now I can also add a border Border dash left and I can say let's have the same border Like what we had here so solid Two pixels and it's going to be green. So I'll save this and then come back and reload And you'll see that it starts all the way from up, but it never gets down here Which is a bit of a pain. We need to find out why that is So I'm going to click on this to inspect I'll drag this a little bit up And when we look at services info, we actually find that there's a little bit Of margin up here, which we want to remove So this margin is doing us the disservice. So I'll just make this zero all through So when we save and come back here and reload You'll see that it's actually doing so well It's exactly as we pictured it So I just need to do a couple of things like give this a padding in here And say let's give this a padding of 20 pixels I'll just look at what we have here in the grid. I'll say 30. Let's give it a 30 and save come back and reload And this is looking nice apart from this going from the top I'll say it's zero while the rest are 30. I'll come back here and reload And you will see that we have that nice 30 all across the board Which is looking nice. This is really what we wanted Now I'm going to work with these little Buttons Or what you see as balls here now in our html We've just made them spans with a class of unavailable in the class of available Which is actually just sufficient So we're going to play around with some grid css grid to make sure that they are all in line just like these words are in line And then everything else will be sweet and looking good So now that we know that there are paragraphs in here What I'm going to do is just duplicate this And then go for the paragraph here And then I will say we need to display this as grid And after doing that I'm going to say let's use the grid template columns And the template columns we want to have we want to say the words Can always take up as much space as they want and for the little balls we'll say let them auto generate their own size So we will not see anything here for now But let's go ahead and work on those spans So I'll just duplicate this again We have a span that comes after the paragraph So I can actually make them immediate children or immediate descendants And then after doing that I'm going to say it needs a width of eight pixels We'll also duplicate this and make a height of eight pixels That is the size of the span we want Now remember that our span actually has a display of inline So we're going to say let that be display of flex And the reason we choose flex is that we want to use the align self And say center So we want to make sure that everything in here is actually centered Now the next thing that we shall do is we're going to give this a background And the background is going to be a light gray So I'll save this let's come back here and reload see what we have You will see that we now have a little box And with that box we can actually say we need to give it a border Radius of a hundred percent If we save this and come back and see what happens You'll see that now they become little circles Now I just need to push them off the words because I don't want them to be so close and I'll say margin dash left For now, let's say it's 20 pixels just to push them away On reload you'll see that we have That and it's getting there. It's almost what we want it to be You realize that there's a little bit of a border right here So I'm going to give this item a border of two pixels I'll say that's going to be solid And I'll say that needs to actually be transparent And the reason I'm saying transparent is because we have this little bit of like white color in between After the circle So we need to give this that border of two pixels and allow it to just go off Now we're going to use some pseudo elements With this to make this come off and get this extra border of this green So the first thing that I will do here is I'll say that this has a position of relative And why that has relative is because I'm now going to have something That is positioned absolutely So I'll remove this and I'll say the next item is going to be be absolutely positioned and that is going to be the after And we're going to give it a content And the content is actually going to be a space Because we want to give it that and the next thing we want to do is want to give this a border of two pixels Solid and it's going to be green I'm going to save this for now. Let's see what happens You see that we have that green that is square in here But we need to take it off and pull it all the way out So I'm going to actually have Some top left and bottom. So I'll have top Now say let's pull this eight pixels Away, we're going to do the same thing for left right and bottom So let me duplicate this and then just change these properties So we have top left top right left and then we need to have bottom as well So if I save this and then come and reload You will see that now we have that square box that has been pulled away and pulled out And then the only thing we need to do here is just come and say we need to have a border radius of a hundred percent So after our border here, I'll say border radius a hundred percent reload this And then you will see that we have that nice curve showing up on our little button You can say we are almost getting there. So I'll just reduce these border radius or border redeye whatever the plural is I'm going to reduce them To one so that we can have something thin Like what we have in our design and that's looking Much much better And I realize that I pulled this off a little bit too far So let me adjust this to about six pixels When I save this and reload You're going to have it Perfect just perfect. Now. There's only one thing left to do. I need to change So that when we have available as the option This is green. So I'm going to come to the span here and then I'll say We'll get the span and we shall add a class available to it And all we want to do is just say let the background like we give this background here of gray Let's have a background of green. That's the only thing that's going to change So I can take away all these other rules Even this border radius and just have green in there so that when we reload We actually have the greens showing up right Like what we have here So we are at that place where we feel comfortable with the design of our block I now need to just make a few things that are dynamic So that when we don't have am we don't have am showing up here When we do have it then we can have the pm we can have the overnight showing up And then I need to also do some dynamic content To show these pieces of icons When we have available so we just add a class of available and then that will become green on its own I'm going to leave the css file and I'll focus on the php right here So in order to make sure that the am is only showing if it is available and it's filled We have to run some php. So I'm going to open up some php tags here And then I'll add php And then I'm also going to run some tags down here Because at the end of the day we're going to be putting an if statement for this code So I'm going to say right here in my php if Our condition that we set is met Then let's run this and then we shall close off to stop that if statement from running And the condition we are looking for is if this am is actually not empty So I'll say not empty And I'll open our brackets and say if the am is not empty Then we should run this code or if there's something else Then we shouldn't run that code. So I'll save that I'll come back here and reload And you see we don't have the am showing up here. So basically we're just going to do the same thing for all the other pieces So I'll just duplicate this And we're going to get the pm description and just change it in this location and here I'll change this to pm So that that is exactly what we have here And then I'll duplicate this as well for overnight And say let's get our overnight key showing up here Get this overnight showing up in this location and this location Then I'll remove this You don't need it and then I can do the same thing also for our activity title So that it doesn't feel left out or we don't make a mistake So I'll cut this remove these paragraphs And then I'll just paste it here To say if our our title is actually available Then we should echo this out. So and save that let's go and see that we don't have any errors Apart from the paragraph tags that we took away. So I need to add this back a reload And then we have that neat and clean as we had before So the content info is done. It's dynamic This is done. It's dynamic. This is done. It's dynamic Now the only thing we are left to do is actually have this breakfast So we are going to use the same idea that we have here And we're going to paste it down here And In this case, we're going to do something different. I'm going to uncomment this out So that you see what we get for available service And I'm going to reload and you'll see that we get an array with the breakfast and the lunch And whenever that is available, we have a one right here So it's sort of saying it's true. So we're going to say we're going to look for available service and on that array, we're going to look for the breakfast item inside That array and we're going to say if the available breakfast service Is actually equal to one. So we'll say equal to one I'm going to just remove this and just keep on writing the php In this space so that we have it running as one variable So I'll say the class if our service breakfast is equal to one Then our class that we're going to set is actually going to equal to available So I'll copy this and I'll say the class will equal to available If it is not else The class is actually going to equal to and available. So I duplicate this Move this down and say it will be and available And then I add semicolons to this Now this is a bit lengthy and we can actually make it into something that's short And the way we do that is we just get we're going to get this and say if our breakfast is equal to one Then we're going to say the class is equal to available So I'll copy this and say is equal to available Else the class is going to equal to And available right here After doing that the only thing we need to do is actually come in here and write some php and say php and we're going to echo And the one thing we want to do here is we want to get the class And I'll put a semicolon and save this so if we come back here I'm going to just comment how to the sprint are Just so that we don't see it anymore. I'll save this I'll come back here and reload And you're going to see the breakfast is actually unavailable So I'll just inspect this to make sure if I go in this paragraph you're going to see it's unavailable because We actually don't have that on our block So I'll open this up and you will see that our service is not ticked if we tick it Then it becomes green if we uncheck it then it becomes gray So it's working exactly as we wanted it to be So I'm going to do the same thing for all the other pieces So I'm going to make this rule Work out the same for all the other pieces. So I'm going to remove this shorthand because we don't need it So the only thing now I can do is just say breakfast lunch. So big class big class And then big class here and then I'll differentiate this by duplicating it here And I will say lunch in this case And I need to make this l class l class And then I'll copy this right here Rest it in this location And then I'll say l class Just to check for our lunch I'll come back here and reload And you'll see that works out. Well, if I click on this block Go and change the lunch that also ticks it off Ticket that makes it available. So we just need to do the same thing here I know this is not the most optimum of ways, but it makes it very easy to do Then after making sure that our concept is right or is working well Then we can optimize the way we've made it to work So let's first find our dinner I'll save this. We have the d class there. I'll remove this because we don't need it anymore And then I'm going to come back here and reload You will see that our breakfast is not available Tick lunch off Lunch is not there Dinner is not there. Dinner is on breakfast is on Lunch is on that's all okay. If I go and add another block right here It will also have its own settings. I can say lunch is available And you'll see that's working the way it should be And you'll see that we don't have any statements here because we have not added Any of those statements in these other locations So this block is working very very well as we expected it to be And you can see this will save me from making so many post types And just allow me to have let's say my safari and I'm having the different itineraries and I'm just putting This as blocks If I update this service go and view my front end And I'll open it up in a new page And when it loads you'll actually see that we have our block working here But I need to just fix a couple of things because this particular theme Is interacting with this and changing it So let me try a different default theme just to show you That the theme is the one that usually affects all those things If I add the 2021 and then come here and reload this You'll see that themes in particular ways interact with all our code differently So I might have to do just a couple of touches To make sure that everything is actually working the way it should be Now Gutenberg or the block editor is not yet the perfect what you see is what you get kind of editor And that's why we have a mismatch with what we have on the front end here And what we have in the back end So even if I try to change this to a line center a line Left and so on I'll get something different from here with what I see on the front end So that's why usually you have two different style sheets to do something from the back end And what you get on the front end But in this particular case you just need to fix what's on the front end because the back end is really not What your customers end up seeing Now Finally I want to share something with you about scf Now if we happened to go to our fields I'm going to leave this page and I'll go to the custom fields here If someone actually went to the edit here, let's say they were an administrator And they happened to turn this off and say update Let's say they deactivate this If you actually went and try to add a new block here You're going to realize that you don't have those settings showing up here Now scf allows you to have these particular Settings in your php and how do we do that? So before we deactivate this I'm going to activate it once again I'm going to go to the tools here And in the tools I can select the block I want and I'll say generate php And that will give us this php, which we can actually copy Then go back to our code inside our block here And we're going to say we want to actually have this code Running down here So I can paste it here And then I can say I need this code to run So I'm going to have another action hook that's going to run this code So I can actually just let this be in a function Which I'm going to call I'll copy what we have here take a press scf block So function that and I'm going to say settings At the end and I'll add this as a function of its own I'm going to just Get all of this tab this inside And then I'll close off that function the code is still here. I just wrapped it with my editor So we have this so I'm going to just copy this name of this function Come back here. I'll create a new hook called init And then I'll pass these settings here Now the only thing that I can do differently is I can set this with a higher priority of nine And then select those settings coming at 10 So we register the block first then we get the settings coming in. So I'll save this I'm going to come back here and go back to the fields I'll edit the fields And I'm going to disable them and I'll hit update here And you realize if I reload this page And then I select any of these these settings are here if I choose to add a new block You'll see that these settings are also here. So this is the best way to protect yourself by having this in php You can actually even download these settings and save them in a file somewhere else So if you go to tools you can just select this And then you export the file and save that json so that in any other time you can actually import it Through this browse here So that's how you can transfer your block settings from one side to another Or you can save yourself the pain of someone having deactivated the field groups Or deleted them and yet you have those blocks running on the website So you can protect yourself by having that code down here If you enjoyed this video, don't forget to give it a thumbs up if you learned something new Or you want to learn something new don't forget to leave me a comment down below Share this video with your friends with your other developers Let them know what's happening here. Otherwise, enjoy whatever you're building and don't stop building good stuff