 Thank you Ricky. Good afternoon everyone. Are you still excited? Yes. What's your energy level? 1 to 10. 10 to be the best and 1 to be... hmmm... I'm draining Sam. 2 to 10. All right so before we get started, very quick survey. How many of you are actually using Gutenberg for your day-to-day post-publishing? And how many of you have disabled Gutenberg and using classic editor? How many of you actually hate Gutenberg? Okay one final question. How many of you actually have no idea what I'm talking about? Thank you. All right so let me just show you a survey that I've conducted on my social media. I ask people what is the editor you're using in your WordPress and this is a response I got like a majority using classic editor and some of them using Gutenberg and very few people using other editors. And this question is for day-to-day publishing. So I'm not talking about page designs. As a web developer you're probably designing a page which is for example about us or our products. You might be using a page builder, a fantastic page builder, a commercial page builder. These are the pages we usually use, page builders. That's absolutely fine. I'm talking about day-to-day publishing. Let's say in your company today you are writing an article about WordCamp Singapore. How many of you planning to write an article about WordCamp Singapore? Your participation in WordCamp Singapore? That's great. The rest of you should do it. That's what that other guy talking in the other room. Okay? So when I saw the schedule I thought probably I'll be speaking to the chairs and everyone will be in the other rooms. Google is talking in the other room. But I'm glad you guys are here today for Gutenberg because Gutenberg is going to be, it's already in the call and there's a lot of development happening. I'm going to share some of that today with you. So this is a traditional editor. What you see is what you get but it's not exactly what you see is what you get, right? We have been using this for many, many years and I know the suffering and you know the sufferings. We suffered together but this has been a wonderful editor. The Tiny MC has been there for many years and it helped us a lot to get through from HTML and plain coding to something that you can done to some extent. Look at this. This is a classic editor and I put some two pictures there. It's the durian season in Malaysia. How many of you are durian lovers? How many of you have durians? See these are the Gutenberg and classic editor guys. So I'm trying to align the images. There is no columns. I'm a bit struggling with that images. Finally I got something and I'm going to view it and I got this. It's not exactly what you see is what you get but classic editor to some extent it helped us a lot and that's where a revolution happened in WordPress. Gutenberg were introduced back in 2017 in WordCam Europe by Madmulunwork. So Gutenberg is a new revolution in content authoring in WordPress. All of you have Gutenberg. So those of some of you raised up now just now say no idea what I'm talking about. You actually already own a Gutenberg so be proud of it. So now I'm going to show you how to use Gutenberg and what kind of things we can get done with Gutenberg and what are some of the limitation of Gutenberg here. Let's look at these few new features in Gutenberg, what you can get done. First of all post covers. You can have image or video post covers. So this is my Gutenberg editor. I'm going to add a title and then I'm going to put a new block. This is blocks. They call it block and I'm searching for cover and that's a cover and I'm going to pick one of the images all lovely durian images there and that's a cover and most something is the best of its class. It's like WordPress compared to all other CMS. So it's now full width and that's a beautiful cover there and I'm going to add some text and down there I'm going to do one more cover with a video background. So it's just few minutes to get these beautiful covers for your pages. Now I'm going to add a short video there and this video I took from Singapore YouTube channel. So it's Singapore durian. Malaysian durian looks slightly different. It's much better actually. So it's wider and if you preview it now I got a beautiful cover here right and I've done this using Gutenberg editor. Yeah so can you do this with classic editor? Yeah so let's look at some columns. You can create columns easily with Gutenberg now. Columns are things that you want to align multiple objects in the same line. We have suffered with tables right. Usually we use tables to put different things in the same line and it sucks on the mobile devices because tables are not responsive. So you need to work around with your HTML to make it responsive. So if you're not good in HTML I don't want to ask you how many of you can do HTML. I can see that now. If you're not good in HTML then that's a big struggle to do something. So I'm just designing three boxes there and I'm going to put up some contents. I'm sorry this video is slightly longer. So that's three different durian in the price. I know some of you are wondering is that the price in Malaysia? Yes it is. I do some alignment at the same time. You can see on the right there is property settings. You can make some customization in Gutenberg. So now I got three boxes with three different tags and three price tags there and I align everything to the center so I can imagine what will happen on the mobile device. I apply some background colors and click there. So background colors looks much better and let's look at this in our front right now. This is what I got. So three columns and let me switch to mobile device. What we see in our mobile device. Look at it. So it's well stacked and it's a very responsive view. It's stacked on your mobile. I'm changing to latest iPhone X. Is that the latest device? So now this is an iPhone X. So it's much compatible. It is responsive in a way that you can control how it is aligned. So columns is one of beautiful features in Gutenberg. A lot of people cried when Gutenberg was launched because there were no columns and later the columns were introduced and now it's much stable. Social I met one example. If you're writing a post like this you want to embed some Twitter or Facebook right and you can just put that's me with my man Mullen work. I know I just simply picked this tweet to brag about it. So that's a Facebook post. I just copied the URL and put it up. Click embed. So now I got Facebook, Twitter and Facebook post embedded within my article and it's beautiful. Just few clicks. You don't need to use third-party plugins to do this. Probably you have seen such embeds in news websites right or any other online portals. If you're still missing Classic Editor and all the points that I've mentioned just now few feature highlight doesn't convince you and you're really really missing Classic Editor. Now we have Classic Editor blog within Gutenberg. So you can add Classic and here you go. Do whatever you want. So it's a Classic Editor within Gutenberg and that's what you get. So there's no reason why we have to switch to Classic Editor in disabled Gutenberg other than some of the points I'm going to mention next. Let's see what are the features that is packaged together in Gutenberg. Reusable blogs. Let's say you have designed something beautifully, something like this that we did just now. You can save this. So just click there and click add to reusable blogs and give it a name. For example, I'm giving a name as my three columns safe. That was saved. Now I'm creating a new post, a brand new post, clicking new post and go and this is a new post. I'm going to call this reusable blog that I saved. Here it is. So you can always create some templates that you usually use and save it and recall it on other pages. So that's reusable blogs. If you have designed something great, you can share with your friends or with other websites. So what you can do is you can export this blog that you saved just now and they can import in their website. So this is how we do it. So we go all the way to the three dots at the end of the page and there's a menu with several settings, manage all blogs and this is the blog that I saved. Export as JavaScript object notation and then in a new website you can click import in the same area. So with this you save a lot of time by sharing the blog. So it's not just designing and keep it on your website. You can switch it to a different website for the particular blogs. A blog manager is a new feature introduced like just months ago. It allows you to control which blogs are enabled in your WordPress and which blogs are not because sometimes this blog can be overwhelming because there's so many blogs and your content author get confused which blog to click because there's so many blogs. So you can simply disable some of the blogs and enable the blogs that is only required for your website. For example, if you go to that setting and blog manager and you can see there's so many blogs. So you can disable all unnecessary blogs that you think you won't be using or you don't want other author to use on your website and just uncheck and close it. So now if I go and add a new blog on my page and under embeds, so I only see few. Otherwise you will have a long list of some in here embeds. So this is the new feature which allows you to manage what exactly you want to allow other people to use on your Gutenberg. Custom CSS. This is something cool if you are like front-end developer or you know something to some code to write how to write CSS. CSS cascading style sheets that allow you to style any area of your page any element in your page. So now with the blogs everything is a block. You can simply style all these blogs. For example, I'm going to add one CSS for this text block. So I click on the text block at once and additional CSS class. I'm going to add my CSS. That's the class for example. I'm going to front-end. That's the Durian website and then click on the customize. And now in the additional CSS, I'm going to call my CSS here. So it's dot my CSS. It's a class, so I start with dot. And I'm going to just do some CSS and I can see what's happening to that content because that content has this class, right? I just had it. So I'm just writing some design code. Don't call this as a code. It's not exactly a code. So it's a property value. These things are totally fixed. So if you don't know CSS, go back and please learn about CSS because in future WordPress, everything will be in the customizer. So there's no team settings. There's no team option in the back end. There's no widgets in the back end. So everything will be in the customizer. So you will be relying a lot on the CSS. So this will be very helpful. I just write full line of property values here and I got something like that. So that is the additional CSS in Gutenberg. These are the flexibilities and options you have in Gutenberg. And some extra tips using Gutenberg is you can use slash to insert blocks. So you don't need to go and press plus to insert blocks. Just put slash and just call whatever name you want. For example, Twitter. It comes up Twitter. Support markups. You can use double hashtag and write something that will become heading. And then you can use forward. What's that? What do we call that? You get a quote there and then quote to get quote blocks and then bullets. You can use star. And then you can use shift enter. So you don't get a new block, but you're maintaining the same block. Sometimes when you enter, you get a next text block, right? So you can do shift enter. Shift alternate edge. You can find out a lot of keyboard shortcuts. How keyboard shortcuts help in Gutenberg. Similar to we have some shortcuts in classic editor, right? And we use a lot of shortcuts in different software. Control C, control V. These are the basic shortcuts that you use. But a part of that, you have many other keyboard shortcuts that you can use in Gutenberg. You can refer to that. Why you should use Gutenberg over classic editor. Gutenberg is a part of the core. That means WordPress will support Gutenberg. Eventually, all teams and plugins need to support Gutenberg. So you have an advantage here over any other page builder. If I'm using a page builder, for example, WP Bakery. Anyone from WP Bakery here? Never ever use that. So can we censor this later in the video? So WP Bakery is like a bloated with so many codes. You know, I know some of you thinking that's the same case with page builders, right? So Gutenberg going to be the same case. No. In the next phase, they're going to introduce Async. So with Async, if you're using some blocks on the page, it will load that particular JavaScript. If not, it won't load. So it's not like one package of JavaScript loaded on all pages. So these are some plans coming off of Gutenberg. Less plugins to manage. Everything will be blocked or in the future, like down the road next three years, you will see less and less plugins in the plugin store and more and more blocks. So you just install blocks and you don't need to manage so many plugins. Blocks are not easy to develop. I know there's a learning curve because it's based on React Native and you need to learn React Native to develop new blocks. If you're a programmer, how many of you are already using React Native? I had some very useful conversation around what comes Singapore today. I found some of you already creating your own blocks. Gutenberg has been developed very actively in the past three years. We got more than 10,000 commit and more than 1,000 releases and we got two stars for the plugins. Yay. It's simply, it's not a bad thing. Why people are using Classic Editor with Gutenberg is most probably they're using outdated team. So the team doesn't support Gutenberg Editor. So they have to use Classic Editor. So if you are new to WordPress and you want to use create pages and contents, I strongly recommend you use Gutenberg over Classic Editor. Classic Editor will be retiring in 2021. So there's two more years to support it. After 2021, you have to use Gutenberg, okay? So it's I'm begging you now to use but later on I don't. You have to use it. So just kidding. So Gutenberg is very actively developed. This is a roadmap for Gutenberg. You can see I think function is here, the stars, the menu block. There's one project running separately working on the menu block for Gutenberg. So soon we will have menu block. You can add menu anywhere on your page. So it will be like any other commercial page builder you have out there. But remember I don't tell that Gutenberg is as good as commercial page builder like Elementor or any other page builder because the purpose of Gutenberg is for content authoring not to design your pages. If you want to have beautiful design and you want to add all sort of commercial elements, a bloated page that load in 30 seconds, go ahead use any page builders because the objective here is to make content authors easier for them to design content pages without much efforts or without working with codes. You remember how we add tables in classic editor? How do we do that? Painfully. Painfully. Bracket table, brackets and TRTH and all sort of things. Some of them have no idea what I'm talking about. It's okay. So that's how we do tables. In Gutenberg we already have table block building. It's just not very responsive. It's just tables. You can style the tables. We have buttons. We have a lot of other things in this Gutenberg coming up. I have designed a website Gutenberg.me.my and I put some demo pages there. So if you go to this website, click this demo. You can see all the pages that I've demonstrated just now from this website. There's something called frontenberg. If you click frontenberg, you can use Gutenberg right away without a word press. So if you think that you don't want to have Gutenberg now, you just want to play around. That's a playground. Just click on frontenberg and play around and see how it works. So it just probably takes 10 to 15 minutes to learn how Gutenberg works for you. With that, thank you so much. If you have any questions. Hi. I have a question about the template. So I work with Elementor. So if I design an Elementor raw template, can my client use Gutenberg within the template? You mean saving the whole page as a template? So basically, I will make a template and I will put in for every block page. Saying that my client would like to make some block code with tables. So can they use Gutenberg within my main template? Within Elementor, you mean? Yes. No. So you can only use better because how the output of HTML is totally different. WordPress tried to keep the output of HTML close to the HTML and other companies have their own standard, own naming convention. Some companies, good block editor will only work within a certain environment. So therefore, you can't cross use it. But like reusable block is something like that. So you can save reusable block or something. One other thing that we have in Gutenberg is if you look at this at the end, if you click the menu at the end, there's something called copy everything. So you can copy everything on your page and paste in some other page. But at this moment, you can't cross use Gutenberg with other page builders. Okay, so when I make my own block design, so every block that will be generated will have that design. So I use the classic editor for that. So it's not possible to instead of using the classic editor, you can put it in one block. Okay, I have something to do with that. Sam, I upgraded my site to WordPress 5.0. And now all of my previous content looks weird. When I go to edit this, inside this box. So what happened to my content? Good question. So what happened is that in the 5.0, the classic editor were removed and it comes with Gutenberg by default. So Gutenberg will try to convert your content to the blocks. So most probably you will get a lot of bunch of text blocks or one text block with everything in it. So it depends on how your content were created earlier. That definitely requires some works if you want to convert into different blocks. But if you have so much of changes, I'll suggest you can always use, you can always switch between Gutenberg and classic editor. So those old pages, you can switch classic editor, just activate the plugin to edit that pages. But when you're composing new page, use Gutenberg. I know you knew the answer and it's the FAQ he's trying to highlight here. So you can always switch between Gutenberg and classic editor. If you're editing the old pages that you already done, just switch to classic editor and do it. So you don't need to go through a painful process to convert into Gutenberg blocks. But all new pages moving forward, you can create in Gutenberg editor. You can have both in your website actually. As far as I know, no. But I don't know if anyone have a better answer. Yes. Question or that's a question. Oh, I thought, sorry. Okay, I'll come to that. So just hold that. Let me process in my left brain. So to answer that, it's on the react for some reasons because we're right now, they're implementing autosave function as well. Custom fields. Yeah, there's custom fields as well. In Gutenberg, you can go to the most setting and you can enable custom fields. Yeah, I will strongly like don't recommend to use third party plugins to create another block. So you can always go through a react. Because if you remember Matt Mulan works, called few years back, learn JavaScript deeply. JavaScript is the future. So use react to create blocks if you're really into creating blocks. Okay, to come for your questions about bad reviews. It's very hard. When I was in what come Europe this year, some people just thumb to Matt Mulan work and ask all these sort of questions. Why you introduce days? And why is that? It's the way I see things is that this is a great change. If WordPress have no Gutenberg, most probably down the road in two years or three years, people will be starting to move into other platforms such as VIX or other platform medium. You know, Gutenberg is pretty much similar to medium editor, right? So pretty much all content authoring use block editors except WordPress, Joomla, Drupal, using traditional what you see is when you get editor. So this is a revolution. And when WordPress introduced is a lot of bad comments because all developers, it put a big burden on developers, they need to make sure their teams and plugins now compatible with Gutenberg. So that's where the whole things comes up. But I can see there's a lot of improvement now compared to 2017, 2018. Now 2019, Gutenberg is much more stable. So you can imagine what will happen next three years. So one way they overcome these bad reviews is by giving talk in what camps. Okay, any other questions? Oh, yes. Correct. The best way to find this out is read the description of the plugins. Only the plugin developer can tell you whether it's work with Gutenberg or not. It's no way for us to find out other than the Gutenberg developer. Okay, sorry to ask you a question. I actually heard Sam that the lead developer in a tiny MCE has decided to join the Gutenberg project. Can you verify this group? I don't have any information on that. I heard rumors about it. But there's a lot of people working on Gutenberg right now. We have 453 developers working on it. So the contribution comes from different hands, including the classic editor, tiny MCE, and all other editors. Just before I end, I just want to flash two more slides. What can Call a Lumpur coming up on this November? Feel free to join what can Call a Lumpur. It's happening in Bajaya Times Square, Call a Lumpur. And we have What Cam Asia coming up in the February. So first ever regional What Cam. Thank you so much.