Mel Choyce

Gutenberg Navigation Block Concepts Roundup

One of the goals for Gutenberg Phase 2 is a new navigation menu block. There’s already been a lot of thought and discussion on this, which I wanted to gather into one location so it’s easier to review and compare all the options.

Early concepts

There are a number of early explorations on the GitHub thread:

WordCamp US contributor day

At the WordCamp US contributor day, a group got together and started thinking through a navigation block:

Exploring a Nav block at WordCamp US

Individual explorations

Brent Jett has been writing a good series on the future of themes and customization in Gutenberg, and the second part of his series covers navigation:

I have a couple more early ideas kickin’ around that I need to update:

Did I miss any?

4 responses to “Gutenberg Navigation Block Concepts Roundup”

  1. Birgit Pauli-Haack

    Gutenberg Phase 2 starting up with call for contributors, navigation blocks ideas and research in page building. Watch our Live Q & A conversation about Supporting & Testing WordPress 5.0. Find also a few more tips & tricks on using Gutenberg for content creation and block building. Hope you learn things! 💕

    Yesterday was Gutenberg Times 1-Year-Anniversary. It’s been a fun ride! I am about to finish the draft of my report from the Center of the WordPress Universe with few lessons learned. I am thrilled to tell you about the great people, who were instrumental making this site possible. An awesome 12 months of the site, for sure. 🎂🍰🤡 — Birgit Pauli-Haack

    Table of Contents

    Gutenberg & WordPress Development News
    Using the new block editor
    Finding more Blocks #280blocks
    Themes and Plugins Development for Gutenberg

    Gutenberg & WordPress Development News

    How to get involved in Gutenberg Phase 2

    Gutenberg Phase 2 Friday Design Update

    Gutenberg Navigation Block Concepts Roundup

    Sitebuilding research: what’s next?

    Gutenberg Accessibility Audit Vendor Selection

    Using the new block editor

    [youtube https://www.youtube.com/watch?v=SoQ4KBMzpD0?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent&w=640&h=360%5D

    Live Q & A with Sheri Bigelow, Marius Jensen, Hristo Pandjarov, hosted by Birgit Pauli-Haack

    Thanks to Gutenberg, WordPress bloggers have more functions available to them than before. https://t.co/vW25FnP81I Please Retweet #WordPress #Bloggers #Gutenberg pic.twitter.com/B7CAbeYxT5— Janice Wald (@MrsPaznanski) January 7, 2019

    My thoughts on Gutenberg after switching to it last month: https://t.co/L6sS3diQ1X— Chris Wiegman (@ChrisWiegman) January 7, 2019

    Gutenberg has traction already and will be of even greater benefit over time. Enjoying the journey so far #embracechange👍— six7 (@six7webrand) January 8, 2019

    I agree with you Ben. I can foresee Gutenberg being the start of the next evolution of WordPress.— Gilbert Pellegrom (@gilbitron) January 16, 2019

    How to Create a Reusable Block in #WordPress Block Editor (#Gutenberg) https://t.co/atJao2AuX1 @wpbeginner pic.twitter.com/fY6838a25N— Maddy Osman (@MaddyOsman) January 15, 2019

    Finding more Blocks #280blocks

    Recommended Plugins with Gutenberg Blocks

    CoBlocks Adds Row and Columns Page Building Blocks for Gutenberg

    I’ve been deep into content creation with #Gutenberg for a while. My top blocks plugins? @KadenceThemes Page Builder ToolsUltimate Addons for Gutenberg by @WeBrainstorm @wpstackable @AdvancedBlocksBetter Click to Tweet (w/ premium styles) by @benunc& @GiveWP.#WordPress— Taylor Elizabeth Rose (@tElizaRose) January 11, 2019

    We’ve got huge updates for all our blocks 🥳 #Gutenberg #WordPress https://t.co/MlohEicwRd— Stackable Gutenberg Blocks (@wpstackable) January 16, 2019

    WooCommerce Blocks is Now a Feature Plugin, Version 1.3.0 Introduces 6 New Blocks

    Share Your Most Favorite Blocks!

    Themes and Plugins Development for Gutenberg

    Here’s the CSS I use for implementing wide and full alignment options in Gutenberg https://t.co/gHhBlxUosR— Bill Erickson (@BillErickson) January 8, 2019

    Caching Smartly In The Age Of Gutenberg https://t.co/pPp0u4Km9d #WordPress— Todd Zebert (@ToddZebert) December 13, 2018

    Add Shadow to Gutenberg blocks in WordPress https://t.co/EzkCVFmzsa pic.twitter.com/UqytsC7bpT— Syed (@syhussaini) January 5, 2019

    Writing Your First Block Type

    WordPress 5.0 and the Gutenberg editor: The performance elephant in the room

    xhttps://www.youtube.com/watch?v=nAjlvw5w7rw

    How to add class names to nested blocks in Gutenberg

    Featured Image: Photo by Ivan Bandura on Unsplash

    Share this:

    Click to share on Facebook (Opens in new window)
    Click to share on Twitter (Opens in new window)
    Click to share on Google+ (Opens in new window)
    Click to share on Telegram (Opens in new window)
    Click to share on Reddit (Opens in new window)
    Click to share on Pinterest (Opens in new window)
    Click to share on LinkedIn (Opens in new window)

    Like this:

    Like Loading…

    <em>These posts might interest you as well...</em>

    Reply
  2. Sadique Mannan Avatar
    Sadique Mannan

    Nice article. Gutenberg editor is one of the best thing ever produced by WordPress. I am loving it

    Reply
  3. aprilfrancis Avatar
    aprilfrancis

    WHEN can I USE a Gutenberg Navigation Block?!

    Reply
    1. mel Avatar
      mel

      Keep an eye on https://github.com/WordPress/gutenberg/issues/17544!

      Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)