Try: Make site editor responsive.

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.
  }
 }