Fullscreen Mode: Change W button to toggle wp-admin sidebar #22191

shaunandrews · 2020-05-07T20:45:51Z

This is a second attempt; The first (and a lot more background info) is #21121.

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:

MichaelArestad · 2020-05-07T21:06:07Z

Using this feels solid. I only have minor feedback:

In Chromium (Chrome and Edge Mac), I noticed there is an outline style around the W when clicked. It does not show up in Firefox. It made me think I had to click within the blue border to close it.

The other minor weirdness is around the speed of it closing. When I click in to the editor, it closes automatically, which is great. It does feel like it takes a touch too long. The timing might be good to explore in a future issue/PR (not this one).

talldan · 2020-05-08T04:06:16Z

I couldn't see a linked issue, and #22178 was reported, so I've linked this PR as closing that issue.

github-actions · 2020-05-08T14:41:26Z

Size Change: +11.9 kB (1%)

Total Size: 1.12 MB

Filename	Size	Change
`build/annotations/index.js`	3.62 kB	+3 B (0%)
`build/block-directory/index.js`	6.48 kB	-1 B
`build/block-editor/index.js`	106 kB	-1 B
`build/block-library/editor-rtl.css`	7.87 kB	+264 B (3%)
`build/block-library/editor.css`	7.88 kB	+265 B (3%)
`build/block-library/index.js`	125 kB	+6.84 kB (5%)	🔍
`build/blocks/index.js`	48.2 kB	+36 B (0%)
`build/components/index.js`	190 kB	-2 B (0%)
`build/data/index.js`	8.43 kB	+1 B
`build/deprecated/index.js`	772 B	+1 B
`build/edit-navigation/index.js`	8.06 kB	+176 B (2%)
`build/edit-post/index.js`	303 kB	+672 B (0%)
`build/edit-post/style-rtl.css`	5.73 kB	+299 B (5%)	🔍
`build/edit-post/style.css`	5.73 kB	+298 B (5%)	🔍
`build/edit-site/index.js`	14.6 kB	+478 B (3%)
`build/edit-site/style-rtl.css`	3.27 kB	+314 B (9%)	🔍
`build/edit-site/style.css`	3.27 kB	+310 B (9%)	🔍
`build/edit-widgets/index.js`	9.93 kB	+1.05 kB (10%)	⚠️
`build/edit-widgets/style-rtl.css`	2.88 kB	+476 B (16%)	⚠️
`build/edit-widgets/style.css`	2.88 kB	+475 B (16%)	⚠️
`build/editor/index.js`	44.6 kB	+1 B
`build/element/index.js`	4.64 kB	-1 B
`build/format-library/index.js`	7.71 kB	-1 B
`build/i18n/index.js`	3.56 kB	+1 B
`build/is-shallow-equal/index.js`	710 B	-1 B
`build/keyboard-shortcuts/index.js`	2.51 kB	-2 B (0%)
`build/media-utils/index.js`	5.29 kB	+1 B
`build/plugins/index.js`	2.56 kB	-3 B (0%)
`build/priority-queue/index.js`	788 B	-1 B
`build/redux-routine/index.js`	2.85 kB	-2 B (0%)
`build/rich-text/index.js`	14.8 kB	-1 B
`build/shortcode/index.js`	1.69 kB	-1 B
`build/token-list/index.js`	1.28 kB	-1 B
`build/viewport/index.js`	1.84 kB	-2 B (0%)
`build/warning/index.js`	1.14 kB	+1 B

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/api-fetch/index.js`	3.4 kB	0 B
`build/autop/index.js`	2.83 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/style-rtl.css`	787 B	0 B
`build/block-directory/style.css`	787 B	0 B
`build/block-editor/style-rtl.css`	11.3 kB	0 B
`build/block-editor/style.css`	11.3 kB	0 B
`build/block-library/style-rtl.css`	7.68 kB	0 B
`build/block-library/style.css`	7.68 kB	0 B
`build/block-library/theme-rtl.css`	684 B	0 B
`build/block-library/theme.css`	686 B	0 B
`build/block-serialization-default-parser/index.js`	1.88 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/components/style-rtl.css`	19.5 kB	0 B
`build/components/style.css`	19.5 kB	0 B
`build/compose/index.js`	9.32 kB	0 B
`build/core-data/index.js`	11.4 kB	0 B
`build/data-controls/index.js`	1.29 kB	0 B
`build/date/index.js`	5.47 kB	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	3.11 kB	0 B
`build/edit-navigation/style-rtl.css`	857 B	0 B
`build/edit-navigation/style.css`	856 B	0 B
`build/editor/editor-styles-rtl.css`	425 B	0 B
`build/editor/editor-styles.css`	428 B	0 B
`build/editor/style-rtl.css`	4.26 kB	0 B
`build/editor/style.css`	4.27 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/style-rtl.css`	502 B	0 B
`build/format-library/style.css`	502 B	0 B
`build/hooks/index.js`	2.13 kB	0 B
`build/html-entities/index.js`	622 B	0 B
`build/keycodes/index.js`	1.94 kB	0 B
`build/list-reusable-blocks/index.js`	3.12 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/notices/index.js`	1.79 kB	0 B
`build/nux/index.js`	3.4 kB	0 B
`build/nux/style-rtl.css`	616 B	0 B
`build/nux/style.css`	613 B	0 B
`build/primitives/index.js`	1.5 kB	0 B
`build/server-side-render/index.js`	2.68 kB	0 B
`build/url/index.js`	4.02 kB	0 B
`build/wordcount/index.js`	1.17 kB	0 B

_{compressed-size-action}

youknowriad · 2020-05-08T14:55:13Z

Seems like there's a coupe bugs here

The safari issue is back (white space)

I think this state was one of the reasons the revert was suggested, should we hide the "Collapse menu" button on Fullscreen?

Also from that state, when you click the "w" again, you get this.

I think one of the other reasons, the revert was suggested was whether the "W" should be centered or not when the panel is open and potentially add the site title there? cc @mtias

shaunandrews · 2020-05-08T15:03:03Z

Thanks @youknowriad — some of these I knew, some I didn't.

I think one of the other reasons, the revert was suggested was whether the "W" should be centered or not when the panel is open and potentially add the site title there?

I don't have a strong preference on the centering, but I also haven't heard it brought up before.

Adding a site title was explored, but I still think its best left for another PR so we can figure out a good way to displaying titles without aggressive truncation.

There was mention of having to integrate the wp-admin color schemes to the W button, and the lack of a selected state for the button. I'm still working on both of those.

jasmussen · 2020-05-11T07:22:55Z

Thanks for your endurance, Shaun.

It feels very important to me that users can middle-click to open in a new tab on the logo. For people who do this, they expect to be able to, and when they can't, it can erode a bit of trust. In the before-times, we would keep the <a href="..."> intact, to make this work, but add an onclick handler with a return false to stop the URL navigation.

The focus style doesn't meet contrast ratio. You could either do the double-shot version we have in master, or change the focus style to be white there.

I'm happy to see you were able to get the sidebar scrolling on short viewports, or admins with a lot of menu items:

It's unfortunate that we still have to have the double-scrollbar on the right to make this happen; the fact that we got rid of that double scrollbar with fullscreen was my personal favorite feature of that. But at least now it's consistent with non-fullscreen. If your neurons can think up a way to make the left navigation rail scroll independantly, as a separate PR to this, I would buy you a milkshake. No, make that two milkshakes.

shaunandrews · 2020-05-13T20:12:59Z

It feels very important to me that users can middle-click to open in a new tab on the logo.

I haven't forgotten about this; Next on my list here.

The focus style doesn't meet contrast ratio. You could either do the double-shot version we have in master, or change the focus style to be white there.

I added a second, white border similar to what master does.

It's unfortunate that we still have to have the double-scrollbar on the right to make this happen; the fact that we got rid of that double scrollbar with fullscreen was my personal favorite feature of that.

I pushed a (hopeful) fix for this; Basically, I forced overflow: hidden; when full screen mode is enabled, and the sidebar is hidden. This feels like a better experience, in that you'd only see the double-scrollbar when you've toggled the sidebar. Let me know what you think, @jasmussen

--

I managed to update the colors to respect the wp-admin color scheme settings, which required adding two new values to the base-styles package.

--

I'm also still considering wether the "folded" or "collapsed" mode of the sidebar makes sense in this context.

jasmussen · 2020-05-14T08:15:59Z

I added a second, white border similar to what master does.

I think we should try just the white, this feels a little heavy:

There's also a $border-width-focus you can use so it's consistent with all other focus, instead of the 4px picked here:

I also wonder whether it's actually nice for the focus to encompass the entire button rather than try to frame just the logo. Like so:

That should translate to this:

    box-shadow: inset 0 0 0 $border-width-focus #23282e, inset 0 0 0 #{ $border-width-focus + $border-width } $white;

I noticed a weird focus trap of sorts, though:

In short, the tabbing context changes depending on whether the menu is open or not. If the menu is closed, you tab the top menu. If the menu is open, you tab through the menu. Both these seem fine, the problem is I can't shift tab backwards from the menu into the logo anymore. Not sure what the best practice is here.

I pushed a (hopeful) fix for this; Basically, I forced overflow: hidden; when full screen mode is enabled, and the sidebar is hidden. This feels like a better experience, in that you'd only see the double-scrollbar when you've toggled the sidebar. Let me know what you think, @jasmussen

This seems to work as intended!

Still not ideal, but I don't think it can ever become ideal until we are able to touch the left navigation side rail directly.

And that, I think, actually the biggest challenge here — it's bridging old and new, and the edgecases that pop up, including what you mention about folded cases and such, are really really difficult to address in a good way. I'm impressed that you're tackling it head-on!

ItsJonQ · 2020-05-15T18:45:33Z

👋 Haiii!! I can help out with the JS/interaction side of things :)

@jasmussen Feedback/questions for you!

It feels very important to me that users can middle-click to open in a new tab on the logo...

Gotcha. So allow for the W logo to work like a link.
It's currently a <button /> element. We can change it to a link.
If we do, what should the URL be?

For example, when I edit a post, the URL is:

http://localhost:8889/wp-admin/post.php?post=1080&action=edit

...I can't shift tab backwards from the menu into the logo anymore...

We can accommodate this. Just a heads up, the solution will be hacky. It's already quite hacky, but it'll be hackier. There isn't a way around this as the (React) AdminMenuToggle component is doing things in non-React wp-admin land.

Thanks!

jasmussen · 2020-05-19T07:13:05Z

If we do, what should the URL be?

I would use the same heuristic as we have today, it has felt natural for me for the duration of using fullscreen. I'm not 100% on what that heuristic is, I think it's posts when you edit posts, pages when you edit pages, and probably cpts work as well. So to an extent, I think of this more as "restoring the current behavior".

We can accommodate this. Just a heads up, the solution will be hacky. It's already quite hacky, but it'll be hackier. There isn't a way around this as the (React) AdminMenuToggle component is doing things in non-React wp-admin land.

Let's be liberal with code comments, and let's also take notes for how we could do this better. I hope that we'll sooner rather than later be able to revisit the actual side navigation rail to improve things there, and if/when we do it would be good to know what to refactor to make things better.

vindl · 2020-05-19T15:19:45Z

packages/edit-site/src/components/editor/index.js

@@ -92,6 +97,9 @@ function Editor( { settings: _settings } ) {
 		<>
 			<EditorStyles styles={ settings.styles } />
 			<FullscreenMode isActive={ isFullscreenActive } />
+			<MainDashboardButton.Slot>


I tried testing this with instructions from #22323 to verify if extensibility of the close button, and it doesn't seem to work anymore. The default button is not replaced.

I'm not sure what's causing this, and whether it's somehow related to moving this outside of editor skeleton. FWIW I don't think that it should be moved out of this area. With this setup it seems that everyone who's aiming to provide a custom button, will also have to provide styles to position it properly on top of the header, and I think that will be prone to breakage over time.

ItsJonQ · 2020-05-19T17:14:02Z

@jasmussen + @shaunandrews Haiii!

I just pushed some updates that handles the 2 enhanced interactions:

Middle clicking (or ctrl/cmd + click) the (W) logo to open the in a new tab
Pressing Shift+Tab on the first WP Admin menu item to jump focus back to the Gutenberg toolbar (W) logo.

I've added a bunch of comments that describe how it works, and acknowledging that it's perhaps not the best 😅

Let me know how it feels!

ItsJonQ · 2020-05-19T17:20:43Z

Oo! Pushed another update. This one updates the (Tooltip) label of the AdminMenuToggle (W) link to say "Show" / "Hide" depending on the open state.

Previously, it always said "Show"

shaunandrews · 2020-05-20T17:28:17Z

@ItsJonQ Love the updates; Thanks!

My only bit of feedback is that the href should point to edit.php with addQueryArgs for the current document's post_type, like the old close button used to do:

https://github.com/WordPress/gutenberg/pull/22191/files#diff-5e54b8ed48d99cb46a591a186b9ad138L37

I tried this locally, but for some reason I'm getting undefined for the postType.slug.

ItsJonQ · 2020-05-20T17:30:28Z

@shaunandrews Thank you! I'm happy to change the URL of the href. I couldn't find it from the link you shared. Would you happen to have the code example to get that edit.php based URL from the old Button?

Thank you!

shaunandrews · 2020-05-20T17:33:11Z

Sorry, the link highlights a deleted file. Its strange. I copy/pasted the old button code:

 	const { isActive, postType } = useSelect( ( select ) => {
 		const { getCurrentPostType } = select( 'core/editor' );
 		const { isFeatureActive } = select( 'core/edit-post' );
 		const { getPostType } = select( 'core' );

 		return {
 			isActive: isFeatureActive( 'fullscreenMode' ),
 			postType: getPostType( getCurrentPostType() ),
 		};
 	}, [] );

 	if ( ! isActive || ! postType ) {
 		return null;
 	}

 	return (
 		<Button
 			className="edit-post-fullscreen-mode-close"
 			icon={ wordpress }
 			iconSize={ 36 }
 			href={ addQueryArgs( 'edit.php', {
 				post_type: postType.slug,
 			} ) }
 			label={ get( postType, [ 'labels', 'view_items' ], __( 'Back' ) ) }
 		/>
 	);
 }```

