Fullscreen Mode: Change the "Back" button to toggle the sidebar #21121
Conversation
|
Size Change: +2.65 kB (0%) Total Size: 845 kB
ℹ️ View Unchanged
|
|
I want this and I want it now! <3 |
|
Moving this functionality to the top level is great. While it doesn't provide the top bar, it's still usable and surfaces the wp-admin navigation with ONE click. Great exploration! |
|
This is soooooo cool. |
|
This is awesome! It sure makes going into Full Screen mode a lot easier. Along with this PR let's also get a shortcut in place. #20626 |
|
A couple of things I could use help with:
I'm not sure how to go about implementing either of the above, but would love to learn. All tips, tricks, and commits welcomed. |
|
Testing out icons for bringing back the sidebar menu. Original. Grey W. White W. Grey W with vertical line. Grey W with dashes and vertical line. White W with dashes and vertical line. White W with dashes and vertical line 2. Grey W with horizontal dashes. |
|
This is an awesome idea, and well executed. Thank you @shaunandrews :-) Sorry, I can't help you with development but I wanted you to know that a lot of end users will be quite happy with this. |
|
Thanks for exploring this @shaunandrews. We should look at the centered logo a bit in the open state: it'd make sense to see if we can render the site title when it expands (and keep it hidden when collapsed) to balance it better. |
@shaunandrews Haii!! Great work on this update! I can certainly help you with these items :) re: Focus jump: To do this, we'll need to hook into some sort of
re: Closing menu when clicking outside This is often accomplished using 2 techniques:
When the menu is open, an "Overlay" (a transparent
This blocks interaction for anything underneath it, and allows you to easily attach an
This is the trickier, but often more preferrable, way to handle these interactions. What needs to be done is a
Hope this helps 🙏 Edit: Last thought! What do you think about closing when |
|
This is beautiful! This is also the desire after today's triage meeting in slack. |
|
Haiii!! I coordinated with @shaunandrews . 🤞 |
|
Heya @shaunandrews ! I have updates :). I've made some refactors and enhancements in a separate branch: (This branch was also rebased with latest You can see my changes here: (Because it's been rebased with TLDR:
Let me know what you think! If these changes are okay, I can rebase it into this branch. Note: I haven't done anything with Site Title yet.
We can do this. However, I'm not too sure what it may look like if the site title was longer. In the regular WP Admin, the "W" logo and title are separate from the menu, allowing longer titles to flow. Example:
I think a mockup of this would be helpful 😊 Thank you! |
shaunandrews
added
the
[Focus] Accessibility (a11y)
ItsJonQ
force-pushed
the
try/fullscreen-sidebar-toggle
branch
from
adb8046
to
960b204
Compare
Super cool, @ItsJonQ — thanks for your help on this. I'd love to see your branch merged into this one. One thing I'm still unsure about is the keyboard interaction. Having to press the down arrow to start navigating the wp-admin sidebar seems strange. If you look at how the inserter works, when you tab to it and select, the -- As for the site title, I like the idea in theory. But I'm not sure there's enough room for it with the current width of the menu. Here's what it would look like with a truncated site title:
We could change the width of the menu (only within the Editor context) to add some overall space, but I'd expect that to feel strange in use:
We could break the title down to its own line:
|
|
@shaunandrews Thanks for 🍐 'ing with me on this one! I just rebased my changes from my One thing we noticed was that the name of I renamed it to |
@shaunandrews Ah yes, the keyboard interactions are tricky for this one. I just pushed an update that focuses using Let me know how this feels :) |
|
Keyboard interaction feels good to me, but I found one small issue. If I move focus to the "W" and hit Enter, the wp-admin menu expands and my focus stays on the "W". This is expected. I can then move focus to the first item in the menu by hitting The one problem I found was going back. If try to do If I use the "Skip to toolbar" link, I'm not really taken to the "toolbar" because if I do a I would need to collapse the menu first, so that I'm now on the toolbar and can move to the inserter. |
|
This overlaps the top toolbar:
|
|
@shaunandrews I like this a lot but this would tie a navigation function to an icon that a lot of MSPs hide for business sites. So the question is...if this is hidden can we be assured of no side-effects? Will the icon that inherits that position now inherit the navigation logic? If you are going to do this, anchor it as a mandatory navigation element with a php API to replace it with a different icon / function. Even that would break on legacy sites who don't know about the new API. |
shaunandrews
force-pushed
the
try/fullscreen-sidebar-toggle
branch
from
a2f6fb0
to
edb8102
Compare
|
Rebased and fixed the display bug in Safari. |
|
The left menu doesn't scroll when in fullscreen mode on a small viewport:
The "fix" in non-fullscreen mode is to allow the HTML element to scroll, causing a double scrollbar on the right. Not an ideal fix, and would love ideas for making that better. |
|
I think we need to revert this one and continue working on it for a bit. There are aspects that need to be better handled for an adequate integration, otherwise states like this are possible:
|
|
Revert pull request at #21929 |
With the recent move to make Fullscreen mode the default, I've heard from many people that they expect to be able to toggle the WordPress sidebar menu by clicking on the WordPress logo in the top left. This PR tries that: