Creating a block for navigation menus is one of the nine projects Matt Mullenweg identified for 2019 that will make a big impact for WordPress users. It’s also one of the most challenging from a UI perspective. At WordCamp US’ contributor day, the design team explored ideas for what a navigation block might look like in the new editor.

My-Sketches-2018-12-09-11.31.51-2 WordPress Designers Explore Ideas for Moving Navigation to a Block Interface design tips

The team’s designs for a navigation block are still in the rough sketches stage, but it’s interesting to see different approaches as the project develops.

“If the Nav block could live in a container block (columns perhaps), then the settings for it could be tweaked in the sidebar,” XWP designer Joshua Wold said. “A further problem comes up when you try to figure out how much of the design of the nav should be controlled by the theme vs the Gutenberg editor.”

This is an important question  that will need to be answered in the near future – not only for navigation but also more broadly for the future of the role of themes in WordPress. We will be exploring this in more depth in future posts.

Designer Mel Choyce and Riad Benguella (one of the leads for Gutenberg phase 2), are currently soliciting ideas from the wider WordPress community about how the project should tackle the upcoming customization focus.

https://platform.twitter.com/widgets.js

One of the chief complaints about the first phase of the Gutenberg project was the lack of public discussion about the goals and the process of creating the editor. The Gutenberg team’s willingness to collate ideas across multiple mediums demonstrates a strong effort to seek out more diverse perspectives for phase 2. Ideas have already started rolling in.

https://platform.twitter.com/widgets.js

“Rather than starting with the back-end UI, we can start with the front-end result and build a UI to make the building of that front-end possible without messing up the accessibility and resilience of the root HTML document,” Morten Rand-Hendricksen said. “At the root of this would be CSS Grid as the main layout module to allow drag-and-drop style block layouts without making changes to the HTML source order.”

Many of the ideas that are coming in so far relate more broadly to site customization. These include questions about what role the Customizer will play and requests for features like creating custom widths on the fly and the ability to drag content across columns. If you have ideas about how navigation can be implemented in a block, take some time before the end of the year and drop your comments on the make/design post or write your own post and leave a link for others to share feedback.