WordPress

What is Full Site Editing in WordPress and how to learn it?

Full Site Editing, also known as FSE is a new WordPress feature. It is still under development. With FSE, you can make the entire site using blocks. You can also use the blocks outside the content. You can build everything on the site using blocks if FSE is used.

Blocks are the content elements that help you to create content in your page or post. In short, each item that you add to your page or post is block.

Credit: fullsiteediting.com

For instance, you can add the block for paragraph, image, video, gallery, audio, etc. These are the default blocks and you can get them in the WordPress core. More blocks can be added by plugins.

In the case of FSE, you can build a site using the new site editor and export the changes to make the new WordPress theme.

To learn more about full site editing and steps to get started with FSE, I would like to recommend to visit fullsiteediting.com. This site is maintained by Carolina Nymark, she is one of the team representatives of the WordPress themes team.

From WordPress 5.6, you will get the first-ever full site editing theme named Twenty Twenty-One. This theme is under development and you can also contribute to the development and testing.

If you want to learn FSE, you need to know some basic functions of WordPress, PHP, HTML, and CSS. Learning FSE is not tough if you are passionate about learning new things.

How to get started with Full Site Editing?

As I said above Full Site Editing is still experimental. Thus, you need to install the latest version of the Gutenberg plugin with full site editing enabled. Otherwise, you can’t use the full site editing features.

Some of the available blocks for full site editing are:

  • Site Title Block
  • Tagline Block
  • Logo Block
  • Post Title
  • Author Block
  • Date, etc.

You can check more FSE blocks here.

An example of post author block

Post author block is one of the blocks that have extra settings. You can select the author from the dropdown option. Moreover, you can show or hide the author’s avatar and select it.  Besides that, you have options for author biography too. You can change text and background color, its position with the settings of blocks.

Full Site Editing Author Block
Settings of Author Block

How to add FSE to the existing theme?

Do you want to learn FSE and want to put in place it in your existing theme? I am going to give you some basic ideas about it.

At first, you need to make two folders that are required for FSE, they are block-templates and block-template-parts.

Block Template Parts and Block Templates Folder for FSE

Next, inside the block-templates folder, create a blank index.html file. And inside block-template-parts, create header.html and footer.html files.

After that, open the index.html file in your favorite editor and paste the below code and save it. Check here to understand more about each code.

You can also make the single.html file and put under the block-templates folder and put the same code there.

Now, make header.html and footer.html files inside the block-template-parts folder and paste the below code there.

A full code for index.html:

<!-- wp:template-part {"slug":"header","theme":"theme-slug"} /-->

<!-- wp:query -->
<!-- wp:query-loop -->

<!-- wp:group -->
<div class="wp-block-group">
	<div class="wp-block-group__inner-container">
		<!-- wp:post-title /-->

		<!-- wp:columns -->
		<div class="wp-block-columns">
			<!-- wp:column -->
			<div class="wp-block-column">
		<!-- wp:post-author {"byline":"By"} /-->
			</div>
			<!-- /wp:column -->

			<!-- wp:column -->
			<div class="wp-block-column">
				<!-- wp:post-date /-->
			</div>
			<!-- /wp:column -->

			<!-- wp:column -->
			<div class="wp-block-column">
			<!-- wp:post-comments-count /-->
			</div>
			<!-- /wp:column -->
		</div>
		<!-- /wp:columns -->

	</div>
</div>
<!-- /wp:group -->

<!-- wp:post-content /-->

<!-- wp:group -->
<div class="wp-block-group">
	<div class="wp-block-group__inner-container">
              <!-- wp:post-tags /-->
        </div>
</div>
<!-- /wp:group -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide" />
<!-- /wp:separator -->

<!-- /wp:query-loop -->
<!-- wp:query-pagination /-->
<!-- /wp:query -->

<!-- wp:template-part {"slug":"footer","theme":"theme-slug"} /-->

The code snippet for header.html:

<!-- wp:columns {"align":"full","style":{"color":{"background":"#ffffff"}}} -->
<div class="wp-block-columns alignfull has-background" style="background-color:#ffffff">
	<!-- wp:column -->
	<div class="wp-block-column">
	</div>
	<!-- /wp:column -->

	<!-- wp:column -->
	<div class="wp-block-column">
		
	</div>
	<!-- /wp:column -->

	<!-- wp:column -->
	<div class="wp-block-column">
		
	</div>
	<!-- /wp:column -->
</div>
<!-- /wp:columns -->

The code snippet for footer.html:

<!-- wp:group {"align":"full","style":{"color":{"background":"#ffffff"}}} -->
<div class="wp-block-group alignfull" style="background-color:#ffffff">
	<div class="wp-block-group__inner-container">
		<!-- wp:columns -->
		<div class="wp-block-columns">
			<!-- wp:column -->
			<div class="wp-block-column">
				<!-- wp:latest-posts /-->
			</div>
			<!-- /wp:column -->

			<!-- wp:column -->
			<div class="wp-block-column">
				<!-- wp:latest-comments /-->
				<!-- wp:categories /-->
			</div>
			<!-- /wp:column -->
		</div>
		<!-- /wp:columns -->

	<!-- wp:separator {"className":"is-style-wide"} -->
	<hr class="wp-block-separator is-style-wide" />
	<!-- /wp:separator -->

		<!-- wp:columns -->
		<div class="wp-block-columns">
			<!-- wp:column -->
			<div class="wp-block-column">
			<!-- wp:paragraph -->
			<p>© 2020 
<a href="https://example.com/">Theme Preview</a></p>
			<!-- /wp:paragraph -->
			</div>
			<!-- /wp:column -->

			<!-- wp:column -->
			<div class="wp-block-column">
				<!-- wp:paragraph -->
			<p><a href="#">To the Top</a></p>
				<!-- /wp:paragraph -->
			</div>
			<!-- /wp:column -->
		</div>
		<!-- /wp:columns -->
	</div>
</div>
<!-- /wp:group -->

Now, you can preview the theme and you can see how FSE will work.

FSE Theme

Ari Stathopoulos, one of the reps of the WordPress theme team, developed and submitted a complete FSE theme named Q. You can download that theme for free and learn FSE.

Q

Conclusion

Full site editing is an experimental feature in WordPress. So, it might not work properly and you may get errors and warnings too. You can join the #themereview channel on the slack of WordPress and ask the query anytime.

You can contribute to the Twenty Twenty-One WordPress theme to learn more about FSE.

Don’t hesitate to comment below if you have any questions about the full site editing. I will try my best to get back to you.

Follow me on Twitter.

Code Credit: fullsiteediting.com

Leave a Reply

Your email address will not be published. Required fields are marked *