Full Site Editor (FSE): Customizing Header, Footer Blocks

Note: This post is part 1 of leaning efforts to get familiarize and practice using full site editing (FSE) interface to customize block themes. This learning post is still in active development and updated regularly.

WordPress full site editor (FSE) features are slowly being integrated into the core in the WordPress 5.9 release. Experimental block themes are in development for almost two-years and experimental block themes from community are available for evaluation purposes. At the time of writing, there are 21 block themes on WordPress theme directory with FSE tag.

Until recently, I was familiarizing myself with block themes and customizing block theme templates using an VS Code editor. Though that approach is good for basic understanding of the block theme structures, however this defeats the purpose of FSE, because block themes are designed to edit templates within the FSE. WordPress 5.9 slated to be released in December expected to include block navigation, block themes and template editing features with FSE and others.

Now it’s time get familiarize with FSE features to edit block templates, template parts and other features.

A Brief Overview of full site editing (FSE)

The block editor handbook documentation describes full site editing  as “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. This includes everything from the Site Editor, Global Styles, numerous Site/Post/Page specific blocks, Query block, Navigation block, Templates, and block themes.”

A brief description of FSE features from the editor handbook documentation in verbatim below:

  • 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.
  • 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.

The objective of this learning post series is to get hands-on familiarity with the above FSE features and start using to customize a complete site using block-based theme like Tove by Anders Noren and Twenty Twenty-two default theme.

Learning Goals
Part 1: Customizing Header and Footer Blocks (this post)
Part 2: Understanding Query blocks
Part 3: Customizing Index page and Single Post pages

While working on a new site, I usually start working with my header section with top menu, footer section and then I proceed to post and pages, which I plan in this learning-note series too. As outlined in my above learning goals, in this first-part of the series, I will to customize headers section with Navigation block or patterns and footer section with standard footer block or patterns.

Theme Assets and Resources

For this learning project demo site, I will be using experimental TT1 Blocks and Twenty Twenty-Two default themes. Because the Twenty Twenty-Two theme is being developed with little or no custom CSS but with Gutenberg support only, this would be an ideal theme to work with FSE. To give a slightly different look, I added two extra fonts Public Sans and DM sans.

Resources

After some digging I found the following resources helpful to prepare for this learning project:

Header section and Navigation Block

1. Familiarizing with Header Template

First let’s familiarize with the theme’s header template using experimental TT1 Blocks theme.

  • Go to Site editor in admin dashboard
  • Click on W on top left which will list the Theme – template parts …
  • Click on Template > Template parts where header and Footers templates are located
  • Click on Headers folder which lists Header template. Its the default header layout, with Site Title and Site Tagline blocks on the left and a blank place holder Navigation block on the right (see screenshot below).
Screenshot showing header block layout structure (left panel) and header block as seen in Block editor (right panel)
  • To have a look of Header template structure, Click list view on the top left, which shows that its all build with blocks (right panel)
  • It has two columns – one on right hand side with Site Title and Site Tagline blocks and on the left column Navigation block.
2. Custom Header and Navigation Template Parts

In the previous post, how to add Navigation menu in the header section, creating a custom navigation and saving navigation block as template parts are discussed in detail.

Briefly revisiting the creating header template (header section) from scratch from previous previous post, DELETE the current header template.

Following the default header structure, lets select columns block with 30/70 layout (see below). On left column we will add Site Title block, and on the right column we will add Navigation block.

Screenshot showing column blocks of header section (left panel) and blank header area in the site editor (right).

Step 1: While the left column block selected, click at the + icon and select Site Title block and Click to add site title to our header.

Step 2: Similarly, while the right column selected, click at the + icon from the inserter (top left) and search template parts. The Template Part window offers two choices – choose existing and new template part. Select Choose Existing which lists our pre-existing my custom nav template part (see below) created and saved in previous post.

Step 3: Select and Click our pre-existing my custom nav template parts to add to our navigation on the right side (see below).

As discussed in the previous post, creating and saving navigation as template parts is very handy and great time saver too.

Step 4: Save the file and view the site header and navigation (below)

In the next section, we will learn to add pre-existing headers and footers pattern in our site’s header and footer section.

