Gutenberg tutorial, block programming workstation

Today we are going to talk about how to schedule our first Gutenberg block. And what better way to start than by learning a little about the languages ​​we will use to program our blocks?

The first thing we should know is the languages ​​with which Gutenberg blocks are programmed under conditions. The new publisher of WordPress works with ReactJS, a language based on javascript. That is why, of course, we should know this language or at least be determined to learn it.

Then we should also know about HTML y Sass, since these will make up the structure and appearance of our entire block. And finally, it would be convenient to know how to deal with npm, a very useful code package system. This last resource will help us compile all our code into a solid plugin.

Programming Gutenberg blocks has never been an easy task, but we encourage you to give it a try.

Preparing our workspace

Once the languages ​​that we will use are clear, it is now time to know the tools with which we will develop our first block. First, we must install the npm through this link. Once installed, we will continue to download a tool developed by ourselves to make the process of managing blocks easier. Is called brok-guten-block, and is a repository of GitHub public that can be downloaded and used by anyone for whatever use they want. In order to download the repository we will simply go to this link and we will click on “clone or download”.

Once we have the zip, and being local, we must take it to the folder plugins of our WordPress. Once this is done, we will only have to unzip the folder and activate the plugin in our administrator.

Now it's time to configure our workspace. We will simply open a command terminal inside the brok-guten-block folder and type the following command: npm install. This command will configure our plugin installing all the minimum and necessary dependencies to start programming Gutenberg blocks.

Any questions you have in these steps we can resolve through the comments, do not be afraid to ask, we do not bite.

Console commands to manage our blocks

Once the previous process has finished, we can use the following three commands to manage our blocks:

• npm run create "block-name": We will use this command to create a block with the name we want. The command is programmed to set up a block inside our plugin and save us all that work.
• npm run remove "block-name": We will use this command to delete any block that we have created just by indicating its name. The command is programmed to correctly unconfigure our plugin block.
• npm run export: We will use this command to export all our blocks within a plugin and thus be able to transport it to another WordPress installation.

Once all this is done, we will have everything ready to start programming our first block by hand. Since creating Gutenberg blocks can be huge, we are going to cut this article short and post a new one soon where we will start programming.

We hope you liked it and found it interesting, in fact, share it if it was the case. You can also leave a comment below and leave us your conclusions, we will be waiting for them. Greetings, and see you in the next article, until another time.