Custom WordPress Blocks with Pinegrow Web Editor

In this video, I’m going to show you how we create completely custom WordPress blocks using the Pinegrow Web Editor. These blocks do not rely on 3rd party plugins or add-ons and can be easily modified using any standard text editor.

Outline:

00:00 Creating Custom WordPress Blocks with Pinegrow Intro
00:40 What we’re building
02:00 Pinegrow overview & pricing
02:20 Pinegrow pricing
03:51 Pinegrow WordPress Module
04:18 Demo content & interface overview
11:52 Configuring the WordPress module and environment
17:15 Creating a custom Hero Block
21:15 Adding controls and properties to the Hero Block
31:43 A look at the WordPress block source files
34:35 Creating a Blog Post Grid Block
46:35 Packaging your custom blocks
47:05 Comparison with commercial blocks
48:01 Outro

Links:

Our Agency: Peak Performance Digital: https://peakperformancedigital.com/
Pinegrow Web Editor: https://pinegrow.com/

Transcript:

If you’re anything like me, you’re concerned about relying on a mixture of third-party themes, plugins, blocks, and add-ons for the websites you manage. After all, a typical website lifespan is three to five years. So you want to make sure that what you’re delivering lasts at least that long without having to completely redesign it. If a vendor stops supporting something or goes out of business. In this video, I’m going to show you how we create completely custom WordPress blocks using the Pinegrow web editor. These blocks don’t rely on third-party plugins or add-ons, and they can be easily modified using any standard text editor. My name is Adam Lowe, president of Peak Performance Digital. We’re a web consulting firm, we provide websites and digital marketing solutions to help you run, grow and manage your business. Let’s jump straight into the demo.

Let’s start off by showing you exactly what it is that we’re going to be building. Here I’ve got a demo site loaded up with some test content and the blocks that we’re going to be creating. The theme that we’re running is GeneratePress free, and that’s pretty much it. So let’s take a look at what we have. This hero block here is one of the ones that we created. And down here, we have a post grid block that shows you some of the posts that are loaded up on the site. If we edit the page, you’ll see that our hero block has some editable places in there. We can change the image. We can change the background, color of the block, the titles, the button link, and the button color. And we even have an area here to type in some content for the WordPress block editor. And below it, we have the post grid component that doesn’t have any controls in it. While we’re going to be using some CSS to control the layout styling, most of the theme is going to be controlled by the WordPress theme. So that’s going to involve the colors and the font sizes.

Let’s take what we have here and delete these blocks, save that page, and make sure there’s nothing on the homepage. And then we will delete the plugin. So we’re going to deactivate that and delete it. And there we go. Okay. And we are ready to start from scratch. So let me talk really quick about Pinegrow web editor. This isn’t like a normal plugin or theme. This is something that you download and install on your computer. It’s really a development environment. So anything that you do here is going to get written to plain HTML and CSS files that you can use just about anywhere, whether it’s with WordPress or any other website. The pricing is pretty inexpensive. So if we take a look here at the pricing page right now it is June of 2022. If we were to load everything up, we’d be looking at, oh, look, they’re actually running a sale now. So if we are loading everything up, we’d be looking at $161 for the initial outright purchase. And then every year the maintenance cost is 50% of the total.

So if we were looking at things without the sale we’d be looking at $250 for the initial purchase and then $150 per year for maintenance after that, it’s a pretty good deal. So we also have a few different subscription options. So that’s the annual subscription that I just mentioned, which I personally think is the best way to go. You can also do a monthly subscription if you just want to use it for a month or two to play around with, and then you’ve got a one-time payment. A lot of people get confused about this one-time payment, thinking that it’s like an LTD, a lifetime deal when really it’s not, this is more like a traditional license where you’re paying one time for this version and you can use it forever. Any updates to that version, you’re going to have to pay for. The only thing that you don’t get when you buy the one-time payment option is the interactions module. And that’s going to be the thing that lets you do animations on the website. You probably can’t get this with the one-time payment because they use GreenSock for their animations and they have to pay a license fee to them. But with the tailwind visual editor and the WordPress builder, you can get the one-time payment options for that. Again, though, I think the way to go is really with this annual subscription. And that just makes sure that you’re always up to date.

Pinegrow lets you work with WordPress in two different ways. One is by creating your traditional custom theme with your custom blocks. The other way is by creating a plugin that contains your custom blocks only. The advantage of using the theme is that you can also include frameworks such as tailwind and bootstrap. If you want to use the plugin, you’ve got the advantage of being able to pick that up and move it to any website you want. But the disadvantage is that you really can’t use those frameworks.

