Exploring Gutenberg Navigation Block

Note: This post of leaning efforts to understand and use full site editing (FSE) and block-based themes. This learning post is still in active development and updated regularly.

I have been testing experimental block themes on and off for a while. While user experiences for the block themes structure and its documentation is gradually improving, one of my most frustrating experiences has been its experimental Navigation block.

Initially, I could not even set up a top menu navigation for some time, however after watching some amateur YouTube videos and from other tutorials I am slightly getting better. I have also been following up sparingly Navigation (sausage making) at GitHub ticket discussions.

In this learning note-post, I am documenting what I know, what I still needs to follow and some useful resource links to keep my eye on to fully understand the Navigation block work in progress.

A Brief Overview of Navigation Block

The full site editing (FSE) Navigation Block is in the making since 2019. According to this WordPress Core post, Navigation block was a priority project for 2019 and was planned for the WordPress 5.4 release but has been punted for several releases there after.

After more than two years in development, the navigation block puzzle remains still work-in-progress project, though its first iteration is expected to be included in the forthcoming WordPress 5.9 release.

In WP Tavern, Justin Tadlock has been keeping tracks of new Gutenberg releases as well as FSE features for a while. In a recent WP Tavern, Justin Tadlock writes that it’s one of toughest naught to crack for the Gutenberg team.

The Navigation block will be one of the toughest nuts to crack before site editing is a possibility. Enhancements like this help, but it is a long and winding road to a solution that satisfies both theme authors and users. Justin Tadlock, WP Tavern

In a preliminary road map for WordPress 5.9 release, Gutenberg Project lead engineer Matias Ventura wrote “the navigation block and navigation screen projects have been underway for quite some time and are a main target for 5.9“.

It appears that with the 5.9 release, only Navigation block is expected to be included and Navigation editor is panned for future release and “contributors are taking their time deliberating the architectural approach that will define menus in WordPress for the foreseeable future“.

Familiarizing with Navigation Block

In classic themes, we are used to adding site menu either through Appearance > Customize or Appearance > Menus windows then selecting menu locations.

In block themes, menu is available through Navigation Block available via Block editor. The Navigation Block is “an alternative to the more commonly used WordPress menu options. Just like in the default TT1 Blocks theme, the Navigation Block adds empty placeholder state for primary navigation.

This Blocks >> Navigation Block documentation from WordPress.com describes how menu is added with easy to follow screenshots. The following is a very brief step-by-step  how Navigation to add navigation block:

  • Click on the + block inserter icon to open the block library and select the Navigation block. Two choices are available – horizontal or vertical navigation.
  • After inserting a Navigation block, inks can be added to it in one of three ways:
    • Create from an existing menu: Displaying an already existing menu of the site.
    • Create empty: This creates a blank menu to manually add each link you want to show in the navigation.
    • Create from all top-level pages: This will automatically add every existing top-level page of the site as a link, which can be later edit and rearrange.
  • To add a new link to the navigation, click on the + icon which will allow you to choose from:
    • Page Link: a page on your site.
    • Post Link: a post on your site.
    • Category Link: all posts with a specific category.
    • Tag Link: all posts with a specific tag.
    • Link: an external URL.
    • Social Icons: icons for social networks.
    • Search: a search box for visitors to search your content
  • Navigation Block Toolbar: When clicked on the Navigation block block toolbar is displayed (see below)
    Navigation Tool bar (source: WordPress.com)
    • The icons on the Navigation block toolbar, starting from the left, are:
      • Change block style
      • Change alignment to wide width or full width (if supported by the theme)
      • Justify items to be aligned to the left, center, or right side
      • Open the block navigator to allow you to select and edit individual links
  • If we click on an individual item in the navigation, a different set of options in the toolbar are displayed. The icons on the navigation items toolbar (starting from the left) – Move items left or right, edit link, add a submenu, Bold, italics, and other text formatting options.

    Navigation items toolbar (source: WordPress.com)
  • Creating Submenu. A submenus (or dropdown menus) can be created by following these steps (see below)
    • Click on the item under which you want your submenu items to appear.
    • Click on the Add Submenu option in the toolbar that pops up.
    • Search for the page you want to add, or type/paste a URL.
    • Press Enter.

      Image showing (source: WordPres.com)

Because the Navigation block development iteration is still work-in-progress and its complexity are discussed in the following Navigation hangout.

Navigation Block Hangout

Recently there was Navigation Editor and Block hallway hangout to discuss the complexity of Navigation editor block, where project lead Matias Ventura took part and full recording of the hallway hangout is below here.

Summary of the above Navigation hallway hangout is available here.

Gutenberg v11.7 includes Lighter Navigation experience

The newly released v11.7 plugin that is included in the WordPress 5.9 scheduled for release by the end of year 2021. The reported lighter navigation experience with a more intuitive navigation which includes “clicking the + icon allows users to directly search for or type a URL. There is no need to figure out which block (e.g., Page, Post, Custom, etc.) to insert first”.

