 We have a plug-in developer, core contributor and I think it's very good to help the community. Abdullah, we have you here. Thank you for coming. Get on the stage. Assalam-o-Alaikum. Abdullah here from Prestaigaz as Kamran introduced. I am the plug-in developer from Prestaigaz site and I am the WP core contributor as well. I am contributing to core since 4.9.3 and I love to contribute to WordPress open source projects as well. Also, I am the international representative for WP Urdu support forum. WP Urdu support forum has been set up and I have done some work for it. If you are not good at English or if you are good at Urdu, you can ask your question at urdu.wordpress.org In 24 hours, you will get a response in Urdu. It has not been set up yet but it has not been kicked off. I would like to ask some volunteers if they want to help in Urdu, they are most welcome. You can reach me in happiness bar. And the next thing is what is Gutenberg? My talk was about Gutenberg and its development. The third is how to develop custom blogs in Gutenberg. And the last thing is how to contribute in Gutenberg as a developer, as a non-developer, as a non-technical. Anyone can contribute to Gutenberg. All right. Thank you so much. Thank you so much. Gutenberg is basically a new WordPress editor as of sometimes and really like to happening in 5.0. It's like what you see is what you get. You can see just one thing. Who is know about Gutenberg? Just raise hands. Who knows about WordPress? Sorry, Gutenberg. Anyone use Gutenberg? Anyone develop custom blog? Okay. Thank you. Okay. You must have used WordPress editor. It's a classic editor. It has a view in one tab. It has a classical raw HTML. It shows the preview in the view. Gutenberg is the same thing. The thing you want to see on the front-end is the same thing. The preview is listed there. It's the same thing. The content paradigms in this blog. As you read the newspaper. What is the newspaper? It's all about blogs. The idea of Gutenberg is taken from Printing Press. When the newspaper is published on Printing Press, it's in the shape of blogs. In blogs, every content is managed through blogs. You can use any small news. In the same way, you can use the blog in Gutenberg. You can write your own blog. You want to set a page. There is a post and a blog. You can manage it with it. And the fourth thing is it comes with simple blogs. But you can develop custom blogs. In Gutenberg, there are some by default blogs that are mostly used. For social share, for paragraph, for formatting. You can use it for video sharing online. For YouTube, you can use it as an embed blog. You can use it for bloggers. Gutenberg and other page builders. Most of the bloggers are WordPress users. Vigil Composer, Divi Builder, Vivi Builder, Elementor and Page Builder by SiteOrigin. You must have seen all these plugins. You must have used WordPress users. They have their drawbacks in their place. And in Gutenberg, there are pros and cons in their place. The WordPress users and bloggers are well known. But in the current situation of WordPress, Gutenberg still has a lot of flaws. There are still a lot of critical issues that are fixed now. And the Met Mullenweg announcement was made here. In Belgrade, Serbia. The word camp in Europe. It was said that I will discuss in the road map about how to plan Gutenberg next and how long we will launch it. The next thing is the vision behind the developing Gutenberg plugin. Everything is a blog. If we want to display anything in Gutenberg, we can simply take a paragraph text from the plugin and take different formats. Whatever you want to display in your blog, there is a gallery, a mezzanine gallery, a slider. Whatever it is, you have to use every blog in it. And as soon as you use it, in the same direction, in the same display, you will get the preview on the front. And the second thing is all blogs are created equally. And whatever there are, 15 to 20 blogs, there are components, they are all designed equally. And the third thing is the drag and drop is addictive. In this, the drag and drop elements that you have made in the blog, whatever you have listed in your content, you can move them up and down. And the fourth thing is placeholders are the key. In this, the blogs that are being managed, in this, the content, the blog, the placeholder is the key. Through that, the process of the blog works. And the fourth thing is direct manipulation. You will go to any element, you will go to any blog, like you must have used Visual Composer, or you use Elementor or Beaver Builder. What is there? An element is created. You click on it on the edit, then it is listed on Popup, then you edit it, then save it, and then it works. What is there? If you want to update any content or any blog, then simply click on it, change it, and your changes will definitely be updated. And the fifth thing is the customization, the talking, the which we are talking about. And the next thing is Gutenberg. Here I discussed about the basic structure of the Gutenberg, how we can start development for the custom blog development. First thing is Gutenberg based on ReactJS, a modern JS library by Facebook. If you want to create a custom blog in Gutenberg, then it should be React first, it should be the knowledge of React. After that, you mostly use ES6 and JSX syntax, which makes writing much easier. There are two types of syntax, ES6 and JSX, in which this is written. And the third thing is Gutenberg uses attributes to interact with the blogs. The blog API designed by Gutenberg has attributes. The WordPress developers know better that when you look at any API, like post types, if you have a function, then there are attributes on which you are customizing all the manipulations. By using those attributes, you can do the blogs. Next thing is when you register a blog, you have an edit method and a save method. Simply, when you want to create a custom blog, there are only two methods, an edit method and a save method. The blog API is written by the Gutenberg code team. By using the blog API, you have to write two functions, an edit and a save. The blog will be ready. It depends on how much you have experienced with React. By using that React, you can create your custom blogs. And the next thing is the save method is responsible for turning the attributes into HTML that will be then shown on posts and pages. Now whatever content we add in the blog, the content in the blog, as HTML or JSON format, in the mixed format, it will be saved in the DB. Wherever you fetch it, it will be displayed in the real condition. And the second thing is the editor side. Gutenberg reads attributes for each blog and then sets the editor method with those attributes. What Gutenberg does is he reads the attributes and converts them to the original position on the original state down view. Then the editor method allows the user to interact with the blog and change the attributes. The editor method allows the user to interact with any content in a lifetime. It can change it. Any content, any simple paragraph, if you want to update it, when you type anything, you will update it or edit it, then it will definitely interact with the attribute, the component and it will show the preview of it immediately. The fourth thing is the editor method can include the preview of the blog, how it looks. I just talked to you that it shows the preview of it at the same time. This is the real format that is being saved in the WP post content of the database used by the WordPress. Whatever we do, for example, any content, we have a blog in it, we have updated the content, the format, the name, the text, the blog party, the pricing table. The pricing table is a blog. We use that blog and then there are attributes. The data is saved in the attribute format and then there is mixed HTML and JSON format. And the next thing is the Gutenberg roadmap. When Gutenberg was planned in 2017, it was kept in mind in the start that has been developed and some are still there. The first thing is Gutenberg will be turned off. As you use a plugin or a theme, you install it and then it gets fixed. When you activate it, it gets fixed in every page, in every post. You cannot turn it off. What is in this? In Gutenberg, you can switch off the Gutenberg plugin and move it in the classic editor. The second thing is Metaboxes will be supported. The plan was that the Metaboxes in the post should be supported. The 1.0 release in the start and 2.0 release in it were not there. The third thing is Metaboxes will be supported. The 1.0 release in it was not there. It was not supported. It has been made supported. You can use Gutenberg in the custom post. The fourth thing is you don't need a specific theme to use Gutenberg. It is not necessary to be fixed in a theme that you have to use in your own theme. You don't need a WordPress theme. By default, it will be shipped in 5.0. There is no dependency for it to be fixed in a theme or plugin. The fifth thing is accessibility is not an afterthought. For example, we are writing a blog. We can manage the keys of the keyboard through it. It is called accessibility. The fifth thing is Gutenberg Callout will be added in future WordPress releases. It has been made a month ago. It has been released just a day ago. They have added Gutenberg Callout in it. They have told that they are launching it in 0.0. They are using it to give us feedback. The next thing is what I am talking about that Matt Mullenweg said in WordCamp Europe that was held in Serbia. The first thing is all critical issues will be resolved. The people working on Gutenberg you must have seen that the follow up is going on properly. The issues are fixed. The team is working with dedication regularly. The critical issues are fixed. The second thing is integration with Calypso. This is a tool for WordPress. The third thing is having made 250 posts using Gutenberg. They also have a plan that when they post so many posts we will launch Gutenberg. The beta version is not used now. It is 5 minutes now. Thank you. The next thing is the mobile version will be launched at the end of the year. In Gutenberg API I am winding it up because you don't want to listen. So I am winding it up quickly. Just 2 minutes. It is just 2 minutes. In Gutenberg there are templates. You will read the API and go to the handbook. There is a theme support that you can turn off the templates so that no one else can use it. These are the slides. They are on the .com page. I will keep it. You can see it later. I am telling you quickly that for this Gutenberg custom blog for React and React for all the node modules all the setup webpack and Babel for that you use a simple build plate or a zero configuration tool as you have heard wordpress plugin build plate mostly the plugin developer uses it to build the build plate to start the development. When you use the tool then you will get a structure and I have made a simple blog for you. This is the link. Abdulla1908 a simple paragraph you can open a simple paragraph and install it as a plugin and you will see a new paragraph will be added to the blog and you can start your development and you can make a blog and follow it. The next thing is I will tell you the function and then I will wind up it. The first thing is when you create a blog with a zero configuration tool when you use it when you have a new directory when you use it when you see the structure then you will get a blog.js and you will get the main file. What you will do in that file is a style.sas and an editor.sas editor.sas is used for backend and for backend and style.sas is used for front-end and then for internationalization you will define the constant and second when you use a callback function you will declare the constant and the third thing is you import a component and you will define the constant and then you will use the WPO editor and you can do that. After that you will fragment the WPO element and then you can do any type of simple paragraph of a blog and you will get different parameters basically we will use the callback function and then we will use the title of the blog and the keywords and whatever we want to name it we can set it now the attributes in that type in that type of attributes what type is your blog in that and the source is children and the selector in that H tags or different PO whatever and secondly there is an editor function and what is the function of the editor some attributes some parameters which you use the function of the editor you will run it manage it yourself first thing we have defined the content and in that return what we have defined in that constant start on that like in this selected it is a plain text in that tag name and class name whatever you want to name these are all parameters and using these parameters whatever is your blog you can design it yourself in that function whatever you want to save whatever you want to use and the next thing whatever is helpful documentation for github because Gutenberg is managing github as a plugin is working and in 5.0 it will be shipped to the core as a plugin you can see it there and after that all the components all the blogs you can see on that URL if you don't have any component then you can create your own blog and the last and interesting thing is how a person can contribute in Gutenberg if you are a developer and you want to contribute then you will go to the simple github and you will see issues there for example if you are at the initial beginner level then the good first issues will be there then you will definitely find something there so if you are at the beginner level then you can see the good first issues and you can continue with that and the second thing is a Daniel a plugin database all the plugins whose active install is 10,000 plus they made a sandbox environment what you have to do you have to sign in on this URL plugincompare.daniel.com in this you have to sign up on this side you will get an approval after the approval you will have a number of plugins if you click on any plugin then it will show you a new sandbox test environment and in that test environment you just have to test if this plugin is compatible with Gutenberg or not for example in our JoBoard what is in JoBoard that it is a shortcode now in JoBoard you will see that it is using shortcode inserter shortcode inserter when you have installed Gutenberg then the shortcode inserter is visible or not if it is visible and you have made a block then definitely you can give your feedback that it is compatible with it so in this way you can contribute to Gutenberg and this platform is for those non developers who don't know anything about Gutenberg and the third thing is if you remove the Gutenberg issues what can be the issues you can use Microsoft Edge different updated versions so definitely someone will see the issues so what I am telling you I am telling you for motivation when you will report an issue and when you will get an appreciation then you will definitely get motivation that is the thing that is over