Let’s open up the Pinegrow web editor and open up the project. In this project, I’ve already created the layout for the blocks just so that you don’t have to watch my coding HTML and CSS. Here, you’ll see in this blocks.html, I’ve created my hero section and then I’ve created the post grid section. We’ll do a quick overview of the Pinegrow interface, just so you know what we’re looking at. So as a matter of fact, I’m going to start by making this the default layout and there we go. This is what it looks like when you first install Pinegrow without changing anything.

The first thing I want to do is show you the structure of this HTML and to do that, I’m going to come over here and look at the tree view. This shows you the HTML structure, just like you would see in a page builder like Oxygen or Bricks or even inside Visual Studio Code. We can also take a look at the code of the site itself just by clicking on this button right here. And this shows you the HTML code. The nice thing is I can click on any element here and it jumps straight to the code that we’re looking at. Whether we click on it in the preview window here, or if I find something in the preview and click on it, it takes me right there in the code editor. Not only can we view the code, but we can also edit the code here and that’s going to be reflected back in the preview as well as the tree or any other controls that we’re looking at. For example, we’ll come in and we will change this headline to say, this is a placeholder. This is a, we’ll just say, this is a test placeholder headline, and you can see it’s updated in the preview and it’s updated in the tree view as well.

The other thing we can do is edit the properties for any element. So I’ll just come and click on the style and you’ll see that we have just about any CSS style that you can think of here in a clickable interface. For example, we’ll come over here to the headline again, and I’m going to apply an inline style to change the text from this blue to red. And you can see that it’s applied that style attribute here. You can see it updated in the preview. And then down here in the code, we can see that it’s applied this inline style of color F10E0E. You can also see over here that we have in our style.css where it’s been overridden, the style that I had in there before. So if we don’t want to do that, we’ll just delete it here in the code or we can delete it here or up there, any place that we want, and you see that’s been updated real-time. And once again, our style.css is the thing that takes precedence. So here we’re looking at our inline styles, basically, anything that’s active, I can come over here and open up our style.css file where we can take a look at all the styles that are in there. We can also edit them directly. So let’s find something like this hero, a button and come in and we’re going to change this color to red. There we go. And now it’s been updated to red. We’ll just change that back. We’ll undo and it’s back to blue.

We can also right-click on any element in the preview window or in the tree view and go over to classes and we’ll see what classes have been assigned. You can do that here. Or we can come over to the properties and see what classes have been assigned. If we go in there, we can come back and see exactly what is in that rule and make any changes that we want to make. So lots of options here. the interface does definitely take some getting used to, but once you’re used to it, you can move around pretty quickly.

The hardest part frankly, is figuring out where each of these components lives. Finding out where your flex controls are versus your text controls and your sizing, and then your CSS grid controls. Once you get a handle on where things are here in the visual editor, it’s pretty easy to figure out exactly what it is that you need to do, and where you need to go. And the best part is you can always come over to the code view and make modifications there without any problems. So like I said, you can do that with the HTML. You can also do it with the CSS by coming in here and you can see the CSS for this particular class, or we can open up the entire style.css just by clicking here and opening up our style sheet. And you can see everything here in the text editor. And again, just like everywhere else, any changes that happen here in the text editor reflect immediately back in the preview, as well as in the visual control panel.

Last but not least we can open any of these things up inside of a normal IDE, such as visual studio code. And we can see the files that are created and edit them just like we do inside the Pinegrow editor. So here, we’ve got that same code here and we’re going to remove this word test and save our file. And when we come over to Pinegrow, you’ll see that it says unsafe file modified outside of Pinegrow, do we want to reload? Sure, we’ll reload it. Boom. It’s done. So while we’re looking at visual studio code, let’s also take a look at the files that Pinegrow creates.

Over here in the Explorer view, you’ll see that we’ve got blocks.html. This is where I’m doing most of my work index.html has absolutely nothing in there. Pinegrow.json has all the settings related to Pinegrow itself, not a whole lot in there that you need to worry about. The INC folder has this custom.php, and this is something that we use for putting custom code into my theme or plugin and the CSS folder. We’ve got our style.css file, and then _pginfo just has some information about the fonts that are being used as well as some other things that Pinegrow keeps track of so that it knows what to export. you’ll also notice later on that we’ve got a _pgbackup folder that gets created, and that’s a backup of anything that we’ve worked on in here.

