Query Loop: Incorrect inspector controls when selecting inner blocks

[aaronrobertshaw]

Description

When a query block is added to a post, page, or template. If you select it then an inner block such as the Post Title, then select the Post Title for a second post within the same Query block, you'll get duplicate controls in the block inspector sidebar.

Multiple git bisect attempts pointed to the commit for #46728 (f752350) Cause was elsewhere.

Expected:

Selecting each block would display only the controls for that block.

Actual:

Duplicate controls are rendered in the sidebar. It appears that the block clientId isn't distinct

Step-by-step reproduction instructions

1. Add a Query block to a post or template
2. Select the Query block
3. Select a post title within the query block
4. Select a different post's title
5. Note the duplicate controls in the block inspector
6. Select the Query block again and note the incorrect panel display in the block inspector as well

Screenshots, screen recording, code snippet

On Trunk or with f752350 checked out

Screen.Recording.2023-01-12.at.4.46.12.pm.mp4

Last Good Commit 072448e

Screen.Recording.2023-01-12.at.4.44.31.pm.mp4

Environment info

• MacOS
• WP 6.2-alpha
• Gutenberg trunk (bisect run twice pointing to commit in issue description)
• Theme: 2023

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ntsekouras]

I don't think the linked PR for iframe styles has anything to do with that.. I remember having this issue before, but don't remember how we resolve it. I'll investigate a bit.

I'll open a PR soon :)

[t-hamano]

I ran into the same problem and submitted #47135. I used git bisect to search for the commit and sure enough, I came across the f752350 that this issue shows.