Frequent reloading and flickering of the Design Tab (Editor Sidebar) in the Template Part Block

[realthemes]

Description

I observe frequent reloading and flickering of the "Design" tab (Editor Sidebar) in the "Template Part" block. This occurs when the Template Part is placed inside an inner block, or even within a nested inner block, as well as when the Template Part has design variations in the Design tab in the Editor Sidebar. The flickering or reloading happens while I move the mouse cursor over the Editor. You can take a look at the video I uploaded.

Please Note: If you place Template Part block (RLT Footer Template Part in my case) not inside Group block but just in root of Template Page, flickering/reloading will not occur.

Step-by-step reproduction instructions

1. In my custom WordPress block theme, there is a Template Part rlt-footer properly registered in the theme.json file in the footer area:

   "templateParts": [
   {
       "area": "footer",
       "name": "rlt-footer",
       "title": "RLT Footer Template Part"
   }
   ]

2. Here is the content of parts/rlt-footer.html (I’ve simplified it as much as possible, because the content does not matter):

   <!-- wp:group {"layout":{"type":"constrained"}} -->
   <div class="wp-block-group"></div>
   <!-- /wp:group -->

3. Now add an inner block to the root of the page, for example, a Group block. Place the RLT Footer Template Part inside the previously added Group block. Open the Design tab of the RLT Footer Template Part block. Can you check if you experience the same behavior as shown in my video?

Screenshots, screen recording, code snippet

Environment info

WP 6.6.2, Gutenberg 19.3.0, Custom Block Theme Edge, Windows 11 Pro

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

• [x] Yes

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

• [ ] Yes

[carolinan]

Thank you for opening this issue. I believe this is related: https://github.com/WordPress/twentytwentyfive/issues/393

[realthemes]

@carolinan Thank you for your reply, and sorry, my fault, GitHub search did not show me any similar issues.

I want to add more of my observations. As I mentioned, the flickering occurs when the Template Part is inside an inner block, but this inner block does not necessarily have to be a Group Block. You can create the simplest inner block possible, and such a block will also cause flickering.

[torounit]

https://github.com/WordPress/gutenberg/blob/b06549de7eebf6a1b5f67d8465648d42f9b0a27e/packages/block-library/src/template-part/edit/utils/hooks.js#L89

This appears to occur when rootClientId is not ''.