7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Setting Up Your Environment

It probably goes without saying that we need a WordPress development environment. Thankfully, WordPress gives us everything we need to get WordPress up and running within a Docker container. I'll show you what you need on your machine and the steps involved to get a modern development environment up and running.

Related Links

2.1 Setting Up Your Environment

Setting up our environment for developing Gutenberg blocks have changed with just about every new version of Gutenberg, and that's perfectly fine because there was a lot of room for improvement. So that now we just have the tools available from WordPress. So it was a very manual process. Now we just need to install a few things, run a few commands, and then we're good to go. Whereas before, we would have to set up our own WordPress environment which could be on our local machine. It could be on a virtual machine or it could be in the cloud as long as we had access to all of the things that we needed access to. But now we don't have to worry about any of that. So the first thing that we need is node js. Now chances are you already have it installed on your computer. If not, now's a great time to get it. Now the version number really doesn't matter. What matters is LTS, we want that long term support version. So download and install it, it is a very, very straight forward installation, just take the defaults and you're good to go. The second thing that we need is Docker Desktop, which is at docker.com. Just go to products and then Docker desktop, and then download for your operating system. Now, I don't know what this view Linux engine is, so if you're on Linux, I'm sorry, I have no idea. But if you're on Windows or Mac, there are clients there. Now if you are on Windows, you will need windows 10, you will also need to install the windows subsystem for Linux versions 1 and 2, so you need both of those. We're not going to go into the process of doing all of that, but there will be links in the description for you to follow if you do need those. But after you have your environment set up for Docker, the installation is very straightforward, just take the defaults, and you're good to go. Now if you're not familiar with Docker, it is a well virtualization environment so that you create what are called containers and these containers are specifically designed for housing applications. So if you had an application that needed an HTTP server and a database server, you could create a container that has those things, and then you can move that container around wherever you need it to. So it's kind of like a tiny little virtual machine. It's very, very cool technology and while I personally aren't married to Docker, I like the overall idea of containers, so hopefully in the world of development and IT will be seeing more of that. So after you have those things installed, we can go to the command line. The first thing that we should do is check our version of npm. Now, if you just installed node JS, you don't have to worry about this. But at the time of this recording, you need npm version 6.9 or above. So if you have something less than 6.9, then really you need to install a new version of node. So don't that, so. But if you are past 6.9, then the next thing that we need to do is install the WordPress COL environment. So to do that, we're going to install it globally and it is called @wordpress/env. And this is going to give us a few commands for setting up an entire WordPress installation using Docker containers. It's very, very, nice, we don't have to worry about anything, it's going to do all of the work for us. So let's go ahead and let's check the environment version just to make sure so that's wp-env. And at the time of this recording, the latest version is 3.0.1 and so now we get to create our block. Now for the sake of this course, we are going to create a block for showing guitar stuff because I love guitars. If I'm not on a computer or with my family or in the garage working on wood, I am playing a guitar. So we are going to use in PX here. This is going to run an executable called create-block. You can see that it is @wordpress/create-block and then we could give our block a name. And because I'm horrible at naming things, et's just call this guitar-entry and then we're gonna press Enter. Now, this could take a while. What this is going to do is download everything that we need to develop this block. So it's going to download a lot of npm packages. It's going to give us just about everything that we need to first of all start up our WordPress environment while also loading in our blocks code. So it's automatically going to be set up in WordPress so that we can immediately get started with that. You can see that it is installing dependencies, might take a couple of minutes. And yeah did depends upon your connection speed as well as your machines speed and disk speed. After the Create block command executes, you're going to see all of this stuff which tells you what you need to do run npm, start to start the build for the development. If we wanted to format the JavaScript files, we could run another command. But really what we want to do first of all is cd into guitar-entry because what this did is created a new folder. We can look at that on the file system here. There's going to be a new folder with the name of our block which is right here guitar-entry, and then from inside of this folder, we are going to run the WordPress environment. So, the first thing we want to do is cd into guitar-entry. Then we are going to run wp-env start, WordPress environment start. This is going to set up our WordPress environment. Now you can see here that it is updating Docker images and this can take a while. But if you go to the Docker dashboard which, in Windows at least you can go to the tray, right click go to dashboard. You're going to see this containers apps, then you're going to see images. And you're going to see all of the images that are currently being set up through this WordPress environment. So, there's this wordpressdevelop/phpunit, there's composer. So there's two images, one for wordpress cli, one for the actual wordpress installation and then there's also an installation of mariadb. So, all of these images are going to work together in order to give us essentially our installation of WordPress. We don't have to set anything up because it's automatically being done for us, and it's going to automatically load the guitar-entry block as well. There it is localhost 8888, so, if we refresh here, we should be able to see our website. There we go, we have a post here, and our environment is all set up and ready to go. Now, our block currently isn't being used. This is just a post with the title, some text and nothing else. It would have been nice if they had gone ahead and added the block to the post but It is what it is. So in the next lesson, what we'll do is edit this post so that we can add the block, and we can start looking at the code for that block and start making our changes.

Back to the top