Update local header layout

[adamwoodnz]

Closes WordPress/wporg-main-2022#66

Depends on WordPress/wporg-parent-2021#103, WordPress/wporg-mu-plugins#443 and WordPress/wporg-mu-plugins#439

• Changes background and border colors
• Adds site title 'Documentation' on pages other than home

Home header background color can be updated in content.

Screenshots (outdated, see below)

Home

Desktop	Mobile

Topic landing page

Desktop	Mobile

Article

Desktop	Mobile

How to test the changes in this Pull Request:

1. Ensure your mu-plugins and parent theme are updated on the branches detailed above
2. Check the homepage, topic landing pages and a single article page

[fcoveram]

It looks great. I just noticed one thing: "Technical guides" link needs to be in the active style (bold font-weight).

On the other hand, I checked the mockups and the Article design misses the breadcrumb. The local header does need to show the breadcrumb when you land in article posts ("Block Directory" in this example).

[adamwoodnz]

Updated Screenshots with local nav bar and dynamic nav menu from mu-plugins

Home (with edited content)

Desktop	Mobile	Mobile nav open

Topic landing page

Desktop	Mobile

[adamwoodnz]

Local navigation menus now defined here, rather than in the mu-plugins block

[adamwoodnz]

I checked the mockups and the Article design misses the breadcrumb. The local header does need to show the breadcrumb when you land in article posts ("Block Directory" in this example).

Awaiting confirmation before shipping.

[jasmussen]

Francisco is AFK for the moment, so I can only be a silver-medal in terms of feedback.

Notably, I would be okay with shipping this if you all feel it's a strong path forward and not too code-complex. However from gleaning the navigation component that Francisco mocked up here, it isn't clear to me that we are employing it right. From the WP.org design library:

• The left label should be the section name, i.e. Documentation
• A label on the right should show the page name, i.e. Technical Guides (elided if need be)
• There should be a chevron icon on the right, which lines up with the burger menu icon above
• When the whole bar is opened, I imagined it to open downwards like a dropdown, similar to the News component

News component, closed:

Opened:

It can be a modal if need be, we can work with that, but it would be good to get the chevron icon right instead of the "Menu" label at least.

[ryelle]

@jasmussen If you want to see how this currently works, it's already in place on the about & download subpages, for example on About > Requirements. The menu could also be on a dark background like on the Download Counter.

A label on the right should show the page name, i.e. Technical Guides (elided if need be)

In the original local header discussion (it's long, relevant comments start here), I shared that the label for the menu should ideally stay consistent throughout the individual site. I think we landed on "menu" by default, but could pick something else.

In any case, since this is a shared component, changing the functionality would need to happen in wporg-mu-plugins. So I'm inclined to let this PR through, and have any follow up design changes to a new issue on that repo.

[adamwoodnz]

Updated Screenshots with opacity-white-15 top border color, breadcrumbs back on single and category pages, and charcoal background on mobile nav:

Home (with edited content)

Desktop	Mobile	Mobile nav open

Topic landing page

Desktop	Mobile

Category page

Desktop	Mobile

Article page

Desktop	Mobile

[jasmussen]

I'm happy to ship and iterate on this one, though I do want to surface that removing the breadcrumbs on one of the subpages was a mistake on my part in the mockups. I may owe an apology.

[adamwoodnz]

• There should be a chevron icon on the right, which lines up with the burger menu icon above

Opened a new issue for this