Navigation block: allow search toggle with overlay option

[colorful-tones]

What problem does this address?

It is a common pattern to have a search overlay toggle in the main navigation of a site. Similar to the experience seen here (see the search icon in top-right corner of the site): https://demo.studiopress.com/monochrome/

Here is a gif of interaction:

This exact layout and placement does not have to be replicated, but a good starting point to focus the conversation.

What is your proposed solution?

Add an option to the Navigation block to allow toggling of search overlay.

There are definitely a lot of considerations around the ideal experience here and balancing the options will be tricky: mobile vs desktop. Also, we'll want to account for accessibility: keyboard support for opening/closing, tabbing and focus.

My mind immediately goes to the latest Navigation block work in #43674

Specifically, we could consider adding a search icon within the Display options for the Navigation block and extend the state and options from there.

[colorful-tones]

Perhaps this warrants a new Search Toggle block, which could have "parent": [ "core/navigation" ], in block.json? Although I guess a user could place the Search Toggle anywhere on the page, it is most commonly seen in the main navigation. 🤔

Another option might be to extend the Search block and allow for extra settings to be available if it is placed within the Navigation block context.

[colorful-tones]

After some consideration and research across different existing Gutenberg issues. I believe this is a more suitable request for extending the Search block, which seems to intertwine with #31128 and #22071

I'm closing this out and will look to contribute towards those initiatives.