2.1 Gutenberg Pricing Table Block

Hello, and welcome to the first lesson of this course where we'll build a custom Gutenberg block for a pricing table. Now, before we begin, I'd just like to mention something really quick. The way, or the method of creating these custom Gutenberg blocks has been documented already by me in a separate tutorial. So make sure you go ahead and check that out first, you'll find a link in the lesson notes. And right here, I'm just gonna power through it, really. I won't spend too much time explaining how to install a certain plugin or how to use it. Go ahead and watch that tutorial first. It's a great introductory video to what we're gonna do here today. Instead, what I'm gonna focus on is the thinking behind getting one of these larger patterns, one of these more complex components, from a design standpoint to a working Gutenberg block. So what I have here is a fresh installation of WordPress, and I have the design files made in Figma. And this is the pricing table that we're going to build. We have the desktop version here. And here is a quick look of how it's going to look like on mobile screens. Now, let me just start by saying the following. What you see here is not necessarily how the final product will look like when it's installed in WordPress. Because as you know, the way a component looks like in WordPress depends on the theme that you're using. So obviously, the font that I used here will be overwritten by the font that's used in the WordPress theme that's installed and activated. We could override it, but if you think about it, when you're creating one of these custom blocks, you're creating it for your own theme, right? So it's gonna be designed in such a way that it blends nicely with that theme. So do not expect pixel perfect rendering of what you see here. We'll try and get as close as possible. But I think the main idea of this course is the mechanism behind creating one of these larger blocks, or more complex blocks. Because, as I was saying in the introduction video, WordPress already comes out of the box with some of these Gutenberg blocks that you can use right away. But they're very simple ones, right? We're talking a heading, a button, a list or something like that. But you don't get a pricing table out of the box, right? You need to create that yourself. And it's a pretty complex component. It has a lot of fields that we need to think about. So I'm gonna focus on explaining the process of getting there as best as I can. And not necessarily focus on reproducing this design exactly in WordPress. Because, as I was saying, how it looks like in the end depends a lot on the theme you're using. So enough talking, let's go into WordPress and install the necessary plugins that we need. We're gonna use a plugin that's called Block Lab. It's a free plugin. And it works with the current version of WordPress, which is 5.2.3, I believe, at the time of this recording. Let's go ahead and activate it. All right, and now, we'll go to the plugin, we'll go to All Blocks. Let's delete this example block. We're gonna add a new block. We're gonna call it Custom Pricing Table. We're not gonna bother with the icon here. But on Keywords I'm gonna choose Custom and maybe Tuts, just so we can find it, okay? So we're gonna publish that. Next thing we gotta do is create a block template. We need to open up a finder window. Go to the WordPress installation under WP > Themes. Our currently active theme which is 2019. And in here, I'm gonna create a new folder called Blocks. And I'm gonna drag that in a code editor. All right, now, in here, I'm gonna create a new file that is called blogcustompricingtable dot php. Of course, because this is a php file. And we're also going to create some CSS for this. So we're gonna create a file with the same name, but with the extension of CSS. All right, so let's see what we have here. We have a collection of three plans, basically. And each plan has a title, description, price, features, and a call to action. One of the plans will have a highlight to it. It's gonna be a little bit bigger, and it's also gonna have this badge. And we're gonna make this also controllable from the backend. So in terms of fields, we actually need to create a field for each one of these elements. For tile one, description one, price one, and so on and so forth. So let's go ahead and do that right now. Let's do a refresh, actually. Okay, now, our block template has been recognized, so we can go ahead and start adding fields. So for fields, we're gonna have plan one title. That's gonna be a text field. Next, it's gonna have plan one description. This will be slightly bigger. Let's use a text area. Or no, actually, we'll keep this as text. Let's add a plan one price. This is also gonna be text. Next is going to be plan one features. Let's use a text area. And by features, I mean these elements right here. And then, let's add a plan one color. Because, notice, in our design file, we have a distinct color for each plan. That's reflected in the title, and also the call to action. So let's do that. And then, let's create the second and the third set of fields for plan two and plan three respectively. All right, now, for the colors. Actually, let's choose the color type control. And let's do the same for the other ones. All right, now, apart from these, we need two extra fields. One is going to be for the text inside this badge, and the other one is gonna be for which of the plans is going to be highlighted. Let's add a new field. We're gonna call this highlighted plan text, it's gonna be a simple text control. And finally, highlighted plan. This will be a select, because we need to choose to which plan we're gonna apply the highlight. Number one, number two number three. Obviously, if you're going to build a pricing table with more than three plans or with less than three plans, you would also have to adjust how many fields you're gonna put in here. But for me, it's three plans, so I'm gonna have three entries here. And I have a set of fields for each of the three plans, Title, Description, Price, Features, and Color. All right, so with these done, let's go ahead and hit Update. And now our block is ready to be used. So let's actually create some new pages, let's put a title, Pricing table page. Let's add a new block, and there it is, our newly created custom Gutenberg block, custom pricing table, click that. And just like that, we have all the fields we need. So, right now what I'm gonna do is, fill in these fields with information I'm taking from my design here. When I get to the color, I'm simply going to reference this color right here. And I'm gonna paste the code in here, and we're good to go. Let's do the same for number two, we have business, let's copy this. And price is $19, features. Let's do that, and plan two color, paste it in here. And for title, we have corporate, the price is what 59. Features, for features, actually, made a mistake here, it's supposed to be a text area, not a text field, but we'll fix that, no problem. Let's grab this color. Okay, highlighted plain text, its most popular and highlighted plan is number two, all right. So, let's publish that page, let's open it. And right now, we can't see anything, because we haven't defined anything here, right, it's blank. If I type something in the PHP file, and I refresh, it's gonna show me that content. But we gonna use special functions that will allow us to retrieve the information that we entered right here. Okay, so let's quickly edit this block. What was it, plan three features. Plan three features, okay, let's edit this and transform it to a text area. Hit update. Okay, let's do a refresh, and now, this is a proper text area. All right, cool. Now, let's go ahead and write the necessary code in here, to be able to display this properly. We're gonna start with a div with a class of pricing table, this will help us style this properly. And let's do some PHP tags. So, what do we have here basically is three pretty much identical elements. So we're gonna do a for loop from one to three, and we're gonna display one of these on each loop iteration. So I'm gonna say for, let's define an i variable equals to 1. This is for equal to 3, i plus plus, we're gonna do the following, if block value highlighted plan is gonna be equal to y, then. So what's the logic here? If, for example, I go in here and I select my highlighted plan as two, and my for iteration is at two, then I need to write some special HTML, like add a special class and add that badge that you see here. Otherwise, I'm gonna write just plain HTML. So we're gonna do an echo, and we'll start with a div class. I'll call this plan and also highlight it, and also we're gonna echo a span with the class of badge. And inside that span, we're gonna use, Block value highlighted plan text, so we're gonna do a bit of a string concatenation here. So just a quick recap. Block value is a function that retrieves the value of a specific field that we define here, for example, corporate. We also have another class, which we're gonna use later, it's called block field that retrieves the value, but also prints it. Right now, I'm using echo, which prints to the screen. So if I were to use block field, this value will be printed twice. Obviously, that's something that we do not want. So in the case that the cursor for the for statement doesn't match, what I have selected here, we're gonna write a simple HTML here. So without the highlighted class and without the batch. Now once we got everything started, we can go ahead and write some HTML for the rest of the elements. For now, I'm going to close this PHP loop because I'm gonna write some HTML. So for the actual HTML, let's start with maybe an H1, an H2, and H3, and then this will just be a collection of paragraphs. And finally, here, we're gonna have an anchor tag with a classic button. We'll just do H1, I'm gonna do a style color, I'm gonna retrieve the color that we set in the block. So for that, I'm gonna introduce a PHP tag. And I'm gonna say, block field plan dash. So we're trying to retrieve, this one basically, plan one color. But because we're working in a loop, we need to replace the one with the cursor i. So, we're gonna say, plan i, Color, okay, so we're gonna close the PHP there. And then inside, we need to a load the plan type. So we're gonna do again, PHP block field plan one title. That should do it. Now let's do an H2, and here we're gonna have the description, and let's do an H3, and here we're gonna have the price. Then we're gonna display. The features. And finally, we'll create a HRE, we'll lead to nothing for now. We'll add a class of btn, which we'll style in just a little bit. And, let's see, we’ll need to match the color of the title, right, so the button has the same color as the title, so we need to load plan one color. So, style, we're gonna say, background color, PHP block field plan, one color. And the text here will be, Start now. And finally, we'll end this with a div, and this is the ending div for this div class plan, or div class plan highlighted. And actually, this should be inside the for statement, so. I made a little mistake here. All right, that should do it, so basically, all of this is placed inside, or excuse me, all of this is placed inside a for statement, okay? And this bracket here is the closing bracket for this one. All right, so we should be good to go, let's go back here and do a quick refresh, all right, so we have the title, description, price, features button. And then, this is the highlighted plan, so we have most popular, business, title, description, price, and so on and so forth. And everything seems to be working properly, now the last thing that we need to do is, write some CSS to style everything properly. Now I'm gonna make this a little bit easier, and I'm gonna show you the resulting CSS. Because this is a short course, really, I don't wanna focus too much on writing some CSS, when the course is really about creating Gutenberg blocks, right? So, I'm just gonna glance through the CSS, and I'll show you the important bits. So first of all, let's do a refresh, and this is what we have. As I was saying, we're close to our original design, but we're not quite there yet, because the fonts, first of all, are not the proper ones. But, as I was saying, if you want, just go ahead and overwrite these, although a component like this should be properly integrated with your theme. So, right now we're seeing the mobile version, because I have a, rather large, minimum width set here, but let's set this to 1500 pixels. This is not displayed full size, because of the way the theme is designed. The actual content is in probably something like this, right here is an empty space for a sidebar or something. Basically, I'm just setting some default font sizes width to the pricing table on each plan, which is one of these three, I’m setting a border radius and padding a box shadow, to give it that nice shadow on the outside. And then on the highlight, I’m just playing around with the padding top, right, adding a little bit more space at the top, and also, I'm setting a z index of two, as opposed to one on the other ones, just to put it on the top. Then I'm just defining styles for H1, H2 and H3, here I'm overwriting some styles from WordPress, because WordPress by default, we'll basically add these pseudo elements to headings, but I don't want those. And on the button itself, well, I'm just setting some padding with making it round like a pill. And also just adding some very simple transform scale transitions, for the badge and positioning this absolutely, on the top and in the middle. And then I just wrote this simple media query, that basically tells me that, hey, when you have at least 1600 pixels to work with, use flexbox on the pricing table, to display these, like this instead of stacked, and Jen, and then I'm just aligning them vertically and horizontally in the available space. And here, I'm actually setting a width for each one, and I am overlapping them by setting a negative left margin of -1.5 rems on each plan. And because we have that z-index set up here, they are overlapping nicely. Now, you might play around with this, again, depending on the theme, if you have a lot more space to work with, then these will stretch nicely, and you'll be able to see the entire content. If you want, I have links to both the design files, and to an HTML version of these components on Codepen, and they are all linked in the lesson notes. So, make sure you check that out. But, yeah, our block is now complete. If we want, now, we can go back to our page, we can see a preview of it here. Of course, the preview here will look a little bit different than the end result, but it's pretty close. And if we want, we can always go in and, for example, change this color here. Maybe I want the first plan to be highlighted, maybe I want to change the highlight text to something else. This is the power of Gutenberg Blocks. You can just update them from here, and you will see those changes reflected on the front end. So, that's it for this first block. This was a quite a lengthy lesson, but we had the HTML and the fields, and all of that. That was a lot to do, so that's why it took a little bit longer. The other two components are a little bit simple, so they're not gonna take up too much of your time. Now, speaking of the other components, let's move on to number two, which is a tabbed, or a component for tabbed content. That's coming up in the next lesson.