feat: switch header/footer to use WordPress's block visibility

[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 replaces the .desktop-only and .mobile-only CSS classes in the theme with WordPress's block visibility features coming in 7.0.

I optimistically removed references to the classes. Hopefully the baked-in tools will be enough for this kind of thing going forward.

How to test the changes in this Pull Request:

1. Start on a test site running the latest WordPress 7.0 RC; this won't work on older versions of WP.
2. Make sure the Newspack Plugin and Newsletters are up-to-date (we originally removed block visibility for WP 6.9, but re-added it; the trunk version of each plugin should include the version that re-adds it for the Newspack Plugin, and the version that still hides it for the Newspack Newsletters, but makes sure that doesn't bleed into other post types).
3. Make sure you're using the default versions of the Header and Footer template parts.
4. Apply this PR.
5. Confirm that the right header/footer is shown on desktop and mobile (that it switches from the desktop version to the mobile version as you scale the screen down).
6. Try editing the template parts and switching between the different layouts in the right column; publish. Confirm that the visibility setting is still "stuck" to the template part, and that they continue to work.

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?

[Copilot]

Pull request overview

Updates the theme’s responsive header/footer switching to rely on WordPress 7.0’s built-in block visibility controls instead of theme-provided .desktop-only / .mobile-only CSS utilities.

Changes:

• Removed the generic .mobile-only and .desktop-only utility classes from base SCSS.
• Updated header/footer template parts to use metadata.blockVisibility.viewport to control device visibility.
• Removed documentation describing the deprecated responsive utility classes.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
src/scss/_base.scss	Removes the CSS utilities that previously enforced mobile/desktop-only display.
parts/header.html	Adds block visibility metadata to swap desktop vs mobile header template parts.
parts/footer.html	Adds block visibility metadata to swap desktop vs mobile footer template parts.
.github/UTILITY_CLASSES.md	Removes docs for the deleted responsive utility classes.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[laurelfulford]

Hey @thomasguillot! I flagged this one for your review in case this sounds like a horrible change for how the desktop-only and mobile-only classes are used. I'm hoping we can use the baked-in tools where possible, but I also get if they're coming up short and the CSS classes should be kept for now!

[thomasguillot]

@laurelfulford this makes sense to me. I’m actually surprised we only use these classes in 2 templates. For some reason I thought they were also used in things like the overlay menu.

[thomasguillot]

This whole section is now uncecessary.

[laurelfulford]

Yeaaaah I was totally overthinking that -- removed in 9fa5c14!

[thomasguillot]

🚢
Thank you @laurelfulford