UI: Add a fullscreen mode #9567

youknowriad · 2018-09-03T10:30:11Z

This PR is the second part of #9334 and adds a fullscreen mode.
The CSS contains some "hacks" to allow switching modes without refreshing the page but I think it's fine.

youknowriad · 2018-09-03T10:30:41Z

edit-post/assets/stylesheets/_mixins.scss

@@ -272,6 +272,10 @@
 			margin-left: -18px;
 		}
 	}
+
+	body.is-fullscreen-mode #{$selector} {
+		left: 0 !important;


I've used important to avoid overriding all the difference use-case above. It just seemed right :)

kjellr · 2018-09-03T14:57:55Z

This is looking awesome — I really like how fullscreen feels.

While using this, I clicked the x and expected it to just turn off full screen. 😄 Considering I should've known what to expect here, that seems like a good indication that we should make that button clearer. Maybe we should use the "close" button in the upper left, instead of the x icon:

I'm interested to hear what others think.

youknowriad · 2018-09-03T15:08:29Z

While using this, I clicked the x and expected it to just turn off full screen. 😄 Considering I should've known what to expect here, that seems like a good indication that we should make that button clearer.

I agree it's not perfect, but the current behavior is very similar to the customizer which is already a familiar fullscreen page for WordPressers

youknowriad · 2018-09-03T15:08:37Z

Damn buttons :P

karmatosed · 2018-09-03T17:30:15Z

This is so good! I am very excited for this and thank you everyone that has worked on this and pushed it along ✨

jasmussen · 2018-09-04T07:45:27Z

Nice work, this is working better than I would've expected, actually. GIF:

The X for close is working well, and is used in other places as well. It's a bit curious, because it feels very right to palace the X on the left here. But in other places, we place it on the right. Is this an inconsistency we want to look at? If yes, I think I'd prefer using a plain "Close" button rather than moving the X to the right, simply because because "More" menus should always be rightmost as they are to indicate "overflow" of buttons to the left of it, in an LTR reading direction.

I suppose an exception could be made, but I'm not sure if it would look weird with the sidebar close button being stacked below. Though we could decide to hide the sidebar close button on the desktop breakpoint, since when it's a sidebar it's easily toggled using the cog.

The "back to where you were" isn't working quite as well as I thought it would. I think it might work better if it always took you to the same place — like the posts list.

If the "Add new post" button in the toolbar was the primary interface (or only) for creating new posts, "back to where you were" would probably work better.

youknowriad · 2018-09-04T07:59:05Z

The "back to where you were" isn't working quite as well as I thought it would. I think it might work better if it always took you to the same place — like the posts list.

I updated this as suggested.

afercia · 2018-09-04T16:16:06Z

edit-post/assets/stylesheets/main.scss

