Theme Blocks: Issue Highlighting Selected Block in Nested Blocks Within Theme Editor

I’ve encountered a usability issue with the Theme Editor’s new theme blocks feature when working with theme blocks:

Issue Description

When a block group is collapsed in the editor, clicking on one of its blocks in the store does not expand the block group or highlight the selected block in the editor. This makes it difficult to identify which block is being edited without manually expanding the block group.

This issue also exists with regular sections, but it was less noticeable before because sections typically have only one nesting level. However, with the new theme blocks feature, we now have up to 7 nesting levels (if I’m not mistaken). Due to the deeper levels of nesting, I often collapse groups to keep the editor organized, which has made this issue more apparent.

This behavior disrupts the workflow, especially when working with deeply nested or grouped blocks, as it adds unnecessary steps to locate and edit blocks.

The Expected Behavior is when clicking on a block in the store using the Shopify inspector, the corresponding parent blocks should automatically expand, and the selected block should be highlighted in the editor.

Request

I’d appreciate it if the Shopify team could look into this and consider a fix in future updates. This small improvement could significantly enhance the editing experience for merchants and developers alike.

Hi Ahmedbm,

Thanks for flagging this issue - the themes product team are looking into this now.

1 Like