How to build a WordPress Gutenberg Full Site Editing Starter Theme in just 10 minutes with no coding

3 года назад

10,491 Просмотров

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: [email protected]
👉 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/

Тэги: