WordPress Designers Explore Ideas for Moving Navigation to a Block Interface

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.

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.

You care about WordPress and you don't have the time to contribute day to day, I'd love to hear your thoughts to get some inspiration about Phase 2 of Gutenberg, Site building, Customization… A tweet, a blog post, whatever works best for you. #gutenideas https://t.co/Y7tod5DoB2
— Riad Benguella (@riadbenguella) December 19, 2018

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.

Riffing on something @photomatt said at #SOTW #WCUS: To map out the future of themes / #Gutenberg 2.0 / #WordPress Next, maybe ship a Block Zen Garden type thing and asking designers / devs to create solutions, then work backwards to find a UI / UX to make that possible.
— Morten Rand-Hendriksen is elsewhere (@mor10) December 14, 2018

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