 All right, it is recording, so we can go. Welcome to Elliot and Tracy, who seem to be the only two folks joining me here today. This is a slightly different online workshop than what I normally do on a Thursday. So I'm going to leave it a few moments and see if anybody else trickles in. I see we've got a few people coming in now. While everybody's joining, if anybody would just like to let us know in the chat, but you're joining us from, as I say, we seem to have a smaller than normal group today, which is slightly to be expected, because I don't think I did a very good job of setting this up as early as I usually do. So if we don't have a lot of people here today, we can maybe do things a bit differently. It's always easier to do this with a small group, but I was thinking we could maybe even disable the focus mode and let everybody see everybody else. But yes, we're doing things slightly different today. So I'm going to do that for now, and disable focus mode. I recognize all the names in the participant list and focus mode isn't even started on this one. So focus mode isn't even enabled. So you're welcome to unmute yourself and video yourself up and maybe introduce yourself physically if you'd like to. And maybe give us a quick introduction as to who you are and where you're from. Tracy, if you'd like to go first, you are somebody I already know. I had to find all the buttons. No problem. Nothing like being put on the spot. Yeah. Hello from Reno, Nevada, USA. Excellent. So Tracy and I, Tracy has hosted quite a few of my online workshops. So Tracy and I know each other pretty well. Elliot, would you like to introduce yourself and let us know where you're joining us from? Yeah, sure. Hi, Elliot. I'm from Cheltenham in the UK. Excellent. And then Cynthia is somebody who I met recently. Cynthia, would you like to introduce yourself and let us know where you're from? Hello. I am in Ontario, Canada, halfway between Toronto and Ottawa. Excellent. And then we have Subam joining us. Subam's also somebody that I know pretty well. So Subam, would you like to introduce yourself and let us know where you're joining us from? Yeah, I don't know if Subam's having audio issues there or if he's just busy elsewhere. But if you do want to unmute and introduce yourself, you're more than welcome to. So most of you do know me. So I won't go through all the introductions like I usually do. Jonathan, WordPress contributor, sponsor, automatic, all the usual nonsense. Today's session is being recorded and the goal of today's session is really a guide to contributing to the WordPress code base. The goal for today is not to show you every single individual step, not to actually go through the process of setting up all the different pieces of software. Because depending on your operating system and depending on your development environment, what you need to install and what you need to set up might be very, very different. So I'm going to go through the requirements and I'm going to go through some of the commands and some of the things that need to be installed. But today's very much a sort of information dump if you will hopefully pointing you in the right direction showing you how to do certain things. And by the end of today, the goal is to get to a point where I've shown you everything you need to have set up to fix a bug on the Learn WordPress code base or add a feature or whatever the case may be. And then hopefully convince you to go off and do it in your own time. And for the first time in one of my online workshops, there is a homework slide. And so hopefully I'm going to convince you to go off and spend the week getting all the setup on your side if you haven't already, for two reasons. One, because it's always interesting to do interesting new things if you've never done it before. And two, if you ever do decide to want to fix a bug on Learn WordPress or add a feature, add enhancement, you will have everything set up and ready to rock and roll. Okay, before we get into it, let's just get all of the announcements out the way. I have said welcome to everybody. So welcome to anybody who has joined. I don't have a co-host today specifically because I know this is a different session than normal. So I don't have a co-host today. I didn't look, I didn't ask for one. If you have joined after the session started and you can't see my slide, so you should see a slide now that says announcements, please let me know and I'll just re-enable the screen share. We're not presenting in focus mode today. So you're welcome to enable your video if you would like to see me or see each other. We're a small group today, so I'm going to assume that everybody is acting in good faith and is not going to try and zoom bomb anybody. But if anybody does do any zoom bombing, then I will just personally kick you because there's a small enough group. As always, you're welcome to ask questions. And today I would encourage you to ask questions while we're going. Feel free to unmute your mic or a small enough group. If anything isn't clear to what I'm doing on screen, feel free to interrupt me today or share anything as we're going along. I really don't mind today. Today's very informal compared to normal. So go ahead and ask questions if you want to. The usual announcements, as I mentioned, today's more show than tell, or yeah, more tell than code. I'm not going to be, I'm not going to be asking you to do any live coding along with me. It's more just going to be showing you where all the things are and all the things that you need to do. And if you want to try and do it along with me, you're welcome to. But some of the things I already have installed and they do take a while. So hopefully you'll be able to use this as a resource to go and set this up at a later stage. Depending on your experience with some of these tools and depending on your operating system determines which ones you need to install. So I'll be more just showing you and guiding you and sharing links with you. As always, if something is not clear, if I'm going too fast, let me know. And then I will be posting this session to WordPress TV afterwards as I do with all of my workshops. All right, so the goal today is getting the WordPress, the lone WordPress local environment set up. Now, one of the reasons that we kind of need to do this session is because the WordPress, the lone WordPress local development environment uses something called WPENV, which is a Docker based environment. Docker is a virtualization tool that has become quite popular over the last few years. So if you're not running something with Docker already, you will need to install certain tools. There's other bits and pieces of software that you need to have installed. It can't just, well, let me rephrase this. I haven't yet tried to run, learn WordPress on anything else but the local development environment that it ships with. And the reason for that is there's certain pieces of it that actually require a connection to certain bits of WordPress.org. And those pieces ship with the Docker environment. So the goal today is to go through that process with you, explain what the different bits and pieces are. And hopefully by the end of today's session, I'll have a working running one on my local environment, creating a branch, cloning the repository, all these kinds of things. So we'll go through this step by step as we go along. In the resources slides, it's the slide eight and slide nine, I have linked all of the different pieces of software that we're going to be looking at. So if you are looking at this later on, if you're watching this recording on WordPress TV, it is all linked there in the slides. Okay, I don't think there are any questions. If there are questions, you're welcome to ask them now, but otherwise I'm just going to get going with all of this. And the very first thing you are going to need to be able to contribute to the learn WordPress code base. So let me take one step back. Let me explain what I mean when I talk about the learn WordPress code base. So learn WordPress.org is the website that I spend most of my time on. It's where we host our tutorials. It's where we host our lesson plans. It's where we have all of the online workshops linked. You can, for these online workshops, you can add it to your calendar. There's the calendar view. They all get linked through to meetup.com, but it's effectively the website where the training team spends most of our days. And this website is a WordPress site that is part of the WordPress.org multi-site network. But the code that powers learn WordPress is hosted on GitHub. So it's at GitHub slash WordPress slash learn. And you can take this code and you can contribute bug fixes. You can add features. You can create pull requests and all of that. And so that's going to be what we're focusing on looking at today is how this all works and how to get it set up locally. So the first thing that you're going to need if you want to work with GitHub is you're going to need a GitHub account. So I'm going to log out of my GitHub account quickly, my current one, and I'm going to log into another account that I have. But if you don't have a GitHub account and you go to github.com, it'll show you this new updated landing page that they developed a few months or a few years ago. If you don't have an account, you click on the sign up button. It will then ask you for your email address. It'll ask you to specify a password. I'm not going to go through that process now, but it'll eventually create you a GitHub account. Once you have created this account, you can then log in and I'm going to log in with a separate account that I have. It's an account linked to an email address that I use for testing and development purposes. So it's the psychotech.coza email address. And when you create your account for the first time, your dashboard will look something like this. You won't have this organization at the top here. You won't have any repositories. I've added these to a test account, but you'll have something like this and you can then create new code repositories. You can create a readme for your profile and you can do various other things. For the purposes of what we're doing today, we're going to start by forking the learn WordPress code base. So what do I mean when I speak about forking? So forking is a term in open source, which means I make a copy of the code and GitHub is great in that it gives you some user interface buttons that you can use to create this fork in the old days. You would have to have done this on the command line. You would have to have installed Git, which we're going to have to do anyway, but you would have had to install Git on your command line. You would then have to run sort of Git fork or something like that to fork some code. GitHub allows you to do this just using the user interface. If you don't know what the difference between GitHub and Git is, Git is the revision control software that allows you to manage your revisions for your code. GitHub is an online platform powered by Git that allows you to host your code somewhere. So traditionally, if you didn't have a place like GitHub, you would have had to have set up your own code, repository somewhere, installing Git on a server or something like that. GitHub basically allows you to do that. GitHub is like WordPress for Git. Like WordPress is for publishing, GitHub is to Git. So this is the code base that you will need to start with. And once you've created your account, your account, the first step is to fork this code. Now, the reason you need to fork this is because as a new contributor, you won't have access to push code changes directly to this repository. Only sort of approved contributors have access to do this. I am one of those folks. I'm one of the code reviewers. So I review what's called pull requests and I have the capabilities to push changes to this code base, but brand new contributors won't have the capability to do that. So the first step when you're generally, generally when you're working with any code on GitHub, the first step is to fork the repository to your own account. And you do that by simply clicking on this fork button over here. It will then ask you to give, you'll see it's picking up the fact that this is my account. I called my account Cycratic and I can give this repository a name. I can leave it as the default name that picks it up from the parent repository or I can give it my own name if I would prefer to. I'm just going to give it the name learn WordPress just for the sake of being different. And I'm also going to make it all underscore because I like my names in my GitHub repositories to all be underscored and hyphenated. You'll see it tells me learn WordPress is available because under my account, I don't have a project called that yet. It picks up the description from the parent repository which is great for us. And then it says to you, which branch do you want to copy? And you generally want to copy what's known as either the main or the trunk branch. And it does tell you you are creating a fork in your personal account. Once you've done that, effectively what it will do is we'll copy the entire code base and everything that's linked to the code base over to that new repository in your account. So here you will see what this has now been cloned. There is learn WordPress. It exists under my account. And it says you're forked from learn WordPress. And you will see that the branches, the branches, if there were any additional branches, they will have been cloned across as well. I see Elliot is screaming emoji to the lowercase WMP. I tend to prefer it for sort of file names and things like that. Not when I'm talking about WordPress in public spaces, but for file names and things, I tend to keep everything lowercase. So I feel like I can get away with it. So once you fork this code, now you can start working with this code. Now one way that you can start working with this code, and this is specifically if you're not working necessarily with bugs. Let's say for example, you want to update the readme file. The readme file is a file that generally sits in the root of a repository and it has some information about the project. You can actually click on this little edit icon over here and it'll take you to what's known as a markdown editor. Markdown is a style of formatting that is used for text files, generally in code repositories and you can then edit this readme. We're not gonna do that today. We're gonna be setting up the local development environment but it's an interesting little bit of information to know if you ever need to make that kind of change. All right, so that's the first step is setting up the repository in your personal account because you won't have access to create changes in the main repository. Once you've done that, you will then need to start setting up all the required software. And I put the forking the code base on the second line. It doesn't matter which way around you do it but then you will need the required software. So the first piece of software that you will need is Git itself on your local machine. Now you can go to the Git homepage, which is at git-scm.com, which I will link to you here. And then depending on your operating system, it shows a little download for Mac option and you can install it that way. You will also need, and I'm just linking the URLs now because I wanna get into an easier, I believe way to do it in a second. You will also need SVN. SVN is another type of revision control software. It's the revision control that WordPress, the core project users, primarily for managing its code. And then a lot of the WordPress projects are using Git and GitHub. And again, depending on your operating system, you will be able to install SVN using one of these options. You will also need something called a terminal, a working terminal. Now I don't have this listed here because depending on your operating system, you might already have a terminal installed. I am on a Mac and I have a built-in terminal on a Mac. I used to develop on Ubuntu. Ubuntu has a built-in terminal. Windows, these days, it does have something called a Windows PowerShell. In the old days, there was the old command prompt, which was kind of terminal-like. But I do recommend, and I'm gonna jump around a little bit here with some of these pieces of software, if you're on Windows, and I jump back here, I do recommend going and installing PowerShell for Windows. So this is a standalone piece of software. This is over and above the default one that I think ships with Windows 11 now. But it allows you to do a little bit more than just what the Windows PowerShell allows you to do. So if you're running on Windows and you want a decent terminal, PowerShell is a good option. You can also, if you're on Windows, you can use something called WSL, Windows Subsystem for Linux, where you effectively install in a Ubuntu server on your Windows machine, and then it's all the same as running on Linux. But if you're just gonna stick with Core PowerShell, I do recommend, sorry, Core Terminal, I do recommend installing PowerShell. Other things that you will need, so we've discussed GitHub, we've discussed the code. If you're on a Mac, I highly recommend installing Homebrew. So Homebrew is a software package manager for Mac. And it's basically similar to, if you're on a Linux environment, it's similar to the apt system on Ubuntu or the yam system, and I think it's Red Hat environments. And it allows you to install software quickly and easily from the command line. Now, if you go the route of, let's say, installing, Git, for example, and SVN from these downloadable packages, sometimes you end up in a situation where the pieces of software don't talk to each other. With something like Homebrew on the Mac, you can install Git and you can install SVN, and you can install the other pieces of software you need using Homebrew. And they're all kind of installed in the same place. The path thing is very, very similar. It's easier to find things when you need to work with things. It's easier to update things. So if you're on a Mac and you want to get into sort of terminal command line things, I do recommend installing Homebrew. On Windows, we've already discussed PowerShell for your terminal. Then I discovered there's this thing called Chocolatey. Now, I do find it very interesting that on Mac, these sort of what's become the default package manager is called Homebrew and it has to do with beer. And what's become the sort of package manager for Windows got to do with chocolate. So I'm guessing Mac folks like their beer and Windows folks like their chocolate. But Chocolatey allows you to do a similar thing on Windows as you can do in Mac. So once you have Chocolatey installed, you can do things like and the command is Choco. So you can go Choco install, get, Choco install SVN, Choco install PHP and go forward from there. So again, depending on your requirements, depending how you want to install things, I personally usually opt for a terminal solution because I find it easier just to run a terminal command to install software. And I like the idea of using a single package manager to install everything because then it's easy to find everything. So I recommend looking into Chocolatey as a package manager for Windows specifically for web development. I do have, I want to just find it quickly. I do have a video that I downloaded onto my machine earlier today. I'm going to find a chair quickly. Where I, and hopefully you all can see this, where I've got, there's some audio on this video. So I'm going to turn the audio off quickly. But this is a Windows 11 machine that I have sitting behind me. That's the screen you can see behind me there. I've installed PowerShell and I've installed Chocolatey for PowerShell. And with that, I have installed all the other software. So I have NVM, which we'll discuss in a second. I have NPM, I have Node. I can then run Choco install PHP to install PHP and it'll go ahead and install PHP for me. And then with that installed, I don't know why that just came up, I can then install all the other pieces of software that I need. So that's my recommendation. If you want to get into this is install Chocolatey inside of PowerShell and then use that to install everything else. All right. Once you've got, so the two things you need to begin with, as I mentioned, is GitHub set up a package manager of some kind, if you're on a Mac homebrew, if you're on Windows Chocolatey, a terminal of some kind, if you're on a Mac, there's a built-in terminal, if you're on Windows, there's PowerShell. If you want to see all the setup in action, I'm not gonna do it today, but a while back I did a video on installing NPM and Node.js on your local machine. And I'm gonna find it here for you very quickly because some of what we're doing today is included in this video as well. But this actually goes through, let me find it here. This actually goes through the process of installing Chocolatey, sorry, installing PowerShell on Windows and then installing Chocolatey on Windows as well. Tell that guy to keep quiet. So I'm gonna jump through a little bit here, but you'll see in, let me find it here for you quickly. So here's PowerShell, here's the section on PowerShell and I talk about installing PowerShell. And then further on, I talk about installing NVM, which we'll get to in a second. And then I talk about how to install PowerShell and how to install NVM. So I do recommend checking out this video. This will give you good background and all the different bits and pieces. And it's a runabout, just trying to find the Chocolatey section here. Just go back, there we go. So it's a runabout at the three-minute mark. It talks about how to install Chocolatey inside of PowerShell so that you've got Chocolatey install and then how to use Chocolatey to install everything else. All right. So once you've got your, and there is the, I actually had the link in the slides, I could have just grabbed it from there. So once you've got your terminal and your package manager installed, then you need to start installing software. So the software you need are Docker, Git, SVN, NVM, Node, Composer and Yarn, okay? Now that's a big long list. So I'm gonna go through each one of them with you and explain what the different bits and pieces do. Docker specifically is virtualization, sorry, I'm busy messing with my slides here, is virtualization software that is used by the WPENV local environment. Basically the way a Docker container works is you can pre-build what's known as a container, it's like a virtual server, and then you can tell a software product or a software package or a software code base to use a specific container. So when you run, I think it's Docker compose or Docker setup or Docker run or something like that, it'll download that container to your machine, it'll start that container up and it's like it's running a virtual server inside that Docker container. Docker for desktop does exist for Mac, Windows and Linux and you need to install it using one of these three options. You can't do it, well, I don't think you can do it through any of the package of images we spoke about. So you will need to download the installer for your environment and have it up and running. So on my Mac, I do have Docker installed, so I'm going to open it up now, that's what it looks like, it's a little whale with these little dots above it. And once it's running, it pops up here in my task bar, depending on what you're using, it might be in different places. And it does take a while, you'll see the little icon there is kind of starting up and now it's running and ready to rock and roll. It does have a dashboard that you can open up and you can see all the containers that you're using, you'll see I've got two containers that I've used in the past, so you can keep an eye on them there, but once you've got it installed, you don't have to do much more with it. The WP and V environment with the Learn WordPress code base will manage everything else, so you just need it up and running, installed and up and running, and you should be good to go. All right, Git, as I mentioned, we need Git to be able to clone the Git repository from GitHub to our local machine. The great thing with both Homebrew and Chocolatey, and I'm going to show you Chocolatey for a second first, is you can, I don't use Chocolatey, so the website is a little bit alien, oh, there we go, looking for packages, that's what I'm looking for. You can search the Chocolatey website for the specific packages you're looking for, so if I'm looking for Git, for example, I can search for Git, there is the Git package and there is the code, it tells me just run Choco install Git. The same goes for Homebrew, if I want to install Git, I can search for Git, and it'll find in Homebrew they call them formula, so I can find the Git formula and there we go, and somewhere here there it'll tell me brew install Git, we'll use Homebrew to install Git, so that is my suggested way of installing these things. If you're on a Linux system, it'll be apt install or yum install, depending on what you're using, and that's what's nice about these package managers, Chocolatey and Homebrew, they kind of replicate the Linux environment, so it tends to make things a lot easier. So I do have Git installed, and we can just check that by running, I think it's Git minus V, so there we go, I have Git version 2.3.9 installed, I don't think I actually installed this using Homebrew, actually, I think I installed this when I very first got this MacBook before I knew about Homebrew possibly, but I do have Git installed, and I can run most of these commands, you can run Git minus V from the command line, and they will tell you what version number. Right, the next thing is SVN, same as with Git I can search for SVN in Homebrew or Chocolatey, and it's usually the same thing, now let's open AI, I don't want to open AI, I want SVN, Git SVN, no, I just want SVN, what is Git SVN, that's not what I want. No, I just want SVN, I've never done this in a while, let me see, oh maybe, oh you know what it is, it's probably because it's subversion, that's probably what I'm looking for, there we go, so it's called subversion in the packages, but I know it is SVN, that's the sort of shorthand for it, but it's actually called subversion, so let me change my slides here, and let's just call it subversion. So again, in Homebrew, brew install subversion, in Chocolatey it'll probably be the same thing, let's have a look, in subversion it might be called SVN, oh there we go, subversion for Windows, okay, so in Chocolatey it's called chocker install SVN, so there's the slight differences, but most of the package managers will have it, and you'll be able to install it there. As I say, you can install it the manual method as well, generally it works, but I tend to, if I can do it with Insider Package Manager, I tend to prefer to do it there. The next thing you will need, okay, now we're getting into software required for the local environment to run. So I wanna just take a brief second here, and just check if anybody has any questions about what we've covered so far. Before we continue on, I'm gonna grab a sip of water while you do that, and then we're gonna dive into an interesting topic. Okay, we don't seem to have any questions, that's perfect. I want to show you something in the Learn WordPress code base. So if you go to either the main Learn WordPress code base, or in this case my forked version, you will see if I scroll down to the readme, it says there are some prerequisites, Docker we've covered, then it talks about node slash NPM, those two are bundled together, and you'll see that in that tutorial that I shared with you earlier. So I do recommend watching that at a later stage and understanding how the two work together, gonna pop it in there for a second. It speaks about Yarn, which we'll get to in a second, it speaks about Composure, which we'll get to in a second, SVN we've already covered, and then it talks about NVM or N, and it says they're optional. So I want to open up NVM specifically, because that's the one that I use. NVM is also known as the node version manager, and it's basically a bash script to manage multiple active Node.js versions. So let's go to the Node.js website, Node.js. Node.js is a JavaScript runtime environment. What that basically means in simple terms is you can run JavaScript on your computer or on your server, just like you would any other so-called server language or backend language. JavaScript traditionally was more of a front-end language, you would run it in the browser. Node.js allows you to create things using JavaScript on your server or on your computer. So what's cool about that is you can use JavaScript if you're comfortable with JavaScript to write terminal commands or terminal scripts, just like you would with something like Python or with PHP, you can use JavaScript if you have Node.js installed. When you install Node.js, if you use one of these downloads for your operating system, it also comes with something called NPM. Now NPM is two things with the same name. The one is the package manager on your machine. So it's a way to install JavaScript packages in the Node environment for your software. But it's also a repository of packages called NPM.js. Now it's a little bit confusing because they called them the same name. In PHP, they used Composer as the package manager and Packages as the list of packages. So there's a slight difference. But in JavaScript land, they called the package manager and the repository NPM. But basically NPM, the package manager and the repository allow other JavaScript developers to write packages and then distribute them so that other developers can use them in their software. So because the WPENV environment that Learn WordPress uses some NPM packages, you need to have Node.js installed to have NPM installed on your terminal. The easiest way to install that is to use NVM because what NVM allows you to do is, I see your question there, Elliot, I'll get to that in a second. What NVM allows you to do is easily switch your NPM version. And the reason that's important, I'm gonna go over to the Make Core Blog now because there was an article recently where they spoke about NPM versions. So I just wanna share that with you if I can find it here, it's gonna be down here somewhere. Interactivity, no performance, no, I'm not gonna find it, so I'll just search for it. When you build software that uses NPM packages, you often have to specify a version number that you're running with. Generally, folks will use whatever the current stable version is. Here we go, here's the article. And then as the Node and NPM software is updated, it's generally recommended for software projects to update their dependency version to use the latest stable version of Node. However, sometimes that doesn't always happen. So for example, if you look at the Node.js website, the current stable version recommended for most users is version 18 something. In WordPress Core, they've recently updated it to version 16, they were running version 14 because there were some changes to 16 and 18 that were breaking the project and they couldn't use it. And if you wanna read through this whole article, I do recommend doing it, but it explains why the changes have taken so long to happen. And so now what they're recommending folks to do is to upgrade to version 16. Now, if you had installed, for example, version 14 of the installer, you would then have to go and download version 16 and then install it over version 14, et cetera, et cetera, et cetera. If you're using NPM, the Node version manager, you can just go NPM install and the new version and it'll do all that for you. But what's also great about it is if you have a working on a project that requires an older version, you can specify that you want that older version to be used and using NPM, you can switch between versions. So installing NPM is my recommended way to install Node.js and NPM. And in the installing Node.js and NPM for local WordPress development, I actually discussed this as well. So you'll see about halfway down, I'm going through the text option here. I talk about NPM and then I talk about the commands that you need to run in Mac or Linux or Windows in PowerShell to get chocolaty installed and then using chocolaty to install NPM. So again, if we go to the chocolaty website for Windows and we search for NPM, it's there and there we go and we can install it there. And then once that is installed, we can use NPM to install NPM and Node.js. The same goes for Homebrew. If we search NPM, it should come up. There it is. We can install NPM through Homebrew and then from there we can install Node.js and NPM. You don't have to do it that way. You can just install, I think you can just install Node from here. Let's just do a quick search. So I can just install Node itself. And that will then install NPM for me that I prefer to use the NPM package manager. It's a little bit of an inception kind of thing and they haven't helped themselves by making the abbreviations very similar. You've got NPM and NPM and then it's Elliot pointed out NPMX. But once you get used to the terms and what the different things are, then it starts becoming clearer in your brain. Elliot says he sees, let's talk about NPMX very quickly. So NPMX I think we'll actually find here in the documentation. Let me just do a quick search here. Yeah, there's NPMX. So NPMX is a specific NPM command, bear with me with all the NPs that allows you to install and run packages directly from the NPM package repository. So in other words, what that means is you don't download the specific package and then run a command. You just run it from this repository. And the one area that that is used in the WordPress space is you might have seen something called create block, WordPress create block. So here it is over here. And you'll see that to use create block, this is basically a command that you can run to scaffold the block on your local machine. And you'll see the command is NPMX WordPress create block and then use the latest to create a new block. So WordPress create block, let me find it for you here in NPM. Go back one step. No, we don't wanna go NPM docs. We're gonna go all the way back to NPM. So create block is a package that not that one. It'll be WordPress create block. Hang on one sec. Why is it not finding it today? There we go. So the package called at WordPress slash create block is a JavaScript package that is hosted on the NPM repository. Really, yes, as in execute. When you run NPMX and then give it the name of a package, it effectively, it downloads the files to your computer, runs any command that can be run inside that software and then clears that software from you. It's like cash basically. So it means you don't have to download it and install it as a dependency. You can just run commands. So it's like a way of creating executable commands that reside in the cloud that anybody can run from anywhere as long as they have an internet connection. And it's a very cool way of sharing code if you're a JavaScript coder and you want it to be able to do something on someone's machine without having to install additional packages and all of that. Okay. So, sorry, my screen just went weird there. There we go. Everything's back. So that's why my suggestion, once you've got Docker and so let me go back one step. Once you've got your terminal and your package manager, then install Docker, which you have to install from their website. I don't think there's a, there might be actually, there might be no, let's have a look. I don't think there's a package way of installing Docker. There is actually. I'm not sure if this is the desktop version or not though. So I've always installed Docker from the website using Docker desktop. That's always what I've installed. So that's my recommendation there. Once you've done that, then you can install Git and subversion using your package manager and you can install NVM using your package manager. Once you've got NVM installed, then you use NVM to install Node.js. So to do that, I'm gonna show you quickly over here. With NVM installed, if I go NVM minus V, I've got version 0.3.9. I can now go NVM install and I can just say, for example, 18 and that will install Node.js and NPM version 18. Or I can install 16 or 14 or whatever the case may be. I can also check which versions I have installed. So if I go NVM list, it shows me that I currently have 16 and 18 installed anyway. You see, there it is there, 16 and 18 are installed. And I can install any of these other versions as well. So my recommendation is use your package manager to install NVM and then use NVM to install Node.js and NPM. Node.js and NPM just come with one command. If you go to, let me find it here for you, where is there is? Once you've got it installed in Chocolatey, it's just Choco install NVM and then NVM install 18 and then it'll just install everything for you. If you're on Homebrew, it will be, where is it now? It'll be brew install NVM or if you're on Chocolatey, Chocolatey we've done if you're on Linux, it'll be apt install NVM or whatever the case may be. You can also, if you're on Mac OS or Linux, you can copy this command and that'll install it for you as well. There's multiple different ways of doing it. Okay. I know this is a lot to take in, which is why I don't suggest you do it now while we're busy talking. The other thing you need to install is something called Composer. Now Composer is a package manager for PHP. So again, just like folks are writing packages in JavaScript, they're also writing them in PHP and there are certain packages that the Learn WordPress code base users that are written in PHP. Now again, depending on your operating system will determine how you install Composer. Because you've hopefully already got PowerShell and Chocolatey installed, you can install Composer, sorry, you can install PHP first and then Composer, very, very easy. So you will see in the Composer documentation, I don't think it actually says it at the top here. So let's go to the home page and then let's go get started. Sorry, I'm just moving these zoom controls around. Actually, let me just hide them. You will see that system requirements very specifically are, you need to be writing PHP version 7.2.5 or above. My recommendation is run something like version eight or newer, 7.4 is a deprecate version, so I wouldn't use that. Now, if you're using, let's say you're already using a local development environment like local WP or DevKinster or MAMP or any of those, those come with their own version of PHP installed. And in some cases, if you have that installed, you can use it with Composer. When I was preparing for this, I did a very quick search for local WP and Composer and you'll see that for local WP you have to basically curl SSH. You need to open the site to SSH because I think they're using some kind of virtualization. It looks like they're running some kind of Ubuntu virtualization because they're running apt-get, which is an Ubuntu or Debian command. And then you run all of this and then you can get Composer installed. If you're using something like DevKinster, there is also a way to do that. DevKinster uses Docker. So they do talk about here about how you can Docker execs and you can do the Composer setups and all of that. And so that is possible. My recommendation, depending on your environment, if you're on Windows, I recommend using Chocolatey to install PHP. It's just gonna make your life much easier. And I'm gonna go back to that video that I was playing for you earlier because I wanna show you how that works. So I don't know if I've actually got it here. No, I don't. But actually I might have it further down. I just wanna show you a very quick window. So this is Composer. This is means... So here we go. So there. Okay, let's just pause here for a second. Let's go back a few steps. There we go. So in Windows, if you're using Chocolatey, it installs everything in a folder called Tools. This is on Windows 11. Windows 10, I think it's a folder in your program files called Choco or something like that. I can't remember exactly where. But everything's in one specific folder. Now what's great, and it also sets up all the path environments and all the environment variables. What's great about that is once you install it through Chocolatey, you can just run the commands from PowerShell. And then when you're installing Composer, it picks up and you'll see in this previous step here, and that's why I went to this location, it picks up where that executable is. So I didn't have to do any massive configuration to get this to work. All I had to do, let me go back a few steps. In PowerShell, was, let me find the check quickly. Sorry folks, meant to edit this before the video, before the workshop, but I completely forgot. Where is it now? Here we go. I literally just had to run Choco install PHP and it did everything else for me. And then once it was installed, I could just run. So I tried to run PHP minus V from the command line to check if it was installed. It says it's not recognized yet, but if you're used to running in the terminal, often once you've installed something, you just close the terminal and reopen it. So I reopened PowerShell, which we'll see over here, ran PHP minus V, and PHP is installed and ready to rock and roll. So that is my recommendation. If you're running on Windows, if you don't really have a terminal, if you don't really have a package manager, that's why I recommend Choclity. It just makes everything easier. One final tip there. When you're installing software like Choclity, like NVM, like PHP, always make sure to run PowerShell as administrator. I'm gonna see if I can find the other. I clicked on PowerShell and I went run as administrator. This is effectively the same as running a Pseudo command on a Mac or on a Linux environment. You need those administrator privileges to be able to install the software to make sure it's available system-wide. Once you've installed the software, then you don't have to be an administrator to run the PHP commands or whatever the case may be, and you can then go ahead from there. But whenever you're installing software, using the terminal, using PowerShell, always make sure you're running as administrator. Right, on a Mac, you can do the same thing in Homebrew. You can install PHP just using brew install PHP. It'll install the latest version, which is currently 8.2, which is perfect. And then from there, you can then run the Composer installer. And then on Linux or any other kind of Unix environment, you will have whatever the package manages and you'll be able to install PHP that way. Once that's done, Composer supports an executable file that you can run locally. If you're on Linux, Unix, or Mac OS, you can download the file, you can run it, you can install it, and it just works. Same for Windows. You can download the Composer setup.exe, run it, install it, and it'll just work. And this is what I was doing in this video over here. So there I am running as administrator. I'm checking that the PHP version works. It does. I then simply pop on over to the Composer website, which I'm doing here. I download the Composer setup file, install it for all users. I don't know why the screen goes blank. And then it comes up and it says, right, do you want to install? And I just literally went next, next, next, next. It picked up where the PHP executable path is, and it was just installed and ready to rock and roll. And as soon as that was installed, I could then, and I think I do have it long here in a second, I could then open up my terminal, my PowerShell, and I could just run Composer. And I think it was uppercase v, not lowercase v. Yeah, I did it there, run second, uppercase v in there, and the Composer is installed and ready to rock and roll. So again, having a solid terminal, having a package manager that installs these things for you does make life a lot easier depending on your environment. The other way that you can install Composer is you can run the certain commands that you can run. There is this local option where you can download and install things. There is a global option. Essentially, you just need to be able to run Composer commands. My recommendation, if you're on a Linux or a Mac environment, just to follow the global method. So that effectively what you end up with is in your terminal, you can just run the single word Composer minus v. And once you can run that in your terminal, then you know it's installed and you can use it. Most of the software has a minus v switch that you can run. So NVM minus v gives me the version. Node minus v gives me the version. NPM minus v gives me the version. PHP minus v gives me the version. And then Composer specifically has an uppercase v. I don't know why Composer does that. But Composer is uppercase minus v uppercase and it gives me the version. When you can do all of those things, then you know you've got everything set up, everything is correctly configured and you can then continue from there. You can also do SVN minus v usually or subversion I think it is. Subversion is not found. Hang on, maybe it's not minus v. Let's just try something. So let's go SVN help. It's probably, there isn't a version option for SVN. It's so old. But you can see SVN is installed or subversion is installed. And then get minus v as well will give me the get version number. So whenever you, as long as you can run all of those commands, get SVN, NPM, PHP Composer, as long as you can run those commands from the root of your terminal, you should be good to go with all of that. Then Yarn. Now Yarn is very specific as you can see an NPM package. So Yarn, we will install using NPM, not homebrew or chocolaty or whatever other package manager we're using. So if you go to the NPM site and you search for Yarn, you will see there it is. And to install Yarn, you simply run, they don't have it here for some reason. There's a link to the installation guide. Let's go and have a look at that. There we go, into NPM install minus, minus global Yarn. So that's using the NPM package manager to install Yarn on your software. And again, just like all the others, you can normally run something like Yarn minus v and it'll give you a version number that it is installed. So that's all the setup. That's all the software setup that is needed first. And my homework for you all today, we haven't finished with the workshop yet, but my homework for you all today is to try and get all of that software set up. So if you're interested in doing this, I would like you to give it a try based on all the links that I've shared with you today. I would also like to offer you the opportunity to reach out to me in the Making WordPress Slack in what's known as the MetaLearn channel. The MetaLearn channel is a channel where we discuss specifically the Learn WordPress platform. We run triage, we run back triage, we do PR requests and all that kind of thing. To do that, you will just need to register a WordPress profile, which many of you probably have to have signed up for these Meetup events and you will need to make WordPress Slack account. And if you want to get the setup, I'm going to suggest we do it by this time next week because I'm probably going to be running the follow up session to this session next week. So if you would like to get this all set up, I'd like to give you some homework if you're interested to try and get this all set up on your local environment. And if you get stuck, reach out to me. Once you have, I'm going to open up my Slack instance very quickly. Once you have, that's the ZA Tech Slack, there is the MetaLearn channel. Once you're inside MetaLearn, you can either just ping me by going at Jonathan and there I am there. I don't know how I managed to get my first name as my Slack name in the Make Slack because there are other Jonathan's around. But if you just go at Jonathan, I am there. I see Eric's giving us a hello there. So you can ping me that way. Or if you're really, really stuck and you need me to kind of read something and you don't want to spam this channel, you're welcome to send me a private message. The easiest way to do that is to search for me in the direct messages list. If you click on the plus there and you type in my name, Jonathan, there's my picture. You can click on that. I'm not going to send a message to myself now, but that will send a private message to me as well. What I would like to do though is encourage you to have the conversation in the MetaLearn channel because then you might be asking a question that other folks are asking as well. And then we can all kind of learn and help each other. You might be asking a question at a time that I'm not around, but somebody else might be able to help. So I would like to encourage you to use this channel to get this set up. Let people know you're busy getting it set up. You're busy struggling with whatever the software is. And I'd like to help you in getting this environment set up if you're interested. Okay. So that is the list of software that's needed. So once all of this software is installed and ready to rock and roll, now you can start thinking about cloning the repository, creating a branch, installing the dependencies and running the local environment. I'm going to go through this fairly quickly because we are running out of time, but it's not the most difficult set of steps. Before I do that, I'm going to close down this massive tabs that I've opened up here. And I'm just going to get to the core code base that I have in my local environment. I know it wasn't that one. It was this one. Okay. So the first step is to clone the repository to my local environment. In the GitHub user interface, there's this code button. If you click on it, you can either copy the HTTPS version or the SSH version of the URL. To use the SSH version, you need to set up SSH keys. For now, I just suggest working with HTTPS version. It just makes life a little bit easier. So if you copy that URL and switch to your local environment and just put it anywhere where you would typically work on things. My general place for projects is in my development projects directory. And I do already have a learn WordPress directory here. So I'm going to remove it very quickly. There we go, our learn WordPress. And that might take a while because I think it's quite big. There we go, it's done. Okay. So to then clone this repository to your local environment, you're going to run the following commands. You're going to say, get clone and you're going to paste the HTTPS URL. Now you'll notice that the name of the repository is this learn-wordpress. So what that's going to do is it's going to create a folder called learn-wordpress and put all the code in there. If I hit enter now, it says right, cloning into learn-wordpress, getting all the files, downloading all the files ready to rock and roll. If I now open up, I'm going to open up visual code studio and I go and browse to that location. So let's go development projects. I've got a whole bunch of other projects that I'm fiddling with here, learn-wordpress. There it is. And there is the code. And you'll see, if I have a look at the readme file, it talks about the prerequisites, which we've already covered. It has a package.js on file. These are all the NPM dependencies that we'll need to install. It has a composer.js on file, which is all the composer dependencies we need to install. It also has some other things that I'm not going to dive into right now. It also has a yarn lock, which is all the yarn specific stuff that we need. And then inside of the WP content directory, it has the plugins and the themes, which are the code that run learn-wordpress. I'm not going to dive into that just yet. I want to get the local environment set up. What's great about the readme is it talks you through the process of how to run this locally. And you'll see that once I have everything set up, it's literally three commands. I run yarn, I run yarn run create, and then I can visit the local environment at this address. So let's see if this works. So I'm going to switch to that cloned repository that I just created. I'm going to just list the files in here. If you're on Windows, it would be DIR, similar thing. So it's the same place. And then I'm going to run yarn. Now, depending on your internet speed and depending on what you're really having installed and set up, it's going to do some things. You'll see here, it's saying to me that the engine node is incompatible with this module. It expects 12, 14, and 16. I'm running version 18. So I've switched to version 18, but I want to use version 16. Now, because I've got NVM installed, NVM, not NPM, NVM, I can simply go NVM use 16. And it'll switch the node version to version 16 for this project. And this is what I love about NVM, and it's why I recommend installing it. Because now if I run yarn, now it shouldn't give me that error because I've switched the version of node to be used for this project to version 16. You'll see it has given me some warnings. So I'm not too worried about those just yet, but it's busy doing some things in the background. It's busy installing files, doing various other things, downloading packages. It might download the Docker environment. It might do a whole bunch of other things. That seems to be done. So we're happy with that. Let me clear this up. So that was fine. That didn't seem to have any problems. The next one is to run yarn run create. So let's copy that and let's run that. So here again, now it's done. So these are the composer packages or the PHP packages that this thing needs. So it's downloading and installing those. It's checking some things out from WordPress meta. This is what it's using SVN for this. This is why we need SVN. So it's getting some local detection plugins, some WordPress meta pub plugin, some WP.org plugin, getting some more PHP plugins. It's doing, now it's doing some yarn type things and some other things. There are some deprecation warnings, but nothing's failed just yet. And you'll see now it's running WP and VSTOT. Now, I already have the containers on my machine. So this step might take a little bit longer on your side. It might have to download the container and then run it in Docker. But because I already have them, it's already running. It'll start up some things. The theme will get activated. The plugins will get activated. So far, everything seems to be going well. It does some URL rewriting. It imports the database. It sets up some locale things, some more locale data. Then it runs this import test content script, which basically connects to learn WordPress and downloads all of the tutorials. And I think all of the lesson plans, I'm not quite sure if it's both. It might just be the tutorials, if I look at ya. They're called workshops. They used to be called workshops. They're now called tutorials. But it downloads all the tutorials so you have some data to work with. It doesn't download the courses. You'll have to add those manually. And it looks like it doesn't download the lesson plans either. But you'll see here, this one took me 78.45 seconds. I have a fairly okay internet speed. I already have those Docker containers installed, as I mentioned. So that made the process a little bit quicker. Elliot says, do we clone learn from WordPress or from no, from my account? No, you clone it from learn WordPress. So on your GitHub account, you go to github.com, wordpress.learn, slash learn WordPress, sorry, slash learn and you clone it, you fork it from there. And once you've forked it to your account, then you clone from your account. So you fork from here to your account. And then once you've forked into your account, then you switch to your account and go to your repositories and you clone from there. You can also clone from learn WordPress, but then you're not gonna be able to push that data back. Okay, cool. So theoretically now, that means everything should be working. And yes, this is my nervous voice because this is the part of the live demo where everything could go wrong. But now I should be able to go to local host 8888 or quad, eight or whatever that is. I'm going to just do one thing and I don't expect you to do this, but I'm going to turn off some of my local virtualization that I have running. The only reason I do that is because it conflicts with WPNV sometime, but this is my other local environment. And now if I open up my browser, where's my browser gone? There it is. Now if I go to local host colon 8888, I should see the learn WordPress code base up and running in my local environment. And there it is. If you do get to this point on your own, you can now log in. The username and password is simply admin and password which is documented in the README. I think it's somewhere here. Yeah, there it is under admin. So the username is admin. The password is password. Let me switch back over here. This does take a while sometimes. I have noticed that when I run it locally, it does take a while to load on my machine. I think it's got to do with the multipass virtualization that I use. So I'm going to quit that now quickly, but here it is. I'm going to type in admin and password. I'm not going to log in just yet because I want to just deal with this warning. So you'll notice here, it says warning and unexpected error code. Something may be wrong with WordPress.org or this service configuration. Essentially what this is trying to do is it's trying to connect to WordPress.org to do something. This has never caused me any problems when I'm running this site locally. So if you do see that message, don't stress too much about it. You may have seen it on your own WordPress sites before where it tries to run the Heartbeat API and it can't connect to the WordPress.org service for some reason. I don't know why it happens, but it sometimes happens to me. But if I log in here now, again, sometimes this takes a while, I will basically have access to a version of the Learn WordPress website. I will be able to browse the tutorials. I'll be able to create some courses, everything in my local environment, and then I can work with the code and I can try changes and test and do different types of things. As I say, this does sometimes take a while. I haven't quite figured out what it is. So just bear with it. It does eventually work. But I just have to wait a few seconds and wait for it to come up. Yeah, this is taking it longer than I'm used to. Normally by now it's pretty quick. So I don't know why this is taking so long. I don't know if it's a series of commands that are trying to connect to WordPress.org. As you can see, the front end still loads pretty fast. For some reason, the login takes a while. Sometimes navigating the dashboard takes a while. But the front end still works. So what I'm gonna try and do is I'm gonna try and see if I can get to the dashboard. Let's start this way. See if I can get through it this way quickly. Oh, there we go. It's still loading. Still trying to log in. Not sure why that's a problem. Let me just stop loading that. I could enable debugging and see what errors are happening. But there we go. Okay, so while that's happening, Elliot has a question. So to pick up tickets and issues, we need to go back to the WordPress learn repository. Correct. So if you want to fix a bug for learn WordPress, you would go back to the learn WordPress repository. You would click on the issues tab and then you would search for anything with the label bug. Because we use the issues tab for both code related problems and content. So my recommendation is to filter by bug. I will share this link with you in the chat. And then here you will see all the bugs that have been reported. And then you can see if there's any you wanna fix. The dashboard has loaded. So here it is. As you can see, there's something. Something is trying to connect somewhere and it's not very happy. So that's why it's taking a while. But here it is set up. I've got lesson plans. I've got tutorials. I've got the Sensei course plugin installed. So I can now work with this and I can now test this. Okay. Yeah, so here are the bugs. My recommendation, if you want to fix something, we're gonna dive into this a little bit more next week but it's a good idea to cover it now. So there is a bug that I actually want to work with. I'm going to give me one second while I just find the bug very quickly. It's one that I specifically highlighted for this workshop. It's this one over here. This is actually more of a feature enhancement that folks have asked for. Somebody said it might be a good idea to see when the content was either created, published or updated. So that's the issue I'm planning on working on. So what I recommend you do if you find an issue that you want to work on. Sorry, let me just search for bugs again, find it and then just leave a comment on the issue and say, I am interested in working on this. So in the comments area, just leave a comment to say I am interested in fixing this. The reason I suggest that is because every week I run something called a bug triage. But basically we sit and we look at any open bugs and we verify whether they need to be fixed or not. And we sort of assign them priority and then we go from there. During those sessions, if I see someone that's interested, I will be able to assign them to that issue and then let them work on it and sort of follow up with them and keep an eye on what's going on. So if you want to fix a bug, I don't suggest just starting to fix it because what might happen is somebody else might decide to fix it and then two of you are working it on the same time. So all I suggest is just commenting on the bug and saying, hey, I'd like to give this a fix and then somebody from the team will probably respond and either assign it to you or have a chat with you about it. But we're going to dive into that all next week. So next week, my plan is now that we've got the local environment set up I'm going to show you, I was going to show you how to create a branch. We're not going to do that this week. We're going to do that next week I'm going to take this out of here. Next week we'll create a branch locally I'll explain why we're doing that. We'll work on the bug. I'll probably code the fix before next week session and I'll just kind of show you what my intended fixes and then I'll show you how I submit that as a pull request so that somebody else can review it and then we'll go through from there. So this will probably be next week there'll be another session and I'll also allow some time for any questions about the setup process. If you get stuck on that process between now and next week and you don't get a chance to ask them to me and they're made to learn feel free to bring them there as well. And then I'll actually sit and we'll work on a bug, fix it and create the pull request so that it can be merged. Okay, that was I know a lot of information. It was me just talking just you know, rambling information out there. Hopefully I've given you some guidance on how to get started and where to go. My suggestion as I say is number one make sure you've got your GitHub account. Make sure you've cloned the loan WordPress code to your personal GitHub account. Then make sure you've got a terminal, a working terminal. So if you're on a Mac, you've got a terminal already. If you're on Windows use PowerShell and get the one from the button. So there's on Windows 11 there's something called Windows PowerShell that I think gets installed on Windows 11 but then you can also install PowerShell separately. I recommend installing PowerShell separately. It's much more powerful. You can do a lot more with it. One of the things you can do with it is install Chocolatey. So on Windows get PowerShell, get Chocolatey and then if you have some time go through this installing Node.js and NPM because if you can get through that and get those things set up you've got a lot of the prerequisites installed already. So yes, this is me promoting my own content but it's a good place to start. Once you've got all that set up then look at getting Docker installed use your package manager to install get and subversion. If you've gone through that tutorial you'll already have, sorry, I'm rushing I'm talking fast, slow down. You'll already have NVM and Node installed install composer from the composer installation instructions and install Yarn from the NPM packages. If you decide you wanna do this and if you get stuck please do reach out to me in the Metaslack. I'm not around all the time I'm around from 8 a.m to 5 p.m South Africa time but if you do ask a question I will respond when I get back but hopefully somebody else who's around will be able to respond as well. Jamie who you'll see here is somebody who's in Australia time. So he might see US time questions and be able to answer them he's already got the environment set up himself so he might be able to help and there are others in this channel that might be able to help as well. So I encourage you to give it a try see if you can get to that point where you've at least got the learn WordPress code base up and running in your local host quadruple eight and then next week we will kick off with how we fix a bug and how we submit the pull request. Okay, any other questions on all of that before we wrap up fix today? Cool, it looks like we have no further questions. I will be uploading this video to WordPress TV during the course of the day tomorrow. So if you want to watch this again and refresh your memory, use it in the different spaces feel free to let me know. All the links to all the different pieces of software are in here. So in the slides, I have linked from the meetup.com event. So you're welcome to grab them for there. I specifically linked the Google slides so that it should be easier for you to click on links and copy paste things and all of that. So they are listed here in the comments on the meetup. Thank you all for joining me. As I say, we will be running part two of this next week. So if you would like to get this all set up by next week, I encourage you to do that. Otherwise just join me next week and we'll fix a bug together. But otherwise enjoy the rest of your week, enjoy the rest of your Wednesday and I will see you either tomorrow in my workshop tomorrow or I'll see you next week. Thank you very much and goodbye.