 I am. All right. So, hi everyone. So, good morning. I'm very excited to be here and give this talk. So, it's my first Philippine word camp and then also first time in Ilo Ilo also. And it's good since I almost didn't make it here since I was feeling under the weather a couple of days ago, but luckily things turned out well and, yeah, right now I'm here. So, my talk is about building with a new block editor in Stackable. So, just a little bit of info about myself. So, I'm Benjamin Nintal. I'm the founder and lead developer of Stackable. I have been developing in WordPress since 2010. So, my background is, my passion is all about software development. I've been tinkering around programs and development ever since computer monitors were still black and green. And then, so just creating random stuff. And then when I grew up, I started out in coffee shops just creating apps. Used to be iOS games and then client websites and then I discovered WordPress. And then, I got hooked. Started creating WordPress themes, tried selling them and then people bought them naman. And then, I soon moved to creating a framework and then moved to creating plugins and then stumbled into page builders and then lots of around 30 plugins after. Now, it's all about just one plugin, Stackable. So, what is Stackable? So, just to give you a short intro, Stackable is a proudly Pinoy-made WordPress plugin. It provides what we call page builder blocks for WordPress. So, we created it back in 2018. So, back then, Gutenberg was still in early stages of development. It was still in beta. And five years from then, so now, we're still here and we're still innovating alongside the block editor. Okay, so just a show of hands before we start. So, who here has built just a page using the block editor? Okay, so, there's a lot na unlike before. And then, who has, from those who raised their hands, who has built an entire website using just the block editor? Eh, good. There's a lot. So, that means for the others who lowered their hands, you stopped using the block editor. It just stuck to creating individual pages. So, hopefully, let's change that in this talk. And then, for those who didn't raise their hands, I hope you get to learn that you can use the block editor and the site editor too after this talk. Okay, so, what is our typical process when building a WordPress site before without using blocks? So, usually, what you'll do is you'll create, you'll install first a classic theme. So, and then, what you'll get is you'll get new styling options in your customizer. So, that's the usual process. And then, you go into the customizer and start tinkering around. And then, you figure out that it's a bit lacking or you wanted more. So, you go ahead and install a page builder. And then, now you have a page builder. And then, what you get is you get your drag and drop editor. And then, you also get a template builder. So, you get a new tool to build your headers, your footers, your archive pages, 404 pages and everything else. And then, you also get templates to make your life easier. And then, after that, you install all the other necessary plugins, your performance plugins, forum plugins, and others. So, sometimes, it's also the other way around. Instead of installing the classic theme first, you first install a page builder plugin. And then, the classic theme that you install is dictated by your page builder. So, for example, for Elementor, you install the hello theme. So, it's the other way around. But there's nothing wrong with doing this process. But this is what we call now the classic theme or the classic way of doing things. And it's good. It's reliable. It's been tried and tested. So, there's nothing wrong with this. But I think let's break it down. Why do we actually do this? Why do we go through this process and install a page builder and then a theme? Why do we need all of these things? So, let's break it down. So, we need all of these to do these because we need these four things. So, we need a drag and drop editor, template builder, templates and styling options. So, those are the four things that we really need. So, drag and drop editor since we want to edit content visually. And then the template builder since we want to edit our headers, footers, sidebars and widgets or archive pages. And then templates to make our lives easier. And then styling options so that we can change things globally. So, those are our foreign needs. And now, with the advent of blocks, WordPress Core now fulfills all of those. And all of these are now available in Core. So, the drag and drop editor that's now the block editor. The template builder is now called the site editor or rather, we have a new site editor for building templates. And then for templates, we have patterns. And then for styling options, we have the block theme. So, for block editor and patterns, I'm sure everyone here has encountered the block editor and patterns before. At now since it's in WordPress already and then you don't have to do anything to get it. But for the site editor, if you haven't encountered it yet, it means you have a classic editor installed. So, to have it activated or for it to appear, you'll need to have a block theme installed. So, what is a block theme? So, simply put, it just follows the new block way of doing things. So, if you install a block theme, you'll have, your customizer will get replaced. There will be no longer, you won't find your widgets area, your menu editor there anymore. It will just be all replaced with a site editor. So, now you have two ways of building things. You have your classic way using a classic theme and then the block way using a block theme. So, again, there's nothing wrong with using the classic way. It's just now we have a new way. So, how does the block theme change things? So, now we already have the block editor. So, we have a drag and drop capabilities already. So, we don't have to install anything for that. And we already have a site editor. So, we can edit templates now. So, we don't have to install anything either. But we do have to install a block theme. So, with that, we now get more styling options in the style editor. And then we also get new patterns and these are our templates to make things quicker. And then the next step would be to install all the other NSI plugins. So, if you can see, it's the same process except we skipped a few steps. So, after this, you can start right away. But the page builders in the classic method, they provide lots of new things, lots of shiny things like widgets and modules like car cells, icons, and other fancy things. So, you can supplement that back in by installing block plugins. So, you can get more blocks, more patterns, and more, you can build more things with it. So, one example is, stackable. So, this way, with stackable, you still get your blocks and patterns, but we also give you a more page builder-like experience so that what you are used to before, you're still gonna get that similar feeling and environment of a page builder, but inside the block editor. So, if you're not yet convinced so why you should use the block editor and block themes, it's, again, there's nothing wrong with a classic theme of doing things. But if you're looking for reasons why to switch or why to try it out in your next project, so blocks have replaced the customizer, widgets, sidebars, menus, so just think from now what else would be standardized or be replaced. It's a more streamlined experience since before, if you remember how you edit widgets before, it's a whole different interface from editing their menus and the whole other interface also from the customizer. So now, with the block editor, you have the same interface. They're all just blocks now. So regardless if you're editing menus or your headers or footers, they're all just blocks. So it's a very streamlined experience. It's also very dynamic, so it's not just put in some text and image and then that's what's gonna show up in the front end. You can also use dynamic stuff. If there are reusable blocks to add that you can add across all your pages and then you'll just edit once and then everything would change. And then also it's stackable, you can use all the other dynamic plugins like ACF, Metabox, JetEngine, Pods for your custom fields. And you also have block plugins. So if you need a type of block, like for example, a calendar, then just install one. And then what's good there is that it doesn't hijack your entire experience, it's just, it just lives inside the block editor, so it just extends what you currently have. So it's not, you're not installing a whole system, you're just adding in to your existing one. And of course, blocks are the future. WordPress has big plans for blocks and so far the roadmap has been followed. And for the next steps, soon there'll be rather, soon meaning years, a year or more, there'll be collaboration included with the block editor. So that means it's like Google Docs, but for your pages. So that's going inside in the next phases of the block editor. And then after that, there's also gonna be multilingual support. So there's, it's gonna be everywhere. So might as well start trying it now. So what does it look like if you're editing your pages using blocks? So there's just a brief overview. So you have two images here. On the top left is your page builder and on the bottom left, bottom right is your block editor. So it's basically the same, except it's flipped over. Your navigates, your navigation, your navigator, it's just now called the list view. And then your inspector is on the right. It's still the same. And you'll notice here, I have stackable installed. So you also have your three tabs for a layout style advanced. So it's really a similar experience. Okay, so the last part of my talk is all about showing demos. So it's gonna be just short. So I prepared three short demos for this. So this is the first one. This is a typical website section. Now how would you build something like this in the block editor? So of course you can cheat here and not cheat but be optimized and just build the images on the right as one whole image. But for our purposes now, let's see if we can build this using just plain images, a button and some text. So how would you do this, something like this? So if you break it down, you can see that it's just, maybe you can put two columns here. The left column you have the button. The right column you have some images and then they're just squished together and then they're just rounded. So here's how you would do something like that. I think I can forward this if it's too long. Other. Okay, so at the start, I'm just building the structure of the blocks. So I have two columns and then I'm putting a button here on the left. I'll just forward this since it's a bit long. So I'm putting images also and now just to build it, I'm gonna soon duplicate all of these after I set the border radius. Okay, so now it just duplicate all of the pictures and then pick a different picture for each one. Okay, I'll forward this a bit. Okay, so for the next step, it's all about the alignment. So you just align all of the pictures to the right and then squish them all together and then to make them overlap, you just replace the margins and then make them negative. So if you are familiar with how to do something like this in a page builder, so it's quite similar. This is one of the ways that you would do something like that. There, so now they're all overlapped and then all that's missing now is to add the text, align them all and then add the background, almost done. Okay, so there. So now we have replicated the design using only the block editor. Okay, so as you can see, you can build something like this quite easily. So just imagine using this anywhere in your website. So that's also part of the, you can also do this in the header, footer, anywhere. So if for those who haven't seen yet the site editor, so this is just a quick rundown of how to navigate it. So you just click on the edit site and then you'll see the whole site editor pop up and on the left you have your templates. You can also click in the middle to start, go ahead and editing but I find that experience quite confusing at first. So it's easier for you to, or at least for me to navigate on the left and start editing the templates there. So you can add templates or you can edit all the existing ones or you can edit your individual templates. So your footer, your headers. So now I just clicked on the header to start editing it. So that's just how quickly it is. You can start editing with the site editor right away. So I clicked on the header here just to edit it and now let's actually start changing the header. Since now I have a blank 2023 theme and it doesn't have anything in the header yet. So I just replaced here the blocks with stackable blocks just to make it quicker but this is the same process. So I have a site title and the navigation. Those are core native blocks. So you just have to change the height and then to style them just add just sizing, sizing things to make them centered to make them look good. And then now you just have to change the background. So just turn it on and then just change it into a darker color. So not too dark so that we can see a little bit of the text still. And then for the site title we can change it into the site logo and then I have a pre uploaded logo here. And then for the menu, like before you have a whole other interface over here you can just directly type in to change the links or to change the labels of your menu. Okay, so we're almost done. It's just about spacing and changing the color. Okay, so that's it. Now you've already changed the header of your website across all your pages. In this sample that I have at this demo that I have I only have the 2023 theme and stackable installed so there's no other plugin but if I navigate through the other pages you'll see all of them have the new header. So it's just that easy to get started. So what else can we do? So this is the last demo. So this is the current post template that I have because of 2023. So I have my featured image and then the below it is the post title. So this is something very typical but what if I wanted to change it to something like this which is also something that we usually do. So you have your featured image as the background instead and then the title is in the foreground and you have it white. So how would you build something like this? So again, you go to the site editor and then go to templates and then the single template is the one you want to change. And then I find that opening the list view first gives you the best way to understand what's there. So you just create a new block. I'll add here a new columns block and that should hold the featured image and also the post title. So I just move the post title inside and because of that, we don't anymore need the featured image below so we can safely remove that. And then now it's just a matter of adding the background. So you just turn it on and instead of uploading your own, you have here a button for dynamic fields and you can select the current post and you have all of the custom fields available. And at the bottom, there's your featured image URL. So this means that we're using the current posts featured image as the background for this column. And then you can't see anything here since there's no current post but if you preview in the front end, it now changes into something like this. So it still needs a little work but you can see already that the featured image has moved to the background and then your post title is in the front. So you just have to add some tint and maybe change the alignment since it's a bit on the side to make it centered again. And then next is we have to make room and make the whole area bigger. And then I think I forget here where that's placed. So you just need to add some padding on the top or you can also change the height of the whole thing. So there. So now I'm changing the paddings and now let's see what this looks like. Oh, not yet because I haven't changed yet the text color. So just make it white and now let's see what it looks like in the front end. So from here, now we get this one. So it's just something that's much nicer. Okay. So again, all of this, this is just built using a block theme which is the default theme and stackable. And now you can see it's a completely new website. And if you go through it and change the footer and all the rest, change the archive pages, you can see that you can completely change everything. All right, that's it. Thank you. By the way, if you want to get started with stackable, we have for everyone here in WordCamp Iduilo, a 100% off for your first year. So you can go in the back and grab your QR code.