Full Site Editing Edit

At the highest level, the vision of 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.

There are other projects, like the Navigation Editor and Widget Editor, that are meant to specifically help classic themes begin adapting more to the block framework and to act as a stepping stone of sorts to Full Site Editing. These are separate projects from Full Site Editing though but are worth being aware of as they ultimately help the cause of getting more people adjusted to using blocks in more places.

Jump in:

The best way to learn something is start playing with it. So jump in by installing the Gutenberg plugin from the plugins directory and activating a block theme on a test site. We recommend the TT1 Blocks theme, it is listed in the theme diretory and our development reference theme. You can find other themes in the directory using the full-site-editing feature tag.

Get Involved

An ongoing FSE Outreach program is in place with calls for testing and is a great way to get involved and learn about the new features.

Top ↑

Block Themes

If you are using the Gutenberg plugin you can run, test, and develop block themes. Block themes are themes built using templates composed using blocks. See block theme overview for additional details.

  • See the Create a Block Theme tutorial for a walk-through of the pieces of a block theme.

  • For examples, see the WordPress/theme-experiments repository with several block themes there including the source for the above mentioned TT1 Blocks.

  • Use the empty-theme.php script from theme-experiments repo to generate a starter block theme, it will prompt you with a few questions and create a theme.

❯ git clone https://github.com/WordPress/theme-experiments
❯ cd theme-experiments
❯ php new-empty-theme.php
Please provide the following information:
Theme name: TestTheme
Description: A theme to test
Author: Marcus Kazmierczak
Theme URI: https://github.com/mkaz

Your new theme is ready!

You can then copy the generated directory to your wp-content/themes directory and start playing with the Site Editor to build and extend the theme.

Top ↑

Template and Template Parts

See the architecture document on templates for an explanation on the internals of how templates and templates parts are rendered in the frontend and edited in the backend.

Top ↑

theme.json

Instead of the proliferation of theme support flags or alternative methods, a new theme.json file is being used to define theme settings.

See documentation for theme.json.