We can view those project files here inside of Pinegrow. We can see them inside a visual studio code and we can also see them inside windows Explorer. The next thing I’m going to do is just show you a few modifications that I make to the Pinegrow editor that makes it work better for me. One of the things that I like to do is I like to be able to see this library that shows me all the different elements that I can put either on a page or under the tree view. I want to be able to see this all the time, no matter what. So I’m just going to grab this and drag it down here and it’s going to create a split view with my project folder. The next thing that I want to do is to take this tree view because I want to be able to see this all the time as well, and I’m going to put it right next to the files. Because I don’t really need to see my project files that often, but I do want to spend a lot of time here in the tree view.

Now what I can do is just take one of these elements straight from the library and drag it right onto a page. Or if I don’t want to do it that way, I can take the same element and I can drag it into the tree view. And I can do that at the same time as I’m looking at my styles on the side. So this way I can work on a bunch of things at once. I’ve got everything that I want to see exactly where I want to see it. Let’s remove this test heading and now we’ll actually get into the good stuff.

Now that you’re familiar with the interface a little bit, let’s configure this to work with WordPress. Now the best way to develop Pinegrow themes and plugins and blocks with WordPress is by using a local development environment. Something like LocalWP. The reason for that is that we’re going to be outputting a lot of files, making a lot of small changes, and using a local development environment, lets you write those files directly without having to continually zip things up and upload them to your server. So that’s exactly what I’ve done here.

I’ve got my Pinegrow Vid Test site that’s up and running. And if you look over here, I’ve got the plugins folder and this is where we’re going to be spitting the files out. So any files that are written here get automatically picked up by WordPress. We’re going to come over and activate the WordPress theme builder by clicking on this WordPress icon over here, and we’re going to say activate WordPress. This is going to open up our theme settings. So the first thing we’re going to do is change the project type from theme to plug in and then we have to give it a name. So I’m going to name it, PG vid test. And then the next thing I have to do is to give it a slug. So this is going to be the unique name that gets written into the WordPress database and here into the file system.

Now, the next thing we have to do is we have to create this folder manually inside the plug-ins because of the way Pinegrow is written, it can’t create folders itself. So we need to do that part manually. The next thing we do, we will find that folder and we’ll just put it right here inside of the plug-ins folder thing. And then the last thing we’ll do is tell the site URL. We’ll just pop that right in here. And the reason for this is so that we can just come into the preview window and click a button to see it. Now that we’ve saved those options, let’s come into the WordPress menu again and we’ll come back to theme plug-in settings and it’s now saved everything. And all of our settings for the theme have gone away.

And for our export option only shows the one option to include generate with Pinegrow in the source code. So we don’t need to worry about that. You know, I’m going to leave it just to be nice so that anyone looking at our source code can see that we made this with Pinegrow. It doesn’t really matter one way or the other. Image sizes we can do custom size blocks here. We can change the block type from regular JavaScript blocks to dynamic PHP blocks. typically I would just leave it with the regular ones unless you know that you’re going to need PHP blocks for some reason. and then you can also have the option to create ACF blocks. The big difference between regular and dynamic PHP blocks is that regular blocks load with JavaScript very, very quickly PHP blocks have to do some PHP calls each time you refresh the page. So it’s a little bit less efficient. We can also choose whether to allow SVGs in line and some WooCommerce options that we’re not going to mess with for right now. We’ll just save settings and there we go.

All right. So now our project is configured for Pinegrow, but our page is not. So we’ve got our blocks.html, Come over here to the WordPress icon. And now we’re going to click page settings. So in here, even though we are creating a plugin, we still need to configure some of the properties that we would configure as if we were doing this as a theme. no good reason why. It’s just one of the weird little quirks about Pinegrow. So we’re just going to come in here and tell it that it’s going to be an index PHP. The other thing we want to do is we want to make sure that we check this box and say, this is a master page with its own header and footer. That’s going to ignore some of the things that are built-in for theming. And then the last thing we want to do is say, don’t export this page because we don’t want to export the page. We just want to export the blocks. So now we’ve got those page settings set up here. We can hit save. We get this dialogue saying that we need to export the whole theme or plug in first. The reason for that is because each time we hit save, it’s going to export only the changes and that’s not going to do a whole lot of good unless we’ve exported the rest of the plugin first.

