 Hello. Thank you for joining this workshop. In this workshop we will talk about the site editor and I and Dao can improve the e-com experience with the book commerce. So I am Lijgi Deskja and I'm working for Automatic and I am one of the maintainer of the book commerce blocks project. So in the end in this workshop I will show you the work that my team did in the last one year. Ok, so last some questions. How many people work with the book commerce in this room? Ok, nice. How many people use the site editor for building e-commerce with the book commerce? Ok, nice. Ok, so the goal is I will do a quick introduction to the site editor. It will be very fast. And in the end we will start to build e-commerce from scratch block team. And so you can see the power of blocks. Ok, so the blocks are the basic units that we use for build the pages on the modern web. So in the end the blocks are just they contain some functionalities. So if you are I am pretty sure that you are using the Gutenberg at least one time. And on the sidebar you can see all the blocks. Now in the last version of Wordiverse we are trying the Wordiverse community trying to evolve the Gutenberg concept not to being just a post editor but to be an editor for building a website. For this reason it is one of the full site editing. So the vision of the full site editing is to provide a collection of features that allows you to build a website. There are a lot of projects under the full site editing umbrella like site editor, glob sites, query block, navigation blocks, templates and block teams. So for example this is when you solve Wordpress and you open the site editor this is the first screen that you see. It is just the on page and then you can add blocks, you can customize blocks. Ok, so for using the site editor it is necessary a block team. So a block team is just a Wordpress team that works completely, completely works with the blocks. And so it allows to build a website with no code editor, no code experience. Ok, so in the site editor there is the concept of templates. So any page in your website is a template and you can easily, in the site editor you can easily customize. We could say that the storefront is the de facto standard book commerce team pre full site editing area. So a lot of teams that work with book commerce they are just a children team of book commerce. So I want to show you with this workshop I want to help you to build I want to help you to build cut specialty commerce with the site editor taking inspiration by the storefront design. So I don't know if you downloaded the zip that I shared on the WordCamp Europe. Do you download the zip? Ok, I invite you to create a Wordpress website with the zip. The zip contains the products to important book commerce. After that you have to install create block team plugin that allows you to create a new block team. And after that we will take inspiration for building the e-commerce from the team of storefront. And obviously you need to install book commerce and book commerce blocks. Ok, while you are I hope that you are starting to start things I will think that I want to mention that for this workshop it is really important to mention the group block. The group block is a block that groups other block together inside one container. So the group block is really important for us because it will be able to organize blocks. So for example we can put blocks in a row or in a grid for example. Ok, so after that obviously the blocks can easily customize thanks to the block styles. This is a demo where I can customize navigation block with the block styles. Ok, so did you install the book commerce the create block team extension on your laptop? Do you have? Yes, sure. Yes, you need to install let me know when you install it. Everything? Yes, the storefront is just for reference. The thing to download is the zip that contains the product that you have to import in book commerce. After that you need to install the create block team plugin to create a new block team from scratch and obviously book commerce and book commerce blocks. So when you have everything in those plugins we can continue, let me know. The idea is that I will show some images of the storefront design and after that I will say the blocks that you should use at the first table will help you to build the website. Yes, exactly. Yes, it's just for inspiration. No, exactly. Ok, they are coming to look. Sorry. Yeah, create block team is a plugin so you need to search in the plugin section, not in the team section. Ok, it imports the products the zip this is the link to the products. How can I import Ok, everyone in the room is Ok, ok. Ok, ok. Ok, so while the products are still importing you can create a block team so if you install and enable the plugin create block team and click on create block team and after that you can enable it. Ok, so did you enable the did you enable the new block team that we created? Can we go? Yes, this is the video to enable it so you need to go to Apparence, create block team click on create block team, set the name and after that click generate and if you go in the team section you will see this new team and you have to enable it. The video? Ok, we wait for car and after that someone needs help in the room Yes, sure. So with this plugin we are creating a new block team so when you will open the side editor you will see just an empty canvas. So the thing is that we can create surfront just with blocks. So surfront obviously requires some coding coding skills and we can see how easily is possible to recreate a surfront looks like, a similar team like surfront, thanks to the side editor. So the first thing that I want to start is the either template part so if you open the side editor and you can go to and you should show the list of all templates you can click on either template part the template part is just a template part that just is the template where you can when you configure it your either so obviously it's not required to replicate the same design because obviously it will require a lot of times you can easily with only these three blocks so navigation block, product search block and minicart block you can easily replicate this design so this is the minicart block this is the product search block this is the navigation block so we have few templates to add it so I mean take your time, we can say 5 minutes I am here for help you to set up to configure the either so let me know if you need some help no the thing is that I want to show them the blockify single, blockify template and we just release it so let me know if you need some help if you want to some particular design that you like because in the end this template can be exported so I can imagine if you have an agency if you have if you are a freelancer and you work on a lot of clients you can just reuse this template easily ok, so for example I will show them quickly this is a block team this is a block team from scratch as the same that you created now and now we start to to change the adder I already have the navigation block I already have the navigation block so I will show I will add the minicard I want to mention that minicard before the full side mapping before the release this block for building a new for adding a minicard should require coding skills now anyone can easily add the minicard block in a in a block team so and I will add the product search ok and I will say that the background of my adder is gray so now if I go on my template on my website sorry I will see the changes immediately if you see it is interesting to see how the site adder matches on the front end so the editing experience is very helps a lot to create quickly websites easily do you want sometimes to add to work on the either template or do you prefer that we can go on the next slide ok ok sorry I will show you the slide again the navigation block yes with the book commerce navigation block is from Gutenberg instead the minicard block and the product search block came from book commerce so for example obviously for example the minicard has some settings for example if I can display the total price or not this kind of stuff any block has a lot of customization but we don't have time to see in specific every block ok so do we go to the next slide it's ok for everyone ok so the next site is the index template so the index template is like the on page so if you open the site adder and you go on templates you should have the index template so the index template is like the on page so if you see the star front as this kind of big cover and for this reason we will use the cover block from the cover block from Gutenberg and after that we have the product categories and in book commerce we have this block called fishery category block so you can just work with two blocks to replicate a similar design so no no it's if you click on the template if you open the click on the left corner on the wordpress ok one moment yeah yes sorry this one obviously the layout should not be one to one ok let me know when you are ready and we can go to the next slide ok so in the meantime I will create my index and it will be just sorry it's the template that we started that we created with the create block team yes sorry sorry it's index yes it's index template yeah so let me know if someone needs help so I created the cover the cover block yeah the cats shop is the cover block is it ok for you I mean do you have some issue no in general ok so always in the same template obviously the on page of an e-commerce should have the products you know so we can use the products block that show all the products that available in the they are available in the e-commerce so I am in the index template I will remove this one because I don't care about the cost so I will search for products block and now you can see I will have all the products that I have imported in my e-commerce so when I refresh the page I will see all the products ok so for the list of products they are needed the eating block for write the recent products title and the products block as several filter so you can filter you can show the products that are just by that just are insane or the product that are and that the most popular product so if you go on the setting of the block you can add custom filter so for example as first block I will show the list of all products and after that I will create another block I will add another products block so I will create eating and in this case I will show only the on-set products you can see the experience is really easy because it's just add a block and set a filter on the block setting it doesn't require any coding skin so I will save the template save yes and after that I will have my cover, my product categories and my list of products and after that I will have the only on-set products ok so in the slide there is another slide about index template but it seems that we are wrapping up the workshop is better if we can skip this slide but in the end in storefront there are some blocks so they show the review the review of the product and in book onwards there is a product there is a block called single product so you can add the single product pick the product and after that you can add the review by product so it will be those blocks will show the review of the product that you picked so the template another template that we will change is the product catalog template that is not on page of your e-commerce but is when you go on the shop page so slash shop so ok so this is one of the things that we worked in the last months so essentially before the experience for the product catalog was pretty not ready for the side editor in the last months we created we blockified this template so now these new blocks will be available in book onwards 7.9 by default so when you enable book onwards score 7.9 you will see this template will be already blockified so you will see all those blocks it is interesting because even if this is a blockified template all the filters that runs on this page works we work on a compatibility layer so all the extension that works on the classic template will work on this template as well so if I go on my shop page I will be able to see the shop page so I have that to cart I can add the cart the product to the cart and I will see the mini cart updates so we did a similar work for the single product template so in the next version of book onwards score 7.9 if you create a new store this template will be enabled by default so for example you can move the post title where you want you can add blocks in the single product without no coding skills and even if in this template all the filters that run on the classic template will work so all the extensions that use for example product recommendation I don't know there are several extensions will continue to work on the blockified template so for us it's really important to be maintained the backward compatibility we work a lot to reach this goal so I invite you to try this blockified template and obviously if you find some issues ping us on Slack on GitHub we we want to help you we want that all the book onwards all the folks that works on book onwards migrate to the block templates because as you can see the experience is very smooth especially because it is very easy create an e-commerce with the site editor now and the thing that you the important thing is that thanks to the block team you can export you can easily export your team so you can use the same team with the customized template for other clients as well so you can easily scale your business especially if you work on a custom block team with cell variation I didn't have time to talk about the interesting about the site editor all the fission but potentially it's if you add an agency it will be very cool for example just a block team with a different cell variation and you can reuse this block team with the blockify template that you created and share the same block team with different client but just changing the cell variation so even if you are using the same code base the website will look very different there is should be a setting in create block team should be another extension for export block team and for example if you decide to if you go to home and you decide to continue to work on this workshop I mean it will be very cool if someone of you applies a new block team that we did in this workshop towards the rest of the talk yeah maybe yeah it's okay thank you yes you can easily export the template as zip file share easily this template to other developers other team developer clients easily so the goal the goal of this workshop is to show the potentiality of the blocks and they are not useful just to create a classic site or a block but they can be very powerful if with a commerce solution before the site area for writing, for creating an e-commerce for do some customization was required some coding skills now thanks to the thanks to the site editor any block team can be a great team for book commerce so as I said before this is just the beginning of the journey there are the global sites even if you don't find the right block in the block in book commerce blocks you can build the new blocks easily so I would just say thank you I hope that you enjoyed the workshop I would just say thank you and there are my you can see my contacts here I am happy to I am here entire day so I am happy to answer your question about what we did in book commerce blocks and what is our mission to bring blocks to book commerce thank you