Full Site Editing is the talk of the town nowadays. But what is Full Site Editing, and how can you build a Full Site Editing theme? Let’s find out in the post.
The aesthetics of a website matter as much as its content. WordPress themes are the overall face of your site. They are central to your site’s colors, designs, and layouts, so let’s dig in and learn how to create a Full Site Editing theme.
But first, we’ll have a look at WordPress Full Site Editing.
What is Full Site Editing?
Full site editing (FSE) refers to the new WordPress workflow that employs blocks to structure the entire site, including areas outside of the content area. Full Site Editing (FSE) has made it possible for users to customize their websites in a variety of ways. It comes with a vast set of new features, making website creation more user-friendly and efficient. On top of that, it allows you to create your own Full Site Editing themes without any need for coding.
If you are already familiar with the Block Editor, you will likely find the new Full Site Editor relatively easy to use. Once you get a strong command over it, you can easily create layouts and templates for later use, saving you time and effort.
Full Site Editing (FSE) made its debut with WordPress version 5.9. It incorporates various tools that simplify the design process for site administrators and owners. FSE allows site owners to alter every aspect of their websites from a single location. This feature also adds new blocks and customization possibilities, reducing the need for additional plugins or scripts.
HOW TO ACCESS FULL SITE EDITING WITH WORDPRESS 6.0
WordPress began shifting toward more visual editing capabilities with the release of the Gutenberg editor. This move is still ongoing, and with the release of WordPress 6.0 in May 2022, which builds on that foundation, the Gutenberg blocks will become even more adaptable.
Let’s see how you can access Full Site Editing in WordPress 6.0.
Activate full site editing Theme
First, you need to activate the brand new Twenty Twenty-Two theme. You can activate the theme from the Admin Dashboard by navigating to Appearance > Themes. Find the Twenty Twenty-Two theme and hit Activate. The Twenty Twenty-Two theme will now be active by default.
After activation, you will find the Editor in its beta version. Click on it to access the updated Full Site Editing included in WordPress.
Where can you find Full Site Editing Themes?
You can find themes by clicking the Appearance and then going into the Themes option from within the WordPress Admin Dashboard.
Check out these popular block themes. It may help you select the suitable Full Site Editing theme.
1. Twenty Twenty-Two
Built on a foundation that has been meticulously created, Twenty Twenty-Two embraces the idea that everyone must have a website that is one of a kind. It includes airy yet powerful typography, a color palette that takes its cues from the natural world, and layout components that are placed softly on the page. The variety and adaptability of birds served as inspiration for the theme’s understated design aesthetics.
Since it is the first theme to be officially released alongside the WordPress 5.9 version, Twenty Twenty-Two is considered the forefather of all Full Site Editing themes. It revolves around the concept of creating one-of-a-kind and innovative websites while maintaining the utmost level of simplicity.
2. Wabi
Wabi is a WordPress theme that delivers everything you could want from an ideal theme for WordPress. It includes a diverse color system, clean design, and typography.
You will also have complete compatibility with the Full Site Editing features when using the new theme editor. You will receive various styles, including dynamic color schemes, dark color schemes, and light color schemes that complement your company’s tone.
3. Aino
The Aino theme for WordPress is a Full Site Editing theme that offers complete capability with Full Site Editing. It helps you create a sophisticated page layout using pre-built blocks. You can construct an online store with this theme, a website devoted to photography, or even your own blog.
4. Hansen
Hansen is yet another popular Full Site Editing theme for WordPress. It provides users with a variety of page templates and block patterns to make their lives easier. Moreover, it allows users to experiment with different layouts for their websites.
Full Site Editing Main Concepts
The following are the building blocks of a Full Site Editing theme. Let’s have a look at each of them one by one.
BLOCK THEME
A Block Theme is the foundation of Full Site Editing. Without a Block Theme, the dream of Full Site Editing would remain just a dream.
Block themes are different from conventional themes. Regular WordPress themes only offer support for the block editor and plugins built on blocks. There is no way to enable Full Site Editing via the block editor at this time.
Until now, WordPress block themes needed the Gutenberg plugin to function correctly. However, following the incorporation of FSE into the core of WordPress with the release of version 5.9, the plugin is no longer necessary.
Moving on, the block editor adds the least amount of CSS overhead compared to page builders since it is a core WordPress component. Another advantage of Full Site Editing themes is flexibility. Before the release of WordPress 5.9, you couldn’t edit your theme template if you were not a developer. But now, you can customize theme templates, including the footer, header, page, etc. Moreover, you get complete control over styles, including colors, layout, and typography.
BLOCKS
Each individual component of the site is a separate Block. You will find blocks for elements like images, paragraphs, headings, videos, and buttons, which you can add to your pages and posts.
Moreover, there are also blocks for global website features such as Page titles, Website taglines, Menus, Shоrtcodes, and more.
There are two types of Blocks:
- Static
- Dynamic
Static Blocks
Static Blocks are those in which content reveals at the time of publishing and does not change after publishing. A paragraph block is an example of a static block.
Dynamic Blocks
Dynamic blocks reveal their content dynamically. Content is unknown at the time of publishing and is computed at run-time. For example, the latest posts block, featured products block, etc.
In addition, you can create Reusable Blocks. You can combine two or more blocks to create a group and reuse it anywhere on your website. For example, you can group a heading, paragraph, images, and button to form a feature overview section. You can later reuse the feature overview block on your site.
Block Templates and Templates Parts
Templates in WordPress provide a framework that determines how content appears on the site. Full Site Editing themes come with Block Templates and Template Parts. Moreover, you get a comprehensive selection of layouts to choose from, and if you want a custom design, you can easily modify templates and template parts without any coding.
Templates are files that contain HTML markup and CSS code that determines how content appears on WordPress. You can find template files inside the /templates folder in the root directory of your WordPress installation.
The structure of a typical Full Site Editing theme looks as follows:
templates
|---index.html
|---page.html
|---404.html
|---(. . .)
template-parts
|---footer.html
|---header.html
|---(. . . )Theme.json
JSON is the abbreviation of JavaScript Object Notation. A Theme.json file is a simple text file that provides essential data for the project it belongs to. This file is used for the configuration of theme styles and block settings. To avail of this feature in older versions of WordPress, you must have the Gutenberg plugin active on your site.
A few examples of what you may do with theme.json are as follows:
- Turn on and off features such as drop cap, padding, margin, and custom line height.
- Add multiple color palettes, gradients, and duotones
- Add font sizes
- Add default widths for content
- Add custom CSS properties
- Assign template parts to template part areas
By the way, it is worth noting that the template editor is enabled when you add a theme.json file to your theme. The theme.json file is the first step in managing styles for future releases of WordPress. WordPress 5.8 comes with a new way to customize the editor, which offers more fine-grained control and introduces the first step in managing styles.
Block Pattern
Block Patterns, introduced with WordPress 5.5, are prefabricated block layouts provided by themes or plugins. They are also sometimes referred to as sections.
Users can find a comprehensive collection of Block Patterns inside the Full Site editor. These patterns are ready to use. Users can simply copy and paste the blocks onto the page. There is no need for coding; as a result, they save users a significant amount of time.
Consequently, the use of Block Patterns within block themes has increased significantly since the release of WordPress 5.9 and the Twenty Twenty-Two (TT2) default theme.
Once you have added a Block pattern to a page, you can modify the page’s contents per your specific requirements. There are literally no boundaries to what you can achieve.
Above, we have seen the main components of WordPress Full Site Editing. If you want to learn more, check out our detailed article on Full Site Editing in WordPress. Now let’s move on to the next step, creating a Full Site Editing theme.
Create a Full Site Editing Theme step by step
By now, you understand a lot about Full Site Editing themes and their different components. Let’s move forward and learn to create a Full Site Editing theme step-by-step.
1. Activate the twenty twenty-two Theme
First, make sure you are on the latest version of WordPress, log into your Admin Dashboard and select Appearance > Themes. Find the Twenty Twenty-two theme and click on the Activate button to activate the theme. Twenty Twenty-two theme is now active on your site.
If you are on the older version, you can download the tt1 blocks theme and upload it to your theme directory. Check out section 2 of this article for instructions on manually uploading a theme to WordPress. Don’t forget to activate the theme.
The WordPress dashboard sidebar menu should now include a new Editor. Go to Appearance > Editor(beta). Here you can customize your Full Site Editing theme.
2. Customize a Theme with Full Site Editing
Customizing or editing a page in the new site editor is very easy. Go to Admin Dashboard > Appearance > Themes, move to the one you want to customize, and click on the Customize button. The Editor will open.
At first sight, you’ll notice the entire page layout consists of blocks. A page may comprise a single template or multiple template parts combined together. In the new Site Editor, you can create, edit, and preview templates as well as template parts.
Customize header and Footer
You can also adjust the information and widgets displayed in the footer. You can do so by editing the footer block.
Customize Theme Elements
In version 6.0, you now have access to some beneficial new theme blocks, which you can use to modify the content of the site in addition to its appearance. It is not difficult to make changes to the Navigation, Template Parts, Header, Footer, Posts, and more. Consequently, achieving the desired result is becoming much less complicated.
Moreover, you can add or delete page elements, even entire blocks. On the right-hand side, you will find the sidebar where you can tweak the Styles, Typography, Colors, and Layouts of your theme.
Update Page Layout
Previously, it was impossible to make changes that would apply to the entire website without a Customizer or Theme Options panel. However, you can now apply styles to the entirety of the website.
Likewise, you can customize particular site blocks, such as the Button, List, Image, and others. You may also utilize the highly functional drag and drop view to reorder things on the website. Click the List View button, and drag any element up or down to change its position.
Customize Templates and Template Parts
In the new Full Site Editor, you can create, edit, and preview templates as well as template parts. A typical WordPress page may consist of a single template or multiple template parts combined together.
Let’s start with Templates. For example, you wish to modify one of the global templates, such as a single Post, 404 page, etc. To do so, click on the WordPress logo in the top left corner of the screen. Now go to templates. This is where you will find all the templates for your site. Feel free to select a template and edit it as you may.
Just beneath the templates, you will find template parts. Here you can create new template parts and modify existing ones as you prefer.
3. Export theme: The Dream of Exporting WordPress Block Themes from the Site Editor Is Close to Reality
Once you play around and choose your preferred settings, you can export the theme from the Full Site Editor.
To do so, click on the three dots at the top right corner and click on the Export option. Afterward, your Full Site Editing theme will be downloaded as a zip file.
The generated ZIP file will have your theme with all of the customized components, such as templates and styles. This zip file is ready for use. You can now upload it to the WordPress theme directory or just upload the zip file to manually install the theme on your site.
Conclusion
All in all, Full Site Editing is a massive step toward democratizing web design. Themes are the soul of a site. As such, they define the look and feel of a WordPress website which is a crucial part of the user experience.
In this article, we saw the process of creating a Full Site Editing theme in detail. We started off with the concept of Full Site Editing and its implications in web design. Afterward, we learned about the different components of a Full Site Editing theme and their roles. Later, we saw how you can simply have your own well-crafted theme using WordPress editor.
Although the WordPress Full Site Editor is still in the beta phase, it has plenty of options to customize your website as per the drawing in your mind. WordPress is still working on the FSE, and once it’s up to its full potential, it may give rise to the next generation of content creators that the modern world needs.
Have you ever thought of creating a WordPress Full Site Editing theme? How would you rate your experience with the new Full Site Editor? Let us know of your experience in the comments below.
