Lessons: 10Length: 51 minutes
- Overview
- Transcript
2.1 Setting Up the ACF Plugin
In this lesson, I'll show you how to install and activate the ACF plugin. Then you'll create your own plugin to register a new block.
Related Links
1.Introduction
1.1Introduction00:48
1.2Why Create Blocks Without JavaScript?03:25
2.Registering a Block
2.1Setting Up the ACF Plugin04:43
2.2Registering a Gutenberg Block With the ACF API06:17
3.Adding Fields to the Block
3.1Creating a Field Group and Adding Fields04:16
3.2Adding Block Settings03:49
4.Outputting the Block
4.1Setting Up the Block Class and Values08:17
4.2Writing the HTML06:14
4.3Adding the Block to a Post or Page10:49
5.Conclusion
5.1Conclusion02:16
2.1 Setting Up the ACF Plugin
Hello, and welcome back to this tuts plus course on creating Guttenberg Blocks in WordPress, without JavaScript. In this part of the course, we'll look at setting up, the advanced custom fields plugin, and also creating our own plugin, which will include those blocks. So, the first thing you need to do is download and install, Advanced custom fields. Now, there are two versions of ACF. One of them is free, and you can either get it from the ACF website, or from wordpress.org. And the other one is premium, we'll need the premium one to be able to use Guttenberg Blocks, because that's not a feature of the free version. So you'll need to buy that plugin, either personal or developer, depending on whether you're gonna be using it on one site, or a bunch of sites. Buy it and then, ACF will send you the download of the plugin, and I've already done that. So now let's install it on our site. So I'm adding a plugin that I've downloaded in a zip file, rather than installing a plugin from the plugin directory. So I need to do that by clicking the Add New button, and then Upload Plugin. And then, I need to find my plugin file. So I have the zip file here, and I'll click on open that will upload the file to my site. And I'm working on a local site here, and then I click on Install Now. So now I have the advanced custom fields plugin installed. I also need to create a plugin for my own code. To register the blocks. So here I am in my site in the Plugins directory and I have created a folder called, tutsplus-blocks. And within that a file called tutsplus-blocks.php. Now I need to add the opening comments, that you need in any plugin to tell WordPress what this plugin is. And I'm gonna give it a version number of 3.1, because that's the part of the course that we're on. And for each of the code files that you get with this course, you'll a get a version with the version number corresponding to that part of the course. So we now have the commented out text at the top of our plugin file that tells WordPress this is a plugin. So if I save that, I'll now see that plugin in my plugin screen in my site. So here is my plugin. Tutsplus blocks without JavaScript. I'm going to activate it, although it won't actually do anything yet because there's no code in it. And the version of ACF I've got needs updating. So I'll need to enter my license key so that I can enable updates. So let's do that. So I do that by going to my Account page. So I will scroll down and copy my license key which I'm not going to show you. And then, I'll paste that into the Updates screen in my site. So that license key is now activated, which is something you should do when you install the plugin. Anyway, I did it because I got a prompt because I actually downloaded the plugin a couple of days ago, and I uploaded it today and in the interim there's been an update. So let's go to the plugin screen and update the plugin. So I'll update that. And if we scroll down, there's my new plugin as well. So now I've got both my plugins in place. And the next thing is to start adding some code to my own plugin, which we'll do in the next part of the course. See you next time, and thanks for watching.
