feat(block-theme): replace template parts with new search overlay block

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guidelines?
• 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 block theme's original template parts + JavaScript approach to adding a search overlay with a search overlay block, added to the Newspack Plugin in Automattic/newspack-plugin#4729.

Closes NPPD-1546

How to test the changes in this Pull Request:

1. Once the PR's applied, navigate to Site Editor > Patterns, and go through your Header template parts and make sure they're all reset to the default.
2. View on the front end; click the search and ensure it opens the search overlay. It should have no background colour, and just show the icon.
3. Confirm that the input is focused on when the overlay opens.
4. Try running a query in the search field and confirm it returns results.
5. Go back to the Site Editor, and edit the Header Template part.
6. Select the Template Part in the block editor, and cycle through the alternative layouts in the right sidebar by clicking each one. This is to confirm the Search Overlay block has been added to each. After each switch, publish and check on the front-end, too. All 5 desktop header patterns and numbers 2, 4, and 6 of the mobile header patterns should have the block.

7. Enable Jetpack Instant search, and confirm it's used by the search overlay block (it should open it rather than the search block input in an overlay).

Checking template part cleanup

1. View the console and confirm there are no JS errors from the search template part and assets that have been removed.
2. Navigate to a single post, and click the Comments link at the bottom - ensure the comments panel opens, and that there are no JavaScript errors.
3. Close and reopen the panel; confirm it closes, and that the comment input gets focus when the panel is opened.

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 run tests with your changes locally?

[Copilot]

Pull request overview

This PR updates newspack-block-theme to stop using the legacy “search-menu” template parts + theme JS/SCSS overlay implementation, and instead use the new newspack/overlay-search block (provided by the Newspack Plugin) in header patterns.

Changes:

• Replaced wp:template-part usage of the search-menu template part in header patterns with wp:newspack/overlay-search.
• Removed the theme’s search overlay front-end implementation (SCSS, JS import, and template parts).
• Simplified menu accessibility helpers and removed now-unused localized strings related to the old search menu.

Reviewed changes

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

Show a summary per file

File	Description
themes/newspack-block-theme/src/scss/style.scss	Stops including the removed search overlay SCSS.
themes/newspack-block-theme/src/scss/overlays/_search.scss	Removes legacy search overlay + Jetpack Instant Search theming styles from the theme.
themes/newspack-block-theme/src/scss/overlays/_base.scss	Removes the search-menu-specific scroll locking exception.
themes/newspack-block-theme/src/scss/_base.scss	Removes legacy search icon mask styling tied to the deleted search toggle.
themes/newspack-block-theme/src/js/front-end/menus/search.js	Removes the legacy search overlay menu JS implementation.
themes/newspack-block-theme/src/js/front-end/menus/index.js	Removes search-menu-specific accessibility handling (no longer needed).
themes/newspack-block-theme/src/js/front-end/main.js	Stops importing the removed search menu script.
themes/newspack-block-theme/patterns/header/header-mobile-style-2.php	Uses the new newspack/overlay-search block in this header pattern.
themes/newspack-block-theme/patterns/header/header-mobile-style-4.php	Uses the new newspack/overlay-search block in this header pattern.
themes/newspack-block-theme/patterns/header/header-mobile-style-6.php	Uses the new newspack/overlay-search block in this header pattern.
themes/newspack-block-theme/patterns/header/header-desktop-style-1.php	Uses the new newspack/overlay-search block in this header pattern.
themes/newspack-block-theme/patterns/header/header-desktop-style-2.php	Uses the new newspack/overlay-search block in this header pattern.
themes/newspack-block-theme/patterns/header/header-desktop-style-3.php	Uses the new newspack/overlay-search block in this header pattern.
themes/newspack-block-theme/patterns/header/header-desktop-style-4.php	Uses the new newspack/overlay-search block in this header pattern.
themes/newspack-block-theme/patterns/header/header-desktop-style-5.php	Uses the new newspack/overlay-search block in this header pattern.
themes/newspack-block-theme/parts/search-menu.html	Removes the legacy search menu template part.
themes/newspack-block-theme/parts/search-contents.html	Removes the legacy search contents template part.
themes/newspack-block-theme/includes/class-core.php	Removes now-unused localized strings/flags for the legacy search menu behavior.
themes/newspack-block-theme/assets/images/icon-search.svg	Removes the legacy search icon asset used by the old template part.

[laurelfulford]

@thomasguillot flagging this one for you in case there's anything that should be changed about the button/implementation - thanks!

[thomasguillot]

@laurelfulford I pushed a few follow-up commits on top of this to polish the header triggers — flagging what changed:

Theme (newspack-block-theme)

• Search + menu triggers now share consistent styling: transparent background with a subtle hover tint via a new has-background-transparent utility, and spacing|20 padding (40×40, matching the account button).
• Menu trigger label is now "Menu" (sentence case) rendered uppercase via a textTransform typography style instead of a hardcoded "MENU".
• Header style 4: consolidated Donate + My Account + Search into a single blockGap: 20 row.
• Restored .github/UTILITY_CLASSES.md (seems it was dropped in the monorepo cutover), documented the new utility, and removed the overlay-contents section since the overlay blocks are self-contained now (only the comments menu still uses those classes).

Plugin (newspack-plugin)

• Enabled full typography support on newspack/overlay-menu-trigger (needed for the uppercase typography style).
• Fixed the overlay-search editor markup so the trigger class lands on the button only — it was also on the wrapper, causing a faint box behind the icon on hover in the editor.
• Stopped the My Account "Sign in" label wrapping, and removed an orphan webpack entry so the block's styles actually load in the editor canvas.

Commits 3b359e9..8f17aef. Happy to adjust any of it!

[thomasguillot]

Question on Jetpack Instant Search styling

Removing src/scss/overlays/_search.scss drops two things: the theme's own .search-menu__contents overlay (correctly superseded by the new block) and the ~590 lines of body .jetpack-instant-search { … } styling that themed Jetpack's full-screen results modal (results list, filters, sort, pagination, dark mode, colophon, etc.).

I grepped both the theme and the plugin and those jetpack-instant-search__* result/overlay selectors now live nowhere — the overlay-search block's style.scss is ~100 lines with no Jetpack selectors. The block correctly bails and lets Jetpack render its own overlay when Instant Search is active, but nothing re-applies the design polish those styles provided.

Test step 7 confirms the Jetpack overlay opens, but not that it still looks like Newspack. So with Jetpack Instant Search enabled, the results UI will likely fall back to default Jetpack styling.

[laurelfulford]

Thanks @thomasguillot!

Removing src/scss/overlays/_search.scss drops two things: the theme's own .search-menu__contents overlay (correctly superseded by the new block) and the ~590 lines of body .jetpack-instant-search { … } styling that themed Jetpack's full-screen results modal (results list, filters, sort, pagination, dark mode, colophon, etc.).

🤦‍♀️ Thanks for catching that! The Instant Search styles have been reinstated in 644387a; the CSS file still lives in the same place but I renamed it to _instant-search.scss since the styles are specifically for the instant search now.

[thomasguillot]

Thank you @laurelfulford

🚢