@@ -105,11 +105,19 @@ body.gutenberg-editor-page {
 		bottom: 0;
 		left: 0;
 		min-height: calc(100vh - #{ $admin-bar-height-big });
+
+		body.is-fullscreen-mode & {
+			min-height: calc(100vh);


is calc() necessary in this case?

afercia · 2018-09-04T16:16:20Z

edit-post/assets/stylesheets/main.scss

 	}

 	// The WP header height changes at this breakpoint
 	@include break-medium {
 		min-height: calc(100vh - #{ $admin-bar-height });
+
+		body.is-fullscreen-mode & {
+			min-height: calc(100vh);


is calc() necessary in this case?

afercia · 2018-09-04T16:19:35Z

edit-post/components/header/fullscreen-mode-close/index.js

+			<IconButton
+				icon="no-alt"
+				href={ addQueryArgs( 'edit.php', { post_type: postType } ) }
+				label={ __( 'Close' ) }


Since this button is a link, and communicated as such to assistive technologies users, I'd rather consider to use a label that communicates the link destination instead of an action like "Close", which is more appropriate for buttons. RIght now, the link navigates back to the posts list, and it should communicate that 🙂

I just used the same label as the customizer originally but yeah it's fine to update. I guess something like Back to post list or something would work?

It would work for me 👍 Yeah... I know about the Customizer link 🙈

afercia · 2018-09-04T16:26:58Z

Nice job, also from an a11y perspective (but please see the comment about the "Close" link):

the main H1 is preserved, and the headings hierarchy is correct
the ARIA landmarks are preserved
the Ctrl+backtick shortcut to navigate the main regions works
the Tab sequence makes sense and there are no hidden tab stops

🎉

afercia · 2018-09-04T16:36:44Z

And with the sidebar closed, it looks really nice! Visually, loving it 😍

Have you considered to add a keyboard shortcut to toggle fullscreen mode? (yeah, new challenge to find a non-conflicting shortcut!)

youknowriad · 2018-09-05T09:51:52Z

I decided to use the view_items post type label for this button as it seemed the most appropriate label.

jasmussen

Technically this seems to be working very solidly.

There seems to be wide agreement among the reviewers here that this has value and should be tested. I happen to agree with that.

It also adds value to laptops that have limited screen real estate, like 11 inch laptops, presumably tablets as well. As such, I think we should get this in and iterate.

mtias · 2018-09-06T12:33:50Z

Love this, thanks for the quick implementation!

ktmn · 2018-09-06T13:36:27Z

This is the best thing ever, thanks for making it!

SNaushadS · 2018-09-12T16:05:25Z

Thank you for all who worked on getting this done, I needed it badly.

I have some feedback on exiting/closing the fullscreen mode.

TLDR: X at the top left gave the affordance that i can get Out of the Full Screen mode. It should either close the mode or be removed.

What did i do:

Clicked on the hamburger menu.
Clicked on Full Screen mode.
Full Screen Mode was now active, Awesome. It’s spacious and helps me focus on writing.
Then i wanted to get Out of the fullscreen mode. So i tried to find the way out.
Found the X at the top left and clicked on it.

My expectation: It should’ve got me out of fullscreen mode.
4. Instead i was provided warning by the browser if i want to Stay or Leave. Doesn’t match with user expectation.
as already observed by @kjellr
5. Then i tried to find out the “designed” way to close/exit Fullscreen Mode

Also, the mouse travel from left edge to right edge is a bit painful.
6. Fullscreen had a right tick next to it, clicked it and i was out of the fullscreen mode.

Comments

Fullscreen behavior is typically that of a Modal.
Hence the general expectation would be that the X either on the top-right or top-left would close/exit/take user out of the Mode.

Suggestions:
Let

The X could either allow user to exit the fullscreen mode (as per general interaction expectations)
Or be removed and let user exit the mode only from hamburger menu by unticking.

Let me know how further i can help.

As per comments in #9567. The `x` icon to close the editor while in fullscreen mode could be misconstrued as a button for exiting out of full screen mode. Since the button actually takes you back to the All Posts screen, a back arrow may make more sense here.

aduth · 2018-09-12T17:31:40Z

To @SNaushadS 's feedback, there's an iteration being proposed / discussed in #9838

ktmn · 2018-09-14T05:38:03Z

Looks like wp.components.Modal has a bug in fullscreen mode.

Above is the modal in normal mode. Below is the modal in fullscreen mode and the CSS rule causing it.

jasmussen · 2018-09-14T10:06:39Z

@ktmn good catch. I will take a look — I need to look at the fullscreen mode regardless as when an editor style applies a colored background, a bottom padding offsets this.

jasmussen · 2018-09-19T07:36:29Z

The issue you reported, @ktmn, will be fixed either by #9973 or #9900. They both address it.

As per comments in #9567. The `x` icon to close the editor while in fullscreen mode could be misconstrued as a button for closing full screen mode. Since the button actually takes you back to the All Posts screen, an exit icon makes more sense here.

youknowriad added General Interface Parts of the UI which don't fall neatly under other labels. Needs Design Feedback Needs general design feedback. labels Sep 3, 2018

youknowriad self-assigned this Sep 3, 2018

youknowriad requested review from karmatosed, mtias, kjellr, jasmussen and a team September 3, 2018 10:30

youknowriad commented Sep 3, 2018

View reviewed changes

youknowriad closed this Sep 3, 2018

youknowriad reopened this Sep 3, 2018

afercia reviewed Sep 4, 2018

View reviewed changes

youknowriad added 4 commits September 5, 2018 10:40

UI: Add a fullscreen mode

c3e6f51

Consistent return URL

62f5676

Remove unneccessary calc call

04e5acf

Use the view_items label instead of a generic Close

e810396

youknowriad force-pushed the add/fullscreen-mode branch from 3b49a34 to e810396 Compare September 5, 2018 09:51

jasmussen approved these changes Sep 5, 2018

View reviewed changes

Fix small phpcs issues

b4252a2

youknowriad merged commit 93f1f22 into master Sep 5, 2018

youknowriad deleted the add/fullscreen-mode branch September 5, 2018 10:18

kjellr mentioned this pull request Sep 12, 2018

Replace the fullscreen "x" icon with a back arrow #9838

Merged

designsimply mentioned this pull request Sep 12, 2018

"Fullscreen Mode" feature #5145

Closed

afercia mentioned this pull request Sep 26, 2018

If no JavaScript is available Gutenberg is returning a blank white page #2719

Closed

This was referenced Oct 31, 2018

Can't scroll WP menu when in editor #9996

Closed

Remove sticky-menu class preventing full admin page scroll #11308

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Add a fullscreen mode #9567

UI: Add a fullscreen mode #9567

youknowriad commented Sep 3, 2018

youknowriad Sep 3, 2018

kjellr commented Sep 3, 2018

youknowriad commented Sep 3, 2018

youknowriad commented Sep 3, 2018

karmatosed commented Sep 3, 2018

jasmussen commented Sep 4, 2018

youknowriad commented Sep 4, 2018

afercia Sep 4, 2018

afercia Sep 4, 2018

afercia Sep 4, 2018

youknowriad Sep 4, 2018

afercia Sep 4, 2018

afercia commented Sep 4, 2018

afercia commented Sep 4, 2018

youknowriad commented Sep 5, 2018

jasmussen left a comment

mtias commented Sep 6, 2018

ktmn commented Sep 6, 2018

SNaushadS commented Sep 12, 2018

aduth commented Sep 12, 2018

ktmn commented Sep 14, 2018

jasmussen commented Sep 14, 2018

jasmussen commented Sep 19, 2018

UI: Add a fullscreen mode #9567

UI: Add a fullscreen mode #9567

Conversation

youknowriad commented Sep 3, 2018

youknowriad Sep 3, 2018

Choose a reason for hiding this comment

kjellr commented Sep 3, 2018

youknowriad commented Sep 3, 2018

youknowriad commented Sep 3, 2018

karmatosed commented Sep 3, 2018

jasmussen commented Sep 4, 2018

youknowriad commented Sep 4, 2018

afercia Sep 4, 2018

Choose a reason for hiding this comment

afercia Sep 4, 2018

Choose a reason for hiding this comment

afercia Sep 4, 2018

Choose a reason for hiding this comment

youknowriad Sep 4, 2018

Choose a reason for hiding this comment

afercia Sep 4, 2018

Choose a reason for hiding this comment

afercia commented Sep 4, 2018

afercia commented Sep 4, 2018

youknowriad commented Sep 5, 2018

jasmussen left a comment

Choose a reason for hiding this comment

mtias commented Sep 6, 2018

ktmn commented Sep 6, 2018

SNaushadS commented Sep 12, 2018

aduth commented Sep 12, 2018

ktmn commented Sep 14, 2018

jasmussen commented Sep 14, 2018

jasmussen commented Sep 19, 2018