Try new Local Navigation block

[ryelle]

This is a companion PR to WordPress/wporg-mu-plugins#404, which introduces a new Local Navigation container to hold the section title & section menu. This PR extracts out the local header from the synced post content, and creates new reusable pattern-partials which handle the header content on each subpage. The new patterns use the Local Navigation container block.

The changes here also bring these headers in line with the generic section header mocked up. @WordPress/meta-design As I understood it, this pattern is complete, but if that's not the case let me know.

❗ If we decide not to merge the Local Nav block, I still think we should merge e1e42a3 to DRY up the About pages. That won't change any visuals.

Additionally, once this is merged, I'll need to go in and update each of the subpages to remove the banner, so that the content sync doesn't overwrite these changes.

See WordPress/wporg-mu-plugins#465

Screenshots

1. The Stats page, a general About subpage. I added borders to the header as this was mocked up at some point, but I don't know if that's still the preference.
2. The Requirements page, scrolled down— the top banner sticks under the global header, but the breadcrumbs scroll. Is that the expected behavior?
3. The Beta/Nightly page— I kept the brush stroke style on the download subpages, but that + the breadcrumbs is a little strange.
4. The download counter— unlike the other download subpages, this does not have the breadcrumbs, and uses the black+borders style for the banner. So we can still have unique features on individual pages.

Before	After

How to test the changes in this Pull Request:

1. Make sure you have New Block: Local Navigation container wporg-mu-plugins#404 applied on wporg-mu-plugins
2. Check out this branch
3. View the About and Download subpages

[jasmussen]

Thanks a bunch, this looks great.

I don't know for sure that we will always have the borders visible, and depending on context (bg color etc), they might need to be inverted or semi-transparent. I'm not sharing that as blocking feedback, it's clear you're already handling on a case by case basis with the Download section. But it is to say, I would love to get some feedback from @panchovm when he gets a moment, notably around this one:

For example, Should it say "About WordPress.org" instead of "About" or "WordPress.org"? And should the submenu item match? I think Francisco may be back from some AFK tomorrow and can sanity check.

[ryelle]

@jasmussen @fcoveram Do you think this can be merged, or do you have more feedback? The Local Navigation container block itself has already been merged, so the main issue here is whether the design works.

[jasmussen]

I'm happy to iterate this, we can always revisit. I'll defer to Francisco in case he chimes in.

[fcoveram]

Sorry for jumping in late here.

I checked the images and realized we did not explain the header correctly. I took some pages of Learn site to show how the header behaves at each depth level. See the diagram below

Per level depth:

• At level 1, the hero header shows all level 2 pages inactive
• At level 2, header shows the subsite name on the left and level 2 pages on the right. The page where you are is shown active in the menu
• At level 3, header shows the subsite name on the left and level 2 pages on the right. There is no active page and breadcrumb is visible. As pointed out here (one that I couldn't find), "Home" is an idea for the name duplication that takes you to the subsite homepage (to "Learn", following the example).

Showing the breadcrumb at level 2 is redundant as it will show the home and active page links.

The border dividing header and breadcrumb is not always visible but depends on the subsite style. But as Joen said, it shouldn't block the ticket.

[ryelle]

Thanks for the explanation! I'm pretty sure this PR only changes the "level 3" pages, so I think I've got it right? With the exception of the Download Counter.

• L1: WordPress.org homepage (unchanged)
  • L2: About (unchanged)
    • L3: About > Accessibility
    • L3: About > Domains
    • L3: About > Etiquette
    • L3: About > Features
    • L3: About > History
    • L3: About > License
    • L3: About > Logos
    • L3: About > Philosophy
    • L3: About > Privacy
    • L3: About > Requirements
    • L3: About > Roadmap
    • L3: About > Security
    • L3: About > Stats
  • L2: Download (unchanged)
    • L3: Download > Beta/Nightly
    • L3: Download > Counter
    • L3: Download > Releases
    • L3: Download > Source Code

So does the breadcrumb need to update to be Home / About / [current page]? Or was there other feedback about these specific pages?

[fcoveram]

I missed a crucial point in my explanation, WordPress.org homepage is not counted as L1. In the example attached, the subsite's homepage (Learn homepage) is L1.

So following the site structure you shared above, the logic I suggested goes as follows:

• Root: WordPress.org homepage
  • L1: About
    • L2: About > Accessibility
    • L2: About > Domains
    • ...

What's currently in production works well because L1 (About) and L2 (Requirements, Features, Security, etc) don't show the breadcrumb but active style in the subnavigation area.

...As pointed out WordPress/wporg-mu-plugins#465, "Home" is an idea for the name duplication that takes you to the subsite homepage (to "Learn", following the example).

In the "About" case, my comment quoted above means that "home" link in breadcrumb takes you to About's homepage.

[ryelle]

WordPress.org homepage is not counted as L1. In the example attached, the subsite's homepage (Learn homepage) is L1.

Ah right— we got caught up in a technical-vs-conceptual issue 🙂 technically, wordpress.org and learn.wordpress.org are the same level in each site (both roots/homepages), and About is a subpage in WordPress.org— but conceptually, you're thinking of About and Download as unique "sites" … or maybe it's more correct to say that the WordPress.org homepage itself is the special case? So would a page like Enterprise or Mobile be L1, even though they have no child pages?

In any case, the updated PR now only shows the section title (About or Download) and the navigation, for each page. Like this:

[adamwoodnz]

👍 LGTM

[fcoveram]

To @ryelle

…we got caught up in a technical-vs-conceptual issue 🙂 technically

…you're thinking of About and Download as unique "sites"

So would a page like Enterprise or Mobile be L1, even though they have no child pages?

Yes, yes, and yes 😅 . I understand it's technically wrong, but the approach was taken for browsing purposes.

the updated PR now only shows the section title (About or Download) and the navigation, for each page.

And it looks great ✨ 🚀