Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Site Editor: Improve the header animation #60408

Merged
merged 5 commits into from
Apr 9, 2024
Merged

Site Editor: Improve the header animation #60408

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
643755f
Site Editor: Improve the header animation
youknowriad Apr 3, 2024
52fadc5
no initial animation
youknowriad Apr 3, 2024
ffdc66b
Fix e2e tests
youknowriad Apr 4, 2024
230bc12
Adjust animation profile
jameskoster Apr 8, 2024
43ea0b9
Adapt the duration of the frame animation
youknowriad Apr 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/base-styles/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,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,
Expand Down
47 changes: 45 additions & 2 deletions packages/edit-site/src/components/editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -82,6 +95,7 @@ export default function Editor( { isLoading, onClick } ) {
const { type: editedPostType } = editedPost;

const isLargeViewport = useViewportMatch( 'medium' );
const disableMotion = useReducedMotion();

const {
context,
Expand Down Expand Up @@ -213,6 +227,35 @@ export default function Editor( { isLoading, onClick } ) {
'show-icon-labels': showIconLabels,
}
) }
header={
<AnimatePresence initial={ false }>
{ canvasMode === 'edit' && (
<motion.div
initial={ {
marginTop: -60,
} }
animate={ {
marginTop: 0,
} }
exit={ {
marginTop: -60,
} }
transition={ {
type: 'tween',
duration:
// Disable transition in mobile to emulate a full page transition.
disableMotion ||
! isLargeViewport
? 0
: ANIMATION_DURATION,
ease: [ 0.6, 0, 0.4, 1 ],
} }
>
<Header />
</motion.div>
) }
</AnimatePresence>
}
notices={ <EditorSnackbars /> }
content={
<>
Expand Down
41 changes: 2 additions & 39 deletions packages/edit-site/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -217,42 +216,6 @@ export default function Layout() {
isTransparent={ isResizableFrameOversized }
className="edit-site-layout__hub"
/>

<AnimatePresence initial={ false }>
{ canvasMode === 'edit' && (
<NavigableRegion
key="header"
className="edit-site-layout__header"
ariaLabel={ __( 'Editor top bar' ) }
as={ motion.div }
variants={ {
isDistractionFree: { opacity: 0, y: 0 },
isDistractionFreeHovering: {
opacity: 1,
y: 0,
},
view: { opacity: 1, y: '-100%' },
edit: { opacity: 1, y: 0 },
} }
exit={ {
y: '-100%',
} }
initial={ {
opacity: isDistractionFree ? 1 : 0,
y: isDistractionFree ? 0 : '-100%',
} }
transition={ {
type: 'tween',
duration: disableMotion
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
} }
>
<Header />
</NavigableRegion>
) }
</AnimatePresence>
</motion.div>

<div className="edit-site-layout__content">
Expand Down Expand Up @@ -291,8 +254,6 @@ export default function Layout() {
</NavigableRegion>
) }

<SavePanel />

{ isMobileViewport && areas.mobile && (
<div
className="edit-site-layout__mobile"
Expand Down Expand Up @@ -363,6 +324,8 @@ export default function Layout() {
</div>
) }
</div>

<SavePanel />
</div>
</>
);
Expand Down
26 changes: 1 addition & 25 deletions packages/edit-site/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,18 +30,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;
Expand Down Expand Up @@ -262,26 +250,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 {
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/site-editor/hybrid-theme.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,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',
} );
Expand Down
Loading