Let’s hit okay there and let’s click on WordPress again and we’ll say export the theme. Yes, I know we’re using a plugin, not a theme but the menu says theme. So now it’s going to say files were added to the project. So again, it’s going to keep referencing the theme here, even though we’re exporting as a plugin. That’s because Pinegrow really wants us to use themes more than plugins because themes give us the advantage of being able to use bootstrap, tailwind, and other frameworks. So let’s take a look at what happened when we did this WordPress export theme and we come into our plugin folder, we see our PG vid test, and we’ll open it up. We’ve got our PG vid test dot PHP. And this is just a generic PHP file. You’ll also see in the INC folder, we’ve got a custom dot PHP and then a helper PHP file. These are just some files that Pinegrow uses to configure the logic for the blocks. So our plugin is not going to do a whole lot right now. So we can come into WordPress and go over to plugins installed plugins. We’ll see that it’s on the list. We can activate it, but it doesn’t do anything we’ll come in and editor page and all we have are the standard WordPress blocks because we haven’t actually done anything to define any blocks. So in order to do that, we’ll come back into Pinegrow, and now we’re going to tell it what the blocks are going to be.

We’ll start off with the hero section and to make this a whole lot easier, I’m just going to select this hero section and I’m going to right-click on it and say, focus on what’s going to make it so that we’re only seeing the section that we’re working on and we don’t see everything else. Over here in the WordPress theme builder, we’re going to start adding some smart actions. So the first thing we’re going to do is tell it that this is the block. Now here, we need to add a few properties for it to do anything. So first things first, we need to give it an ID and this going to be a unique ID for each block. So here I’m going to call it block-hero. The title is going to be hero_block, and the description is hero block. For the icon, we can do a few different things with icons here. So if we do browse icons, it’ll pull up a website and we can see all the built-in WordPress dash icons. if we want to use one of those, we just copy the name after the dash icons and paste it in. That’s what I’m going to do here. but if we want, we can also put some SVG code in there so we can go to remix icons or bootstrap icons or even FontAwesome if you want to and copy the, and copy the SVG code.

Let’s grab one of these, and by default, it’s going to show us this stuff. I want to see the SVG code. So instead of saying superhero there for one of the WordPress dash icons, we can put in SVG code and that’ll show up just fine as well. Let’s undo that change. The next thing we have to do is give this block a category. So if we want, we can use some of the built-in WordPress categories or we can create a custom category. I’m going to do a custom category and I’m going to name it blocks underscore PGE test. And since this is the first time that we’ve used this category, we need to register it and we’ll give it a category name. This is going to be the display name for it. Pinegrow Vid Test. Now under more options, we have a few other things that we can do. If we want to change the block type from whatever we put in here globally to something else like dynamic PHP blocks or an ACF block, we can do that. Here is where we also attach the style which is the CSS file that shows all the styling for the front end of the website, as well as for the block editor. we can also do some scripts and put some other things in here that I’m not going to get into in this particular video. I’m going to leave the rest of this blank for right now. We’ll come back to it in just a minute.

What we’ve done, we’ve defined this block. And if I save this and export the theme, and again, when I say export theme, I really just mean export the plugin. And I come back to our WordPress installation. I’m going to refresh this editor page for the homepage. And now when we look in the block inserter all the way at the bottom, we’ve got a hero block. So let’s put that on the page. Here we go. It’s inserted a hero block all the way at the bottom. Let’s move it to the top. All right, now you’re going to notice a few things here. There’s no styling and it doesn’t let us change anything at all. The reason there’s no styling is that we haven’t told Pinegrow to export the style sheet yet. So in order to do that, we need to come over back to Pinegrow and come back to our block options, and under style, we tell it about our style CSS. We’re going to save it, and export the theme. And now if we look in our directory, you can see that it has exported the style.css file.

We’ll come back to the website, refresh the page, and you can see that it’s been styled. All right, so let’s go back and edit the page, and there you have it. The next thing we’re going to do is make several pieces of this block editable. So we’ll come back into WordPress and this is the really fun part. So we’re going to add some properties that let us modify several pieces of this hero block. So we’ll want to be able to change the hero image, the background color for the whole block, the title text, the content text, as well as the button color and the button link.

We’ll start off by doing the background color for this block. Since we’re already working on the block section. In order to do that, we’re going to come over here to all WordPress actions and say block attributes. That’s going to add another thing over here in the WordPress theme builder and our attribute ID is going to be whatever we want to call it. I’m going to call it hero_background. And instead of use as content, I want to use it as style. And the style that I’m going to do is background-color. And this is just the CSS-style property that’s going to apply. And then the last part that I want to do is give it a title of hero, and background color, and that’s going to be what we see in the WordPress block editor.

