feat(block-theme): add search overlay block

[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 a Search Overlay Block to be used in the Newspack Block Theme. It's inserted as a button into the block theme, and when clicked, will open an overlay with the search block in it. The button appearance (colours, fonts, border radius), label (changing text or hiding text/icon) and overlay (colour) are customizeable, but the search -- for now -- is not).

When Jetpack's instant search is enabled, it will be opened instead.

A version of this functionality is currently baked into the theme using template parts. The downside is that that's pretty fragile - changing the structure or a class name could break how it works. My moving the functionality to block, we make sure it's easier to use, add, and customize.

Closes NPPD-1449.

How to test the changes in this Pull Request:

1. On a test site using the Block Theme, open the Site Editor.
2. Add the Search Overlay block (under the Newspack category, or by searching for 'Search'):

3. Save and view on the frontend in a separate tab so you can flip between editor and frontend.
4. Try clicking the search button and confirm it opens a search overlay:

5. Try running a search from the overlay and confirm it redirects you to the search results page.
6. Open the search a few times and confirm you can close it:
   • With the close button (top-right corner)
   • By clicking the overlay background
   • By hitting the Esc key
7. While you're testing the above, also confirm that the input is focused on when you open the search overlay.

Test the visual stuff

1. In the editor sidebar > Styles, confirm you have three options: Default, Icon only, Text only.
2. Try testing each and toggling between the editor and front-end to review:
   • Default should show the search icon and text
   • Icon only should show only the icon, with the text wrapped in a screen-reader-text CSS class.
   • Text only should show only the text label.
3. With the text visible, try editing the text on the button to change the label to something other than "Search".
4. Try testing the customization options -- colour settings, typography settings, border radius... confirm everything's applied and looks right on the front-end.
5. Try changing the overlay colour specifically and testing on the front-end -- the close button in the-top right corner should remain contrast-y against the overlay, so it should be black against a really light colour, and white against a darker colour.

Confirm the block is accessible

1. With overlay closed, inspect the button on the front-end -- it should have the attributes aria-expanded="false", aria-controls="newspack-search-overlay-panel-…"
2. Inspect the panel itself and confirm it has thearia-hidden="true", inert attributes
3. Open the and confirm the button switches to aria-expanded="true" and the panel loses aria-hidden and inert
4. Close the overlay → attributes flip back.

Jetpack Instant Search

1. Enable Jetpack's instant search
2. Try opening an overlay and running a search - confirm Jetpack's instant search is opened instead of redirecting you to the search results page.

Get weird & throw a search party!

1. Set up a few instances of the search button on the same page. Give the overlays different settings so you can tell them apart.
2. Test triggering them from the front-end. Each search button should open is own overlay.
3. Confirm that the input still gets focus when the search overlay is opened.
4. Ensure that the esc key still closes the open overlay.

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

Adds a Search Overlay block for Newspack block themes, rendering a customizable trigger that opens a full-screen search dialog and hands off to Jetpack Instant Search when detected.

Changes:

• Registers the new Search Overlay block in editor/server block registration.
• Adds frontend overlay behavior, styling, editor UI, and dynamic PHP rendering.
• Adds a dedicated frontend bundle entry for the overlay script.

Reviewed changes

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

Show a summary per file

File	Description
webpack.config.js	Adds the search overlay frontend script bundle.
src/blocks/search-overlay/view.js	Implements frontend open/close behavior, focus handling, and contrast color selection.
src/blocks/search-overlay/style.scss	Adds trigger, panel, close button, and body scroll-lock styles.
src/blocks/search-overlay/index.js	Registers block styles and editor settings.
src/blocks/search-overlay/edit.js	Adds editor controls and trigger label editing.
src/blocks/search-overlay/class-search-overlay-block.php	Adds server-side dynamic rendering and Jetpack handoff markup.
src/blocks/search-overlay/block.json	Defines block metadata, supports, styles, and view script.
src/blocks/index.js	Adds the block to client-side registration and block-theme gating.
includes/class-blocks.php	Includes the server-side block class for block themes.

---

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

[laurelfulford]

For semi-transparent colors like rgba(0,0,0,0.1) over a light page, the RGB values make this choose white even though the effective background is very light, leaving the close icon with poor contrast.

I'm not sure how well we can perfect the contrast calculations - this assumes the site's background is white, which yes, would mean a very low contrast X. But if the site's background is black, a white close button would be preferred here.

Going to leave for now but this might be a good argument for adding a close button colour control down the road if it becomes an issue.

[laurelfulford]

Hey @thomasguillot! for the styles here I tried to match the placement and animation of the template parts. Can you poke around with that plus the button style settings, and let me know if anything needs changing? Thanks!