 This is my very first work and peer presentation, workshop and talk. So I really appreciate all of you who are attending. Thank you so much. And also for everyone who is a beginner at using the site editor, thank you for taking the leap and trying it out and wanting to learn. And yeah, thank you for being here. So I want to explain what we are going to do today and set some expectations. So in this workshop, you are going to create a brand new team. That's why I have asked you to bring your laptops. And that means that I'm going to show you steps on the screen and I hope that you will be able to follow along. So we are going to be working with the WordPress site editor using WordPress version 6.2 or a minor release 6.22. So how many of you have used the site editor before? Can you please raise your hand? It's a good mix. How many of you are thinking about using full site editing to create or manage, well, client sites? Okay, a little bit fewer. So that's really interesting as well. So today I want to help you get started with how to create a team without using code. There's not going to be a single line of CSS or anything in this workshop. So you will not have to edit any files. I'm going to do a site editor orientation. We are going to be using two plugins, Gutenberg and a plugin called create block theme. So you're going to need to download these two plugins from the plugin directory. So the team we are going to be creating, it is a fully working team if we have the time. But again, I want to set some expectations. The quality of the team that we can create without using code is not on par with a theme that is created by a developer because there are settings that are missing from the interface that we would need to edit files for. There are also a couple of known bugs. Hopefully we will not see them. So on the screen now I have a link to a website called wordcamp.fullsiteediting.com. You're going to recognize these colors and part of these images and the layout because I have borrowed it from the design team who worked on their WordCamp website. So first is just a brief introduction. If anyone has not set up their WordPress installation locally on the computer, you can use something which is called the WordPress Playground. And that would be the link here in the blue area. And WordPress Playground is using WordPress directly in your browser without having to install any software. There are some limitations with this Playground feature, but you will be able to follow along with the most of the steps. And of course there's also links to the required plugins. So in the main menu, there is a written step-by-step guide about most of the things that we are going to talk about today. And I've put it here on the website because we are probably not gonna have time to do everything. So when you go back home, you can continue working on your thing following these steps. There's also a couple more resources. I have some codes for colors for this particular team, but this will all make sense a little later. So we are going to recreate this team inside the site editor. But of course there's also a copy of the completed team that you can download if you need a reference. And that's a zip file from this link. Of course, once we start working, do feel free to, of course, use your completely different layout. Use your own colors. Maybe you have ideas already. So this is only for inspiration and reference because it might be easier to follow and recreate something rather than start completely blank. So my first task for you is to well install WordPress and set up your local installation. You're gonna need just a little bit of content, like a two, three posts on the page just so that we can actually see what the content looks like when we are doing, when we are testing our website. Of course, I want you to install and activate the two plugins, Gutenberg and create block theme. So if you already have Gutenberg installed, please update to the latest version. And the reason why we're using Gutenberg and it's done if someone is hesitant to use this is because I want you to preview some of the features that are probably, probably, because we are still in a, in an alpha beta page for WordPress 6.3. But these features are probably going to be in 6.3, so it's a sneak peek. And we're gonna look at a couple of menu options that doesn't exist in WordPress 6.2 yet. Also, if anyone knows that they are using PHP 8.1 or newer, please downgrade to 8.0 because there will be some bugs with the create block theme plugin. Yes, I had someone sign, I'm sorry. So today, if you do run into more serious problems like actual critical PHP errors on your website, then please raise your hand and come and help you and try to solve them. Most of the errors, because I've been using these plugins for a while, I can actually be ignored and we can continue working as usual. So you will have the opportunity to ask questions. Actually, let me switch back. So this morning, I noticed that this room is really large and like I mentioned, I probably will not hear you all the way in the back. I also know that not everyone may be comfortable with raising their hand and just calling out the question into the room. So I created a post called Questions where you can just post your question anonymously. If you want to reply by email, feel free to share your email. That's on the websites and questions. So we have almost two hours today. If we need, so by now I will ask you if we are going to need a little break because again, two hours is quite long just to sit still and listen to me. But that will be later. Okay, so site editor orientation. First of all, to enable the site editor, we have to have a block theme active and I'm using 2023 and that brings out this menu under PM. So appearance editor. You may already spot some differences between this view and WordPress 6.2. So on the right, of course, we have a preview of our current team and our website. On the left, we have something called the navigation sidebar. So these menu items are actually visible or hidden depending on the content of your site. So navigation at the moment is only visible if your test site actually has a navigation block placed. In this case, it's a header menu right here. So this will show the same item that's in my header menu, so it's the sample page. Next, we have styles, which are the style variations. So if your active block theme does not have style variations, this is going to be empty, but there are two links here that we also, I'm also going to show you later, which go to, well, it opens the editor and it opens the specific sidebar depending on which option here that you click on. I hope that everyone is familiar with the style variation. It allows you to select predefined colors for your block theme. Then we have very interesting menu item, which is pages. And this lists all your pages on your WordPress installation. So if I select the sample page now, it is going to show me both the content which normally is in the block editor or post editor at the same time as the template. So I'm able to view the full template while also making changes to my content. This is new. And when we save, we can decide if we want to save only the post content or also changes to the template. Right now, this is only pages and not for posts. And then we come to our templates. So here we have a list of all the templates. If you select one, the preview will be updated. If we want to add a new template, we click on this plus icon, add new template. And then we have a modal where we can select what type of template we want to choose. And again, we're going to go into this in much more detail shortly. We also have a menu item at the bottom called manage all templates. So if you have a lot of templates already, you may have to scroll a bit to actually find this link at the bottom. Right, so in this table view, we have a more detailed view of all our current templates. And we can see if a template is added by the team. Again, it's this case, 223, or by a user. So the username will disappear. We can also see if a template has been customized. It just adds this little text here below the name. Now templates that are added by the team, they can only be reset. We cannot rename them. We cannot delete them because there are files in our team folder on our installation. They're actually HTML files. So we can't delete them by the interface. But this custom template, I can rename it or delete it. Now we have the library. In this section, we have a list of all the template parts and we have the same link to manage all template parts. And the template part settings work the same way as in the template. It has the same options. From here, we can also access the reusable blocks, but it will actually take us all the way back to the normal admin interface. Eventually, if I have understood the pull request and discussion correctly, block patterns will also be here. So the library will contain different sorts of reusable content, basically. Reusable blocks, template parts, and block patterns. Now header and footer template parts are common. We can also use, there are many reuse cases for template parts. We can use it to show our comments area or we can use it to, for example, show post meta information. That means the post date, post after, and similar. But in this case, the header and footer, I think, are the most relevant. So template parts can be edited as part of the template or in isolation where you only see that template. I forgot to show you. So besides the plus icon in the sidebar, we also have a new template at the top right corner right here. Now, when I switch to style of variation, you can see that the save button here at the bottom is highlighted. So you will know if you have accidentally edited the template and you did not intend to because you will see that there are unsaved changes. Okay, next step is actually to go into the editor. So to enter the actual site editor, you can just click on the active template. Now, at the top, we notice it looks a little bit different than the 6.2 but we still have the template name. In the case of 2023, we have home. Next, I wanted to show you the list view. In the list view, which is this icon on the left side, we have an overview of all the blocks that are in our template. And we can expand all of these nested blocks. We can also select a block and drag it to reposition it. But the most exciting new part are in the styles sidebar. So we can open the styles sidebar by clicking on this half black, half white circle. It gives me a pretty close D. So in the first panel, I'm gonna ignore browse styles for now because we already selected it. So these three options affect the entire website, the root or body, if you like. So for example, if I were going to colors and background, this is where I would change the background color of the body. In typography, we can change the styles of all of these elements. So if I select text, this would change everything, the text of the paragraphs, the headings. It would be a default. And of course, when we then later go in and set a font size for our headings, it will override this very basic setting. And inside layout, these are options that you're probably not gonna touch that often. Here, you can change the default content with and the wide width. I'm going to continue. Of course, in this case, we're using pixels, but you're not limited using pixels. You can pick a unit here from this list. Percentage, EM, REMs. View put width and view put height. Next, we have padding around the body. So we can either pick a preset. These are presets that WordPress adds. So this is a little bit interesting. So as a coder, you would go into the configuration file and actually you can decide what the preset padding one means, but when we're only using the site editor, we cannot change these preset value, but can still go in and set a completely custom value for our paddings or spacing. And again, we can select between several different units. We're not limited to using pixels. Of course, you can enter an numeric value or you can just drag this slider. So I mentioned that these styles affects the body, but we can also add default styles for blocks. And this is what I mean when I say that if you add a specific style to a paragraph, it's gonna override the default body text. I hope that concept is easy to understand. All right, so those of you who has worked with the site that know that when you're styling blocks, you can run into a scenario where your text color change is not actually being applied or your font size, you can see that the font size is actually not being adjusted. So this happens when we have selected a block and change the block settings for this single block. So all the changes that have been made to a single selected block will override the defaults, otherwise they would not work, right? Let's see, okay, so if I select a paragraph block and change it to red, you will see that only some of these texts are unchanged. If I add a new paragraph, it's going to be red, no issue there, right? And they're going to block settings and let's make this something visible, yellow. And if I go and open the paragraph again and change this to white, it's still going to be yellow because that block, that color is more important. It has a higher specificity. So when we run into this issue that we are trying to adjust styles in the styles sidebar, but the change is not applied, we have to sometimes dig deep, we have to go and click on the block and open the settings and see if there's a color already applied or a font size already applied. Okay, so I have made some changes here, which are not maybe that easy to read or very appealing. So if I need to reset all of this, I would go into the styles action menu and select reset. To defaults. And again, you can see that my text block here is still yellow. In the same actions menu, we also have the additional CSS field. I wanted to show you this because this replaces the additional CSS field in the customizer that you may be familiar with. So it's a bit difficult to find. It's in the styles actions menu, additional CSS. So here you add your basic selector and your styles. So another feature that was added to 6.2 is the style book. You open the style book by clicking on this icon. So here we have examples of blocks and they're listed in different categories. And this helps us because while we're doing our style changes, we no longer have to import demo content. We no longer have to add blocks or paste a page just to test them. Instead, the style book gives us examples. So we have text, where we have headings lists, quotes, words, media, we have some images, design, here we have our buttons, columns, widgets and theme. Now in the style book, if I would click on the navigation block, it would open the settings for this block. So here we have to be a little bit careful because it can be confusing whether or not did I select the block that is placed in the template or am I actually editing the site-wide setting? So we need to be careful looking here at the top of the site-wide set-styles and the other side-bar would look like this. We would have the template and the specific block and amazing use that I hope that you will all really like. Is it styles now have revisions? So we can see here, okay four minutes ago, maybe this blue wasn't that bad. I don't need to try to undo until I'm out of undo steps because we now have revisions. And of course, if I want it to be blue again, I can just click on apply here. I'm just gonna scroll through my notes quickly to see if I missed anything. Okay, I hope that was it for the site editor introduction. Has everyone been able to install the plugins without any PHP errors and everything? Okay, I didn't see any hands, sorry, I hope so. So after activating create block theme, we're going to appearance create block theme because now we are going to create the very base of our theme because like I said, to use the site editor, we have to have a block theme active and we are not going to write that code. The plugin is going to generate this code for us. So on this options page, we have several interesting options. We can export our active theme. This includes user changes. With user changes, I mean like we customize the template and we saw on the managed template is that it says customized and this will update the team with that change. We can create a child team. Very useful for us who doesn't want to create child team manually every time. We can create a clone which is a copy of the active team but we can select our own theme name. This is useful for team developers who wants to save copies and test different things and still keep the original theme. We can override again. So override doesn't create a zip file for us. It only makes updates in the background. Again, it will update our templates and then we'll write what was in the site editor to the actual file. We have create blank team and create a style variation. So with the style variation, we only go into the site editor and make some style changes. We go here, click, select create style variation and it will add that style variation to our active theme. But I think you all know already which option we're going to use because I skipped one. So create blank theme. So the reason why we're going to select create blank theme is because if we had used, for example, 2023, the default team or 2022, there would have been settings that we would not have been able to change through the interface. So instead of not being able to override things, we're going to start from almost no scratch with our blank thing. So in this form, we have several fields but we're only going to, but to save time, we're only going to use the first one. We're going to add our theme name. So I'm going to call mine WordCamp. Now I'm going to click on generate. Did anyone run into issue that says that your theme name is taken? Then please make it a bit more unique. Maybe add your first name or your brand name to the theme name. Now we can go and activate our new theme. Actually, I should have used the Capital Theater, shouldn't I? Now with that, everyone is good so far? Yeah, and with our active theme, we're actually going to choose our fonts first. We're not going to go directly into the site editor. We're going to click on this menu which is called manage theme fonts. So this feature is part of the Creative Block theme plugin. It is not available in WordPress yet. I know, good news, there is work being done to add this or something better similar. So we are going to select add Google Font. And in my case, I've already decided which fonts I'm going to use. I'm going to add two fonts, philosopher. So in this case, I only have, well, two font weights, 400 and 700, I'm going to add all of these. I'm not going to check the box and click on add Google Fonts to your theme. And now I'm going to select my second font. It has a lot more font styles to choose from. But I don't want to add all these because if I would, it would take so much longer to actually load these files. And you can see the size of these files here at the bottom of my corner. Now what the plugin does is that it downloads the fonts from Google Fonts and it adds them to the theme. So when a visitor arrives at the website, the fonts are local. They're not loaded from a third party service like Google, they're in the theme. So now we can go back to the site editor and eventually we are going to apply our font family. So I went to the site editor, I clicked on templates. Because we're creating a blank theme, we only have one file which is the index file. The index, or in case I said file, in this case template, is a fallback. It is used for everything on your WordPress website that does not have its own template. Pages, archives, single post view, search. So if I would go to the font and maybe look at the 404 page, it would actually display the blocks that are on the index template. So let's think about what do we actually need to create a very basic block theme. The index is a default template, which is always necessary because it's the fallback. But the templates that I think that we should create today is the front page, a single template for post and pages, archive, search, and 404. And then we will see if we actually have time to develop these steps. So to open the index, we can either click here in the preview or on this little icon it says edit. Just to, I'm gonna open the list view just so that we can see what blocks this feature from the plugin added to us for us. So we have a header template part, we have a group. Of course we can see the site title and navigation block. We have our list of blog posts and the template part that has our site foot. But let's start by adding the font family that we selected. So again, style sidebar, typography. Now text selects the body text. So here I'm gonna select mulish. And just like with the spacing presets that I showed you, we have options here that WordPress is added for us. So we have small, medium, large, and extra large. So these font sizes are fluid by default, which means that they will be slightly different if you're viewing on a mobile or a very large screen like in this case. I'm going to increase the font size from the brush default, so I selected medium. But I'm going to leave the line height at 1.5, for example. And then I'm gonna add the second font family to headings. I'm gonna select philosopher. I'm gonna keep this for all heading levels, but there are several different ways that you can select. You can select everything from H1 to H6, if you want to have different fonts for different levels. Again, maybe we need to make this a little bit larger. Actually, the H1 wasn't used in that many cases. Let's try the H2. So I'm making the H2 extra large, and in this case, the post title, which is right here. It's an H2. So even though I did not select the post title block, it's still enlarged. So that's all for the typography. Now, under colors, I want to show you how to create a custom color palette. We have the WordPress default colors right here. And through the user interface, while we're doing no code, there's no way to remove the default color palette. So this will always be here. That is also why when we add our palette, we don't actually need to add, for example, black and white, because it's already going to be included. There's no reason to duplicate those. But to create our custom colors, of course, it's custom, and the plus icon, add colors. We can add as many colors as we want. And these colors will be available both for background, text color, and link color. There is no way right now to create one palette for background only, or text color only. You can name the color, you can remove it. Of course, you select the color by using this picker, or by entering your code here. So you can use hex, RGB, HSL, depending on what you prefer. And it will show different options. But I'm gonna go back to hex. And I'm going to need to take a minute to add all the colors that I'm going to use for the theme. But again, you're free to add any number of colors that you want to use, or you can use, reuse these values, type arrows. Click on the plus icon to add a second color, and click on done, and we have our palette. You can do the same with gradients, but not with duo tones. I'm not gonna show you how to add gradients right now, because we're not gonna have time. Yes, there is no interface built for it yet. Again, this is something that the coders for Gutenberg are actively working on. I have read the code signer that it's going to happen. Maybe not for 6.3, but hopefully this year. Okay, so let's adjust our theme colors. So I went back to the first page of the style sidebar. Colors, let's select, I can select white for the background. Of course, it's not gonna be visible. For text, gonna select the dark blue. And we can say, for example, this post-concent content is now dark blue, and so is the navigation here at the top. For link colors, we can now select both the default color and the Hoover color. Yep, I've selected black and then blue for the Hoover. Of course, again, you're free to choose whatever colors you want. I'm going to keep the heading and the captions the same way that they are, but I want to add a different color for the button. So I'm gonna select red. No, actually, I'm gonna have white text, sorry, and red background instead. And I want to preview the button, so I'm gonna open the style book, and this is what the button's gonna look like for the red background and the white text. The button color settings does not have Hoover styles yet in the interface. I'm doing it there to be hopeful for WordPress 6.3, but I do hope that it's gonna happen this year. Okay, let's move on to our site header template part. So I'm going to make some adjustments because you can upload your own logo if you like. I'm going to remove it because I don't have one prepared. And the same thing with the site tagline. It's empty. I'm not planning to add one, so I'm just gonna go in and delete it. I'm not gonna do anything special with the navigation block because I don't have enough content on my site to really do anything with it right now. I only have the sample page and the default posts, and yeah, but I would like the site title here to match the navigation menu a little bit better. Let's pick the site title block instead. So when you're selecting your block in the style style bar, you can select from the list or you can use the search function at the top. I think that match is better, I think the site title is still bold in here or something like that. I just quickly select the navigation block, the medium size, the day are the same size. Now I would like to show you how to make the header sticky. This is of course optional, but it's one of the most frequently asked questions in the support firm, so I want to show it to you. So the first thing I'm gonna do is I'm opening the options menu and I'm gonna add a group around the template part. I open the block settings and here we have a panel called position and there's one option sticky. This only works on groups, that's why we had to wrap it. I cannot add it to the template part itself. So now it's sticky, but this does not look very good because it's still transparent. So we have to have a background color, otherwise the content will overlap and it will be difficult to, so now that's much better. But when I'm scrolling, I also say that there's a bit of space here that I actually want to remove, so I'm gonna move this spacer block. Excuse me, not that one. See, this is why the list view is helpful, but sometimes still confusing. So I have a spacer block here. I'm gonna move it outside the group. So now there is some spacing, but it's not in the header itself. I also want to make the part, of course, full width again and this is where I noticed that. Wait, my site title, it's running all the way up to the edge, why is there no spacing between the text and the edge of the browser window? Yeah, there's no spacing. So I'm gonna go into the styles and select layout. Because we have not added the left and right side spacing yet. Width five, again, we can test, we can preview here, which size we might need. So this does not only add the padding to this header and the part, it's added to the body and that's all for the site header. Now for the main content, I want to talk a little bit about accessibility. Accessibility, of course, is a huge topic. It's super important. We're not gonna do a lot about it today, but it's one thing that is important and I said earlier to my colleague that if there's one thing that you should remember from this workshop, it is that when you're moving the main structure, when you're making changes to the header and your main section of content and the filter, you need to know that you should be using the correct HTML element. You do not need to do this using code. We're gonna select it in an option. So I'm gonna wrap again. I'm gonna wrap this queer block with all our posts inside a group because it will give us a couple of more styling options. Now with the group selected, I'm gonna open the advanced menu. Here is our HTML element option. So instead of a div, I'm gonna use main for the main content. So advanced HTML element and main, but we should only use one main element on each page. So I need to make sure that our original block, the query does not use the main. So I'm gonna turn this one into a div. So when we have many blocks in our list view, they're nested in several levels. I find it helpful to name them. And I do that by adding an anchor and that is also inside the advanced panel. So now I've selected our main group block. I'm gonna go into the advanced panel again and I'm gonna call this main. And it says main, right in the list view. And yes. The anchor, do you have Gutenberg installed? So we have group and in the block setting sidebar. Yeah. So we have two panels settings and styles, then in the advanced and similarly, if I select the query, I can just call this log. So now I have opened up all of the blocks that are in my list of posts. And the first thing that I would like to change again, completely optional is that I don't want the full content. I want to use an excerpt, right? So select the post content block and I'm gonna transform it to post excerpt. Of course, we can remove or move the blocks any way that you want. Maybe you don't want to feature the image. Maybe you want to feature the image in a different position. Maybe you want this area to be wider. Maybe something like that. And now let's move quickly to the site footer. So here I just wanted to show you how we can use pre-made patterns. So I'm actually selecting the template part. I'm keeping the template part, but I'm gonna remove all the blocks that are inside of it. Now, inside, I'm gonna open the inserter. I type in footer and select browse all. So this will open the pre-made footer patterns in the sidebar that we can select from a couple of them. So I'm gonna select this. I'm gonna select this one, the black one in three columns. But of course, I want to change this to our theme color, the dark blue. Since this is a pattern, I can change anything. And I would like for the font sizes to be a bit larger. So I'm trying to find where the font size is added. And this is where it needs like multiple blocks and look at the settings to find where it might be added. Yeah, so here we have a small. So let's make that medium as that. So this page list is actually a navigation block and it's still small, yeah, it's still small. So here we go, medium. We can just quickly have to preview of the site on the front because we're now actually done with the index template. So next to the save button, we have view. So we can view the tablet, mobile here, but first of all, we can visit our site. We can view site and we'll open this font right here. As everyone managed to make some changes through index template, then let's move on to our front page. So there are several different ways to create front page templates. And the most important part is to decide where we're saving our content. We are not creating a website. The content needs to be saved in the database. What does that mean? That means that our front page templates needs to pull the content from the user content, right? We need to have a post-content bug. We're not gonna add text or a lot of text directly in the template because that content is gonna be gone when we switch teams. So on our front page template, just you can include small items, block patterns that are easy to replace, call to actions, short introductions, but anything bigger like a main content needs to be in the WordPress database. So first, we need to have a page to hold that content. So I went back to the admin pages and add new. I only need a very, very small amount of content just to identify that I'm on the front page. One single word. Can I just publish this? And I have to go into the reading settings where I'm gonna select that page as the home page. So now when we're going to templates, add new, select front page. We have an option to either use the index template that we created or skip, which means that we were gonna start with a complete blank, but we're gonna be smart. We're gonna use a copy of our index. So you can see this shows the blog, let's say. But if I view the front, what happens? It only shows our posts, our page that we made for the front page. So if we want to show both that page content and a couple of our latest blog posts, we need to create different sections on our template. So to make the blog posts work again, I have to select the query block and select deselect, inherit query from template because the front page template actually can't inherit anything. So now it will only show a list of the latest posts without additional settings. And to show the post content, I'm gonna add a new group inside, again, inside domain, a second group. I'm gonna move the group above the blog, the blog. Of course, we're gonna need a little bit more styling, but if we preview this again, it's gonna show, just gonna show hello because it didn't actually add the post title, which I think is the most common way to show your front page content is without the title and have the blog posts fill out. So there are so many different styling options we can do for these two settings, background colors, spacing. What I'm doing now is that I'm adding, get another group block around the query so that I can separate the post content and query more easily. For example, we may want heading above the query. So this says that this is our latest posts and I'm just making it wide to make it a line. Now, so the heading is actually very close right to the actual post title below it. So if I select a group block, can go into the style sidebar and select block spacing. Okay, that did not do what I was hoping. Let's select the actual wrapping block. Now, we do have some more spacing between our latest post heading and the post title by using block spacing on the outer group. So for beginners who are adding spacing, I would actually recommend using the spacer block because they might find it easier than adjusting, margin and padding on individual blocks. It's a little bit more visual than adding the margin spacing. So that's our front page templates. Again, this is very basic site editor changes. I'm not gonna show you how to set up the home template and the blog post as a separate page because we're not gonna have time for it. You may know that in 6.2, there is no way to add a home template. This is only a part of Gutenberg and hopefully 6.3 since I have Gutenberg active to have a home template. We've actually done most of the changes now because our single post and our single page, our archive and search are very, very similar to each other. There are very few changes between these templates. So let's select a new single template. Again, I'm gonna use our pre-made because it gives us head start and I do not want a query loop on my single post template, so delete it. I do still want to have the main as a wrapper for my post content. Post title, post content. You can adjust these any way that you want. If you want to add the post date, post author, if you want the next or previous post navigation, you can add those blocks. Of course, move them around, position them any way you want, above, below. We have two different post author blocks. We have a post author with a avatar, just use it, just not show. And a byline above it. This byline is super tiny. Be able to select it and add. And we have the post author name block which only is post author name. So what we want to make sure on the single template is that the post title is not a link because it would be a link to itself. We need to make sure that this setting is off. So post title, settings sidebar, and we do not want to make the title a link. Also, completely optional is to add a comments area. I know that was fast, but let's do the same with a page, with a single page. And here we want to select, we want to add the default for all pages, not just one single page. So I select for all items. Now, instead of just deleting the query, I could have just grabbed my group, remove the content and everything that I need. Outside, now, confirm where to block so we don't need. So this would match what's in the loop, what's in the list of blog posts. But for a page, you might want to remove categories and tags so they're not visible on pages by default. So again, we're just repeating steps, the single post and the single page are very, very similar. Okay, a basic archive template. We have our query loop, we know that we have the setting inherent query from the template. This is what makes it pull the posts from the create category. It's the only difference between this and the index is that we can add an archive title block this way. We can decide what we want the archive title to show and a term description block. Already on the search template. Now I'm searching for the search results title block and for the query, I want to expand on this. I want to add blocks that are shown when there is no search results. So inside the query, but outside the post template. See if we can find, this is the right insertter. We're gonna add the no results block. So the no results blocks only contain an empty paragraph with some instructions. So you can add your own blocks inside this container. For example, we might want heading that says, no results and such blocks. So the people who come to the sites and finds the results can search again. There are so many design improvements, of course that we could do to this super basic template. But I hope this gives you a good idea how we're creating the templates. Now, what we've done here now is we have created templates that are saved to the database. They are not HTML files yet. And this is what create block theme plugin helps us with. So once we get to the export, we'll take all these settings and convert it and add it to our HTML files. And we don't need to touch the files. And let's also do the 404, something like that. Super simple. There's one thing more that I should mention about templates. So when you go and want to create a custom template. A custom template is a project, is a template that you assign to a post or page. So if you ever want a template that you want to be able to add to more than one post or page, you should always use the custom template, not the page or the single post which we've written earlier. Because if we go to page, we have to specify one page to add it to. With a custom template, we can assign that template to any page via the block editor. Yes, so if you have a plugin that has custom post types, they should also show up in this list automatically. The plugin will need to register the custom post type correctly using the REST API. It's a very simple setting that most plugin authors that are using a template are aware of. Without the REST API setting, it won't show up here. Okay, we're quarter past 11. Do we need our break? Wave some water. I know that a lot of this was a repetition for many of you and that, but I hope at least that showing the create blocks in plugin features gives you an idea of what services it provides for us by creating the basic empty team that we can build from without having to override or trying to adjust existing settings that other people have added to their team like that, the fourth thing. Do you have one question through the page? Okay. We see, I think it's a, let me check, it's a pattern, right? Choose a pattern and we see our initial pattern. Can we add more here or why was our, yes, there if you do that? Just any, yeah. So can we add more there or why is that showing there? It was our, I understand that it was what we created first for the index. So, truthfully, I have not tested that. So, the first thing I noticed when I look at this model, it actually says choose a pattern. We don't have any patterns in our team. Haven't created anything, they can't display anything at the same time. This is not a pattern. This is our template, it's just, it's confusing. So, what if we actually test that by activating the team again before I switch teams? I need to do something. It's just, I'm just gonna say the changes really quickly so that when I activate the team, I'm not gonna lose any changes, so. Let's try to switch back to 2023 and actually test that. Oh, no. So, what I thought would happen is that, it would actually show the blocks from the team that has a keyword which is the post-content. I thought that those kind of patterns would actually show in this model. Maybe that's the plan, we'll find out. But yes, great relevant question, thank you. Yes, so before you select your fonts, everyone can see the question. Before you select your fonts, you have to activate the team because it only works with the current active thing. So, since we're speaking of fonts, I didn't show you this, but I think it's not that difficult to understand. If you need to remove a font, you can click on Remove Font. The file is gonna be removed, but then the setting, you're gonna have to go into the site editor and update the setting where that font was used. So, another thing that create block theme, the other thing that create block theme does that the WordPress site editor cannot do is that if you add images to the template, it will actually take that image from the media library and place it in your theme. So, if I wanted to add my background image to the header, I would need to use a cover block and I also want to remove the overlay. And the create block theme, block and well done. Move the image to our theme folder and create a block pattern that has pitch picker in it to make sure that the path to the image is correct when we distribute the theme zip file because we can't do that. Because we can't do that with HTML, we need to use PHP, but we don't need to do that. Plugin does it for us. Okay, do you have any questions about the style server? Yes, unfortunately by adding a cover block first and then adding all your blocks inside the cover block. Yes, there is no, if you remember in the customizer, we could just upload any, and it would add a background image by that option that option does not exist in foresight editing. I have some ideas why I would like the option to exist, but I think it's because we basically should not do that. It's not performant, most of all, to have a large background image as your background. Yes? But it doesn't have to be a BNG or something. It may be an SVG, so the performance doesn't affect. Yes, I agree, but the option or the interface for it does not exist yet. No one has built that into GoTailbreak. Do you think that they will ever build it? It's on the roadmap, or they think that the best practice is to put everything in the group widget and give it a cover? Yeah, there is an open issue for it in the GoTailbreak GitHub repository. It is inactive, no one is commenting on it, no one is writing code for it. It's not on the roadmap for 6.3, probably not 6.4, unless people start going to GitHub and commenting and saying, I want this, I need this, this is my use case, this is why I need it, I need it now, and we'll try to listen to you, right? Yes, click on the little icon, thumbs up icon that you need this feature, because it does make a difference for us to know as GoTailbreak contributors does make a difference to know what the user's developers need. More questions or anything you want me to show again, or repeat? The plugin that adds Google Fonts, add only TTF files to your theme, is there like any plans to also add Waf2 files in that plugin? I would say that also depends on Google and what type of format they're gonna provide us, because they do not provide Waf files. What you can do is you can use the button that says add local font, so you would yourself download the font, probably go to a website that has a converter, convert it into Waf2 and then use add local font, you would upload it, and again, the plugin will put it in the right place using the right code, in the right folders and everything for us, yes? Is it possible to deactivate single blocks for the website, like for the editor? No, not through the interface. You can hide them by selecting your favorite blocks, but you can't completely remove them. You would need code to do that. Is there a plan to do that? I don't think so. I think that they, as in they, I'm sorry, Gutenberg contributors, I would think that feature is quite a bit too powerful to expose to everyone, and that's one of the issues that we have with several settings, right? We have developers and, well, people who are clients that you build websites for that needs to be able to do this and limit what the user can do. It's a very difficult balance because the everyday user who's gonna look at this option can possibly break something really bad and not understand how why it breaks. Even if it's a simple thing like a checkbox, they might not be able to find that area inside the site editor or in the options. So it's a very difficult balance. Okay, so let's say that we are now done with our first edits, our first motion of the team. If we click on export, we'll get our supply. Again, we can share this, we can use this absolutely on our own website. It is not of the quality right now or yet that we can actually use it for clients as is. I would not recommend that because if I would activate this theme now, so I'm gonna override the active theme by going to add new, I'm gonna select a zip file, if you can find it first. It's gonna look a little bit different than what we just saw. Place, I'm gonna go into the editor. So it's still loading, now it says WordCamp, right? It doesn't say admin user anymore. So all of the files are now inside the theme and it's gonna say added by theme. So once I've exported it and replaced my theme with my files, not through the database, but the files, I'm no longer able to remove these templates without going to the actual team files and delete them from the folder. So not through the interface anymore. I can still edit them, I can still make all these changes. So that is why on your very first run menu, on your very first export, I would suggest using first using override which moves our settings to the theme files and you can create a clone which you can just call it a backup because then you can actually keep editing through everything to the site entry, including deleting them and then test your clone to see the actual result in the zip file. And then again, when you're satisfied, export and generate. As you can see, if you can find another patterns that we actually created. Well, actually to do this, I would have to look at the theme file so I'm not gonna do that. Like I mentioned, the header image I've added should be in a pattern. I'm not sure in what category it is. I'm not gonna go to search for it right now. Anything else? Okay, the no results block inside the query loop. So let's test that again. I'm going to assume again that Gutenberg is active. Let's find the query. So again, we don't want it inside the post number because then it's gonna be repeated for every post. We would need it inside the query, but not inside the post template. This is getting a bit in the way because of the stick header. So I think what's happened is that it's actually not the query loop that is selected because the no results block can only be added inside the query. So if you accidentally selected a group or the post template, then the no results block is not gonna be available in the inserter. So it's only available inside the query. So again, if I select a group instead, select the inserter and try to add the no results. We have no results. Okay, we have, for some reason, we have a site tagline which is not what we're looking for, but I think that's what's happened that it's the wrong parent block that is selected. So they create a block theme that gives us a head start. Of course, everything that involves the site editor, you can use that on any website without the purpose of creating a theme. But if there are no questions. You said this was not ready for production work, so why is that? Because you exported the theme and you activated the theme you exported. I can show you why this is opinionated, but it's gonna be code. So I'm sorry if this is too advanced for some of us. I also have to, excuse me while I find my folder. Yes, I do have a lot of purpose installs. Okay, a block theme. I'll be able to see my editor. Okay, actually I wasn't, this was a bad idea. The problem is that, for example, when we added the image to the cover block, now we have also deleted it. So if I would go into the style sidebar right here, and I would select cover block, and I would add, okay, let's have a default text color. This default text color would be added in team JSON, but it would not only add that single setting, but all of them. So instead of only, so this is team JSON, this is not something that we've discussed earlier today. It's a team configuration file. So instead of only having settings, blocks, block name, which would be the cover block, and our default color, it would actually add all of the settings. So appearance tools would be duplicated. Layout would be duplicated. Shadow, spacing, typography would be duplicated. That's a lot of code, that does absolutely nothing, it should not be there. And the second thing is that, if we do want to talk about bugs very, very briefly. This will be clear to those who are familiar with team JSON again, I'm sorry, but I do want to answer the question. So when I showed you how to select a padding using a preset, when we click export, all of the default presets are removed. This is a bug that we're going to have to fix inside Gutenberg. So the spacing presets here should be gone, shouldn't be there, that's one of the bugs. So that means that when a user or you go back and use your exported theme, you're only going to be able to add a custom, completely custom value, there's no presets. It also means that the templates that use the presets are not going to find the CSS code because it's not, it doesn't exist. So the spacing on the front is going to look broken. Did you have a question? Did you raise your hand? So, do we have questions? Otherwise? Yes, okay, we have two more questions. So it's regarding this. So this issue happens in any situation or just when you create a new theme using that plugin. But let me give you an example. If I start with another block theme, would it be the same problem when exporting? Yes, so I did not show you this and it was on purpose. So inside the site editor, part of core, we have an option called export. We did not use this export because it is much more limited than in the create block theme plugin. But the same error with the duplicate settings and the overriding settings are in core. The same thing happens if you use this export options. As soon as we find a solution for it, it will be fixed. I also did not show you that there's not only no options page in the admin area, I also have this icon for create block theme with several options. So for example, if we select theme info, we can see that the current team name is, we can add a description, we can update these settings, theme author, version number, which are the more relevant. And the save here is the same as overwrite on the options page. Maya, would you like to ask a question? Do you have like this written down somewhere what you told us today, like especially the specification for some template parts where you have to consider stuff? Most of the opinionated things where I'm answering questions is not written down. What's written down in the step-by-step guide are only the ways to edit the blocks, where to click to edit templates, and how, finally how to export the theme. I guess I'm gonna have to watch a recording and try to make a written content about it. Yes? Do you plan to insert some options like showing on mobile, not on mobile? A Gutenberg question. I would say it's not up to me if I want to add it or not. As a singing contributor to Gutenberg, there are lots of voices that need to be heard, a lot of discussions before a decision like that can be added. There's nothing to add responsive options that no one is writing code for it as far as I know right now. Instead, I think the plan is to just that we should rely on the defaults and it should just work. So you will not be able to add different, I'm sorry, I'm from Sweden again, I'm losing the English right. You will not be able to specify where the break point is. You can sort of cheat it by using a columns block and setting a responsive unit, right? That's one way but then you would end up with lots more blocks than you might need on your template. So I would say rely on the defaults as far as you can and when you can't rely on the defaults, use custom CSS. Either if you need to use the CSS file in your theme or with the custom CSS option. I would try to see how far you can get and see if the defaults are acceptable because it probably will work for your case depending on how detailed the sign is that you're trying to accomplish. I do not think that we're gonna have something called mobile where you're gonna say this is X number of pixels and on this page you're gonna hide a post title. I don't think we're gonna see it as kind of setting this in Gutenberg. Yes, we have questions in the far back. Hi, when you are editing the template you have the option for the navigation. Yes. Yeah, this show up only with the theme of is a Gutenberg integrated because I have some themes where I cannot see the navigation option and I don't know how to activate it. I thought it was a Gutenberg update. Is it a block theme? So I mean you have the rest of the site editor but it's just this navigation menu where it's empty. So I know that there's a bug with the navigation block itself so if you've had a classic theme installed and used the appearance menu to set up your original menu that menu should show here, right? It should be available here but there is a bug so if you make a change it should reset it. So if you make it go here and make a change to your menu like remove item, add it back, save it should refresh and it should show again. I think that might be the bug that you're running into. Still have very few minutes left. If nothing else, then I will give you your time back and you can go and have a coffee. Any more, maybe just one more question? Hi, thank you for the demo and your information. I have a question about negative margin. And Z index, do you think it will come soon in September, this kind of feature? And also the possibility to rename all the item on the left. You know, group, group, group, group, group. It's very cumbersome when you have a lot of group you don't know which one is it. So this is a free question. Thank you. The answer is I don't know. I do understand from, well, from support requests that I receive from users that it is complicated. So adding margin and spacing on the whole layout, I can use the second that I just shared, like from the sidebar, but it falls. But when we're nesting these inner blocks, do I understand the question correctly? It's sometimes difficult to know where the spacing comes from. Did I understand it correctly? So which blocks do I have, first, which blocks do I have to set? And then when I'm opening the panels, I need to know, like, is it padding? Is it margin? Is it block spacing? Because we have all these options. And for some blocks, we might actually only be able to select the bottom or top. And how are we going to know that without selecting a block, that is very, very difficult. It's a very difficult problem to solve through the interface. The problem needs to be solved with documentation and training. Was that relevant to your question? Is it helpful? But yes, so if you have all these layers, nesting blocks, it's a lot of discovery by clicking them and seeing where the size is coming from. So if you have any tips on how we can make it easier, yeah, please do find me sometime today for the word campaigns. Very important discussions to have with users of all kinds. All right. We hope that you can continue this discussion. We'd love for you to continue on. And if you have any questions, you can go to wordcamp.fullsiteediting.com to continue asking your questions. Or please reach out to Carolina right away after this. Yes? Okay. And I think that's it for this workshop. Thank you very much for everyone. And before you leave, Carolina, before you leave, we have a token of appreciation from all of us here. Thank you so much. I hope everyone enjoys.