The only other piece that we’re going to look at is something I’m going to show you in a second. Once I save this and export it, let’s refresh our block editor. Now we’re going to see something here that says this block contains unexpected or invalid content. You’re going to see this a lot. Whenever you make major changes to the block inside Pinegrow, not a big deal, say attempt block recovery, and it should pick right back up. But what we see now is we have our hero background color under block properties, and I can use standard controls to change that update, take a look at our page. And that is absolutely gorgeous. Isn’t it? Let’s make something just a little bit less garish. Yeah, that’s better.

Now, if for some reason you go to add a color block someplace and you don’t see that you just see a normal text field, you can come into the attribute editor and change the control type from auto to color picker. I’ve seen this a few times when Pinegrow doesn’t recognize the name of the attribute that I’m adding, but this time it worked out great, and we’re going to move on. So the next attribute that we’re going to modify is the title text. This one’s really easy. We just click on the title text either here in the preview window, or we can do it over in the tree view. And we’re going to say block attributes and give it a block attribute ID of hero title hero_title title, and here we’re going to use as content and we’re going to save. And now when we reload, you can see that we have an editable hero title. We can either edit it straight in there where we can edit it over here on the sidebar. Now you notice we have the hero underscore title in there instead of something that is more friendly. And that’s because, in Pinegrow, we never added a title. So let’s just add a title in here of hero title, save it, and refresh WordPress. And there we go. Now it says hero title.

So you’ll see all this saving and testing and saving and testing and reloading. This is the reason why we use a local development environment, we would hate to have to package this thing and upload it each time you make a small change. All right, so now we’ve got our background color. We’ve got a hero title, let me just change this so you can see it taking effect. We’ll look at it on the front end, we’ll see that it takes effect there. You’ll also notice that here on the back end the case is different than it is on the front end. So for example, here, we’ve got uppercase T and then everything else is lowercase, but on the front end, everything is uppercase. Part of the reason for this is because WordPress does some really funny things with style sheets. There’s actually a separate set of style sheets for the block editor as there is on the front end. So depending on what your theme is doing, you may be able to get around it very easily or you might not. But one thing we can always try doing is coming back here to the root of the block that we’re working in and under more options, we can take the same style sheet that we put in the front-end style, and we can add that into our editor style. So as long as there’s nothing in the theme, that’s overriding it. Now we should see it. when we reload, I don’t see the changes there. So let’s just take a quick peek at what’s happening. You’ll see that my text-transform upper case is being overwritten by some of my editor styles. Awesome. And I say that as sarcastically as possible.

So to fix that, and we can either leave it, because frankly, it’s not going to make much difference, but if we wanted to look better on in the editor we can always do something unpleasant, like give it important. And since I just made the color important and we’ll do the same for my transform. There we go. We’ll save that, reload, and there we go. Now the style is showing the way we want it to look and it’s overriding all of the weird block editor styles. So the next thing we want to do is to make this text area editable and we don’t want to make it just editable. like we did this one, we actually want to be able to use the block editor to do it.

In order to do that, we’ll come back to Pinegrow and we’ve selected our P, our paragraph block. And this time we’re going to choose block inner content, and this is going to let us use the block editor blocks to add content there. So let’s save that. We load our page, do our block recovery, and now you can see that we have a normal block editor area here. So if I want to, I can add headings. I can add images, lists, quote, and whatever I want to do. but for right now, I’m just going to copy some of this text and pop it right in there and update. And if we come over to the front end, there we go. You can see that it’s updated.

If we want to restrict the type of blocks that we can put in we can put that here in the allowed block types. so here we can either tell it to use another type of Pinegrow blocks that can go in there or core blocks or anything else. For this example, I’m going to tell it that we only want to use the core paragraph block. So we’ll put that in there and save it, and now we’ll edit the page. And now if we look at the blocks that are available, only the paragraph block is available, and that’s a great way to make a block that your customers can use to edit content without messing things up too badly by changing the design or by doing something silly, like you know, putting images inside of here that don’t belong in or anything else in that shouldn’t be there.

All right. So the last two things that we’re going to work on are going to be related to the button. We want to be able to change the button color, and we want to change the button link. So, we’re going to select our button and we’ll come back again and we’ll do block attributes. The first attribute we’ll put in is one for the link. So we’re going to give it the attribute idea of the hero button link, and we’re going to use as link. So that’s right by default, and we’ll give it a title of hero button link. We’ll add another attribute for hero button, color and use as style. And I’m going to say background is going to be the style property and our title is going to be button color and we’ll save reload block recovery. And now we’ve got our block properties. We can change our hero background color, or hero title. We can change our hero button link. And hey, look at that under button color, we have a normal text area. That’s because background isn’t exactly kosher for CSS. If I changed it to background-color, it would know that we want to use a color picker. The other option again would be to go into attributes and change that control type from auto over to color.

