feat(block-theme): add search overlay block by laurelfulford · Pull Request #4729 · Automattic/newspack-plugin

laurelfulford · 2026-05-14T20:02:49Z

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:

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

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

Try running a search from the overlay and confirm it redirects you to the search results page.
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
While you're testing the above, also confirm that the input is focused on when you open the search overlay.

Test the visual stuff

In the editor sidebar > Styles, confirm you have three options: Default, Icon only, Text only.
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.
With the text visible, try editing the text on the button to change the label to something other than "Search".
Try testing the customization options -- colour settings, typography settings, border radius... confirm everything's applied and looks right on the front-end.
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

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

Jetpack Instant Search

Enable Jetpack's instant search
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!

Set up a few instances of the search button on the same page. Give the overlays different settings so you can tell them apart.
Test triggering them from the front-end. Each search button should open is own overlay.
Confirm that the input still gets focus when the search overlay is opened.
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?

Update (scope)

In addition to introducing the new Search Overlay block, this PR includes two related changes to existing Newspack blocks:

Block style registration moved to block.json — for overlay-search, overlay-menu-trigger, and my-account-button, the default / icon-only / text-only style variations are now declared in block.json styles arrays instead of JS-only registerBlockStyle() calls. This makes the variations visible to theme.json so themes can target them via styles.blocks.<name>.variations.<style>.
Overlay Menu inner blocks are now permanently locked — overlay-menu-trigger and overlay-menu-panel now bake lock: { move: true, remove: true } into their block.json attribute defaults. Combined with the existing supports.lock: false, the lock UI is hidden and the inner blocks of every newspack/overlay-menu instance — including ones already saved in shipped patterns — cannot be moved or deleted, even via the parent block's "Modify" template-bypass UI.