Block-Based Themes - The Future Of Full Site Editing In

WordPress
Full Site Editing - The Future of Content Editing in WordPress

Full Site Editing - The Future Of Creating Content In WordPress

https://wptavern.com/state-of-the-word-2020-wordpress-
moves-toward-full-site-editing
https://richtabor.com/full-site-editing
http://localhost:8020/wp-admin/admin.php?page=gutenberg-edit-
site&postId=27&postType=wp_template

VIDEO of TT1
https://youtu.be/QI3qCoiuG3w?t=1289

Site Editor
The site editor allows editing block themes and all their template files. It allows the user

to swiftly navigate between the template hierarchy and make edits across an entire

site. To accomplish this, it introduces some new interface elements, areas to manage,

and the ability to browse the different templates a theme has to offer. Since the entire

template is built with blocks, it leverages all the preview tools that have been built for

blocks and patterns so far, allowing users to quickly visualize their contents.

Theme Experiments

What is Full Site Editing

Add blueprint for testing

https://make.wordpress.org/themes/2020/07/05/using-the-block-editor-for-theme-

parts/

https://make.wordpress.org/themes/2020/07/06/printing-navigation-block-html-

from-a-legacy-menu-in-themes/

What can be expected in WordPress 5.7

Nav menus and widgets, which are a part of the old paradigm, have been set to

relaunch under the block system for the past two major WordPress releases. They were

not ready. Users should expect to see them in WordPress 5.7.

Global Styles - experimental-theme.json

● From an implementation standpoint, global styles are nothing more than a JSON

file, currently named experimental-theme.json. But this single file replaces a lot of

code in different parts of a theme’s code base.

● Some of the settings in the global styles are added to the page as CSS variables.

By reusing these variables through the stylesheet, theme developers can ensure

a consistent experience. Not only for the default appearance of a theme, but

also when users choose things like custom colors or font sizes.

Benefits of Block Based Themes:

1. Right now developers spend their time switching between their code editor and
 their browser when developing a theme. With block based themes in FSE, you will

find most of the time being spent in the editor while developing.

2. https://wpdevelopment.courses/articles/full-site-editing-theme-learnings/

References:

1. FSE Testing program with TT1 theme - it has certain custom blocks as well like Site

Logo.

https://wptavern.com/what-is-full-site-editing-and-what-does-it-mean-for-the-future-

of-wordpress

2. Make theme blogs ( https://make.wordpress.org/themes/ )

3. Q themes ( https://wptavern.com/q-first-fse-wordpress-theme-now-live )

● You can not only edit posts but also the block template. With Full Site Editing, people
are able to edit both an individual post’s content and, with the release of Gutenberg 9.6, the

template that an individual post uses

● You can create a Site Logo block for adding dynamic content like a site logo. See

how tt1 theme has created that.

● the traditional admin screens — will disappear. The customizer, which was once

touted as the future of theme development, is also getting the ax.

● WordPress 5.7 and beyond will be about the site editor and block-based themes.

The site editor is the visual representation of block templates that theme

developers offer to users.

● Templates are infinitely customizable by the user from the WordPress admin.

● While themers will create custom configurations and set defaults, the power to

decide what the front end of the site will look like will ultimately reside in the

user’s hands.
● Switch between post editor and site editor. Because the post editor and the

site editor both work on the same, underlying block-based

foundation, there is no reason for users to not be able to seamlessly

switch between the two. There is currently a ticket for adding such a

toggle on the post-editing screen. It will allow users to switch to a

template-editing mode while never leaving the post editor.

● Why it took so long for FSE ? We were just getting our bearings in

Phase 1. The development team was building the foundation while

also launching the user-facing block editor. With that foundation in

place, the team can focus more on features.

● How can developers cope up with such big changes?

The big Phase 2 changes this year means that theme authors will

need to get up to speed. Traditional WordPress themes will still be

necessary for a while. However, any theme author who is not already

tinkering with block-based themes is already months behind. This is

the time to be exploring and helping to shape the system. It is time to

should be attending the twice-monthly block-based themes

meetings. If time does not allow for attendance, you should at least

be reading and participating on the Make Themes blog (

https://make.wordpress.org/themes/ ) . It is also important to check

out projects like the Q theme or follow the Theme Experiments

repository.
 ● How can developers help further?

To support this effort, outside of the template and template parts

infrastructure, there’s an obvious need for creating many new blocks

centered around theme functions. These include blocks for the site

title, navigation block, post title, content, excerpt, author, date,

featured image, and plenty more, a Search block, Social Icons, or a

Cart block from WooCommerce.

● Query Block

https://make.wordpress.org/core/2020/12/10/status-check-site-

editing-and-customization/

Steps to Develop Full Site Editing Themes:

Tutorial to Create Block Based Themes

● Download and activate https://wordpress.org/plugins/gutenberg/

● Recommended to use WordPress 5.3 or higher, PHP 7.3 or higher

● Enable the "Full Site Editing" experiment in the Gutenberg > Experiments panel.

Limitations of FSE:

● Because when you first create your theme in the site editor, you will save the

templates and template parts to the database. Then you export them as

HTML files, and add them to your theme. Once that is done you need to

delete all the existing full-site editing posts, so that the theme-provided

templates are used.

continue to make refinements to your templates, these changes are not

synchronized to the theme. You either need to re-export the templates each

time, or to copy the changes from the post content in the database.

● As powerful as global styles are as a feature, they’re currently also very

frustrating to deal with. Writing out JSON by hand in a file that quickly grows

to 200+ lines and different levels of indentation is not easy. Especially

because there is no validation, and small mistakes can break the entire file.

This, coupled with the lack of documentation, makes it hard to find out where

you made mistakes.