My Account

My Account

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.

Activate Full Site Editing

After activation, you will find the Editor in its beta version. Click on it to access the updated Full Site Editing included in WordPress.

Access the new Full Site Editor

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.

Finding Full Site Editing themes

Check out these popular block themes. It may help you select the suitable Full Site Editing theme.

1. Twenty Twenty-Two

Twenty Twenty-Two block theme

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 Full Site Editing Theme

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

AINO block theme for WordPress

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 block theme

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.

Accessing the Full Site Editor

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.

Gutenberg blocks

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:

  1. Static
  2. 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.

Activate a Full Site Editing 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 theme using Full Site Editing

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.

Customizing the header and footer

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.

Customizing theme layout and styling

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.

Modifying the page layout with Full Site Editor

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.

Access WordPress template editor

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.

Customize block templates

Just beneath the templates, you will find template parts. Here you can create new template parts and modify existing ones as you prefer.

Customize block template parts

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.

Exporting your newly created Full Site Editing theme

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.

The History of Gutenberg

You may be hearing all about the new and improved…

What is Gutenberg page builder?

The Gutenberg Page Builder, aka WordPress Block Editor, is the…

Related posts

Wowmall Blocks < Beta > release is coming!

Subscribe to our beta teters program and get a free premium license!

Our beta testers programs allows you to receive the latest Wowmall Blocks releases. Beta versions includes the latest experimental features before they arraive to the market.