 So I'm going to extend on his talk on how to create your workloads, basically how to get started in the terminal development. So my name is Prasad Nandharjan and I'm going to do another project, another project on any key dimension. So I'm going to create workloads on how to create your workloads. Before that I'm going to show how many have been on the workforce yet. How many of you have tried to do terminal development? How many have tried to do it? How many have tried to do it? How many of you have tried to do it? So what is terminal work? I plan to do a simple interaction, but I think they will cover most of it. So I'm going to do a quick introduction about what is terminal work and how does it work. I think they will cover most of it. So I'm going to skip this slide and make this slide. So this is the new Gutenberg editor. You can see I have created three simple blocks. The first one is the paragraph block. The second one is the quad block and the heading block to show how the Gutenberg editor works and to know how everything is a block in the new editor. So if you see there's a block navigation bar, you can see the new Gutenberg editor that will show you the list of blocks that has been used in the page in a sequential manner. So that way it shows you that blocks are the basic building blocks for any post of page. So I'm going to quickly dive into how to get started with work development. So the first thing is there are a couple of assets first you need to create to develop a new block. The first one is a PHP file, a JavaScript file and a style sheet. So the PHP file will basically include your scripts and style to the font editor. So the new Gutenberg editor is completely on JavaScript. So what it does is it will give you a visual representation and it has a code representation as well and many will save your content. It will send the necessary markup to the backend to save it. So you need a PHP file to include your scripts and styles. And in your script you have to register your block. And in your styles you have to define your styles for the frontend and backend as well. It's easier to have them separate for example. You can have two separate styles sheets. The first one will be for both frontend and backend. And the second one is the style specifically for the editor. For example if you want to highlight anything in your paragraph, something like that. So this is how your block.php is going to look like. So again it's developer centric thought, sorry thought. I'm sure most of you understand this code sweeper. So what you are doing is basically you are enqueuing your styles and the script. So normally what you do in WordPress is you use the admin and queue scripts and the frontend actions. But Gutenberg does provide two constant actions for that. So you can use the enqueue block assets to enqueue any assets in the frontend and enqueue block editor assets to enqueue anything in the backend editor. So that's basically what it does. It loads all your assets to the frontend and backend. And this is how your first block is going to look like. So everything in JavaScript is an object such as two for Gutenberg assets. Every editor, sorry, every block can be represented in a block. So what you do is you import the register block type function and you register your block. There are two parameters to give to this function. The first one is the name, a name spaced name. So I'm going to run through a basic example that displays the welcome message in our WebCamp KL website and how I can extend that to incorporate more and more features. So there are a couple of options you need to, that's mandatory and there are a couple of them are optional. For example, a description for the block is optional and an icon is optional. I'll give you keywords so that can be used when someone searches a block. That's optional. So you have to define a title, a category and there are two functions you have to define. One is the edit function and the same function. So what the edit function does is whatever you define inside it will display in the editor and the same function, whatever you define in the same function will be displayed in the front end. So I have a slide here. For example, you can see I'm displaying what displays in the editor and what displays in the front end. Two messages. So if you insert that block in the editor, you can see how the display remains where it is from the back end and the front end. So what displays in the editor is being displayed in the Gutenberg editor and the front end display is different. So that's maybe a hell of a very basic block you can start your development. So I'm going to extend more on this. So these are two static, this is a static block in displays message. So I want to modify this to display what I give as an input. Yeah. So this is a block preview and in Gutenberg when you go through this hamburger selector and when you see the code editor, it displays what is going to be displayed in the front end. So internally what Gutenberg does is when you type something, it converts what is going to be displayed in the front end and it holds it as an object and when the time comes it saves it in the back end as well. So you can see the differences here in the front end and back end. So I mentioned earlier I want to introduce an input so I can type in a welcome message and display to the user. So that's where the block attributes comes into play. It's basically defined, can be defined as a state of a block. Make the properties of the block. Okay, let's make the text editable. So I want to, rather than displaying a static message, I want to give you an input so you can type in whatever you want to display. So this is how it's going to look in the editor. The text is now editable and this is the code for that. So what you have to do is you have to introduce an, so you can see the title and the category. At this time, we have put the slides on the WordCamp channel website. So if you want to find the slides so that you can see the code, then you can go to 2818.com or you can find the slides. So the title and the category was from the basic look. I'm introducing here an attribute here. So I'm calling it as a content and here I'm defining a couple of properties that describe the attribute. For example, it's of type string and the source of the attribute is, there's a selector. So I'm passing a custom class as a selector and the source of the attribute is going to be what's inside that selector. So that's what meant in this attribute property. And here I'm modifying the editor and the save function to accommodate the new input text. For example, in the edit function I'm introducing an input feed and in the save function I am displaying the what is being inputted in the input feed. And when you type something, I have defined a launch event that will set the attribute, the new attribute for this block and it displays it in the save function. So whenever you type in hello WordCamp KL, it's being converted in the save program. It's displayed in the backend map. So that's on the right side you see the basic block we have created earlier and you'll look at the new block that interviews an input feed. So next I'm going to talk about block controls and inspector control. That's the next step of good work development. So when you define a block or you want to create a new custom block, there are a couple of in-built features in the good work that you can use. For example, when you select your block an inspector controls will be displayed in the right side and a list of block controls will be displayed at the top. For example, this is a heading block and if I select the heading block, there are a couple of options from the heading block. For example, I can define the text alignment for the heading and there are a couple of options in the top. So these are block controls and inspector controls. So I'll show you an example. Let's add a color picker for the outcome text. So this is how it's going to be displayed in the good work editor. So for our basic example block, I have added a color picker so that I can change the color of the text. So this is the code to how to do that. So the difference here from the previous code block is I'm introducing an inspector control element and putting whatever I want inside that so it gets displayed in the block inspector. So I'm introducing a color input and I'm defining another attribute for this block called color and I'm saving the attribute whenever it's changed from the inspector control. So let's look at behind the scenes what's happening. So when you go to your code editor and when you see what's being saved in the back end, notice something different from the previous slide. The color is being saved as a limited element inside the comment. So the difference why it's happening is here you have defined a selector for the content attribute but for the color you haven't defined a selector. So what Gutenberg does is it saves the message inside the comment dealing term. So everything in the Gutenberg editor every block will be saved inside this wrapping comments that tells the Gutenberg that this is the separate block so that every time the page is closed and it passes it and displayed it in the editor correctly. So next I'm going to run through a couple of options in the PHP API you have. As I mentioned before, Gutenberg is completely JavaScript based but there are options in the PHP side you can pass around to a block. For example, block templates. So if you define a custom post type let's say speaker and you want to define couple of elements that's needed for the speaker. For example, I need a profile picture, I need a text and I need a description for the speaker I can define it as a block template. So this is the code on how to do that. So if you're a WordPress developer you're mostly familiar with this code script that you register a post type inside the action and so the new parameter here is the template and you define three blocks that all the speakers must have and there's a new parameter as well it's called template log. So when you define this there is no other blocks can be added to that post type. So this is how it's going to look in the background. You need a title and description and an image as well. Next thing we are going to look at the register block type function that's the new PHP function to define couple of properties of a custom block. First you have the render callback argument. So in our previous slide, in our previous slide when you register a new block there are two functions. One is the edit function which describes what's going to be displayed in the editor and the same function which describes what's going to be displayed in the function. So let's say these are static blocks and let's say you have a data post type custom block and you're not sure what to display in the front end and it's going to be defined when the page loads. You can use this render callback function. So what it does is if you have defined a render callback function for a custom block it overrides the javascript same function and uses this to display what's going to be displayed in the front end. For example I'm returning a simple string that hello over can't hear and this string is related from PHP. The next set of parameters you can use with the editor script and editor style. So rather inquiry your assets for front end and back end you can define the custom handle for your javascript file and the style sheet and this function will take care of loading these in the necessary places. The next thing I'm going to quickly run through is Gutenberg plugins so we have a custom block then displays a custom message and we input and we have an option to add to set the color of the text as well. I want to add the sidebar in the Gutenberg editor and display some information about the work campaign so I can look at that. So this is how you do that this is the function provided by Gutenberg. It's called register block it's simple as register block type you have to pass a name and an object that has an icon property and a render property so what is rendered it renders is the date of work campaign and you can see how it's displayed in the Gutenberg editor what you pass inside the plugin sidebar will be displayed in the plugin and what will pass inside the more menu item will be displayed here. So you can select and deselect the display of the plugin. The next thing I'm going to run through is Gutenberg codes. I'm sure most of of you are familiar with WordPress that's the building, the base for extending WordPress and they have introduced the same concept for Gutenberg as well. So this is the hook API for Gutenberg so looking at this you can identify a lot of familiar functions and add filter add actions or remove filter and remove actions these are same for PHP and it behaves in a similar manner in Gutenberg as well. So let's say I have a custom block that displays a welcome message that's been written by some other developer and I want to control some of the attributes of it. For example if someone types a welcome message I want to remove the spaces in the front and in the back as well. I want to trim them. So that's where the filter function comes into play. So this is a registered filter, blocks.getSaveEnable. What it does is when you edit a block and it's before it's going to save in the backend in the save object you run through this filter so you have the option to modify properties. For example I'm using this filter to pass it to a function called trimContent and what I get I get the content attribute and I trim it and I return back the element. Gutenberg comes with a lot of components. For example in my, the block I have walked through the displays a welcome message uses simple HTML elements but Gutenberg comes with a lot of previewed elements as well. For example there is an input component for the color picker you can use the color pilot component and there is much more you can, if you go to their GitHub page and see their source code you can see all the components inside a cages component. This is the last thing I want to talk about. So setting up your development environment for Gutenberg so I would highly recommend there is a GitHub project called Create Gutenberg so it works similarly for create react, similar to create react if you are familiar with that. So what it does is you have to install that and if you give a name for your block it will generate all the necessary assets and the build scripts and the configuration for that so you can straight away dive into the block development otherwise you have to enqueue your assets and configure your webpack file and maybe configure the ES6 transpilers before you can actually start your development. So if you are not familiar with all those things you can use this create Gutenberg to create the block and dive into development right away. The second thing I would advise is set up the Gutenberg from the working copy from GitHub not to don't install the plugin from the plugin repo because it comes with all the build files so if you are writing a block and you want to figure out what's going on and you want to look at the source code it doesn't provide the source code the third thing is always try to use the modern javascript ES6 it's better. Always output the original source to the frontend for example if you are using webpack maybe you can use the dev true parameter that will output the original frontend code and use breakpoints to debug and then using console.org is very slow so if you use console.org for javascript it's very slow especially if you want to get used to the internet and the last thing is very new to me like after I finish the presentation one of my co-worker has set up a module replacement in Gutenberg so in the co-project they still don't have HMR but you can create a config while that will enable you to use HMR. I'm sure if you are from a React background you'll be familiar with HMR if you set up a React to automatically come with HMR developer so if you are not familiar with HMR it's like when you edit a file and save it it quickly loads the module then you can display all the changes so if you are in a traditional environment you have to reload the page so I have a screenshot of my development environment which is how I use to develop Gutenberg so here you can see so in Chrome if you go to the page term it displays it will display all your files in source mode and you can set debug points as well so I'm using JetBrakes I'm sure most of the modernization has the same features so I have installed the Chrome extension for JetBrakes and started the listener here and if I set a breakpoint let's say in the trend content method and I want to see what's being passed to this function I can see this here in the inspector and I can also see this here in the Chrome inspector as well and here you can see the course there so remember earlier I mentioned to use Gutenberg from GitHub and not to use the plugin because it will enable you to see the source of Gutenberg as well and you can, let's say it's calling trend content and you can see the previous function and the previous function and see how Gutenberg actually passes here content before passing into those so if you have developed with PHP I'm sure your family will take debug and how it helps you to debug most of the backcabs you can do these two things in JavaScript so I took this feature because for a long time I was using one and I found it very time consuming so that's all I have for today