Try: Make site editor responsive. (#26021)

* Make the site editor visible on mobile.

* Hide pinned until after medium breakpoint.

* Collapse Update Design label on mobile.

* Limit tools on mobile.

* Add desktop affordances to site editor header

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.

* Refactor LeftSidebar rendering logic for InterfaceSkeleton

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.

Co-authored-by: Jeremy Yip <jeremy.yip@automattic.com>

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

@@ -17,6 +17,7 @@ import {
 	BlockBreadcrumb,
 	__unstableEditorStyles as EditorStyles,
 	__experimentalUseResizeCanvas as useResizeCanvas,
+	__experimentalLibrary as Library,
 } from '@wordpress/block-editor';
 import {
 	FullscreenMode,
@@ -26,6 +27,8 @@ import {
 import { EntitiesSavedStates, UnsavedChangesWarning } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
+import { close } from '@wordpress/icons';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -36,7 +39,6 @@ import { SidebarComplementaryAreaFills } from '../sidebar';
 import BlockEditor from '../block-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import GlobalStylesProvider from './global-styles-provider';
-import LeftSidebar from '../left-sidebar';
 import NavigationSidebar from '../navigation-sidebar';
 
 const interfaceLabels = {
@@ -47,6 +49,7 @@ const interfaceLabels = {
 function Editor() {
 	const {
 		isFullscreenActive,
+		isInserterOpen,
 		deviceType,
 		sidebarIsOpened,
 		settings,
@@ -59,6 +62,7 @@ function Editor() {
 	} = useSelect( ( _select ) => {
 		const {
 			isFeatureActive,
+			isInserterOpened,
 			__experimentalGetPreviewDeviceType,
 			getSettings,
 			getTemplateId,
@@ -79,6 +83,7 @@ function Editor() {
 		}
 
 		return {
+			isInserterOpen: isInserterOpened(),
 			isFullscreenActive: isFeatureActive( 'fullscreenMode' ),
 			deviceType: __experimentalGetPreviewDeviceType(),
 			sidebarIsOpened: !! _select(
@@ -164,6 +169,8 @@ function Editor() {
 		}
 	}, [ isNavigationOpen ] );
 
+	const isMobile = useViewportMatch( 'medium', '<' );
+
 	return (
 		<>
 			<EditorStyles styles={ settings.styles } />
@@ -215,7 +222,36 @@ function Editor() {
 														<NavigationSidebar />
 													}
 													leftSidebar={
-														<LeftSidebar />
+														isInserterOpen ? (
+															<div className="edit-site-editor__inserter-panel">
+																<div className="edit-site-editor__inserter-panel-header">
+																	<Button
+																		icon={
+																			close
+																		}
+																		onClick={ () =>
+																			setIsInserterOpened(
+																				false
+																			)
+																		}
+																	/>
+																</div>
+																<div className="edit-site-editor__inserter-panel-content">
+																	<Library
+																		showInserterHelpPanel
+																		onSelect={ () => {
+																			if (
+																				isMobile
+																			) {
+																				setIsInserterOpened(
+																					false
+																				);
+																			}
+																		} }
+																	/>
+																</div>
+															</div>
+														) : null
 													}
 													sidebar={
 														sidebarIsOpened && (

packages/edit-site/src/components/editor/style.scss

@@ -23,3 +23,29 @@
 .edit-site-visual-editor {
 	background-color: $white;
 }
+
+.edit-site-editor__inserter-panel {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.edit-site-editor__inserter-panel-header {
+	padding-top: $grid-unit-10;
+	padding-right: $grid-unit-10;
+	display: flex;
+	justify-content: flex-end;
+
+	@include break-medium() {
+		display: none;
+	}
+}
+
+.edit-site-editor__inserter-panel-content {
+	// Leave space for the close button
+	height: calc(100% - #{$button-size} - #{$grid-unit-10});
+
+	@include break-medium() {
+		height: 100%;
+	}
+}

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

@@ -92,10 +92,14 @@ export default function Header( { openEntitiesSavedStates } ) {
 							'Generic label for block inserter button'
 						) }
 					/>
-					<ToolSelector />
-					<UndoButton />
-					<RedoButton />
-					<BlockNavigationDropdown />
+					{ isLargeViewport && (
+						<>
+							<ToolSelector />
+							<UndoButton />
+							<RedoButton />
+							<BlockNavigationDropdown />
+						</>
+					) }
 					{ displayBlockToolbar && (
 						<div className="edit-site-header-toolbar__block-toolbar">
 							<BlockToolbar hideDragHandle />

packages/edit-site/src/components/header/style.scss

@@ -6,21 +6,31 @@
 	box-sizing: border-box;
 	width: 100%;
 
-	padding-left: 60px;
-	transition: padding-left 20ms linear;
-	transition-delay: 80ms;
-	@include reduce-motion("transition");
+	@include break-medium() {
+		padding-left: 60px;
+		transition: padding-left 20ms linear;
+		transition-delay: 80ms;
+		@include reduce-motion("transition");
+	}
 
 	.edit-site-header_start,
 	.edit-site-header_end {
 		flex: 1 0;
 		display: flex;
 	}
 
-	.edit-site-header_start {
-		// Flex basis prevents the header_start toolbar
-		// from collapsing when shrinking the viewport.
-		flex-basis: calc(#{$header-toolbar-min-width} - #{$header-height});
+	@include break-medium() {
+		.edit-site-header_start {
+			// Flex basis prevents the header_start toolbar
+			// from collapsing when shrinking the viewport.
+			flex-basis: calc(#{$header-toolbar-min-width} - #{$header-height});
+		}
+
+		.edit-site-header_end {
+			// Flex basis prevents the header_end toolbar
+			// from collapsing when shrinking the viewport
+			flex-basis: $header-toolbar-min-width;
+		}
 	}
 
 	.edit-site-header_center {
@@ -36,9 +46,6 @@
 	}
 
 	.edit-site-header_end {
-		// Flex basis prevents the header_end toolbar
-		// from collapsing when shrinking the viewport
-		flex-basis: $header-toolbar-min-width;
 		justify-content: flex-end;
 	}
 }
@@ -58,8 +65,16 @@ body.is-navigation-sidebar-open {
 
 .edit-site-header__toolbar {
 	display: flex;
-	padding-left: $grid-unit-30;
 	align-items: center;
+	padding-left: $grid-unit-10;
+
+	@include break-small() {
+		padding-left: $grid-unit-30;
+	}
+
+	@include break-wide() {
+		padding-right: $grid-unit-10;
+	}
 
 	.edit-site-header-toolbar__inserter-toggle {
 		margin-right: $grid-unit-10;
@@ -89,6 +104,14 @@ body.is-navigation-sidebar-open {
 	flex-wrap: wrap;
 	padding-right: $grid-unit-05;
 
+	.interface-pinned-items {
+		display: none;
+
+		@include break-medium() {
+			display: block;
+		}
+	}
+
 	// Adjust button paddings to scale better to mobile.
 	.editor-post-saved-state,
 	.components-button.components-button {
@@ -101,15 +124,15 @@ body.is-navigation-sidebar-open {
 
 	.editor-post-saved-state,
 	.components-button.is-tertiary {
-		padding: 0 #{ $grid-unit-15 / 2 };
+		padding: 0 #{$grid-unit-15 / 2};
 	}
 
 	.edit-site-more-menu .components-button,
 	.interface-pinned-items .components-button {
 		margin-right: 0;
 	}
 
-	@include break-small () {
+	@include break-small() {
 		padding-right: $grid-unit-20;
 	}
 }

packages/edit-site/src/components/save-button/index.js

@@ -9,6 +9,7 @@ import { some } from 'lodash';
 import { useSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
 
 export default function SaveButton( { openEntitiesSavedStates } ) {
 	const { isDirty, isSaving } = useSelect( ( select ) => {
@@ -26,6 +27,8 @@ export default function SaveButton( { openEntitiesSavedStates } ) {
 	} );
 
 	const disabled = ! isDirty || isSaving;
+	const isMobile = useViewportMatch( 'medium', '<' );
+
 	return (
 		<>
 			<Button
@@ -36,7 +39,7 @@ export default function SaveButton( { openEntitiesSavedStates } ) {
 				isBusy={ isSaving }
 				onClick={ disabled ? undefined : openEntitiesSavedStates }
 			>
-				{ __( 'Update Design' ) }
+				{ isMobile ? __( 'Update' ) : __( 'Update Design' ) }
 			</Button>
 		</>
 	);

packages/edit-site/src/style.scss

@@ -5,7 +5,6 @@
 @import "./components/header/document-actions/style.scss";
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/header/more-menu/style.scss";
-@import "./components/left-sidebar/inserter-panel/style.scss";
 @import "./components/navigation-sidebar/navigation-toggle/style.scss";
 @import "./components/navigation-sidebar/navigation-panel/style.scss";
 @import "./components/notices/style.scss";

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

@@ -88,7 +88,6 @@ html.interface-interface-skeleton__html-container {
 .interface-interface-skeleton__left-sidebar,
 .interface-interface-skeleton__sidebar {
 	display: block;
-	width: auto; // Keep the sidebar width flexible.
 	flex-shrink: 0;
 	position: absolute;
 	z-index: z-index(".interface-interface-skeleton__sidebar");
@@ -103,6 +102,7 @@ html.interface-interface-skeleton__html-container {
 	@include break-medium() {
 		position: relative !important;
 		z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
+		width: auto; // Keep the sidebar width flexible.
 	}
 }