The last thing we’re going to do is we’re going to make this image editable. So we’ll come back into Pinegrow one last time over here in the tree view, we’re going to select the SVG since this isn’t a normal image, and we’re going to change that block attribute, and we’re going to call this hero_image. You can see use as image. I’m going to select the default size as medium, then title is going to be hero image. Save and refresh, block recovery. Awesome. Here we go. Now we have it all. We’re going to change this image if we want to do that. All right. Update, view that page, and there we have it. Now we have our hero block section with a customizable headline, text, button, color, and link, as well as a customizable image.

So now’s a great time before we move on to the next section, to just take a look at the files that were created so that we can see exactly what’s going on. Here we have the WordPress plugins directory and the PG vid test plugin inside there. We have the PG vid test dot PHP file. We’ll open that up. And this is just a standard PHP file that defines the plugin. we can update all these things here, like the description, and plugin name, and we can do all that within Pinegrow so that we don’t need to edit this file directly. The advantage of opening it up in Pinegrow and editing it there as well. Is that any changes that we make inside Pinegrow, won’t overwrite this PHP file directly. Inside of there, we have our blocks folder. In our blocks folder, we’ve got some general block control CSS and JavaScript, and then there’s going to be a sub folder for each block that we create. So right now we just have the one, the block hero, and we have a PHP file that registers the block and the JavaScript block that runs the code.

As I mentioned before, all these files are plain JavaScript and PHP. They’re all just text files. There’s nothing fancy going on in here. We don’t need Pinegrow to edit it or manage it. but if we do want to use Pinegrow, we can do that. and the code itself is also pretty lean. So I’m going to just ignore this big SVG file right here. That takes up a bunch of a bunch of room. So we’re going to make that go away. We’re going to make this go away. So we’ve got these two giant SVG files and if we look at the size of the actual code that’s generated, we’ve got 50 lines here, two lines there, and 7 30, 1 to seven 90, so 60. So we have what, a hundred less than 150 lines of code total for that block, excluding the SVGs that were embedded. so that’s pretty darn lean.

Let’s take a look at the PHP file now. And again, this PHP file is simply regular PHP. Again, pretty lean let’s just remove this SVG from the view because it’s muddying stuff up and there’s not a whole lot to it. So what it’s doing here, it’s just telling the name of the block, the title of the block description and what the icon is the style, the editor style what kind of things that it supports base URL base path, the JavaScript file that holds the look and feel, and inner workings of the block and different attributes for the block. it also has this hero image array also duplicates the SVG. I’m not quite sure why I haven’t read it that closely that down here, we say that it’s not a dynamic block and it can have inner blocks. So if you know, just a little bit of PHP and JavaScript, you can look at these pretty quickly and easily and make any modifications that you need to make.

All right, let’s close these out. And the next thing we’re going to tackle is this blog post grid. So just like before, I’m going to click on this section that holds the post grid. I’m going to right-click on it. And I’m going to say focus on, that’s just going to make my trivial a little bit cleaner to look at so that we don’t have all the stuff over here from the hero. We’re going to save this. And right here at the top of the section, we’re going to add a block, a smart block, and we’re going to give this the ID of PG-Postgrid. Again, this needs to be unique. we’ll give it a title of Pinegrow post grid. We’ll give it a description. I’m going to give it an icon of embed post. And this is just one of the standard WordPress dash icons.

Now for category, we already created the category in the hero, so we don’t need to register it again. We can just come into category and say, custom and select that blocks_pgtest from the category list. We don’t need to click register category. Clicking on more options, we can come down here and we’re going to put in our CSS style for the style as well as the editor style. And that’s going to be the same one that we had before since all of our work is in that single CSS. We’ll close up more options. We’ll hit save, and let’s hit WordPress and export and we’ll refresh and see what we have. All right, so now we’ve refreshed. Let’s add a block and browse all. We go to the bottom, we see the Pinegrow post grid. So let’s click on that. And there we have it. This is exactly what we have here in the Pinegrow editor. So we’re going to save that. We’ll refresh. There we go. So these are not the posts from our website, let’s take a look at the posts that are on this website. If anyone’s wondering these posts were just imported from the standard theme unit test WordPress theme unit test in GitHub. Those that we see on the front end here are what we created in Pinegrow as placeholders.

