 Thank you. Thank you so much, Ashutosh. That was quite an introduction. Even I felt a bit special about myself Right, so very good afternoon to everybody sitting in this hall and also to folks who might be Watching us on a streaming platform I am Rahi Prajapati and I currently work as an engineering manager for RT camp. I am not a designer Based on the title you could be misled that I might be a designer, but I I have a developer background So everybody is fueled up. Everybody is energized Everybody's tummies are full. Yeah Very good Because we have quite an interesting topic here. So I hope you are not feeling sleepy Right getting your designer ready for Gutenberg So we'll get started. Oh, I have cut down the session into three questions One of the first question you might be having while sitting here is Who is the intended audience for this presentation or for this session? Right, like who could benefit the most out of this presentation? the second question you might have is Bob how Why why exactly do you need to get your designer ready for Gutenberg? Since when designers need to worry about Gutenberg or where the designs are being implemented, right? And the last question how exactly Do you do it if I am able to convince you through the second question? We will move to the third question. That is how exactly we do it We will go through a few pointers that will that are more relevant for the designers to make the job easier and and and and to help them with creating something I call as Gutenberg compatible designs or Gutenberg efficient designs, right? So let's get started With the very first question who is the intended audience of this presentation? So based on the title you might feel that this may only be relevant for the designers because It quite literally says in the title that getting your designer ready for Gutenberg And it doesn't say getting everybody ready for Gutenberg right, so before I Agree or disagree to that Can I know how many designers do we have in here? Can you please raise your hands? Okay All right, not as many as I had thought so yeah, maybe this is for everybody Okay jokes aside, I actually mean it this is for everybody because Even aside from being a developer, I believe you will get a different perspective about Gutenberg and the designs that we are creating for Gutenberg All right, so on to the second question why exactly do we need to Worry about getting our designer ready for Gutenberg Maybe because I'm a developer and I want to do less work. I want my designers to do more work right so Gutenberg as you all know Gutenberg is the future for sure Right outside. There is a booth from Theme spark shout out to theme spark. They have this very introduction poll where they are They have they are collecting votes for who is using what between classic editor and Gutenberg Gutenberg Block editor Right, and I saw that the block editor one was completely filled with the votes red dots Compared to Compared to the Gutenberg the classic editor had very less votes Right, so that made me very happy because it's in line with what I'm pitching here Right, so yeah Gutenberg is the future here And also with the introduction of the site editor this becomes even more relevant Because now everything on your website is a block and during my career I have worked on quite some projects where I was supposed to implement a design and in Gutenberg so While working on that I always felt that Maybe if this little element had been to a had been designed a slightly differently It could have reduced a lot of effort Right, so that's the motivation behind Behind this presentation So we talked about the efforts in a project. So those efforts were mainly of two kinds first one being Extending the core Gutenberg itself by this I'm referring to adding any additional settings to the core blocks And the second one was Creating or doing custom work in the in Gutenberg Right by this I'm referring to creating custom blocks or custom block patterns entirely from scratch Right, so what we are trying to do here is we are trying to cut down those efforts by creating Gutenberg compatible designs Designs that are much easier to implement in Gutenberg And also This results in better user experience Because the designs you will create will eventually have very less cluttered Or dashboard in the Gutenberg editor. So it also results in the better user experience So as a designer you are making impact in the designing phase You are helping in the development phase and you are also Helping in the end end product to the end users Right, so that's the motivation behind this presentation On to the next question So main question since you are all are here I'm assuming that You all have this question. How exactly we do it? How exactly We get our design ready for Gutenberg. What are the things that need to be Considered while creating designs That can that can create Gutenberg efficient designs Right So we will learn about a few Constructs and properties about Gutenberg And then we will also go through a few Concepts that are in Gutenberg that I think are relevant for this session Because I believe though under I believe having and understanding About those topics will hugely benefit Benefit the designers Right, so do not worry about this force We will go through all of them one by one So on to the first one Componentized nature and reusability in Gutenberg so Gutenberg has this componentized nature by that I mean Gutenberg pages are created Using a unit or uniform element the smallest atomic element called block Right all entire Gutenberg layouts are created using blocks you can move around the blocks you can Reuse the blocks so same block can be used at multiple multiple places And it can behave the same So we will go through that as well how this present how these layouts are created in Gutenberg So we will see an example of a hero section Of a site So I will first try and break this down for you how you can create this layout in Gutenberg Right, you could make use of the columns block For breaking this whole layout into two section or from the middle From the on the right on the right column you could just simply add an image block And on the left side you could add heading a paragraph and two hyperlinked images Right, so Just talks. I also have the demo of me actually doing this. So Yeah As you can see I have the hyperlinked images already present I add the heading block I will copy paste the text in the paragraph And I select the image on the right side So the motive behind this is It's important to understand What is What is easily achievable in Gutenberg without doing any custom development work Right as a designer you could create designs that are very easily achievable or that can be very easily created in Gutenberg without requiring any custom development work and the second reason is You you also get an idea about Gutenberg So how the designs that you created will be actually implemented in Gutenberg By the user or by the developers so That was quite an easy Layout that we achieved using Gutenberg core blocks Now we will see another example of a hero section Of a website Right as you can see here. We have these images stretching out of the container Now this kind of layout is quite difficult to achieve using only the core blocks Or it's almost impossible to achieve And even if you just even if you are able to like hack around your way and Make use of a bunch of group blocks and cover blocks and even if you achieve this layout That's not the user experience. We want uh end users to have that's not the user experience We want uh our users to have with Gutenberg Right So yeah, so from the componentize nature and reusability. We understood that it's not Only about creating layouts that are Easily achievable, but it's also important to understand what are the Which are the which which kind of the designs that will be A bit difficult to achieve using only core blocks and without Requiring any custom Or extra additional engineering work Right. So on to the next concept in Gutenberg block styles so in simplest terms block styles is A different version of the same block But the different version in terms of only the visuals the content remains the same Right. So I will show this with an example of the core image block Right As you can see the image block has two block styles One is the default and second one is a rounded one So as you can see while i'm toggling between these two block styles The first one has sharp images. Sorry sharp edges and second one the rounded block style has rounded edges So with block styles, you cannot change an entire image. You cannot have a different image So as I said the content remains the same, but only the visual changes Right, let's understand this with one more example of a core block Which is social icons So this one has three block styles default logos only and pill shape As you can see It just changes the visuals you can Style the block differently using block style, but you do not directly change the content of a block of a block Right. So the takeaway of of this of understanding this concept of block style is Instead of creating two separate custom blocks, let's say if I wanted to If if I had designed One section of social icons at two different places At one place, maybe I have all of these icons and at second place. Maybe I have only three of them And maybe I could have a different order. I might have placed a different order of the icons in the second place So that would likely Make the developer create two separate custom blocks instead of one single custom block and Which has two different block styles Right, so with block styles, what you are doing is you are reducing the custom engineering efforts And you're also creating a much better user experience because having to search through all of the blocks and Having two different blocks for the same purpose is not a great user experience compared to Having a single block which has two different block styles and just toggling between them Right. So on to the next On to the next concept. Sorry not not next concept. We will see one more example for the same block styles Let's say as a designer you want to create You want to create testimonial section On a website Right. So you have same testimonial section on two different pages On one page Maybe you wanted to look a certain way and based on the design requirements On the other one you want it to look a different way So maybe on the first one you have created it this way. You have designed it this way It's a slider. It's a carousel. You can Scroll through the different testimonials And on the other one, maybe you have decided to just Create a three column layout for the testimonials right so Maybe you you might have thought that Since I said that block styles have the same data and different visual representation This might be a good fit for block styles But that's not really the case because Achieving this layout using block styles would be difficult because There will be JavaScript involved in the in the first one, which is a carousel So As a designer, how do you identify this kind of edge cases? How do you Decide When would it be possible using block styles? And when would it not be possible using block styles? Because you do not understand Any of the coding so you will not know how this will be implemented So one simple suggestion I would give is try and Not have many differences between two versions in terms of Interactivity how user interacts with the block And in terms of different elements You can reorganize elements, but try and keep them safe Keep them safe All right, so on to the next concept of Gutenberg, which is block patterns right so In simple terms block patterns are nothing but A bunch of blocks grouped together and we make them available as a single entity for the user In the in the first Or in the previous slides we saw that we were creating a layout using the blocks inserting one block after the other manually So instead of that what you could do is you could create a block pattern And you could create a block pattern named hero section maybe And that whole whole block pattern would be available for the user So with a single click user will be able to add all of the blocks automatically inserted into the content Right, so we'll see an example of block patterns Yeah, as you can see On the left hand side, we have a bunch of block patterns available for me And out of those I am selecting this one So on a single click, I have all of these elements or blocks inserted into the layout Instead of me having to go through different blocks Toggling between different settings to adjust the width and everything I just have one single click and everything is there for you Right, so as a designer, maybe if you knew about block patterns, what you could do is you could Break down your design into different block patterns and you could Help identify your developer that this is how you have Created the design and this could be a block pattern So that would also result in a better user experience Right, so on to the next concept style guide and the theme.json file so We designers, sorry not we design I'm not a designer. Sorry So designers create these style guides For the developer to easily understand what's going on, right? It has different color palettes. It may have Different fonts typography So In Gutenberg, there is this concept of theme.json file It's a json file. It's a json configuration file using which you could control various aspects of your website it controls site editor and block editor controls You know, which are the settings that are available to the user And which are the color palette or which are the colors that are available for the user So you can control those things using this theme.json file So what you could do is you could in your style guide Help your developer with all of this color palette you could help them with Typography and you could also help them with this spacing presets so One of the things that are there in In theme.json file is you need to name the colors. You need to name the spacing Right. So since you have created the design, you better know which color is which color holds what importance in the design Right, which is the primary color, which is the secondary color, which is the accent color So In the design itself if you provide with this information It would be very easy to implement this in the theme.json file and this would also The developer would also be able to Easily implement this and the end user also So as a designer, basically you are able to control What the end user gets in terms of which are the colors that are available in terms of which are the different spacing Spacing presets that are available So you kind of control The website's visual or you kind of restrict in a good way Right. You kind of restrict the user. So there is uniformity on the website's visuals So, yeah That will be it. Thank you so much If anybody has any questions or thoughts