diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index a3d8b39be84d2..b5d6beabb4f60 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -191,7 +191,6 @@ $z-layers: ( // Site editor layout ".edit-site-layout__header-container": 4, ".edit-site-layout__hub": 3, - ".edit-site-layout__header": 2, ".edit-site-page-header": 2, ".edit-site-page-content": 1, ".edit-site-patterns__header": 2, diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index ef5147c35858f..f5fdd62ba7dc1 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -7,8 +7,16 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useDispatch, useSelect } from '@wordpress/data'; -import { Notice } from '@wordpress/components'; -import { useInstanceId, useViewportMatch } from '@wordpress/compose'; +import { + Notice, + __unstableAnimatePresence as AnimatePresence, + __unstableMotion as motion, +} from '@wordpress/components'; +import { + useInstanceId, + useViewportMatch, + useReducedMotion, +} from '@wordpress/compose'; import { store as preferencesStore } from '@wordpress/preferences'; import { BlockBreadcrumb, @@ -40,6 +48,7 @@ import { SidebarInspectorFill, } from '../sidebar-edit-mode'; import CodeEditor from '../code-editor'; +import Header from '../header-edit-mode'; import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode'; import WelcomeGuide from '../welcome-guide'; import StartTemplateOptions from '../start-template-options'; @@ -70,8 +79,12 @@ const interfaceLabels = { actions: __( 'Editor publish' ), /* translators: accessibility text for the editor footer landmark region. */ footer: __( 'Editor footer' ), + /* translators: accessibility text for the editor header landmark region. */ + header: __( 'Editor top bar' ), }; +const ANIMATION_DURATION = 0.25; + export default function Editor( { isLoading, onClick } ) { const { record: editedPost, @@ -82,6 +95,7 @@ export default function Editor( { isLoading, onClick } ) { const { type: editedPostType } = editedPost; const isLargeViewport = useViewportMatch( 'medium' ); + const disableMotion = useReducedMotion(); const { context, @@ -213,6 +227,35 @@ export default function Editor( { isLoading, onClick } ) { 'show-icon-labels': showIconLabels, } ) } + header={ + + { canvasMode === 'edit' && ( + +
+ + ) } + + } notices={ } content={ <> diff --git a/packages/edit-site/src/components/layout/animation.js b/packages/edit-site/src/components/layout/animation.js index 6de490cf9852f..378e5ff3da30d 100644 --- a/packages/edit-site/src/components/layout/animation.js +++ b/packages/edit-site/src/components/layout/animation.js @@ -15,7 +15,7 @@ function getAbsolutePosition( element ) { }; } -const ANIMATION_DURATION = 300; +const ANIMATION_DURATION = 250; /** * Hook used to compute the styles required to move a div into a new position. diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 001a4fed66784..1ff31c973a99c 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -38,7 +38,6 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands import Sidebar from '../sidebar'; import ErrorBoundary from '../error-boundary'; import { store as editSiteStore } from '../../store'; -import Header from '../header-edit-mode'; import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; import SiteHub from '../site-hub'; import ResizableFrame from '../resizable-frame'; @@ -217,42 +216,6 @@ export default function Layout() { isTransparent={ isResizableFrameOversized } className="edit-site-layout__hub" /> - - - { canvasMode === 'edit' && ( - -
- - ) } -
@@ -291,8 +254,6 @@ export default function Layout() { ) } - - { isMobileViewport && areas.mobile && (
{ areas.mobile } @@ -358,6 +319,8 @@ export default function Layout() {
) }
+ + ); diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 63fc992e06c23..00b67f00f6f23 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -37,18 +37,6 @@ z-index: z-index(".edit-site-layout__header-container"); } -.edit-site-layout__header { - height: $header-height; - display: flex; - z-index: z-index(".edit-site-layout__header"); - - // This is only necessary for the exit animation - .edit-site-layout:not(.is-full-canvas) & { - position: fixed; - width: 100vw; - } -} - .edit-site-layout__content { height: 100%; flex-grow: 1; @@ -272,26 +260,14 @@ div { transform: translateX(0) translateY(0) translateZ(0) !important; } - - .edit-site-layout__header { - opacity: 1 !important; - } } } - .edit-site-site-hub, - .edit-site-layout__header { + .edit-site-site-hub { position: absolute; top: 0; - z-index: z-index(".edit-site-layout__header"); - } - .edit-site-site-hub { z-index: z-index(".edit-site-layout__hub"); } - .edit-site-layout__header { - width: 100%; - } - } .edit-site-layout__area { diff --git a/test/e2e/specs/site-editor/hybrid-theme.spec.js b/test/e2e/specs/site-editor/hybrid-theme.spec.js index 4dcbec2a30a81..3cb9f0685abe5 100644 --- a/test/e2e/specs/site-editor/hybrid-theme.spec.js +++ b/test/e2e/specs/site-editor/hybrid-theme.spec.js @@ -53,7 +53,7 @@ test.describe( 'Hybrid theme', () => { test( 'can not export Site Editor Templates', async ( { admin, page } ) => { await admin.visitSiteEditor( { - postId: 'emptyhybrid//header', + postId: 'gutenberg-test-themes/emptyhybrid//header', postType: 'wp_template_part', canvas: 'edit', } );