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.2 Touring the Block's Code

The majority of our block's code is JavaScript. Let's take a moment and peek around the files and what they're used for.

2.2 Touring the Block's Code

Now that we have our development environment all set up and ready to go, we want to start diving into our actual development and the first thing that we need to do is see our block in action. And it's kind of interesting that they didn't automatically add our block to this hello world post, but maybe one of these days we'll get there. So we need to edit the post. So we will go to WP admin. And the username and password is just admin, and password. Yes, it is not secure. This is a development environment doesn't have to be. So we want to go to posts. We want to edit hello world and then we want to add our block to our posts. Now, we can do that in a couple of different ways. The first would be to just go into the content of the post, click on the plus sign over here and then we can find our guitar-entry right there. Now we could go to the top and click on the plus sign. We can search for our block. But if we scroll down enough, we will see it. There it is. So we'll just drop that in and then let's take note here. This is automatically putting in some texts. Now we can't edit this text, because the starter block that it gives us doesn't have that capability yet. We have to go in and add that functionality, but it is putting in some text here. Guitar-entry, hello from the editor. Now, make note of that hello from the editor. Let's update and then let's go, and view the post. Whenever we view the post, we're going to see something different. Hello from the saved content. So the first thing, we essentially have two parts to a block. We have the editor what we see in the editor and then we have what is actually saved into the database. So as we are editing our posts and we are editing the content within our blog, whenever we save that, it's going to essentially be serialized and saved into the database and it's going to stay there in the database until we edit that post and we change the content of our block. So a lot of our job is to design the editing experience. So that whoever needs to add a guitar to their post can do so easily and we don't really have to worry too much about the serialization when it gets saved to the database, but we do have to setup our blocks. So that it can pick out the appropriate information whenever the post is loaded back into the editor, so that that information can be properly displayed within our block. From here, let's go ahead and dive into the code, so that we can get an idea of what we have to work with. We are going to start to inside of the source folder and there's this indexjs. This is essentially the starting point for our block. Now, our block is a react component. And if you aren't familiar with react, then I highly recommend that you just go ahead and stop for now and get somewhat familiar with react. It is quite simple to get up to speed, even just the bare fundamentals with help. Now, there's quite a few things going on here. You're going to see this call to registerBlockType. This is essentially registering our block and you can see that it has a name here. The name is namespaced and this create dash block is the namespace and the reason why that is there is because the create block command created this whole thing. So we're just going to leave that as is, but the overall name of our component is create-block/guitar-entry just so that you can see that. You can see that there's this API version. There's a title. There is a description for this block, a category an icon. Now remember that whenever we added the block to the editor, the icon was a smiley. That's where we can control that. We can also setup these two methods here, edit and save. And in fact, these are probably the most important parts of a block, because they control what we see in the editor. That is the edit method and then it controls the save, how we save that stuff. So this is actually broken up into two different files. There's a file, specifically for edit and one for save which is nice, because used to those methods were just directly inside of the same file. And you might guess that these methods get rather lengthy, because there's a lot going on inside of the edit and save method. So now, those are broken out into their own files. And so let's go to edit first. You can see that we are importing quite a few things, the international itemization, that's difficult to say. There's a few other things the editor CSS there, but the main thing is the actual edit method here or the edits function. It's not a method. So we can see that we are returning a p element and it has the guitar-entry, hello from the editor. That is exactly what we see inside of the editor. So there we go. That is where we can control what we see inside of the editor. Let's go to the save file, kind of the same thing. Importing some stuff and then we are outputting a p element where we have our content. There is guitar-entry, hello from the saved content. So if we look at the post, that is exactly what we see there. Now remember that I said that whenever we save post, whatever we have inside of our block is going to be serialized and saved into the database and then our code has to actually deserialize all of that stuff. Whenever it is loaded into the editor, so that we can then edit our blocks content. Well, let's do this. We're going to change what the save method is going to do. Instead of hello from the saved content, we're going to say this is changed. And right now, that's not really going to do anything. We need to go to the command line. We need to run npm start. This is going to start up web pack which is going to be watching changes to our files, so that it will automatically rebuild everything that needs to be rebuild, so that we can refresh the browser and use our newly updated block. So now our block has changed, because we changed the code of the Save function. Let's go to the editor and we are going to just refresh the page here in the editor, and we're going to see an issue. Let's close that autosave, we see this. The block contains unexpected or invalid content. Now, this is something that we're going to see throughout this course. And the reason why we are seeing it is because as the post is being loaded into the editor, it is taking what is in the database and it has to deserialize that, so that the content of our block can be displayed inside of the editor. Well, we changed what is expected in the save. So as WordPress is a loading of our post from the database, it's also using what we have inside of save. It sees that there is something wrong there, it's completely different. So we get this error, the block contains unexpected or invalid content, because what's in the database doesn't really match what's inside of the save function. In our case, it's not that big of a deal, because we don't really have any content to lose. However, we could lose content, but that's just part of development. So we're going to attempt this block recovery. And in our case, it's not going to really do much of anything. In fact, it looks like nothing happened. But if we update the post and if we go back and refresh the page, we're going to see that the saved content is now different. So starting in the next lesson, we are going to work on the editor experience. And one of the great things about developing Gutenberg blocks is that there are other components that are available for us to use inside of our own block.

Back to the top