To make this block behave like a post grid. We want to use the smart action of show posts and inside WordPress, the show post smart action can’t be on the main block itself. It needs to be somewhere underneath there. So we’re going to use this div right here, and that div is just our wrapper for everything. And that’s where we’re going to use the show posts. Now under loop type, we can choose the main loop. We can do a custom query, we can use relationship, or blocks. Just hover over where it says loop type for a quick description of how that works. We’re going to use a custom query for this demonstration so we can show you what this looks like.

So post type, I’m going to do posts by default, and we’re going to give it a query name of homepage_grid. Post to load, we’re not going to mess around with this. We could choose specific posts. We could do featured images, only post parents, post children. Lots of options there. Order by, we’re going to say created date ascending. Post per page, don’t need to mess with this because we’re not doing any kind of pagination. And again, this is just for query options. This is not necessarily for display. So the query is going to use the default WordPress number of posts per page. But that’s not necessarily what’s going to be displayed inside the block. Here, sticky, we can choose to ignore only use sticky or don’t use stickies, skip shown posts search by field value. We’re not going to mess around with any of those. Display options, here we have a few more options. So we could put a class around the first item in the post grid. If we wanted to. Range of items to show, this is where we actually choose how many items we want to show in the post grid. So we’re going to say three items. And since we start counting from zero, we’ll do zero to two set ID attributes of the post items show no post text. This is going to be that text that says, sorry, no posts were found.

Then, we define the loop structure. The loop structure is what’s going to tell WordPress what items are going to be repeated, how they’re going to be repeated, and what they’re going to look like. So we can hover over where it says loop structure, to see an example. And there we can see the section is the element with show posts. We’ve got a container for the items inside of that. We have another container with items to repeat. And then in this example, there is also another div that is specially designed to show if no posts are found. So instead of just saying the text, no posts were found, we can design a special container that will show up instead. So we’ll start by selecting our items container and this is the thing that holds all of the posts inside the grid.

The first thing we’re going to do is find this item’s container. So we’ll click on it and we’ll say current element, then we’ll choose the repeated item and that’s going to be the column inside of here. That’s going to be repeated for each post. So our repeated loop item is this post grid inside wrapper. And let’s save and see what we’re looking at. We’ll refresh this page. And now we see something really interesting. We see three items that are repeated and those three items are the same as the first one here. And then after that, we see the second item that we have in Pinegrow. And the third item in Pinegrow. The reason for this is because we are running a query loop, that’s taking the first three, that’s taking the first three blog posts, and repeating them. So we’ve done that once, twice, three times, and then we have numbers four and five, which were just standard HTML. but because we haven’t defined, what’s going to be changed inside of each of these. We just see that first element repeated three times.

The next thing we’re going to do is we’re going to tell it to not display the second and third columns inside the post grid. We do that by selecting the inside wrapper, which is the repeated element, and we’re going to use a special global smart action called don’t export. So we’ll use that on the second one. We’ll use it on the third one. We’ll save, we’ll refresh, and now we’re only showing the first element repeated three times. Now, the reason we’re seeing this again is that we have not told WordPress to replace any of those HTML elements with dynamic data from WordPress. That’s the thing that we’re going to do next.

Now, the first thing that we’re going to change, just so that we can see what’s going on is we’re going to change this text. That way we can see what the real title of the post is going to be now realizing that this is not necessarily the best practice for creating a card. This is just for demonstrations only. I’ve just wrapped that title in an anchor, and we’re going to add the post smart action of post link to it, and we’ll save and refresh, and we’ll see what happens. View it on the front end, and now when I hover over, you can see on the bottom that the link goes to the right place. This is going to my template, sticky. This is going to my edge case next nested in mixed lists. And this last one goes to edge case many tags. Now, again, the best practice would be to make more than just the title, the anchor. but we’re not going to do that for right now because this is just a demonstration.

The next thing we’re going to work on is updating this image so that the featured image shows instead of the default image that we have defined inside Pinegrow. To do that, we will just select the image and we’re going to come over here to post smart actions and say, post featured image, we’ll tell it to use medium. And we can either use the responsive sizes that it guesses, or we can tell it to we can put in our own responsive sizes. We’ll come back to WordPress and refresh, and there you see it’s already pulled the featured image for each of these posts. We’ve got our titles that are named properly and have proper links on them. And since I already have it defined here, I’m going to take this anchor and I will put a post link on the anchor as well. And now you can see that we have the image that is clickable to the link, as well as the title that is clickable to the link. We need to work on getting these replaced with the actual categories, for the pages. We need to change this lorem ipsum text with the real excerpt. We’re going to change this image to the author’s image, change this to the author’s name and change this to the post’s published date.

