Try: Make site editor responsive. #26021

jasmussen · 2020-10-12T10:02:13Z

The site editor is currently not usable on mobile:

This PR does a number of things to improve that:

It fixes the white screen issue
It hides pinned items entirely on mobile — these modal toggles are available in the More Options menu.
It collapses the label, so it says "Update" instead of "Update Design", on mobile.
It hides the same undo/redo/tools/block selector buttons on the site editor, that are hidden on the post editor.

This improves things a fair bit:

I wouldn't call this the end of the road, there's a great deal of polish that reains possible:

The centered controls which are still in a design flux, probably shouldn't be optimized until we know how they will look like.
There's some component usage that is treated differently based on post vs. site editor, this could be reduced and simplified.

But for now, this is a decent start.

jasmussen · 2020-10-12T10:02:51Z

This addresses feedback from #25134 (comment).

github-actions · 2020-10-12T10:12:02Z

Size Change: +65 B (0%)

Total Size: 1.21 MB

Filename	Size	Change
`build/edit-site/index.js`	22.5 kB	+4 B (0%)
`build/edit-site/style-rtl.css`	3.91 kB	+32 B (0%)
`build/edit-site/style.css`	3.91 kB	+32 B (0%)
`build/edit-widgets/style-rtl.css`	3.12 kB	-2 B (0%)
`build/edit-widgets/style.css`	3.12 kB	-1 B

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.78 kB	0 B
`build/api-fetch/index.js`	3.45 kB	0 B
`build/autop/index.js`	2.84 kB	0 B
`build/blob/index.js`	665 B	0 B
`build/block-directory/index.js`	8.72 kB	0 B
`build/block-directory/style-rtl.css`	943 B	0 B
`build/block-directory/style.css`	942 B	0 B
`build/block-editor/index.js`	132 kB	0 B
`build/block-editor/style-rtl.css`	11.1 kB	0 B
`build/block-editor/style.css`	11.1 kB	0 B
`build/block-library/editor-rtl.css`	9.01 kB	0 B
`build/block-library/editor.css`	9.01 kB	0 B
`build/block-library/index.js`	146 kB	0 B
`build/block-library/style-rtl.css`	7.9 kB	0 B
`build/block-library/style.css`	7.89 kB	0 B
`build/block-library/theme-rtl.css`	792 B	0 B
`build/block-library/theme.css`	793 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/blocks/index.js`	48.1 kB	0 B
`build/components/index.js`	172 kB	0 B
`build/components/style-rtl.css`	15.3 kB	0 B
`build/components/style.css`	15.2 kB	0 B
`build/compose/index.js`	9.81 kB	0 B
`build/core-data/index.js`	12.5 kB	0 B
`build/data-controls/index.js`	772 B	0 B
`build/data/index.js`	8.77 kB	0 B
`build/date/index.js`	31.8 kB	0 B
`build/deprecated/index.js`	768 B	0 B
`build/dom-ready/index.js`	571 B	0 B
`build/dom/index.js`	4.46 kB	0 B
`build/edit-navigation/index.js`	11.2 kB	0 B
`build/edit-navigation/style-rtl.css`	881 B	0 B
`build/edit-navigation/style.css`	885 B	0 B
`build/edit-post/index.js`	306 kB	0 B
`build/edit-post/style-rtl.css`	6.41 kB	0 B
`build/edit-post/style.css`	6.39 kB	0 B
`build/edit-widgets/index.js`	26.3 kB	0 B
`build/editor/editor-styles-rtl.css`	480 B	0 B
`build/editor/editor-styles.css`	482 B	0 B
`build/editor/index.js`	42.8 kB	0 B
`build/editor/style-rtl.css`	3.85 kB	0 B
`build/editor/style.css`	3.85 kB	0 B
`build/element/index.js`	4.65 kB	0 B
`build/escape-html/index.js`	735 B	0 B
`build/format-library/index.js`	7.7 kB	0 B
`build/format-library/style-rtl.css`	547 B	0 B
`build/format-library/style.css`	548 B	0 B
`build/hooks/index.js`	2.16 kB	0 B
`build/html-entities/index.js`	623 B	0 B
`build/i18n/index.js`	3.57 kB	0 B
`build/is-shallow-equal/index.js`	712 B	0 B
`build/keyboard-shortcuts/index.js`	2.52 kB	0 B
`build/keycodes/index.js`	1.94 kB	0 B
`build/list-reusable-blocks/index.js`	3.11 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	476 B	0 B
`build/list-reusable-blocks/style.css`	476 B	0 B
`build/media-utils/index.js`	5.34 kB	0 B
`build/notices/index.js`	1.79 kB	0 B
`build/nux/index.js`	3.42 kB	0 B
`build/nux/style-rtl.css`	671 B	0 B
`build/nux/style.css`	668 B	0 B
`build/plugins/index.js`	2.56 kB	0 B
`build/primitives/index.js`	1.43 kB	0 B
`build/priority-queue/index.js`	791 B	0 B
`build/redux-routine/index.js`	2.85 kB	0 B
`build/reusable-blocks/index.js`	3.05 kB	0 B
`build/rich-text/index.js`	13.2 kB	0 B
`build/server-side-render/index.js`	2.77 kB	0 B
`build/shortcode/index.js`	1.69 kB	0 B
`build/token-list/index.js`	1.27 kB	0 B
`build/url/index.js`	4.06 kB	0 B
`build/viewport/index.js`	1.84 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.22 kB	0 B

_{compressed-size-action}

MichaelArestad · 2020-10-12T19:39:33Z

packages/interface/src/components/interface-skeleton/style.scss

@@ -86,11 +85,13 @@ html.interface-interface-skeleton__html-container {
 	left: 0;
 	background: $white;
 	color: $gray-900;
+	width: 0;


I think this is really close. Something about this style is breaking the inspector panel on both the site editor and the post editor. You can see that here:

Awesome catch, I'll need to address that! Thank you.

Alright this should be fixed.

jasmussen · 2020-10-26T07:59:54Z

Alright this one should be ready to go.

It would be really nice to get this one in soon, both so the experience isn't totally broken on mobile, but also so that actually optimizing for and considering mobile can be easier as development moves on.

david-szabo97

The inserter panel and name of the panel are not showing up for me.

jasmussen · 2020-10-26T12:45:35Z

Argh how could I miss that !?

Taking a look, thank you!

jeyip · 2020-10-27T09:08:00Z

I just pushed a commit to address this comment, which seemed to be causing layout issues for mobile. I think it might be able to hold us over until we rework the mobile experience altogether. The header at smaller viewport widths should now look like this:

I pushed it here because I thought it would be easier to test, discuss, and potentially include with the fixes made in this pull request, but I'm more than happy to rebase and remove the commit and include it in separate PR. Would love to hear your thoughts @jasmussen

jasmussen · 2020-10-27T10:17:31Z

Awesome.

There are a lot of good CSS changes in this PR that I believe will hold us over for a while wrt the mobile site editor. But it's still blocked on the white screen, and I think I'll need some help getting that working. Behold:

That white screen is actually the "left sidebar" being open, all the time.

jeyip · 2020-10-28T03:16:35Z

There are a lot of good CSS changes in this PR that I believe will hold us over for a while wrt the mobile site editor. But it's still blocked on the white screen, and I think I'll need some help getting that working. Behold:

I pushed changes and the WSOD should now be addressed. Would love to hear from @david-szabo97 @Copons @Addison-Stavlo @vindl if there are any concerns. I moved the logic to handle conditional rendering of the Left Sidebar up to its parent, edit-site/editor

jasmussen · 2020-10-28T08:37:57Z

Stellar work, @jeyip, I'm seeing this, and it's a substantial improvement:

Thanks so much, I hope we can land this soon!

david-szabo97 · 2020-10-28T11:17:14Z

I pushed changes and the WSOD should now be addressed. Would love to hear from @david-szabo97 @Copons @Addison-Stavlo @vindl if there are any concerns. I moved the logic to handle conditional rendering of the Left Sidebar up to its parent, edit-site/editor

Any reason to move it to the parent? I prefer it to be in a separate component so less clutter in the editor. Opening the Inserter will now re-render the whole Editor if it's moved to the parent.

jeyip · 2020-10-29T01:02:56Z

Any reason to move it to the parent?

Good question!

It's because the InterfaceSkeleton component is designed in such a way that it expects us to pass in a false-y value when an interface element (like leftSidebar, header, footer, etc.) should not be rendered.

gutenberg/packages/interface/src/components/interface-skeleton/index.js

Lines 87 to 96 in 7778a36

    
           { !! leftSidebar && ( 
        
           	<div 
        
           		className="interface-interface-skeleton__left-sidebar" 
        
           		role="region" 
        
           		aria-label={ mergedLabels.leftSidebar } 
        
           		tabIndex="-1" 
        
           	> 
        
           		{ leftSidebar } 
        
           	</div> 
        
           ) }

In edit-site, however, we had the left sidebar set up in such a way that it was always truthy

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

Lines 212 to 219 in 7778a36

    
           <InterfaceSkeleton 
        
           	labels={ interfaceLabels } 
        
           	drawer={ 
        
           		<NavigationSidebar /> 
        
           	} 
        
           	leftSidebar={ 
        
           		<LeftSidebar /> 
        
           	}

This was leading to the unexpected behavior we were seeing with the mobile wsod. The InterfaceSkeleton was always rendering a leftSidebar wrapper, even when the inserter wasn't "open". This was why I opted to move the logic for left sidebar rendering into the edit-site editor component.

Opening the Inserter will now re-render the whole Editor if it's moved to the parent.

Hmmm...this is a good point. I thought about alternative approaches, but I don't see any immediate solutions. I think we'd have to remove interface skeleton entirely to address unnecessary re-render and the wsod? Would also love to hear if you have any ideas @david-szabo97

jasmussen · 2020-10-29T07:21:18Z

I wonder if such a skeleton refactor should block this PR from landing, given:

the site editor is currently unusable on < 600px
your approach is "no worse" than what's been shipping for many months in the post editor

In that vein, we could consider this a regression fix with an opportunity to refactor the skeletons for the benefit of both editors?

jeyip · 2020-10-30T01:56:29Z

Ah I should have clarified @jasmussen. I completely agree with your sentiments. I think, in the worst case scenario, we should move forward with the changes in this PR for the reasons you listed above.

I was interested in hearing from David to see if he had ideas about solutions that would meet both criteria of:

Avoiding a rerender of the entire editor
Addressing the mobile wsod

david-szabo97 · 2020-11-05T07:52:34Z

Since the implementation is identical to the Post Editor, I think we are good to go. I can't think of any easy way to fix the rerender for now.

We will definitely need to rethink the InterfaceSkeleton and Editor. I don't think they are going to be bottlenecks for a while but they are the root of the whole Gutenberg so it'd be great to fix them up a little bit to avoid all that unnecessary rerenders.

david-szabo97

One thing I noticed, we can open the Navigation sidebar by clicking on the name of the current template then clicking on "Browse templates". This opens the sidebar but there is no way to close it.

The name of the template in the header also gets pushed and it is no longer visible. (If you resize while the sidebar is open you will see that the name of the template is showing up once your browser is larger.)

After all, since this PR has been going on for a while, we would have a good foundation once this PR is merged, then we can address the issues coming up.

jasmussen · 2020-11-05T09:06:56Z

Thank you for the review David! I would agree there's very ripe ground for refactoring this, and it should be done.

One thing I noticed, we can open the Navigation sidebar by clicking on the name of the current template then clicking on "Browse templates". This opens the sidebar but there is no way to close it.

This observation, I think, is one of the best reasons for moving ahead with this, even if it isn't optimal. This is the sort of bugfix that has to help inform the sidebar work, which we can only discover when it's in some state of functional.

I'm going to give this a rebase, and see if that helps the checks pass.

Flex bases of 335px were added to the left and right site editor header toolbars to prevent their children from collapsing when shrinking the viewport. This, however, did not account for tbehavior at smaller screen widths (tablet / mobile), and caused layout issues. To address this, we use breakpoints to define the 335px flex bases as desktop specific affordances.

The InterfaceSkeleton component coordinates the general layout and styling of the site editor and post editor pages. It expects specific behavior from its props. For example, if the LeftSidebar is open, InterfaceSkeleton expects to be passed JSX markup as the leftSidebar prop. Otherwise, if the LeftSidebar isn't open, InterfaceSkeleton expects a null or falsey leftSidebar prop. InterfaceSkeleton styling depends on this behavior. In edit site, the LeftSidebar prop passed into InterfaceSkeleton was always a truthy value. As a result, InterfaceSkeleton was improperly accounting for a LeftSidebar, even when it was unmounted from the screen. These changes move the logic to determine when the sidebar should "open" up from the LeftSidebar component itself to its parent. This allows us to pass JSX markup to the InterfaceSkeleton when the inserter is open, and a falsey value when the inserter is closed.

jeyip · 2020-11-05T20:53:54Z

I rebased master again because there was still a failing (seemingly unrelated) e2e spec.

jeyip · 2020-11-05T22:47:26Z

All specs are now passing 👍 Going to go ahead and merge the PR.

One thing I noticed, we can open the Navigation sidebar by clicking on the name of the current template then clicking on "Browse templates". This opens the sidebar but there is no way to close it.

Thanks for finding this @david-szabo97.

I made an issue here to track the problem you pointed out.

The name of the template in the header also gets pushed and it is no longer visible. (If you resize while the sidebar is open you will see that the name of the template is showing up once your browser is larger.)

I wonder if we want the interaction here to actually match the inserter, where, at smaller viewports, the sidebar actually occupies the entire screen. Either way, this isn't ideal either, and I made another issue to track this

jasmussen added [Type] Enhancement A suggestion for improvement. Mobile Web Viewport sizes for mobile and tablet devices labels Oct 12, 2020

jasmussen requested a review from youknowriad as a code owner October 12, 2020 10:02

jasmussen self-assigned this Oct 12, 2020

jasmussen requested a review from MichaelArestad October 12, 2020 10:02

MichaelArestad reviewed Oct 12, 2020

View reviewed changes

noahtallen added the [Feature] Full Site Editing label Oct 14, 2020

jasmussen force-pushed the try/site-editor-responsive branch from e508a3d to 96f531f Compare October 26, 2020 07:43

jasmussen requested review from noahtallen, jeyip and david-szabo97 October 26, 2020 07:59

This was referenced Oct 26, 2020

Site editor: Rework navigation panel animations #26158

Merged

FSE Navigation Sidebar: Move navigation sidebar in DOM hierarchy #25884

Merged

Copons requested review from mattwiebe, Copons and Addison-Stavlo October 26, 2020 11:42

david-szabo97 reviewed Oct 26, 2020

View reviewed changes

jasmussen force-pushed the try/site-editor-responsive branch from 498b989 to e95f5b4 Compare October 27, 2020 10:18

Copons mentioned this pull request Oct 27, 2020

Site Editor: navigation sidebar is not visible outside of fullscreen mode #26125

Closed

jeyip force-pushed the try/site-editor-responsive branch from 7b78010 to 179d73f Compare October 28, 2020 03:09

david-szabo97 approved these changes Nov 5, 2020

View reviewed changes

jasmussen force-pushed the try/site-editor-responsive branch from 179d73f to c57e6f3 Compare November 5, 2020 09:15

jasmussen and others added 13 commits November 5, 2020 12:53

Make the site editor visible on mobile.

c595151

Hide pinned until after medium breakpoint.

0f5db67

Collapse Update Design label on mobile.

5888438

Limit tools on mobile.

f68f4b9

Fix regressions.

a308c43

Fix issue with sidebar not working.

6f87313

Make the site editor visible on mobile.

a6d1db7

Fix issue with sidebar not working.

9887b56

Remove the width property.

26c0895

Remove unnecessary LeftSidebar component

dcef19e

Refactor LeftSidebar panel styling

af4c437

jeyip force-pushed the try/site-editor-responsive branch from c57e6f3 to af4c437 Compare November 5, 2020 20:53

jeyip merged commit a2c8480 into master Nov 5, 2020

jeyip deleted the try/site-editor-responsive branch November 5, 2020 22:49

github-actions bot added this to the Gutenberg 9.4 milestone Nov 5, 2020

This was referenced Nov 5, 2020

Site Editor: Nav Sidebar Toggle Button Disappears in Smaller Viewports #26754

Closed

Site Editor: Document Title is Displaced when Nav Sidebar is Open #26755

Closed

vindl assigned jeyip Nov 6, 2020

aaronrobertshaw mentioned this pull request Apr 20, 2023

Undo/redo buttons not visible on smaller screen sizes #49774

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try: Make site editor responsive. #26021

Try: Make site editor responsive. #26021

jasmussen commented Oct 12, 2020

jasmussen commented Oct 12, 2020

github-actions bot commented Oct 12, 2020 •

edited

Loading

MichaelArestad Oct 12, 2020

jasmussen Oct 14, 2020

jasmussen Oct 26, 2020

jasmussen commented Oct 26, 2020

david-szabo97 left a comment

jasmussen commented Oct 26, 2020

jeyip commented Oct 27, 2020 •

edited

Loading

jasmussen commented Oct 27, 2020

jeyip commented Oct 28, 2020

jasmussen commented Oct 28, 2020

david-szabo97 commented Oct 28, 2020

jeyip commented Oct 29, 2020 •

edited

Loading

jasmussen commented Oct 29, 2020

jeyip commented Oct 30, 2020

david-szabo97 commented Nov 5, 2020

david-szabo97 left a comment

jasmussen commented Nov 5, 2020

jeyip commented Nov 5, 2020 •

edited

Loading

jeyip commented Nov 5, 2020 •

edited

Loading

Try: Make site editor responsive. #26021

Try: Make site editor responsive. #26021

Conversation

jasmussen commented Oct 12, 2020

jasmussen commented Oct 12, 2020

github-actions bot commented Oct 12, 2020 • edited Loading

MichaelArestad Oct 12, 2020

Choose a reason for hiding this comment

jasmussen Oct 14, 2020

Choose a reason for hiding this comment

jasmussen Oct 26, 2020

Choose a reason for hiding this comment

jasmussen commented Oct 26, 2020

david-szabo97 left a comment

Choose a reason for hiding this comment

jasmussen commented Oct 26, 2020

jeyip commented Oct 27, 2020 • edited Loading

jasmussen commented Oct 27, 2020

jeyip commented Oct 28, 2020

jasmussen commented Oct 28, 2020

david-szabo97 commented Oct 28, 2020

jeyip commented Oct 29, 2020 • edited Loading

jasmussen commented Oct 29, 2020

jeyip commented Oct 30, 2020

david-szabo97 commented Nov 5, 2020

david-szabo97 left a comment

Choose a reason for hiding this comment

jasmussen commented Nov 5, 2020

jeyip commented Nov 5, 2020 • edited Loading

jeyip commented Nov 5, 2020 • edited Loading

github-actions bot commented Oct 12, 2020 •

edited

Loading

jeyip commented Oct 27, 2020 •

edited

Loading

jeyip commented Oct 29, 2020 •

edited

Loading

jeyip commented Nov 5, 2020 •

edited

Loading

jeyip commented Nov 5, 2020 •

edited

Loading