Search block: opinionated mobile behavior for button-only - #82185

Hi
I don't think it is clear enough what the why's are referring to, since this could mean different thing. Here a couple of screenshots would really help. is there an issue created for this and has it had a design feedback?

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: [Package] Block library, [Block] Search.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

No actionable comments were generated in the recent review. 🎉

sequenceDiagram
  participant SearchBlockRenderer
  participant SearchView
  participant MobileOverlay
  SearchBlockRenderer->>MobileOverlay: render mobile fields and submit control
  SearchView->>MobileOverlay: update position and background when opening
  SearchView->>MobileOverlay: recalculate position on resize
  SearchView->>SearchBlockRenderer: restore focus after closing

_{Comment @coderabbitai help to get the list of available commands.}

I don't think it is clear enough what the why's are referring to, since this could mean different thing. Here a couple of screenshots would really help.

Sure, added example video to show what I mean.

is there an issue created for this and has it had a design feedback?

I don't think there is an issue and there was no design feedback. I created a draft PR to show the problem and an option to fix it but it doesn't mean it has to be the solution. I'm open to other ideas!

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: kmanijak <karolmanijak@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

🤖 PR meta 🤖

🏷️ Labels

This pull request needs exactly one label indicating its type, and has 0.

• Required: any label starting with [Type].
• Found: none.

Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you.

📦 Bundle size

Size Change: +2.26 kB (+0.03%)

Total Size: 8.01 MB

_{d96d4fa Run}

⚡ Performance

_{d96d4fa Run}

A few thoughts:

1. Rather than this change happening at 600px, could we use container queries to determine whether to use the overlay?
2. I think focussing outside the search box should close it. Once the content gets covered it's not clear how to get it back (escape works but no everyone would know that).
3. Is it also worth thinking about making the overlay more distinct from the content - for example, adding a background color/positioning it in the centre of the canvas? Personally I think not, but I wondered if others had a different perspective.