We’ll first tackle the tag list. And to do that, we’re going to click on this wrapper div that I have for the tags, and we’ll use the post Smart Action of post tags and categories. I’m going to show categories there. And instead of showing them as a link list, I want to use the first child item as a template. What that’s going to do is it’s going to take this first item and use that as a template for each tag going forward. We’ll come back here, and for the delimiter, we’ll just use a comma. Range of items to show, I don’t want to show all of them. So instead, I’m just going to show the first four. So I’ll do zero to three to show the first four, we saw a little message popping up there that said that we need to export the whole plugin. So we’ll do that. And we’ll refresh in the editor, and we can see that our categories have been changed here. Update, and there we have it. So it’s already taken those categories that were in Pinegrow, and it’s used that first one as the template for each category that it’s showing inside WordPress. Now we can hover over any of these categories. We’ll see the right name and we’ll see that it’s already linked to the category name since that’s how we had the first one defined.

Next, we’ll tackle the excerpt. And to do that, we’ll just click on the excerpt paragraph. And we’ll say posts, excerpt. We can choose. If we want to only show the excerpt if it’s set, otherwise, it’ll take the first, however many characters of the post and show that as the excerpt. Now, the last pieces we want to work on are the author image, author name, link, and publish date. We’ll come back to Pinegrow. We’ll select the author image instead of using a post Smart Action, we’ll come all the way down and I want to use an author action, and we’ll say, get avatar. This is a standard WordPress function. We’re going to say leave ID or email alone, because we’re going to get the author’s avatar, not some other avatar size. We’re going to use a size of 48. For default, we’ll use the default mystery man. We could put alt text in there if we wanted. And then, we have a few options. We can replace the whole element. We can replace the contents, so that would be anything inside the element we could do insert before or after, or replace the content. If not empty, we’re going to choose to replace the element. We’ll save this refresh and see what we get. And there, you can see that we have author images for each one of these. And because I did these author images, these authors with faker press, it just grabbed default random images. I didn’t really do anything about these, but you can see that each one is different.

To change the author’s name. We’ll come back to Pinegrow. We’ll select the author’s name, and go back to authors. And we’ll say the author link. Here, we’re not going to replace the element. We’re actually going to replace the content. Since this is a div with the name in there, we’re going to replace the content with the author link and we’ll refresh. And if we hover over it, it links to the author’s URL. The reason it doesn’t look like a URL is because of the way that I have it styled. I told it to use. I told it to not use the default link styling or default underline. Last but not least, we’ll change this date to the published date. To do that, we’ll come up to the post action and we’ll use the date. If we want to, we can do any of the typical PHP formats. We could do something before, let’s say, Published on:, and we’re going to replace the content, not the element here. We’re going to save reload. And there you have it. Looking at this, I don’t really like where it says published on. So I’m just going to remove that and we’ll just have the date on there, refresh, and now it just shows the date. And that’s all there is to it. You have a hero block with editable properties and we have our post grid block that doesn’t have any editable properties, but it does have a custom query.

Now, the last thing I want to show you is how to package up this plugin so that you can deploy it on your own site. So for that, I’m going to come back to our file system. And because I deployed on WordPress local, we can see that everything here is inside the plugins directory under PG vid test. If we drill down into the blocks folder, you’ll see that we have our block hero and our PG post grid, but we want to take this whole PG vid test folder and just zip it up compressed to zip file. And there you have it. We have a 51-kilobyte zip file that has both of our custom blocks in there.

If we look at this, for that 51-kilobyte file that’s pretty darn small compared to almost any plugin you’re going to find anywhere. Matter of fact, I want to show you a comparison between a custom block plugin that I made versus something that’s very lean and mean like GenerateBlocks. I love GenerateBlocks, I use it on a lot of sites, but it comes in at 519 kilobytes versus this plugin that has 18 custom blocks at 78 kilobytes. And these 18 custom blocks were all I needed for the entire site as an e-commerce site. And it works great. It’s very lean very mean. We don’t need to worry about incompatibilities, we don’t need to worry about updates unless WordPress comes out with some sort of major breaking change, which doesn’t happen very often. Compared to something like GenerateBlocks, Kadence, or any other block plugin, you need to worry about security problems, you need to worry about incompatibility, you need to worry about breaking changes with these a lot more often than you ever do with a custom block.

I hope this helps you get a good feeling for just how powerful WordPress custom blocks are and how easy they can be to create, especially with a tool like Pinegrow. If you want to learn more or see how we can help you visit us online at https://peakperformancedigital.com or email us at [email protected].