Template part focus mode: ensure size of screen corresponds with content in the template part

[dianeco]

Description

When I try to build a header inside the template part, the small area makes it difficult to edit, especially when you have a thin header and choose to set the overlay menu to always or if you have a small screen (with List View and Settings sidebar opened) and the menu is displayed as a burger.

Also, I find it confusing not to see a block inserter (Type / to choose a block) inside the editor when creating a new template part. It isn't consistent with how you edit a template or a page.

Step-by-step reproduction instructions

1. Use the Twenty Twenty-Two theme.
2. Open Site editor > Template parts.
3. Click Add New to create a template part and choose Header as the area.
4. Click on the block inserter in the top toolbar and open the Patterns tab.
5. Select the Headers category and search for the pattern named "Title and button header". Click on it to insert it.
6. Select the row block and edit the top and bottom padding (20px) to make it thinner.
7. Click on the burger to edit the menu.
8. Observe that it's challenging to edit the menu as you can't see it at first. You have to scroll in a small area to edit it.

Screenshots, screen recording, code snippet

Small area to edit the header

No block insertor when creating a new template part

Environment info

WordPress 4.9 RC 1 with/without Gutenberg latest version installed (12.3.2)

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

[kathrynwp]

This was also reported by a forum user here:

https://wordpress.org/support/topic/extremely-narrow-available-space-when-creating-new-footer/

The extremely short editor space provided for new template parts makes it very hard to see what you're doing and manipulate blocks. Even if you add a block that's longer than the area, the editor remains so short that it requires scrolling. Here's one example:

template-part-editor.mov

To replicate:

• Go to Template Parts
• Insert a new Header or Footer template part and give it a name
• Insert a block like an Image

Result:

The editor is super short and you have to scroll to see the full block

Expected:

The editor should take up the full browser window and not be limited to something so short.

Tested with:

WordPress 6.1
Twenty Twenty-Two
No plugins active
Firefox 106.0.2

[annezazu]

Updated the title of this issue to better reflect the problem! Noting that this was also found as part of the nineteenth call for testing for the FSE Outreach Program:

Going back to the Home template. Selecting Header. Clicking Edit in the Header toolbar. Clicking the Nav block. As I have a submenu there it just partly shows the submenu items. The area feels cramped too small. It could possibly also show a semi transparent content located below the header to gain some perspective on how the Header fits in with the content just below it.

Attached is a video:

isolated.template.part.mode.mov

[scruffian]

This was fixed by #72013