More detailed user experience is described in this recent Justin Tadlock’s WP Tavern article.

Use Case Example

In the following sections, I am using WordPress experimental TT1 blocks theme to learning to create a navigation with a submenu and documenting every step for my future reference.

Step 1: On left column select site title block and in the right column SELECT Navigation block.

Screenshot showing list view panel (left) and editor panel (right)

Step 2: The navigation block in the editor offers three choices – to add existing menu, add all pages or start empty.

For this demo example, we will select add all pages which will populate all our pages from the site, which unfortunately can’t be edited at the moment, because it’s a single Page List block (left panel below)

Hint: if there are few pages, we can select all pages, otherwise start empty and add pages.

Step 3: To make it editable, select the navigation block – which will prompt a edit button below.

Click Edit button to make the block editable (left panel), which will display yet another Convert to Link sub-window and select Convert (right panel) which will convert Page List block to individual Page block.

Step 4: The individual Page blocks of the navigation items are editable and moved around.

Screenshot showing lists of pages under navigation (left panel) and page display view in the navigation.

Now the pages could be moved left/right in navigation block or up/down in its list view similar to menu in classic editor.

Creating Sub Menu

Submenu can be created by either from the navigation or from the navigation list view. In this example, I would like to a add submenu under About menu item where I would like to place Sample page and Portfolio page as submenu of About.

Step 1: First to create a submenu, click on the parent menu item (i.e. About) and then Select submenu icon which add a + sign under the selected menu item.

Step 2: Click + sign and search for page link block and select appropriate page (eg. Portfolio).

As shown above in the screenshot, a submenu is created under About (left panel), which is also reflected in list view (left panel). Then either we similarly add other submenu items  or alternatively arranged in navigation list view by dragging page blocks up and down just like we used to do in classic editor.

Step 3: Menu items can also re-arrange menu items left or right either the block editor or they could be dragged up and down in the list view panel.

We can further edit the menu items as preferred. Any unwanted menu items can be deleted just like deleting blocks, because when menu items are editable, they behave just like an individual block.

Step 4: For Home menu, we can either add Home Link block (see below) which links to to the currently set home page under settings. or we could edit the currently assigned page “create your website page with blocks” page as as Home, which also works as expected.

Screenshot showing ..

First click on the parent page and the click submenu icon which will provide + to add submenu items. Click + and select page link block and search for sub-page to be added as submenu item.

Once arranged, the navigation could also be saved as template parts. If opted so, click on the navigation block which will prompt option to make a template part by clicking three dots (screenshot). Give it a name, and choose where it should be used – headers or footers.

Saving the Menu as Template Part

One of the advantages of saving the navigation block as template part is it can also be be use inn other layouts a great time saver.

Step 1: Click on the navigation block and click on three eclipses which displays Create temperate-part window.

Step 2: To create a template-part, give it a name my custom nav and under Area > select Header area and Click Create to create my custom nav template part.

Step 3: This should be useful to add navigation template parts handy while using header template parts. Click to Save button (top left) to save the newly created my custom nav navigation template part.

Step 4: Now if you view under Appearance > Template Parts, my custom nav header is saved (see below) together with header blocks under TT1 Blocks theme.

This could be edited just like any other blocks.

Step 5: View Navigation block

Screenshot showing final header block.

The newly created Navigation block along with the header is shown above, which can be updated as desired similar to any other blocks.

Navigation Block Editor is Still Evolving

Both the Navigation block and Navigation Editor were projected to be released with WordPress 5.9, however it is punted to future release.

The Nav Editor will not be included in WordPress 5.9 because changes to the block are required for the editor to be a success. We need to allow sufficient time to test the editor before any major release and allow for community feedback. Dave Smith, Automattic engineer and core contributor

Navigation Block vs Navigation Editor

Often we get confused between navigation block and navigation editor. Navigation blocks to the above experience that was described earlier.

Navigation editor, on other hand, refers to the editor screen (see below) as discussed here in this GitHub PR where Gutenberg development team member Joen A. jasmussen discusses Navigation editor in the dashboard.

Screenshot showing Navigation block editor in admin dashboard (source: GitHub ticket #35746)

For keeping eye on its further development, here are links to two GitHub tickets: (i) WordPress/gutenberg#35746 and  (ii) WordPress/gutenberg#35947.

Word on Navigation Editor is continuing even after WordPress 5.9. We will still have to wait for a fully matured Navigation block and Navigation editor user experience.

Update: Since this learning-note post was written there has been recent updates on the Navigation block has been updated significantly which will be addressed in the next post – Revisiting and Using Navigation Block

Wrapping Up

In this learning-note post, familiarizing to creating navigation in a block theme or a WordPress site was explored. Because the Navigation block and its editor development are ongoing work-in-progress for a while, we still have to have a fully matured navigation user experience.

NEXT: Revisiting and Using Navigation Block

Resources and Credits

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.