From eb1a2a04c43bbbcfbcff225709bc5c213919ed2c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 21 Dec 2022 11:17:42 +0100 Subject: [PATCH 01/10] Move the edit button in the site editor sidebar to a contextual widget --- .../edit-site/src/components/layout/index.js | 246 ++++++++---------- .../src/components/layout/style.scss | 126 ++++----- .../sidebar-navigation-screen-main/index.js | 30 +-- .../index.js | 36 +-- .../sidebar-navigation-screen/style.scss | 2 +- .../src/components/site-title/index.js | 39 --- 6 files changed, 189 insertions(+), 290 deletions(-) delete mode 100644 packages/edit-site/src/components/site-title/index.js diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index e451357ee97e5c..2efc05454aece3 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -9,7 +9,6 @@ import classnames from 'classnames'; import { useSelect, useDispatch } from '@wordpress/data'; import { Button, - __experimentalHStack as HStack, __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence, __unstableUseNavigateRegions as useNavigateRegions, @@ -37,7 +36,6 @@ import { useLocation } from '../routes'; import getIsListPage from '../../utils/get-is-list-page'; import Header from '../header-edit-mode'; import SiteIcon from '../site-icon'; -import SiteTitle from '../site-title'; import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; const ANIMATION_DURATION = 0.5; @@ -86,13 +84,14 @@ export default function Layout( { onError } ) { const showFrame = ! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport ); const showEditButton = - isEditorPage && - isMobileViewport && - canvasMode === 'view' && - isMobileCanvasVisible; + ( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) || + ( isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible ); const isBackToDashboardButton = ( ! isMobileViewport && canvasMode === 'view' ) || ( isMobileViewport && ! isMobileCanvasVisible ); + const isFullCanvas = + ( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) || + isMobileCanvasVisible; // Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store. const [ canvasResizer, canvasSize ] = useResizeObserver(); const [ fullResizer, fullSize ] = useResizeObserver(); @@ -129,76 +128,82 @@ export default function Layout( { onError } ) { 'edit-site-layout', navigateRegionsProps.className, { - 'is-full-canvas': - ( isEditorPage && - canvasMode === 'edit' && - ! isMobileViewport ) || - isMobileCanvasVisible, + 'is-full-canvas': isFullCanvas, + 'is-edit-mode': canvasMode === 'edit', } ) } > -
-
+ + - - { ( isBackToDashboardButton || showEditButton ) && ( - - - { isBackToDashboardButton && ( - - ) } + + { showEditButton && ( + + ) } - { showEditButton && ( - - ) } - - - ) } - + { isMobileViewport && ! isMobileCanvasVisible && ( + + ) } + - { isMobileViewport && ! isMobileCanvasVisible && ( - - ) } -
- - { isEditorPage && canvasMode === 'edit' && ( + { isEditorPage && + ( canvasMode === 'edit' || isMobileCanvasVisible ) && ( + + { canvasMode === 'edit' &&
} + + ) } + +
+ + { showSidebar && ( -
+ ) } -
- - { showSidebar && ( - - - - ) } - - - { showCanvas && ( -
- { canvasResizer } - { !! canvasSize.width && ( - + { canvasResizer } + { !! canvasSize.width && ( - - { isEditorPage && } - { isListPage && } - + + + { isEditorPage && } + { isListPage && } + + - - ) } -
- ) } + ) } +
+ ) } + ); diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 4e92e6c0a57fb8..ce04dea1413316 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -1,80 +1,88 @@ +$hub-height: $grid-unit-20 * 2 + $button-size; + .edit-site-layout { min-height: 100%; background: $gray-900; color: $white; display: flex; flex-direction: column; - @include break-small { - display: grid; - grid-template-columns: 320px 1fr; - grid-template-rows: auto 1fr; - grid-template-areas: - "header canvas" - "sidebar canvas"; - - &.is-full-canvas { - grid-template-areas: - "header header" - "canvas canvas"; +} + +.edit-site-layout__hub { + position: fixed; + top: $canvas-padding; + left: $canvas-padding; + width: calc(100vw - #{$canvas-padding * 2}); + height: $hub-height; + z-index: 2; + + background: $black; + padding: $grid-unit-20; + padding-left: 0; + border-radius: $radius-block-ui * 4; + box-shadow: 0 3px 2px -1px rgba(0, 0, 0, 0.8); + + display: flex; + align-items: center; + justify-content: space-between; + gap: $grid-unit-10; + + .edit-site-layout.is-full-canvas & { + top: 0; + left: 0; + padding: 0; + padding-right: $grid-unit-20; + height: $header-height; + border-radius: 0; + width: 100vw; + + @include break-small { + width: auto; + padding-right: 0; } } + + .edit-site-layout.is-full-canvas.is-edit-mode & { + width: auto; + padding-right: 0; + } + + @include break-small { + width: calc(#{$sidebar-width} - #{$canvas-padding * 2}); + } } .edit-site-layout__header { - grid-area: header; height: $header-height; display: flex; } -.edit-site-layout__logo { - align-items: center; - height: $header-height; +.edit-site-layout__content { + flex-grow: 1; display: flex; - justify-content: space-between; - - .components-button { - color: currentColor; - } -} - -.edit-site-layout__edit-button { - background: $gray-800; - /* Overrides the color for all states of the button */ - color: inherit !important; } .edit-site-layout__sidebar { - grid-area: sidebar; z-index: 1; overflow-y: auto; - max-height: calc(100vh - #{$header-height}); + padding-top: $hub-height + $canvas-padding * 2; + width: 100vw; @include custom-scrollbars-on-hover; - // This is only necessary for the exit animation - .edit-site-layout.is-full-canvas & { - display: none; - @include break-small { - display: block; - grid-area: header; - position: absolute; - top: 60px; - } + @include break-small { + width: $sidebar-width; } -} - -.edit-site-layout__editor-header { - flex-grow: 1; // This is only necessary for the exit animation - .edit-site-layout:not(.is-full-canvas) & { + .edit-site-layout.is-full-canvas & { position: fixed; - left: 60px; - right: 0; + height: 100vh; + left: 0; + top: 0; } } .edit-site-layout__canvas-container { - grid-area: canvas; position: relative; flex-grow: 1; z-index: 2; @@ -122,13 +130,20 @@ min-height: 100% !important; } +.edit-site-layout__view-mode-toggle-container { + height: $header-height; + width: $header-height; +} .edit-site-layout__view-mode-toggle.components-button { position: relative; - background: $gray-900; color: $white; - height: calc(100% + #{$border-width}); - border-radius: 0; - margin-bottom: -$border-width; + height: 100%; + width: 100%; + border-radius: $radius-block-ui; + padding: 0; + display: flex; + align-items: center; + justify-content: center; &:hover, &:active { @@ -150,15 +165,6 @@ bottom: 9px; left: 9px; border-radius: $radius-block-ui + $border-width + $border-width; - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900; - } - - // Hover color. - &:hover::before { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700; - } - - &.has-icon:hover::before { box-shadow: none; } @@ -170,7 +176,7 @@ } .edit-site-layout__view-mode-toggle-icon { + display: flex; border-radius: $radius-block-ui; - object-fit: cover; } } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js index 622eb70a951aa0..e7faaa2eca4df1 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js @@ -3,50 +3,22 @@ */ import { __experimentalItemGroup as ItemGroup, - __experimentalHStack as HStack, __experimentalNavigatorButton as NavigatorButton, - Button, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { layout, symbolFilled } from '@wordpress/icons'; -import { useDispatch } from '@wordpress/data'; -import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies */ import SidebarNavigationScreen from '../sidebar-navigation-screen'; import SidebarNavigationItem from '../sidebar-navigation-item'; -import { useLocation } from '../routes'; -import { store as editSiteStore } from '../../store'; -import getIsListPage from '../../utils/get-is-list-page'; export default function SidebarNavigationScreenMain() { - const { params } = useLocation(); - const isListPage = getIsListPage( params ); - const isEditorPage = ! isListPage; - const { __unstableSetCanvasMode } = useDispatch( editSiteStore ); - const isMobileViewport = useViewportMatch( 'medium', '<' ); - return ( -
{ __( 'Design' ) }
- { ! isMobileViewport && isEditorPage && ( - - ) } - - } + title={ __( 'Design' ) } content={ +
{ config[ postType ].labels.title }
{ ! isMobileViewport && ( - - - { isEditorPage && ( - - ) } - + ) } } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 91c64bbd4c3ad2..f153b7946b4d99 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -15,7 +15,7 @@ position: sticky; top: 0; background: $gray-900; - padding-top: $grid-unit-80; + padding-top: $grid-unit-60; box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900; margin-bottom: $grid-unit-10; padding-bottom: $grid-unit-10; diff --git a/packages/edit-site/src/components/site-title/index.js b/packages/edit-site/src/components/site-title/index.js deleted file mode 100644 index 5af253ab916742..00000000000000 --- a/packages/edit-site/src/components/site-title/index.js +++ /dev/null @@ -1,39 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { store as coreDataStore } from '@wordpress/core-data'; - -function SiteTitle( { className } ) { - const { isRequestingSite, siteTitle } = useSelect( ( select ) => { - const { getEntityRecord, isResolving } = select( coreDataStore ); - const siteData = - getEntityRecord( 'root', '__unstableBase', undefined ) || {}; - - return { - isRequestingSite: isResolving( 'core', 'getEntityRecord', [ - 'root', - '__unstableBase', - undefined, - ] ), - siteTitle: siteData.name, - }; - }, [] ); - - if ( isRequestingSite && ! siteTitle ) { - return null; - } - - return ( -
- { siteTitle } -
- ); -} - -export default SiteTitle; From e8777cf78783c166847a7f8c42de8345ac0c4b4a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 21 Dec 2022 11:54:44 +0100 Subject: [PATCH 02/10] Fix sidebar scrolling --- packages/edit-site/src/components/layout/style.scss | 4 ++-- .../src/components/sidebar-navigation-screen/style.scss | 6 ++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index ce04dea1413316..1afb1eeec2c5bf 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -1,7 +1,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size; .edit-site-layout { - min-height: 100%; + height: 100%; background: $gray-900; color: $white; display: flex; @@ -60,12 +60,12 @@ $hub-height: $grid-unit-20 * 2 + $button-size; .edit-site-layout__content { flex-grow: 1; display: flex; + overflow: auto; } .edit-site-layout__sidebar { z-index: 1; overflow-y: auto; - padding-top: $hub-height + $canvas-padding * 2; width: 100vw; @include custom-scrollbars-on-hover; diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index f153b7946b4d99..0b5e056b7bebeb 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -6,16 +6,14 @@ } .edit-site-sidebar-navigation-screen__content { - margin: 0 $grid-unit-20 0 $button-size; - flex-grow: 1; - overflow-y: auto; + margin: 0 $grid-unit-20 $grid-unit-20 $button-size; } .edit-site-sidebar-navigation-screen__title-icon { position: sticky; top: 0; background: $gray-900; - padding-top: $grid-unit-60; + padding-top: $grid-unit-60 + $hub-height + $canvas-padding * 2; box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900; margin-bottom: $grid-unit-10; padding-bottom: $grid-unit-10; From 8ddd68e85f597618679ce1e7cbbc97c6f1006f3d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 21 Dec 2022 12:00:17 +0100 Subject: [PATCH 03/10] Do not hide the inserter in the header --- packages/edit-site/src/components/header-edit-mode/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss index 32b3e17912ee97..d26bad43e356da 100644 --- a/packages/edit-site/src/components/header-edit-mode/style.scss +++ b/packages/edit-site/src/components/header-edit-mode/style.scss @@ -10,6 +10,7 @@ $header-toolbar-min-width: 335px; width: 100%; justify-content: space-between; border-bottom: $border-width solid $gray-200; + padding-left: $header-height; .edit-site-header-edit-mode__start { display: flex; From dc7de38c8942b9a6e35dad217f9be5b9478bfd75 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 21 Dec 2022 12:18:43 +0100 Subject: [PATCH 04/10] Small fix --- packages/edit-site/src/components/layout/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 1afb1eeec2c5bf..b43c3ae7d25608 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -60,7 +60,9 @@ $hub-height: $grid-unit-20 * 2 + $button-size; .edit-site-layout__content { flex-grow: 1; display: flex; - overflow: auto; + + // Hide scrollbars during the edit/view animation. + overflow: hidden; } .edit-site-layout__sidebar { From 94781daaa3e7dcc746baccc63c0e1dcf4477704e Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 21 Dec 2022 13:38:18 +0000 Subject: [PATCH 05/10] Update hub shadow --- packages/edit-site/src/components/layout/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index b43c3ae7d25608..7aeed82012dd29 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -20,7 +20,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size; padding: $grid-unit-20; padding-left: 0; border-radius: $radius-block-ui * 4; - box-shadow: 0 3px 2px -1px rgba(0, 0, 0, 0.8); + box-shadow: $shadow-modal; display: flex; align-items: center; @@ -35,6 +35,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size; height: $header-height; border-radius: 0; width: 100vw; + box-shadow: none; @include break-small { width: auto; From 6a66f6e78edd5869f47386aab28f4ed5fad55e89 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 22 Dec 2022 09:45:44 +0100 Subject: [PATCH 06/10] Resize the edit button --- packages/edit-site/src/components/layout/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 7aeed82012dd29..8b5cf7ae0b5e93 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -51,6 +51,10 @@ $hub-height: $grid-unit-20 * 2 + $button-size; @include break-small { width: calc(#{$sidebar-width} - #{$canvas-padding * 2}); } + + .components-button { + height: $grid-unit-40; + } } .edit-site-layout__header { From 66e464ce2539042a09b26e0948bc6c8fe746ed7e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 22 Dec 2022 09:48:14 +0100 Subject: [PATCH 07/10] Restore the sidebar width --- packages/base-styles/_variables.scss | 2 +- packages/edit-site/src/components/layout/style.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index c4b0edd50e61b8..17faddd8ad65b2 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -49,7 +49,7 @@ $button-size: 36px; $button-size-small: 24px; $header-height: 60px; $panel-header-height: $grid-unit-60; -$nav-sidebar-width: 300px; +$nav-sidebar-width: 320px; $admin-bar-height: 32px; $admin-bar-height-big: 46px; $admin-sidebar-width: 160px; diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 8b5cf7ae0b5e93..d29228fc388ecc 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -49,7 +49,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size; } @include break-small { - width: calc(#{$sidebar-width} - #{$canvas-padding * 2}); + width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2}); } .components-button { @@ -77,7 +77,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size; @include custom-scrollbars-on-hover; @include break-small { - width: $sidebar-width; + width: $nav-sidebar-width; } // This is only necessary for the exit animation From c1c5452dea8736aa600c091a75c40ab34b5d62c5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 22 Dec 2022 09:56:08 +0100 Subject: [PATCH 08/10] Restore the top bar animation --- .../edit-site/src/components/layout/index.js | 37 ++++++++++++++----- .../src/components/layout/style.scss | 9 ++++- 2 files changed, 36 insertions(+), 10 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 2efc05454aece3..04421943f1f51e 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -180,15 +180,34 @@ export default function Layout( { onError } ) { ) } - { isEditorPage && - ( canvasMode === 'edit' || isMobileCanvasVisible ) && ( - - { canvasMode === 'edit' &&
} - - ) } + + { isEditorPage && + ( canvasMode === 'edit' || isMobileCanvasVisible ) && ( + + { canvasMode === 'edit' &&
} + + ) } +
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index d29228fc388ecc..56f7f0f49aa5a4 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -14,7 +14,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size; left: $canvas-padding; width: calc(100vw - #{$canvas-padding * 2}); height: $hub-height; - z-index: 2; + z-index: 3; background: $black; padding: $grid-unit-20; @@ -60,6 +60,13 @@ $hub-height: $grid-unit-20 * 2 + $button-size; .edit-site-layout__header { height: $header-height; display: flex; + z-index: 2; + + // This is only necessary for the exit animation + .edit-site-layout:not(.is-full-canvas) & { + position: fixed; + width: 100vw; + } } .edit-site-layout__content { From be0def09604803d6a63249bcbbb8bbd526175c1e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 22 Dec 2022 10:23:03 +0100 Subject: [PATCH 09/10] Speeding up the hub animation --- packages/edit-site/src/components/layout/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 04421943f1f51e..8bc3373fbfe9d8 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -39,6 +39,7 @@ import SiteIcon from '../site-icon'; import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; const ANIMATION_DURATION = 0.5; +const HUB_ANIMATION_DURATION = 0.3; export default function Layout( { onError } ) { // This ensures the edited entity id and type are initialized properly. @@ -138,7 +139,7 @@ export default function Layout( { onError } ) { layout transition={ { type: 'tween', - duration: disableMotion ? 0 : ANIMATION_DURATION, + duration: disableMotion ? 0 : HUB_ANIMATION_DURATION, ease: 'easeOut', } } > @@ -147,7 +148,9 @@ export default function Layout( { onError } ) { layout transition={ { type: 'tween', - duration: disableMotion ? 0 : ANIMATION_DURATION, + duration: disableMotion + ? 0 + : HUB_ANIMATION_DURATION, ease: 'easeOut', } } > From 4bd75d29f06bed2884e3656785eb472333f8794a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 23 Dec 2022 09:30:40 +0100 Subject: [PATCH 10/10] Fix z-index and e2e tests --- packages/base-styles/_z-index.scss | 6 ++++++ packages/edit-site/src/components/layout/index.js | 1 + packages/edit-site/src/components/layout/style.scss | 8 ++++---- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 5c9af46fec6e6f..d7c7842bdfd248 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -177,6 +177,12 @@ $z-layers: ( // Appear under the topbar. ".customize-widgets__block-toolbar": 7, + + // Site editor layout + ".edit-site-layout__hub": 3, + ".edit-site-layout__header": 2, + ".edit-site-layout__canvas-container": 2, + ".edit-site-layout__sidebar": 1, ); @function z-index( $key ) { diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 8bc3373fbfe9d8..f8fe55873526bd 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -163,6 +163,7 @@ export default function Layout( { onError } ) { { showEditButton && (