We’re thrilled to announce the release of two powerful new additions to GenerateBlocks Pro: the Navigation Block and the Site Header Block. These innovative blocks, included in GenerateBlocks Pro 2.2, are designed to give you even more flexibility and control when building fast, lightweight, and professional WordPress websites using the block editor.
Why These Blocks Are Important
As WordPress transitions to Full Site Editing (FSE), building responsive, accessible, intuitive, and fast-loading navigation and site headers is essential. No longer are headers and navigation relegated solely to the WordPress Customizer. Now, you can easily build headers and navigation with the same block-based methodology used to create any page. This not only simplifies the design process but also ensures compatibility with WordPress’s evolving ecosystem, giving you the freedom to craft modern, future-proof websites with ease.
Navigation Block
The Navigation Block empowers you to create dynamic and responsive navigation menus directly within the WordPress block editor. The block consists of a main Navigation Block and several child blocks. Each block provides extensive controls for styling and customization. With this block, you can:
- Build custom navigation menus with full control over layout, typography, and colors.
- Create full function drop-down navigation for sites with complex information architecture.
- Ensure responsiveness with specific settings for any viewport, from desktop, mobile, and tablet.
- Choose from numerous lightweight animation effects, including multiple sliding and fading effects.
- Leverage GenerateBlocks lightweight codebase for optimal performance.
For a deep dive into its features and setup, check out the Navigation Block documentation.
Site Header Block
The Site Header Block takes header customization to the next level, allowing you to craft unique, block-based headers that replace the default GeneratePress site header. Key features include:
- Complete design freedom using the block editor to add logos, menus, buttons, or dynamic content.
- Support for merging headers with page content for stunning hero sections.
- Precise control over editor width to visualize your design accurately.
- Compatibility with GenerateBlocks for dynamic data and advanced layouts.
Learn more about its capabilities in the Site Header Block documentation.
How to Get Started
Site Header Block
The Site Header Block can be used as an individual block on each page, as a reusable block, or it can be used within GeneratePress Elements. For a smaller site with just a few pages, a reusable block might be just what you need. For larger sites, make use of Elements for powerful display capabilities.
For a simple site, place the Site Header Block on the page. Choose if you’d like a Sticky Header in the settings, or leave the setting set to None.
For the Site Header Block, create a new Block Element in Appearance > Elements and create your site header as desired. Choose the display location in the Element settings.
Navigation Block
The Navigation Block can be used both within the Site Header Block or independently, such as in a site footer. Upon placement, it will retrieve the published pages within your WordPress site. You have the option also to retrieve the classic WordPress menu system, allowing you to customize the look and feel within the block editor.
Use the block editor to design your navigation or header, referring to the documentation for guidance.
If you’re using another block-based theme, you can still use the Navigation and Site Header blocks by using a Template Part block.
Test your setup and share your feedback with us, or in the Facebook community.
What’s Next?
Stay tuned for updates, and watch this space for tutorials to get the most out of these innovations.
We can’t wait to see the incredible headers and navigation menus you create with these new blocks! Dive in, explore, and let us know how we can make them even better.
Great work.
1. It needs a proper search module
2. Visibility controls for login user, etc., on pages and posts
3. Visibility controls for login user, etc. in the Menu
How do the new Navigation and Site Header Blocks compare in terms of performance and accessibility to existing solutions, such as the classic GeneratePress navigation built via the Customizer or standard block-based menus?
We put a lot of work into its accessibility and performance. Being able to start fresh was a huge advantage over trying to improve the 10+ year old GeneratePress navigation. I can confidently say our block is better for both accessibility and performance when compared to the standard GeneratePress navigation (and way more flexible). Hard to speak on the standard block-based menus as I haven’t looked into them in depth, but I’d be surprised if they were better.
How to add search button in header
You can easily add the WordPress Search Block to your Site Header Block.
This is such a cool feature, tbh it was missing for such a great plugin.
This path looks like GP will have a block theme, I imagine the PRO version of the block theme to go hand in hand with GenerateOne.
More modern design patterns and ready websites with a Block Theme.
For sites already using a Block Element of type Site Header, are there any benefits to the new Site Header block? Or is it the same thing but just usable outside of an element?
The Site Header Block Element allows you to replace the standard theme header area with something you create in the block editor.
The new Site Header block simply allows you to create that replacement in the block editor with the Site Header block so you can do things like make it sticky.
Think of the Block Element as the template part, and the Site Header block as the thing you use to actually build that part of the template.
Really excited to see this direction – it’s a great step toward full block-based control without compromising on performance or accessibility.
This is something I am really looking forward to? What is the ETA for public release?
We’re aiming for this week! 🙂
2.2 is a fantastic addition (so thank you), but straight away I am unable to use the new blocks – as the sites I build require mega menus (full width dropdowns with multiple columns of content in each) and the new blocks do not offer this. So sadly, I need to stick to a different page builder for the headers still.
Do you have a rough idea when the ability to build mega menus will be added please?
Thanks in advance
It’s on the roadmap, but we don’t have an exact timeframe. Addison Hall does have a video on how to do this with the current GeneratePress & GenerateBlocks, though, and that might be helpful. https://youtu.be/FhQyXxVouFo
Awesome feature!
The upcoming section might focus on the popup builder and carousel features. 😁