 I hope everybody had their lunch and everybody is refueled and energised. So the topic is getting your designer ready for Gutenberg. So I am Rahi Brijapati. I currently work as an engineering manager at RTGAM. I have been working with WordPress for more than three years now. And Gutenberg and full site editing initiative are definitely one of my favorites about WordPress. So by the way, if you are referring to full site editing as a site editor, which is a latest update from WordPress, like WordPress rebranded full site editing as site editor. So I have picked up this habit of using full site editing instead of site editor. So yeah, please bear with me about that. All right. So that was all about me. Now I will talk about how this talk will help you, right? So first we'll set the agenda for this today's talk. So how will this talk be helpful for you? One of the questions you might have about this talk is, is this only relevant for the designers, right? So the answer is no. Even if you are somebody who is involved in the decision making for any of the designs or design related processes of your website, then this will be relevant for you. So we will basically talk about how considerations of a few things during the design phase of a website can help you significantly lower the efforts during the execution or implementation of the design. So second question you might have is if it's about Gutenberg, is it only relevant for the blog themes or does it apply to traditional themes as well? So if you don't know about blog themes, blog themes are the themes which work with full site editing or that enable full site editing. So the answer to that will be partially yes because even in traditional themes there will be landing pages that are completely built with Gutenberg. So it applies to the traditional themes as well. Do we have any designers here? Okay, one, two, okay, many folks, okay. So these are some of the related Gutenberg concepts that we'll talk about because these are the concepts that can help you lower the efforts during the implementation. So blog styles, blog variations, blog patterns and blog controls. So Gutenberg is based on React framework and React is a component-based framework. So everything in Gutenberg is also component. So about these blog styles, right? So if you know about blog styles, blog styles basically enable you to change the visuals of a blog without really making any markup changes, right? So while designing you could think about something, if there is a section that can be reused without making many markup changes and only applying the visual changes, then blog styles would be the relevant concept for that one. Then we have blog variations. Blog variations basically allow you to have different functionalities but the visuals remain the same, right? So in the next upcoming slides we will talk about practical examples of such designs where these concepts apply. So as you can see, I have two designs here. On the left, both are for testimonial section. On the left, the testimonial section is kind of a slider and on the right we have the static text, the testimonial is basically divided into three columns, right? So if you were to design a website where you were going to add this testimonial section on a website. So this is something if you were to develop in Gutenberg, you will have to end up creating two different custom blogs for the same section because it's very difficult to achieve the same functionality using concepts like blog styles or blog variations. So that's something that can be avoided. So in the same examples we have a few designers here. In the designs, in the design tools, there is a concept of layers, right? And in this Gutenberg we have this concept of hierarchy, like nesting, nesting of different blogs. So if you could, if you were able to map that layers with the nesting of Gutenberg blogs, then you would be better be able to understand like which are the sections you could design or that will directly fit into the Gutenberg editor without requiring any custom development work, right? So we'll talk about one more example. So on the left side, this is a hero section of a website. So on the left side, as you can see, we have two images which are overflowing the section. And on the right side it's a pretty simple, it's a pretty simple design. On the right side we have the heading, we have paragraph, then two images, and on the right side we have image. So this can be achieved without requiring any custom Gutenberg development work, whereas on the left side that's not really possible. So if you were thinking that Gutenberg 6.1 introduced the spacing controls. So you could maybe specify a negative margin. So I had tested that out already and it's not really possible to specify negative margins. Right? So you will again end up doing some custom development work. So what we are talking about here is not going against any custom development work because WordPress wouldn't be WordPress if it wasn't being customized, right? It's known for its customizability both for the user and for the developers. But we are trying to just reduce the efforts wherever possible during the design phase itself. And just because of this minor considerations, you could have significant development efforts reduced during the development phase. Yeah, so if you are a designer and you are looking to show your design or your creativity through Gutenberg, this is something, a very interesting initiative, Museum of Blog Art. So you could visit this website and what you could do is you can think of an art and then try to reproduce or recreate that using Gutenberg blogs. So what you are seeing here is there are three arts. Now all three of these are created using Gutenberg blogs and that too using only core blogs. So try and show your creativity and in this process you will also learn about Gutenberg, like how a user uses the Gutenberg editor and that will also help you better design things so that it fits well during the development phase. By the way, even if you at first it feels like it's not really possible to achieve a design in Gutenberg, using Gutenberg blogs, who would have thought about this Mario character? The second character Mario is created using only two blogs, the group block and the buttons block. So I was very surprised when I first saw this. So definitely to visit that website and check out the arts they have. And you will also get to learn about how you can utilize the blogs and how you can better create designs. Yeah, if anybody has any questions, please, just please. Yeah, right, right, yes, yes. So it's a very complex nesting they have used, like it's not very practical, but that's how this art is created. But it's very amusing if you see how they have exactly created. Once you visit this art, you will also see below the exact markup of the block markup that has been used to create this art. And what you could do is you could also copy paste the markup inside the editor and check it out yourself, like which are the exact blocks that have been used and how they have been used. Yes, any other questions? Yeah, sure. So the question is what exactly are block patterns in Gutenberg, right? Right, and block controls. So block patterns in Gutenberg are a group of blogs, basically your group already created blogs. And then that group of blogs or predefined sequence of blogs is usable to the user in the editor, right? For example, you could create a block pattern that contains an image, a button block. And then you could, once the user visits the block editor, they will have that block pattern. And once they add that block pattern, that blocks that are there, like the image block and button block, they will be automatically inserted. Yeah, it's basically predefining a set of blocks that are reusable for the user. Thank you so much for joining and yeah, have a great day.