A while ago we had this, with the separation on the backgrounds.

We should constrain the iframe to signal you are editing just a part. It'd be neat to support resizing the canvas to see how a unit scales responsively cc @ItsJonQ

The boundaries of the template part are not clear...

@jameskoster I agree with you and @mtias in that the Template Part editing view should focus on the part only. Not unlike seeing a single "frame" in Figma (or "Artboard" in some other apps like Illustrator)

I think having iFrame + resize handlers would be good for site editing in general :)

I think having iFrame + resize handlers would be good for site editing in general :)

One extra thing to consider here is the relationship between the desktop / tablet / mobile views in the "Preview" menu, and a user-specified width on the iframe.

Edit: Perhaps we add a "Custom" option there, which reveals the drag handles. This might be the default view for isolated template part editing.

Related: A loose "isolated" view for editing Reusable blocks was shared in #29337. Perhaps we can reuse some of the ideas there in our explorations here.

Wanted to include some feedback from the second FSE call for testing:

I see the isolated view. Header area in the main layout. Header name in the top toolbar. An empty Block Inspector in the sidebar settings. Instead of an empty Block Inspector when first entering isolated view. A message saying “Viewing Header template” could come up in the empty Block Inspector area. As it would bring a confirmation that one is only seeing the Header template.

Perhaps adding in some sort of notice similar to the template editing notice would help here so people don't accidentally start building out a template in a template part for example. Ideally, similar to the template editing notice, it would be sticky: #28175

Realistically I don't think there's anything we can do to 100% stop folks from making this mistake, but general chrome optimisations will hopefully help.

On the subject of the block inspector, when you're editing something like a Template Part in isolation, I think the primary tab (normally "Post" or "Template") should be titled "Template Part" and contain all the relevant controls.

I'm working on designs for this at the moment and will hopefully have something to share soon :)

Here's an initial take on this:

The isolated editing view can be accessed from two locations:

1. The "Template Parts" section of the Sidebar Menu in the Site Editor
2. The ellipsis menu in the Template Part (and possibly Reusable Block) toolbar, as seen in the video

Once in isolation mode, the UI around the Template Part adapts in a number of ways:

1. In the Inspector, the "Block" tab from template editing view becomes a "Template Part" tab, akin to the Post / Page / Template tab, and the controls are migrated accordingly. This is potentially something we can expand upon in the future.
2. The Top Bar indicates that the Header is being edited.
3. A "< Back" button is revealed on the canvas which when clicked returns the user to the referring context
4. The Template Part is inset on the canvas, clearly indicating its boundaries
5. An input on the border of the Template Part allows users to test how it behaves at specific widths
6. A drag handle provides a looser equivalent of the above for quick-checks
7. A "Custom" option is added to the view options. This could even be something we bring to post and template editing in the future.

Thoughts and feedback:

• Do we need a cancel button along with the <Back button, so that folks can return to the thing they were editing and discard any changes to the Template Part?
• I based the drag handle styling on the block toolbar. Totally open to other suggestions there.
• Likewise the width input is a g2 unitinput, which hasn't been merged yet. So we may need a standard input in lieu of that.

Noticing a few other designs building around the concepts shared here. Might be time to assemble a draft PR since there hasn't been much design feedback.

Probably worth considering the part patterns will play in this environment, particularly some of the ideas we explored in #28737 (comment).

Edit: Also whether one might access isolated tp editing via the new persistent list view.

Also whether one might access isolated tp editing via the new persistent list view.

We could potentially include an action on the row to enable this: