Limit tools on mobile.

WordPress · Oct 26, 2020 · 96f531f · 96f531f
1 parent 0a2aecb
commit 96f531f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/packages/edit-site/src/components/header/index.js b/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 />

diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
@@ -58,8 +58,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;