 OK. So good afternoon, everybody. Lovely to see you all here today. First of all, I would like to share their way, 25 contributors, you can see. I'm also here. Sorry for my bad voice. I found there an exciting thing. Do you know, a block team can be made without writing a single line of CSS code? Yeah. 2023, block team has no CSS code at all. Even no PHP code, all right? Isn't it awesome or cool? I think both. So if you want to make a functional and beautiful block team, you have to be a master in Tim Dixon, right? So I'm curious to know who is the experience with this team development or customization in this room. Could you say hi to me? Excellent. Also known faces, by the way. So Anton will help with you to go through that part of the Tim Dixon so that you can understand the Tim Dixon even better. And after completing this session, you will be able to start your next block team development more efficiently. And if you have any classic team, you can also convert your classic team into hybrid team by adding Tim Dixon. So what is Tim Dixon? Tim Dixon is a configuration Dixon file. It's for controlling Tim styles and block settings. This file is located in the root director of your team. It works with both classic team as well as the block team. But it doesn't work with the classic editor. So just remember, the minimum UK version of WordPress is 5.8. Otherwise, you have to activate the gluten block plugin. So before going into jumping to Tim Dixon, you know, Dixon is come from JavaScript. It's a lightweight data format for storing and transporting data, the data separated by values of objects and name value pairs. And here, data separated by values, currently we solve the objects. Or no, square bracket, all these errors list. Excuse me. Now, we are seeing what exactly looks like a Tim Dixon file. Here, a little bit of stuff is schema, is version, settings, styles, custom templates. There are almost seven sections, mainly seven sections. I rearrange those seven sections into three groups. Group number one is the schema and version. And the group number two has the most important and essential two-part settings and styles. And the last one has the custom templates, template parts, and patterns. But today, we are mainly talking about styles and settings. All right? So what setting does in Tim Dixon? Settings actually does two things. Controlling block editor and individual blocks. And the second is create CSS preset with fellow. All right? Here you can see the stuff inside the settings. There are almost nine settings categories. Later, we're going to see more example on this. So don't worry. So what does styles in Tim Dixon? It's very easy, styles for applying styles to the website and individual blocks. Also, there are seven styles categories. So this part is more important because it's very important to understand the difference between settings and styles. Because you might get confused who are you going to write on this. You can see the similar categories in settings, blocks, border, color, spacing, and same things go here also. So it's very important to understand the difference. So in general, we control options related elements and general CSS preset in settings. On the other hand, we control design related elements. OK, right? In settings, we define color pillars in settings. On the other hand, we use those different colors in styles. I think you guys understand this. OK. So let's dive into some more examples. How it works in practical. OK, color. Now we are going to set the color pillars in the color of these settings section. Each color has three key value pairs, name, slug, and color. The color value can be any various CSS color value, such as color, name, RGB, or hexa. Yeah, it's string. It's the output word response, this and that, and create CSS preset for each color, for each color, and add them to the body selector. When you add these on the theme, you can see these from the, I think, console. So next. Also, you can see your edit color to the site editor color options, all right? Now, how we can apply those defined color. Here, we have set color inside the settings as background and text color. If the output word press force this and that as well, and add them to the body selector and another selector. OK. You might notice on the last slide, all right? The color at the top level of the settings, sorry, on the styles, it will affect only the, sorry, it will affect the full site, OK? And in the color inside the block, only if it this name block type, I think it's very cool. And the same thing goes for the settings as well. Just remember this one. OK. Now, we are going to talking about very important thing. By default, Gutenberg disabled most few, a few options like border color, spacing, typography, this stuff. But we can enable those options by adding true-to-appearance tools. Otherwise, your editing will not affect your site. You have to first of all set true-to-appearance tools inside settings. So this is very important. So now we are talking about spacing. How to control spacing like margin-pairing options without writing a single line of CSS code. So by default, WordPress provides these seven spacing presets. You can also see this spacing is preset as margin-pairing in the site editor, control options. We can also use those default spacing preset as spacing size like margin-pairing value in the style section. But if you want to create or make your custom preset, then you have to set, first of all, you have to set 0 to spacing scale inside these spacing of settings. These 0 will omit all the default spacing presets. Then now you can set these kind of stuff. This is your custom presets. Each custom preset has three quilos pairs, size, slug, and name. This should be chronological. And then as the output, what is another of those presets and add them to the body selector? All right. Also, you can see this you added custom spacing effected in the site editor. OK, now we are going to talk about typography. You might want to add your custom font family to your theme. Yeah, you can add your custom font family inside the font families under the settings typography. Each font family has four quilos pairs. There you can see font family, name, and slug. And if you want to add your downloaded local font, you can set it in font phase. I think you can guess. This font phase is similar to CSS import font phase, right? OK. It will create this preset as well. And also, you can see these, your integrated fonts available to the site editor, font choice options. OK, now you also add your custom font sizes. There are also only two quilos pairs, size and slug. It will create this preset. You also see this stuff available in the site editor also. So now, how to apply those different typography to your site? Very easy. We have added those generatices in the styles section of typography, font family, font size. As the output word response is just some data and adds the stuff here. OK. Now, we are going to explore more exciting thing, schema inversion. Which schema version do we need to choose? No confusion. We have to choose the correct version number two. If anyone used version number one, then what would recommend you to go to two? All right. So this is very important. What actually does is just an schema. This schema will help you to write in theme design more efficiently by providing features like autocomplete, quick suggestion tool tip, and the mainly validating data. So let's show how a schema help you write in theme design. When we add this schema, you can see the orange version. Also, you can see the auto suggestion. Isn't it cool? Yeah, of course, you have to choose a very good idea. I think free one, Visual Studio Code, would help you to get this one. So after that, I have now I can say, you don't have to remember all the things, right? Because the schema will help you to how to write in theme design. Isn't it cool? Yeah, I think it's cool. So guys, I'm going to near to end before then a quick tip for you. You change this in theme design might take so long to update in browser. I think it's maybe a catching issue. It will resolve if you set true to WB debug or skip debug. I think it will resolve your issue. So that's all for today, guys. I hope you enjoyed my session very well. And you are ready to start your next blog team. So let's make it happen. Thank you. Thank you. Thank you.