How to Build your own WordPress Gutenberg Full Site Editor (FSE) Starter Theme in 10 minutes with no coding.

The Theme we build won’t have any in-built styles but it will have all the full site editing parts.

It’s a good demonstration of how blocks make up themes in a full site editing world.

This tutorial is based on a great article by Alfredo Navas which can be found here https://webdevstudios.com/2021/09/14/wordpress-fse-and-block-based-themes/

The CSS that I mention in the video can be found here https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/#basic-structure

Here are two great full site editing themes that you might want to try out
https://wordpress.org/themes/tove/
https://en-gb.wordpress.org/themes/clove/

👉 Sign up for my newsletter https://www.pootlepress.com/sign-up-to-my-newsletter/
👉 Contact me at: jamie@pootlepress.com
👉 My Free Gutenberg Tutorials https://www.pootlepress.com/wordpress-gutenberg-block-editor-guide/
👉 My Gutenberg WordPress plugins, including WooBuilder Blocks https://www.pootlepress.com/wordpress-plugins/ 🔥
👉 Test out Full Site Editing and our WooCommerce Gutenberg Plugins, pre-installed https://app.instawp.io/launch?t=woobuilder
👉 Join my WordPress club (and help support this channel) https://clubpootle.com/

Timeline
0:00 – Intro
0:28 – Step by Step Full Site Editing instructions
1:00 – The 8 steps to building a FSE Gutenberg Theme
1:30 – Step 1, Create a Gutenberg FSE Theme folder
1:47 – Step 2, Create a Style.css file
3:07 – Step 3, Create an empty functions.php file
3:48 – Step 4, Create an empty index.php file
4.24 – Step 5, Create 2 folders, block-templates, and block-template-parts
5:00 – Step 6, Create header.html file
5.42 – Step 7, Create index.html file
6:15 – Step 8, Create a zip file and upload
7:45 – Export your Gutenberg Theme
8:20 – What FSE means for building themes

What is full site editing?
Up to now, the Gutenberg Block Editor has been used for just posts and pages. Full site editing extends the use of Gutenberg to your entire WordPress website.

Here’s a good Full Site explanation from WordPress

Full Site Editing is to provide a collection of features that bring the familiar experience and extendability of blocks to all parts of your site rather than just post and pages. You can think of Full Site Editing as the umbrella project name for various sub-projects within Gutenberg that make this vision possible. Projects under Full Site Editing (FSE) include everything from the Site Editor, Global Styles, numerous Site/Post/Page specific blocks, Query block, Navigation block, Templates, and block themes. What follows are brief descriptions of the major pieces with more details found here:

Site Editor: the cohesive experience that allows you to directly edit and navigate between various templates, template parts, styling options, and more.
Template Editing: a scaled down direct editing experience allowing you to edit/change/create the template a post/page uses.
Block Theme: work to allow for a theme that’s built using templates composed using blocks that works with full site editing. More below.
Styling: the feature that enables styling modifications across three levels (local blocks, theme defaults, and global modifications).
Theme Blocks: new blocks that accomplish everything possible in traditional templates using template tags (ex: Post Author Block).
Browsing: the feature that unlocks the ability to navigate between various entities in the site editing experience including templates, pages, etc.
Navigation Block: a new block that allows you to edit a site’s navigation menu, both in terms of structure and design.
Query Block: a new block that replicates the classic WP_Query and allows for further customization with additional functionality.
Source : https://developer.wordpress.org/block-editor/handbook/full-site-editing/

source

14 Comments

  1. I'm on WordPress 6.1.1 and there is no "Site Editor" button/menu item. Is that now the "Editor" button under "Themes"? If I click it, I get a blank page, so maybe there is a problem with the zip file I uploaded. WordPress is woefully silent on errors that crash a site.

  2. Thanks for a great tutorial, very clear as always! This was a year ago, and now that FSE has rolled out, I assume that things are a bit different (I recently saw that creating a child theme now involves theme.json instead of function.php like in the past)? So, how would we we do this today?

  3. Gave this a go but the problem I had with this (and other 'starter' themes from the theme library) is that I couldn't figure out how to set the content width, e.g. header, footer as well as main content. Everything was full width. Should this be done with custom CSS? I want to move away from my reliance on Storefront in case it ends up going the same way as Canvas, but until I can figure out something as basic as setting content width that's not going to happen using a home-made FSE theme, sadly 🙁

  6. Great video, thanks! One thing…after I created my FSE theme and activated it I was able to change the site text color but when I update the site background color the change does not take affect. Any thoughts?

  8. I have version 5.8.1 installed but weirdly Site Editor is not showing up.

    I have found the issue. I thought I could use the in-built gutenberg editor. I have realized that I have to activate Gutenberg editor separately.

  9. What an absolute breath of fresh air, thank you 🙂 I've been in and out of using wordpress over the years but kept going back to my trusty xara web designer, basically because I'm not a coder and wordpress usually broke and I could not fix it without starting from scratch, very annoying. Gutenberg seems to be the answer and especially now you have shown this, as I'm pretty sure that wordpress failed on me due to problems with themes, not to mention the plugins. It would be great, and stable, to build a website in wordpress with gutenberg and no theme, well, except the simple diy one you show here, and that way I would be much happier to spend hours building without worrying about it breaking. Thanks so much, I'd better get playing 🙂

  10. Loving your videos Jamie. If I create a theme as you describe, export it and then send it to someone else to use as a starting point for their website would they need anything else to make it work for them, e.g. the FSE plugin (I'm assuming this is still needed to build the theme?), or will it all just work???

  12. Hey great job, you make valuable content. I would love to see how you would make a custom theme and build a custom website with blocks and some custom code. For example, it can be a booking appointment or similar, such sites have so far been heavily charged but will soon be more accessible to customers when full site editing takes off. Keep good work.

Leave A Reply

Please enter your comment!
Please enter your name here