If you’ve been following along on Twitter (when it’s working these days 🤷‍♂️), then you know the challenge I’ve had getting the core navigation block to work for our needs while creating our new block theme for pewresearch.org. Luckily, this is why Gutenberg is great: if what’s in core isn’t working for you, make your own! So that’s what we’re going to do. There have been a lot of requests for a tutorial on how to create a menu block so I thought I’d make the effort and put together something more than a few tweets with videos attached.
First of all, it’s important to understand that when you’re creating a menu block, or any complex interaction, you’re not creating just one block, but rather a set of blocks.
- The Menu block will mostly consist of style and color controls. It will use inner blocks to display the next block.
- The Menu Item block is the most important of the blocks. It will be complex, with different types such as taxonomy term or page. It will have sub-menus and its own inner blocks. Lastly, it will consume context in the form of color and style options from the menu block so that all menu item elements can be styled at once, rather than individually.
By the end of this tutorial, you will understand some core concepts:
- How to create blocks that communicate with one another using block context.
- How to generate your own color controls instead of using traditional background, text color, or link color controls found in block supports.
- How to generate CSS styles for these new color controls, programmatically based on your currently active block theme’s
theme.jsoncolor palette. - How to use some of the built-in keyboard event handlers found in Gutenberg. For example, how to generate a new block when pressing “Enter” at the end of a RichText field.
Sign up to receive an alert when this new tutorial goes live. The launch is expected to take place in mid-April.
Leave a Reply