 Thank you Ricky. Good afternoon everyone. Are you still excited? What's your energy level 1 to 10? 10 to be the best and 1 to be... I'm draining Sam. Alright, 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. Alright, so let me just show you a survey that I've conducted on my social media. I asked 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're writing an article about WordCamp Singapore. How many of you are planning to write an article about WordCamp Singapore? Your participation in WordCamp Singapore? That's great. The rest of you, 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 a durian season in Malaysia. How many of you are durian lovers? How many of you hate 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. So it's not exactly what you see is what you get, but a classic editor to some extent it helped us a lot. And that's where a revolution happened in WordPress. Gutenberg was introduced back in 2017 in WordCam Europe by Matt Mullenberg. 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 limitations of Gutenberg here. Let's look at this 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 Mozambique 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 a 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. 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. 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 end 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 just 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 feature 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 embeds, 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 manual and 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 are 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 block 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 and disable Gutenberg other than some of the points I'm going to mention next. Let's see what other features that is packaged together in Gutenberg. Reusable blocks. 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 blocks and give it a name. For example, I'm giving a name as my three columns. Save. 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 the reusable block 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 blocks. 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 block that you saved just now and they can import in the 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 blocks. And this is the block that I saved. Export as JavaScript object notation. And then in the new website, you can click import in the same area. So with this, you save a lot of time by sharing the blocks. So it's not just designing and keep it on your website. You can switch it to a different website for the particular blocks. A block manager is a new feature introduced like just months ago. It allows you to control which blocks are enabled in your WordPress and which blocks are not. Because sometimes this block can be overwhelming because there are so many blocks and your content author gets confused which block to click because there are so many blocks. So you can simply disable some of the blocks and enable the blocks that is only required for your website. For example, if you go to that setting and block manager and you can see there are so many blocks. So you can disable all of the three blocks 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 block on my page and under embeds, so I only see few. Otherwise you will have a long list of so many embeds. So this is a 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 friend and developer or you know something to some code to write, how to write CSS. You can add CSS, Cascading style sheets that allow you to style any area of your page, any element in your page. So now with the blocks, everything is a block. You can simply style all these blocks. 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. So it's .myCSS. It's a class, so I start with . 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 theme settings. There's no theme 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 a 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 hedge. 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 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. Can we censor this later in the video? WP Bakery is bloated with so many codes. I know some of you are thinking, that's the same case with page builders, right? So Gutenberg is going to be the same case? No. In the next phase, they are going to introduce Async. Async, if you are using some blocks on that 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 out for Gutenberg. Less plugins to manage. Everything will be block oriented. In future, like down the road next three years, you will see less and less plugins in the plugin store and more and more blocks. 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 conversations around what came 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 over 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, 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 loads 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 effort, without working with quotes. You remember how we add tables in Classic Editor? How do we do that? Painfully. Painfully. Bracket, table, bracket, 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 WordPress. 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. Any questions? Hi. I have a question about templates. 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 raw page, right? Yeah. So saying that my client would like to make a look out with tables. So can they use Gutenberg within my template? Within Elementor, I mean. No. So you can only use better, because how the output of HTML is totally different. WordPress tries 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 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 some. 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. You can put an Elementor block. That says post-copy. D2 is good, but you can't put... Okay, so when I make my own block design, 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 install new... the classic editor used Gutenberg. Okay, they have something to do with that. Okay. Sam, I upgraded my site to WordPress 5.0. And now all of my previous content looks weird. You know, when I go to Edit, it's 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 text blocks or one text block with everything in it. So it depends on how your content was created earlier. That definitely requires some work 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've 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. The same is the way to make Gutenberg blocks that doesn't require React. Is there any tools out there that you can make blocks with or aren't blocks without having to use React? As far as I know, no. But I don't know if anyone has a better answer, yes. Question or that's a... Yes, question or... I thought, sorry, yeah. What do you think that why we're plugging so many pages? Okay, I'll come to that. So just for that, let me process in my left brain. So to answer that, it's on the React for some reasons because now they're implementing autosave function as well. And advanced custom fields. Custom fields, yeah. There's custom fields as well. In Gutenberg, you can go to the most settings and you can enable custom fields or... Did you make blocks with ICL? So what do you know about all of them? Yeah. How do you make blocks with a plugin called... ...which allows you to make blocks as well? Yeah, I strongly don't recommend to use third-party plugins to create another block. So you can always go through React because if you remember Matt Moulinworks called a 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 Whatcom Europe this year, some people just stormed to Matt Moulinworks and asked all these sort of questions. Why you introduced these? And why is that? 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 Wix or other platforms. 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. When WordPress introduced these, a lot of bad comments because all developers, it put a big button on developers, make sure their teams and plugins are now compatible with Gutenberg. So that's where the whole thing comes up. 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 in the next three years. So one way they overcome these bad reviews is by giving talk in Whatcams. Okay, any other questions? Any way to tell which plugins are suitable? 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. There's no way for us to find out other than the Gutenberg developer. We've got time for one more question. Yeah, one more. Sorry, I asked one more question. I actually heard Sam that the lead developer in a tiny MCE has decided to join the Gutenberg project. Can you verify that's true? Just follow our podcast on the way here and I'm like, no way! All those classic editor guys are going to be grumpy, but I think it's great. 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. Whatcams.com is coming up on this November. Feel free to join Whatcams.com. It's happening in Bajaya Times Square, Kuala Lumpur. And we have Whatcam Asia coming up in February. So first ever original Whatcam. Thank you so much. Thank you Sam. Thank you very much.