Please note: I’m just one of many folks who worked on this block. I only played a very small part! The purpose of this post is to help me remember how I contributed to the block in order that I can continue a process of learning and improvement. Work on the Navigation block is part of a group effort to improve Gutenberg for the community.
Over the past few months, the team I work in at Automattic were allocated to spend some time improving the experimental Navigation block in Gutenberg Core.
This was the top priorities on the WordPress roadmap for 2019-20 and so it was great to be afforded the opportunity to work on such an important piece of the WordPress ecosystem.
What does the Navigation Block do?
Users have always been able to create Menus from within WordPress, but the advent of the Navigation block enables users to create a navigation menu from within the Block Editor.
Whilst not particularly useful as part of Post content, once Full Site Editing comes online this Block will be crucial in allowing users to craft global website navigation.
The block has now been demoed several times at major WordPress events including WordCamp EU 2019 and the recent WPBlockTalk (April 2020).
What did I help with?
Here are some of the things I was able to help out with:
#1. Link UI Interface
I was involved in the development of the new Link creation interface. This was important in allowing Core to realise the Design/UX requirements of the Navigation Block which – of course – required the creation of lots of links from within the editor.
#2. Showing recent Pages when creating new links
I helped to implement the functionality to show a list of recently created Pages from within the hyperlink UI when creating new navigation link items.
This allowed users to immediately select from a list of recent Pages without having to search for them.
#3. Ability to create Pages from within the Block
I contributed to the ability to create pages on the fly from within the hyperlink creation UI.
This was applied to the Navigation Block as it simplifies the process of building out a menu without the need to access the separate WordPress Pages screen.
I would never have got this over the line without help from @aduth.
#4. Placeholder & ability to create from existing top level Pages
I worked on a block placeholder and the ability to auto-generate Navigation Link items from existing Pages on your site.
This is useful shortcut, as many navigation menus simply reflect the top-level Pages on the website.
#5. Justification Controls
I helped add the ability to justify the links within a Navigation block to either the left, center or right hand side of the block. This is useful to ensure that a Navigation can occupy the full width of a page but still have its individual links justified to a particular position.
#6. Reducing interface via capturing of Navigation Link item toolbars
I wrote the functionality to allow the toolbars of child blocks to be “captured” by their parent (or rather the nearest ancestor with the __experimentalCaptureToolbars property set!).
This was subsequently applied to the Navigation Block as a means of reducing the interface when clicking in a navigation link item.
It’s not the end!
I’m pleased to have been able to contribute in a small way to this important block!
But it’s not the end of the story. I’m still working with the community on the block and I hope to soon be able to contribute the ability to create Navigation block from existing WP Menus (watch this space!).
A big thanks goes out to the Gutenberg Core team, my team mates at Automattic, and members of the WordPress community who helped me hugely with all the work above.