Block Themes
Block themes are quite different from the other themes on the OpenLab. They introduce a new functionality called full site editing, which uses blocks for all parts of the site, rather than just posts or pages.
One of the advantages of full site editing is the ability to fully customize your site’s design and layout without needing any code.
For example, to create menus or sidebars in traditional themes, you need to use separate interfaces like “Dashboard > Appearance > Menus” or “Dashboard > Appearance > Widgets”. In block themes, menus, sidebars and everything else are created with blocks, in a way that is easier and more intuitive, as we will see below.
This guide is an adaptation from the elegant themes guide, which you can visit to learn about additional editing options.
Block Themes to Try
To select any of the themes above, check changing the appearance of your site with themes. Twenty Twenty-Five is used for this tutorial, but the principles are the same for all block themes.
Site Editor
In your Dashboard, click Appearance > Editor. This will be where most of the changes will be made.
Global Styles
A great feature of a full site editing theme is the ability to set global styles. You can choose fonts, colors, color themes, and adjust spacing across your entire site, or only on certain blocks.
1. Click Styles on the left sidebar.
2. You can now select the different styles available, including Default, Evening, Dusk, Twilight, (hover your mouse over them to see their names). Each of them comes with its own color palette and fonts. These combinations were created by theme designers with the purpose of working well together in terms of design and accessibility.
3. You can click on any of them and immediately see how your site looks on the right side of the screen.
4. Once you’ve found the one you like the most, click Save.
5. To get a better view of a style, select the style and then the small eye icon on the top of the left sidebar. You will be able to see on the right side how headings, paragraphs, lists, images, and other types of blocks look in that particular style.
Header and Footers
Headers
1. To change the look of your header at the top of your site, click Patterns > Header. There will be a few template boxes available. Notice that you can edit any of these to change it to a different design. Click the box labelled Header.
2. In the right settings panel, under “Design”, click on the different designs to see how your header will look. If you find one you like, click Save in the top right corner.
3. Click the logo in the top left corner to go back to the site editor.
4. You can also edit the header further, adding many types of blocks to it, like a search box. For more information, we suggest this ”Edit the Header” tutorial.
Footers
To change how your footer looks, go to Patterns > Footer and follow the same steps as the header section above:
- Click the Footer box;
- Select the design you want;
- Click Save in the top right corner;
- Click the logo in the top left corner to go back to the site editor.
Navigation Menu
Quick Edits
1. Click Navigation.
2. On the left side panel, where you see “Main Nav”, you can quickly remove or change the order of items in your navigation menu. Click the item name, then click the vertical three dots “⋮”) on the right-side of the item name. If your item is a sub-item in the menu, click the right arrow first, then click the item name.
3. Click Move up or Move down to move your item as you wish. Or, you can click and drag the item to where you want in the order.
4. To remove the item from the menu, click Remove [item name].
5. On the left-bottom corner of the page, click Review [X] Changes…
6. Review the changes and unclick all the changes that you don’t want to save. When you are ready, click Save.
More Edits
1. Click Navigation.
2. Click the vertical three dots (⋮) on the right side of “Main Nav”.
3. Click Edit.
4. In the page that opens, you can click any menu item, and a cursor will appear. That allows you to change the name of any menu item.
5. When you click top level menu items, the sub-items will appear. Now you can click any of them to edit their names as well.
6. To add new top items click the right end of the menu, and a plus symbol will appear. Click the plus symbol.
7. To add new sub-items, click a top item, then click the plus symbol at the end of the items list.
8. In either case above, a search bar will appear, where you can type a page name, a tag or something else you want to add to the menu. Once the desired item appears, click it.
9. After you are done with the changes, click Save on the top-right corner of the page. Confirm the changes, unchecking any change you do not want to save. Click Save again.
10. Click the logo on the top-left corner to go back to the site editor.
Additional Tutorials
If you want to learn more, these tutorials cover how to work with block themes and full site editing in depth:
- Intro to the Site Editor
- WordPress Full Site Editing: A Beginner’s Guide
- Mastering WordPress full site editing: a step-by-step tutorial
- WordPress Full-Site Editing: A Deep Dive Into The New Feature
