feat: swap in Overlay Menu block to replace template parts

[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 removes the mobile menu and drawer template parts, and replaces them with the Overlay Menu block.

It should be tested along with Automattic/newspack-plugin#4642, which fixes a bug in the Overlay Menu Block that only seems to crop up when you're switching between template parts.

Closes NPPD-1397

How to test the changes in this Pull Request:

1. Apply the PR and run npm run build.
2. Navigate to Site Editor > Patterns > Header, and make sure the theme-bundled header template parts - Header, Header (Mobile), and Header (Desktop) are all reset to the theme's defaults.
3. Edit the Header (Desktop) template part.
4. With the template part selected, in the right sidebar click the Template Part tab, and test the different non-default layouts 2-4. For each:
   • Pick the template part
   • Ensure that the Overlay Menu block has been added and is populated.
   • In at least one, ensure the Overlay Menu block can have the panel opened (this is the issue fix(block-theme): ensure Overlay Menu block panel opens in editor after template part switch newspack-plugin#4642 fixes).
   • Publish and make sure things look as expected on the front-end.
5. Repeat the same steps with the Header (Mobile) pattern, and check the default part plus 2-6.
6. For template parts 5-6 for the mobile header, make sure the panel opens from the right.

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

This PR replaces the theme’s custom mobile/drawer menu template parts and JS/CSS menu system with the Newspack Overlay Menu block, updating header patterns accordingly.

Changes:

• Remove legacy mobile/drawer menu JS modules and drawer SCSS, and stop importing them from the front-end entry points.
• Replace mobile-menu / drawer-menu pattern usage in header patterns with newspack/overlay-menu blocks.
• Delete now-unused menu pattern/template-part files and update internal documentation notes.

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/scss/style.scss	Stops importing drawer overlay styles.
src/scss/overlays/_drawer.scss	Removes legacy drawer toggle styling.
src/js/front-end/main.js	Removes legacy menu initializers from the front-end bundle.
src/js/front-end/menus/mobile.js	Deletes legacy mobile menu initializer.
src/js/front-end/menus/drawer.js	Deletes legacy drawer menu initializer.
patterns/header/header-mobile-style-1.php	Replaces mobile-menu template-part with Overlay Menu block.
patterns/header/header-mobile-style-2.php	Replaces mobile-menu template-part with Overlay Menu block.
patterns/header/header-mobile-style-3.php	Replaces mobile-menu template-part with Overlay Menu block.
patterns/header/header-mobile-style-4.php	Replaces mobile-menu template-part with Overlay Menu block.
patterns/header/header-mobile-style-5.php	Replaces mobile-menu template-part with Overlay Menu block (right slide).
patterns/header/header-mobile-style-6.php	Replaces mobile-menu template-part with Overlay Menu block (right slide).
patterns/header/header-desktop-style-2.php	Replaces drawer menu pattern with Overlay Menu block.
patterns/header/header-desktop-style-3.php	Replaces drawer menu pattern with Overlay Menu block.
patterns/header/header-desktop-style-4.php	Replaces drawer menu pattern with Overlay Menu block.
patterns/drawer-menu.php	Deletes legacy drawer menu pattern.
parts/mobile-menu.html	Deletes legacy mobile menu template part.
parts/mobile-contents.html	Deletes legacy mobile menu contents template part.
parts/drawer-contents.html	Deletes legacy drawer contents template part.
AGENTS.md	Removes documentation describing the legacy dual menu systems.

---

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

[adekbadek]

Tested. The Overlay Menu block renders correctly in all desktop (2–4) and mobile (1–6) header patterns. Panels open/close properly, including the right-slide direction for mobile styles 5–6. The code removal is clean – drawer and mobile JS/SCSS/template parts are gone, with the shared menu infrastructure (menus/index.js, overlay base styles) correctly preserved for search and comments menus.

One suggestion: the mobile-contents template part registration in theme.json (line 1192) is now orphaned since parts/mobile-contents.html was deleted. Non-blocking, but should be cleaned up in this PR.

[laurelfulford]

Thanks for the review, @adekbadek! And for catching that template part mention I missed 🤦‍♀️ It's been removed in 0b30e97, so I'll get this merged!

[github-actions]

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

The release is available on GitHub release

Your semantic-release bot 📦🚀