Responsive resizing controls allow for obscuring Site View sidebar

[getdave]

When working in the Site Editor it is possible to enter an editing mode which focuses on a particular entity (e.g. "Edit Template Part").

For example

• go to Patterns -> Template Parts -> Header
• you will now be in a editing mode which shows details of the template in the left hand "Site View" sidebar

In this view you can manually drag handles at the edges of the editor canvas to resize the "viewport" of the editor. Unfortunately it is possible to drag the canvas so that it obscures the side bar entirely

You can see this in this video (external link).

[t-hamano]

This appears to be the intended behavior implemented in #49910. The intent is to switch to editor mode by dragging the mouse beyond a certain threshold and releasing the mouse button.

dffb4aad9a6b84d3c5611ecd8f90b550.mp4

[getdave]

This appears to be the intended behavior implemented in #49910. The intent is to switch to editor mode by dragging the mouse beyond a certain threshold and releasing the mouse button.

dffb4aad9a6b84d3c5611ecd8f90b550.mp4

That's not how it's working in the video I linked above. It seems to allow him to expand it and leave it in place and nothing happens. I think that's a bug.

[t-hamano]

From the video, it seems like he considers the ability to expand the canvas to cover the sidebar to be a problem.

It seems to allow him to expand it and leave it in place and nothing happens.

This problem could not be reproduced with WP6.4 or the latest Gutenberg 🤔

[getdave]

This problem could not be reproduced with WP6.4 or the latest Gutenberg 🤔

@paaljoachim Are you still able to reproduce the Issue you reported?

[paaljoachim]

Retesting.
WP 6.4.1
Twenty Twenty Four (Trunk version) Removing to activate the current released version.

In the video I made it surprised me that I was able to drag the handle so far.
I see the intended behavior mentioned above by @t-hamano Aki.
Dragging the resize handles beyond a certain point will hide the sidebar.

Let's say that I just want a smaller sidebar area. As it is fairly wide today.
Dragging to have a smaller left sidebar does not work. As it will snap back into place.
Dragging too far making the sidebar even smaller will hide the sidebar and bring one into the canvas view without the sidebar present.

Intended behavior for the drag handle as I experience it is:

• Dragging the handle to the right. One will be able to see what the content looks like in Desktop, Tablet and Mobile views.
• Dragging the handle to the left and dropping before a predefined area it will snap back into place.
• Dragging the handle to the left and dropping after the predefined area the sidebar will go away showing content in full view.

Using.the.drag.handles.mp4

What I would like to see is actually being able to have a way to make the sidebar smaller. Because as more information is added to the sidebar it could at one point be useful to edit in the main canvas area and still have the sidebar open showing the information. It could also be helpful to have an option to keep the sidebar open as it connects with other types of screens in the Design area. That is a discussion for another time.

Currently the drag handles do seem to work as intended.

[paaljoachim]

One more thing.
I am able to drag to the left beyond/outside the browser window.
Upon letting go of the mouse drag it then snaps into place.

[jasmussen]

Just coming back to this one, is it still relevant?

I think it can be valid to discuss a resize handle for the sidebar, but this is a feature I wouldn't build yet. There are still too many unknowns as to what needs to go in the sidebar on the left, and what its default size would be. If we end up with a pretty rigid layout where that sidebar on the left contains, for example, the full global styles, moved there instead of living inside the full view, then resizing might make those controls wrap or otherwise break. But it's come up, so it could be a separate discussion. But as for the bug reported here, is it stil reproducible?

[t-hamano]

I'm not clear on what is considered a bug in this issue, but at least the behavior below is not a bug, but rather the expected behavior at this point.

Dragging to have a smaller left sidebar does not work. As it will snap back into place.
Dragging too far making the sidebar even smaller will hide the sidebar and bring one into the canvas view without the sidebar present.

It might be a good idea to close this issue and submit an issue that aims to make the sidebar resizable as an "improvement".

[jasmussen]

Right, that's what I'm suggesting. So far I'm seeing expected behavior.

[paaljoachim]

@getdave
I will go ahead and close this issue for now. It can always be reopened.