Joshua Wold 8:58 pm on December 18, 2018

Exploring a Nav block at WordCamp US

At CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Contributor dayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. in WCUS the Design team spent time thinking about the next phase of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/, and explored what a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. interface would look like in more sites and across more parts of the entire site experience.

During the day we split into several teams, each tackling this problem from a separate angle. In my team we ended up diving more deeply into the navigation block, and what all it entails.

So, here’s some of our findings. We began by trying to figure out what a block with navigational elements would look like, and where it would fit in.

Our first sketch with a Navigation block

The first problem we were trying to think through was what settings and visual elements would be needed for a navigation block. Also, where should a navigation block go? What if you don’t just want it in the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.?

From there we play with some further ideas.

This definitely wouldn’t work as a solution, but we knew the direction was worth pursuing. If the Nav block could live in a container block (columns perhaps), then the settings for it could be tweaked in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme..

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. A great problem to be considered at a future time!

Props to @amitrathik, @mikeselander, @hajjflemings, @Bridget Brown for the great thoughts and contributions!

Mark Uraine 11:10 pm on December 18, 2018

@joshuawold, Thanks for this post! Great explorations. It was a bit difficult for me to ascertain your findings based on the sketches. Can you list out some of the conclusions you walked away with during these explorations?
- JoshuaWold 9:38 pm on December 20, 2018
  
  Great question! I’ll followup as soon as I can with more details.
  - JoshuaWold 7:57 pm on December 27, 2018
    Thanks @mapk, great question! It was really fun to spend some time thinking through this problem.
    
    1. We didn’t specifically come to many conclusions, as we mostly spent time understanding the problem and playing through ideas.
    2. With that said, I’ll share what stands out to me as some findings:
    
    How deep do we go – We need to decide how much customization we allow for the nav blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., versus just giving default settings and hoping it works for the majority of users.
    
    We need to think of the types of users that would want to build their site with a nav block.
    
    We need to think about where the nav block would go. Is this usually going to be in the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. area, or is it just as likely to be in other parts of the site?
    
    How much should GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ control the style of the nav block, versus letting the theme control it. For instance, do we let users tweak fonts, spacing, colors, size.
    
    How do we deal with dropdowns? What about megamenus? Is that something we suggest as a custom solution that third-party plugins could provide – and as a result, we just keep the nav block simple.
    
    What settings are reasonable to offer initially? You can see us exploring with horizontal versus vertical, accordion or dropdown (with or without hamburger) as an example.
    
    Is a nav block an isolated block that can be dropped into a header block (or container block), or is it more of a “header” block with a nav component inside it?
    
    How do you represent what would be inside the dropdown? Do you have settings in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.?
    
    How do you move nav items around, what about child/parent relationships? Do we make all that exist inside the sidebar similar to CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.?
Kevin Hoffman 11:59 pm on December 18, 2018

Thanks for sharing these early looks. One concern that I have is in bundling too many disparate components together in a single blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.. Nesting blocks implies that a single container will wrap all of the components within, which could make certain designs harder to achieve due to markup limitations.

This presents the question of whether absolutely everything on the page needs to become a block, or whether we can be more nuanced in the division of components and layout.

One possible solution is to let the theme define the layout and style of the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes., while individual, reusable blocks represent the components within.
- JoshuaWold 8:02 pm on December 27, 2018
  
  This presents the question of whether absolutely everything on the page needs to become a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., or whether we can be more nuanced in the division of components and layout.
  
  That’s a good point. Creating this Nav block (at least in these early sketches) assumes that it will exist as a nested block. In another comment I just shared:
  
  Is a nav block an isolated block that can be dropped into a headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. block (or container block), or is it more of a “header” block with a nav component inside it?
  
  I believe that’s a question we need to be thinking about, and that should direct our research and initial ideations.
Monique Dubbelman 9:21 am on December 19, 2018

I wonder what is replaced by the nav blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.? Is it instead of a widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.? Or should it be site-wide instead of the menu’s that are now inside the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. or appearance? @Kevinhoffman, looking at blocks as components, I ask myself: what’s the difference? They are all elements to build a site. This component should maybe get the option: where to display? Everywhere / only this page/post?

We have to make it clear for users and ask them what they want with a certain element and distinct global blocks and local blocks (or whatever you call them). Hope I’m making this clear enough :).
- hanheg 2:32 pm on December 21, 2018
  
  Yes, I agree. I’d really like to stress the importance of a distinction between “global blocks” and maybe “local blocks” (maybe “page blocks” or “document blocks”.
  In the inline editor screens for now there is no way for an end-user to tell if the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. appears only on the one page or on other or all pages too. (see also discussion here )
  
  Would it be an option to have an extra tab next to the current tabs Document and Block. So that when you are working on a sitewide Nav block its makes that clear by having a tab active there saying “Sitewide” or something like that?
  - Mark Uraine 5:17 pm on December 27, 2018
    
    Maybe this can be solved with different “workspaces” or contexts wherein one edits their site. So rather than blocks being identified as global or local, the screen wherein one is editing makes that clear. I’m editing the navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. inside of the “global headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.” section. Or I’m editing a navigation block inside the “global footer” section.
  - JoshuaWold 8:03 pm on December 27, 2018
    
    1. Great discussion here! I’d agree that we need to make it clear if the user is working on a global blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. versus a local block.
    
    2. Different contexts are worth considering as well.
Paal Joachim Romdahl 1:37 pm on December 27, 2018

There is a suggestion for a conditional blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.:
https://github.com/WordPress/gutenberg/issues/6866

This could mean that one could place various blocks inside of the conditional block defining where to show that headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes./footer/sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme./menu etc.

In regarding a menu block. Here is a suggestion I just added to GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/:
https://github.com/WordPress/gutenberg/issues/13111
- JoshuaWold 8:44 pm on December 27, 2018
  
  Thank you! Just read and commented on those issues.