Navigation blocks have taken a difficult and unpredictable road to where they are today. It’s not completely polished yet, but it’s roughly ready for website design and development.
As WordPress continued to evolve into an all-block design system (aka Gutenberg), one of the trickier elements was the navigation block.
It’s tricky for the good developers who came up with the system, and it’s tricky for anyone learning to use it to build sites out of blocks alone.
Think about what was involved in converting the old menu building system into a navigation block. The method WordPress used for his 18 years was comprehensive and had a drag-and-drop interface that people were familiar with.
On one page you’ll find everything you need to create, edit, manage and delete menu items and menus themselves.
Asking site creators to adapt to a completely different way of creating navigation menus was almost overkill. In particular, this block has been repeated many times over the past two years.
Things have calmed down to the point that there is plenty of development time behind the navigation blocks that we use as part of our workflow.
Where can I use navigation blocks?
anywhere. In other words, you don’t need to use the block theme to access the navigation block.You can add it to any page or post content area, but it’s not the smartest way to use this most unique page element
Navigation blocks are best used with block themes that use the site editor to set headers and footers.
How navigation blocks work
A navigation block is very similar to a group block in that it is a container that holds other blocks, most notably a page link block, which is a single link (menu item).
But you can do more than that.
The navigation block makes it easy to use other blocks in the Gutenberg system. For example, adding a search block or a site logo inside a navigation block is not only practical, but easy.
Let’s see how to use the navigation block. This demo used the latest version of the Gutenberg plugin (15.0) and the TwentyTwentyThree theme.
What you see will very likely make it into WordPress 6.2, which ships on March 28, 2023.
Main component
You may have seen some icons representing unfamiliar blocks. please.
I also had these icons which were link builders
Some special things to note
Use list view
There is currently no way to drag and drop links within the navigation block. Take advantage of the List View feature as shown in the video. An ideal way to reorganize or remove links.
block interval
Within the navigation block settings (right sidebar),[ブロックの間隔]You can use the slider to set the distance between each link equally. However, there is currently no way (other than using CSS) to set the padding, border and margin properties inside and around the nav block itself.
what about mobile?
As shown in the video, the option to show or not the mobile hamburger icon is found within the navigation block settings (right sidebar). There is currently no code-free way to customize a Navigation Block’s breakpoints.
page list block
Note that it is easy to confuse this block with the Page Link block.
The Pages list block is a list of all pages published for your site. Note that the link itself cannot be edited or moved in this screenshot. This block has very limited use inside and outside the navigation block itself.
When you first start the navigation block, you may notice that the page list block is used.If so, it is shown here[編集]Select an option.
A module appears and prompts you to convert page list links to page links. This is necessary for maximum flexibility as you proceed to create your navigation menu.
summary
It takes a few tweaks to create a completely different way of navigating your site, but it’s worth the effort, especially if you use a block theme that allows you to use navigation blocks within the header template part.
You can now do everything in the navigation block system as you can in the traditional way of creating menus. With a few more enhancements in the works, we can expect the Navigation Block to become a fully featured, ready-to-use sub-design system.