feat: add My Account button block to all header patterns

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR adds the My Account Button block (with a conditional check) to all the header patterns bundled with the Newspack theme (excluding mobile layout 2 -- I just couldn't make it work nicely with the size of the button).

Open questions/comments:

• This is kind of an open question from the original PR, but the My Account Button looks the same on desktop or mobile - do we want to do anything special for mobile (like have a style that hides the text)?
• There is a weird couple-pixel mismatch in alignment in a couple of the mobile header layouts where the Donate Block is right next to the My Account button block. This is due to the icon -- in my testing, tweaking this style to use 1.45em as the smaller size fixed it, but I'm not sure if/how we'd want to do something like that (just target the x-small CSS class? Just target the editor? Leave it since the front-end is fine?) so I left it for now.

See NPPD-1177.

How to test the changes in this Pull Request:

1. Apply the PR.
2. Navigate to the Site Editor > Patterns, and pick one of the Header patterns (Desktop or Mobile).
3. With the outer container selected, pick the Template Patterns tab on the right sidebar, and in the Design panel, go through the pattern options one by one to review in the editor, and then on the front-end. Confirm that the appearance/order/spacing/etc. makes sense:

Desktop:
Pattern 1:

Pattern 2:

Pattern 3:

Pattern 4:

Pattern 5:

Mobile:
Pattern 1:

Pattern 3:

4. Review the code and confirm that each My Account button is wrapped in a check to make sure RAS is enabled.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[laurelfulford]

@thomasguillot I'd appreciate your eyes on this one, mostly to make sure I haven't committed a crime! 🙂

[thomasguillot]

Thank you @laurelfulford. I've just changed the button's colours. Otherwise it looks 👍

[thomasguillot]

Not part of this PR but I'd like to get your thoughts on this:

It just crossed my mind that I missed something during the block review...

e.g.

I think we need some toggles in a "Display" panel (kind of like the Navigation block):

• Show icon (on by default) (cannot be off is label is off)
• Show label (on by default) (cannot be off is icon is off)

And we need some aria-labels (in case it's just the icon)

[laurelfulford]

Thanks @thomasguillot!

I think we need some toggles in a "Display" panel (kind of like the Navigation block)...

This sounds like a good approach! I didn't even think about turning the icon off but that would be a handy option (and one of those things that's likely to get asked for!).

With that change, I'll spin up a second block theme PR to update the mobile patterns to use the icon-only option.

[laurelfulford]

PR's added here for the icon toggle! Automattic/newspack-plugin#4443

[github-actions]

🎉 This PR is included in version 1.24.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 1.24.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