Working With Headers and Footer Patterns

Block themes like Tove, Aino, Twenty Twenty-two and other block themes are shipped with bundle patterns including headers, footers, query blocks and others. Additionally, patterns are available from the WordPress pattern directory as well. These patterns are fully editable and great time saver.

3.1. Adding Header Patterns

In the previous section, we discussed creating a custom header and adding pre-existing navigation template part. Adding patterns is almost similar and great time saver too.

Step 1. From admin dashboard, select Site editor and click on W on top left which will list the Theme – Template Parts. Go to Template-parts > Headers and select Header block (see below).

The above header section, list view (left panel) and Site Title and Navigation Page List block (right panel) is the theme’s default.  To add theme’s bundled header pattern, we should delete the default header.

Step 2. DELETE the entire current default Header block and now the header block is completely blank (see below).

Screenshot showing ..

Step 3: Select the empty block and Click on the + inserter sign (top left) and select pattern > Twenty Twenty-Two Headers which displays header patterns (see below).

Twenty Twenty-Two theme comes with 16 headers pattern to choose from.

Step 3: Select any header pattern of your choice. For this example, I choose a simple Header with Tagline pattern. Click to insert the selected header pattern on our header template part and now it is added to the editor (see below).

As explained previously, the header pattern has also two columns – one on right hand side with Site Logo, Site Title and Site Tagline blocks and on the left column Navigation block. The entire header block pattern is completely editable.

Step 4: In the example here, I added site logo. The Navigation block (right) currently displays all pages which I edited and saved as My Custom Nav template-parts as described previously (see below). Save the changes.

Step 5: The Headers and My Custom Nav template parts are saved in site’s Template Parts as temporary files, which can be viewed from Dashboard > Appearance (see below).

Screenshot showing saved temporary Header and My Custom Nav template  files.

Step 6. Now the header appears in the site’s font end as expected.

The changes made in the Header block can be edited and are temporary. Once these files are deleted, default header block as seen in Step 1 will be restored from the theme.

3.2. Adding Footer Pattern

Lets style footer block as well just like we did header block.

Step 1: From admin Dashboard go to select Site Editor and click W at top left, click < Back at the top. Select Template Parts > General > footer block, which displays default footer block on the editor

Step 2: Select the footer block and DELETE it and now its completely blank page with only paragraph block.

Step 3: While paragraph block selected, click + inserter icon at top left then select patterns > Twenty Twenty-Two Footers which displays 12 patterns to choose from including the default block pattern . For this demo post I decided to select Dark footer with title and citation pattern. Click the selected pattern which is inserted in the editor screen.

Just like the Header pattern, the footer pattern block pattern is editable. I changed background color to #ffefdf and text color to Primary and Link color to Foreground.

Step 4: Now click Save the changes. Now if you look at the sites Appearance > Template Parts our customized footer block pattern is saved.

Step 5: If we look at the front end, the footer has some padding issue which is inherited from footer markup of theme’s template files.

Screenshot showing visible left and right padding in Twenty Twenty-two footer button with color.

Step 7: If you look at the front end, the footer has some padding issue which is inherited from footer markup of theme’s template files.

Screenshot showing

An example footer markup of Twenty Twenty-two theme from all template files (index, page, single, ..) shows the following padding.

<!-- wp:template-part {"slug":"footer","tagName":"footer","style":{"spacing":{"padding":{"right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}},"layout":{"inherit":true}} /-->

The padding could either be from editor or manually correcting from the theme’s template files.

Why Use Patterns?

There are many advantages of using patterns in a block based site. Despite being great time saver, one change the look of the site by simply changing few patterns, which was not possible in classic themes.

Wrapping Up

In this learning post, we learned how design header and footer section of a site either creating custom header, footer or just simply adding pre-exiting patterns bundled with the theme. Patterns can also be added directly from pattern directory. In this Twitter thread, Autommatic design director Kjell demonstrates how just swapping theme.json file could change the look of block based site.

NEXT: Understanding Query blocks

Useful Resources

The following is list of references link that I gathered during my brief research. While preparing this post, I have also referred some of the following references extensively. Please to refer original posts for more detailed information.