ItsJonQ · 2020-05-20T17:51:07Z

@shaunandrews Awesome! Thank you! I'll give it a shot

ItsJonQ · 2020-05-20T18:00:14Z

@shaunandrews I just pushed up a change. It looks like it's working for me 😊 . Would you be able to let me know?

(Also. I'll fix up that merge conflict)

…ayout.

shaunandrews · 2020-05-20T18:07:38Z

It looks like it's working for me

That's cause you did it a way better way than my failed attempt. Its working as expected now.

--

Something changed with the tab behavior; I can no longer use the keyboard to tab into the sidebar menu.

ItsJonQ · 2020-05-20T18:14:17Z

Something changed with the tab behavior; I can no longer use the keyboard to tab into the sidebar menu.

Ah yes, my bad! I broke the HTML element reference. I just pushed that fix, along with rebase with master.

paaljoachim · 2020-05-30T08:23:36Z

Hey @shaunandrews and others can we get an update to how this PR is coming along.

Can we look at the possibility of getting this and associated issue/s into WordPress 5.5?
Thanks.

Have a great weekend!

ItsJonQ · 2020-06-01T20:29:44Z

Hmm! Looks like it has conflicts again. Will help resolve

packages/interface/src/components/admin-menu-toggle/index.js

mtias · 2020-06-04T14:12:31Z

I want to sit on this one a bit more before we commit to adding it in time for 5.5. The main issue I see is in the case we are looking for the W menu to open page list / template list in the context of FSE or the page editor, and how it might end up being disruptive if we change the behaviour version to version.

shaunandrews · 2020-06-22T16:33:39Z

Closing this for now.

shaunandrews requested review from ajitbohra, nerrad, ntwb and talldan as code owners May 7, 2020 20:45

shaunandrews self-assigned this May 7, 2020

talldan mentioned this pull request May 8, 2020

Usability: Full screen editor makes side and top bar hard to access #22178

Open

shaunandrews force-pushed the try/fullscreen-sidebar-toggle-2 branch from 89f63a4 to d124acc Compare May 8, 2020 14:35

mapk mentioned this pull request May 9, 2020

Rethinking the "Current Document" display and settings #20877

Closed

mapk mentioned this pull request May 11, 2020

Site navigation when full site editing #19204

Closed

shaunandrews force-pushed the try/fullscreen-sidebar-toggle-2 branch from 990422a to 5c749db Compare May 15, 2020 17:24

shaunandrews requested a review from youknowriad as a code owner May 15, 2020 17:24

shaunandrews requested a review from vindl May 18, 2020 15:31

vindl reviewed May 19, 2020

View reviewed changes

shaunandrews added 7 commits May 20, 2020 14:00

Hide the body's scrollbar until the admin menu is shown.

7dfd0b0

Adding a new color to the base-styles for the sidebar color.

6e04db8

Adding a sidebarText value to the base-styles package.

b9e261b

Implementing the color schemes, and simplifying the focus state.

554847e

Moving __experimentalMainDashboardButton from the skeleton into the l…

cc0634b

…ayout.

Change focus outline to use variable and simplier shadow.

a31863e

Hide the submenus without affecting the height of the sidebar.

3761c30

shaunandrews and others added 6 commits May 20, 2020 14:08

First pass at adding the adminMenuToggle to the site editor.

d707c01

Opens admin/post page in new tab if middle click or ctrl/cmd + click

aa94e0f

Jump focus from WP-Admin menu back to Gutenberg toolbar on shift+tab

e703d2f

Update AdminMenuToggle to display show/hide based on menu open state

79eb3ad

Fix AdminMenuToggle link to post.php

ef2c284

Fix ref to buttonNode for click events

69825e4

ItsJonQ force-pushed the try/fullscreen-sidebar-toggle-2 branch from be9908c to 69825e4 Compare May 20, 2020 18:13

Merge branch 'master' into try/fullscreen-sidebar-toggle-2

744e547

moorscode reviewed Jun 2, 2020

View reviewed changes

packages/interface/src/components/admin-menu-toggle/index.js Outdated Show resolved Hide resolved

Update show/hide navigation label

f35569a

folletto mentioned this pull request Jun 3, 2020

Iterations on W icon in the editor header #20929

Closed

2 tasks

jeffpaul mentioned this pull request Jun 12, 2020

Distributor admin bar menu unavailable in Gutenberg fullscreen mode (current WP default) 10up/distributor#597

Closed

yansern mentioned this pull request Jun 12, 2020

Hamburger button overlapping block inserter button on post editor on wp-admin. Automattic/wp-calypso#40426

Closed

youknowriad closed this Jun 23, 2020

youknowriad deleted the try/fullscreen-sidebar-toggle-2 branch June 23, 2020 09:00

mtias mentioned this pull request Dec 24, 2020

Fullscreen mode: clicking the WP icon should toggle the admin menu #27882

Closed

mtias mentioned this pull request Mar 3, 2021

Header: What does the WP icon means? #29509

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fullscreen Mode: Change W button to toggle wp-admin sidebar #22191

Fullscreen Mode: Change W button to toggle wp-admin sidebar #22191

shaunandrews commented May 7, 2020 •

edited by talldan

Loading

MichaelArestad commented May 7, 2020 •

edited

Loading

talldan commented May 8, 2020

github-actions bot commented May 8, 2020 •

edited

Loading

youknowriad commented May 8, 2020 •

edited

Loading

shaunandrews commented May 8, 2020

jasmussen commented May 11, 2020

shaunandrews commented May 13, 2020 •

edited

Loading

jasmussen commented May 14, 2020

ItsJonQ commented May 15, 2020

jasmussen commented May 19, 2020

vindl May 19, 2020

ItsJonQ commented May 19, 2020

ItsJonQ commented May 19, 2020

shaunandrews commented May 20, 2020

ItsJonQ commented May 20, 2020

shaunandrews commented May 20, 2020

ItsJonQ commented May 20, 2020

ItsJonQ commented May 20, 2020

shaunandrews commented May 20, 2020 •

edited

Loading

ItsJonQ commented May 20, 2020

paaljoachim commented May 30, 2020 •

edited

Loading

ItsJonQ commented Jun 1, 2020

mtias commented Jun 4, 2020

shaunandrews commented Jun 22, 2020

Fullscreen Mode: Change W button to toggle wp-admin sidebar #22191

Fullscreen Mode: Change W button to toggle wp-admin sidebar #22191

Conversation

shaunandrews commented May 7, 2020 • edited by talldan Loading

MichaelArestad commented May 7, 2020 • edited Loading

talldan commented May 8, 2020

github-actions bot commented May 8, 2020 • edited Loading

youknowriad commented May 8, 2020 • edited Loading

shaunandrews commented May 8, 2020

jasmussen commented May 11, 2020

shaunandrews commented May 13, 2020 • edited Loading

jasmussen commented May 14, 2020

ItsJonQ commented May 15, 2020

jasmussen commented May 19, 2020

vindl May 19, 2020

Choose a reason for hiding this comment

ItsJonQ commented May 19, 2020

ItsJonQ commented May 19, 2020

shaunandrews commented May 20, 2020

ItsJonQ commented May 20, 2020

shaunandrews commented May 20, 2020

ItsJonQ commented May 20, 2020

ItsJonQ commented May 20, 2020

shaunandrews commented May 20, 2020 • edited Loading

ItsJonQ commented May 20, 2020

paaljoachim commented May 30, 2020 • edited Loading

ItsJonQ commented Jun 1, 2020

mtias commented Jun 4, 2020

shaunandrews commented Jun 22, 2020

shaunandrews commented May 7, 2020 •

edited by talldan

Loading

MichaelArestad commented May 7, 2020 •

edited

Loading

github-actions bot commented May 8, 2020 •

edited

Loading

youknowriad commented May 8, 2020 •

edited

Loading

shaunandrews commented May 13, 2020 •

edited

Loading

shaunandrews commented May 20, 2020 •

edited

Loading

paaljoachim commented May 30, 2020 •

edited

Loading