Skip to content

Commit 3ece636

Browse files
youknowriadjameskosterjasmussenSaxonF
authored
Site Editor: Improve the header animation (#60408)
Co-authored-by: youknowriad <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: SaxonF <[email protected]>
1 parent a7a62f7 commit 3ece636

File tree

6 files changed

+50
-69
lines changed

6 files changed

+50
-69
lines changed

‎packages/base-styles/_z-index.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,6 @@ $z-layers: (
191191
// Site editor layout
192192
".edit-site-layout__header-container": 4,
193193
".edit-site-layout__hub": 3,
194-
".edit-site-layout__header": 2,
195194
".edit-site-page-header": 2,
196195
".edit-site-page-content": 1,
197196
".edit-site-patterns__header": 2,

‎packages/edit-site/src/components/editor/index.js‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,16 @@ import classnames from 'classnames';
77
* WordPress dependencies
88
*/
99
import { useDispatch, useSelect } from '@wordpress/data';
10-
import { Notice } from '@wordpress/components';
11-
import { useInstanceId, useViewportMatch } from '@wordpress/compose';
10+
import {
11+
Notice,
12+
__unstableAnimatePresence as AnimatePresence,
13+
__unstableMotion as motion,
14+
} from '@wordpress/components';
15+
import {
16+
useInstanceId,
17+
useViewportMatch,
18+
useReducedMotion,
19+
} from '@wordpress/compose';
1220
import { store as preferencesStore } from '@wordpress/preferences';
1321
import {
1422
BlockBreadcrumb,
@@ -40,6 +48,7 @@ import {
4048
SidebarInspectorFill,
4149
} from '../sidebar-edit-mode';
4250
import CodeEditor from '../code-editor';
51+
import Header from '../header-edit-mode';
4352
import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode';
4453
import WelcomeGuide from '../welcome-guide';
4554
import StartTemplateOptions from '../start-template-options';
@@ -70,8 +79,12 @@ const interfaceLabels = {
7079
actions: __( 'Editor publish' ),
7180
/* translators: accessibility text for the editor footer landmark region. */
7281
footer: __( 'Editor footer' ),
82+
/* translators: accessibility text for the editor header landmark region. */
83+
header: __( 'Editor top bar' ),
7384
};
7485

86+
const ANIMATION_DURATION = 0.25;
87+
7588
export default function Editor( { isLoading, onClick } ) {
7689
const {
7790
record: editedPost,
@@ -82,6 +95,7 @@ export default function Editor( { isLoading, onClick } ) {
8295
const { type: editedPostType } = editedPost;
8396

8497
const isLargeViewport = useViewportMatch( 'medium' );
98+
const disableMotion = useReducedMotion();
8599

86100
const {
87101
context,
@@ -213,6 +227,35 @@ export default function Editor( { isLoading, onClick } ) {
213227
'show-icon-labels': showIconLabels,
214228
}
215229
) }
230+
header={
231+
<AnimatePresence initial={ false }>
232+
{ canvasMode === 'edit' && (
233+
<motion.div
234+
initial={ {
235+
marginTop: -60,
236+
} }
237+
animate={ {
238+
marginTop: 0,
239+
} }
240+
exit={ {
241+
marginTop: -60,
242+
} }
243+
transition={ {
244+
type: 'tween',
245+
duration:
246+
// Disable transition in mobile to emulate a full page transition.
247+
disableMotion ||
248+
! isLargeViewport
249+
? 0
250+
: ANIMATION_DURATION,
251+
ease: [ 0.6, 0, 0.4, 1 ],
252+
} }
253+
>
254+
<Header />
255+
</motion.div>
256+
) }
257+
</AnimatePresence>
258+
}
216259
notices={ <EditorSnackbars /> }
217260
content={
218261
<>

‎packages/edit-site/src/components/layout/animation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ function getAbsolutePosition( element ) {
1515
};
1616
}
1717

18-
const ANIMATION_DURATION = 300;
18+
const ANIMATION_DURATION = 250;
1919

2020
/**
2121
* Hook used to compute the styles required to move a div into a new position.

‎packages/edit-site/src/components/layout/index.js‎

Lines changed: 2 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
3838
import Sidebar from '../sidebar';
3939
import ErrorBoundary from '../error-boundary';
4040
import { store as editSiteStore } from '../../store';
41-
import Header from '../header-edit-mode';
4241
import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
4342
import SiteHub from '../site-hub';
4443
import ResizableFrame from '../resizable-frame';
@@ -217,42 +216,6 @@ export default function Layout() {
217216
isTransparent={ isResizableFrameOversized }
218217
className="edit-site-layout__hub"
219218
/>
220-
221-
<AnimatePresence initial={ false }>
222-
{ canvasMode === 'edit' && (
223-
<NavigableRegion
224-
key="header"
225-
className="edit-site-layout__header"
226-
ariaLabel={ __( 'Editor top bar' ) }
227-
as={ motion.div }
228-
variants={ {
229-
isDistractionFree: { opacity: 0, y: 0 },
230-
isDistractionFreeHovering: {
231-
opacity: 1,
232-
y: 0,
233-
},
234-
view: { opacity: 1, y: '-100%' },
235-
edit: { opacity: 1, y: 0 },
236-
} }
237-
exit={ {
238-
y: '-100%',
239-
} }
240-
initial={ {
241-
opacity: isDistractionFree ? 1 : 0,
242-
y: isDistractionFree ? 0 : '-100%',
243-
} }
244-
transition={ {
245-
type: 'tween',
246-
duration: disableMotion
247-
? 0
248-
: ANIMATION_DURATION,
249-
ease: 'easeOut',
250-
} }
251-
>
252-
<Header />
253-
</NavigableRegion>
254-
) }
255-
</AnimatePresence>
256219
</motion.div>
257220

258221
<div className="edit-site-layout__content">
@@ -291,8 +254,6 @@ export default function Layout() {
291254
</NavigableRegion>
292255
) }
293256

294-
<SavePanel />
295-
296257
{ isMobileViewport && areas.mobile && (
297258
<div className="edit-site-layout__mobile">
298259
{ areas.mobile }
@@ -358,6 +319,8 @@ export default function Layout() {
358319
</div>
359320
) }
360321
</div>
322+
323+
<SavePanel />
361324
</div>
362325
</>
363326
);

‎packages/edit-site/src/components/layout/style.scss‎

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -37,18 +37,6 @@
3737
z-index: z-index(".edit-site-layout__header-container");
3838
}
3939

40-
.edit-site-layout__header {
41-
height: $header-height;
42-
display: flex;
43-
z-index: z-index(".edit-site-layout__header");
44-
45-
// This is only necessary for the exit animation
46-
.edit-site-layout:not(.is-full-canvas) & {
47-
position: fixed;
48-
width: 100vw;
49-
}
50-
}
51-
5240
.edit-site-layout__content {
5341
height: 100%;
5442
flex-grow: 1;
@@ -272,26 +260,14 @@
272260
div {
273261
transform: translateX(0) translateY(0) translateZ(0) !important;
274262
}
275-
276-
.edit-site-layout__header {
277-
opacity: 1 !important;
278-
}
279263
}
280264
}
281265

282-
.edit-site-site-hub,
283-
.edit-site-layout__header {
266+
.edit-site-site-hub {
284267
position: absolute;
285268
top: 0;
286-
z-index: z-index(".edit-site-layout__header");
287-
}
288-
.edit-site-site-hub {
289269
z-index: z-index(".edit-site-layout__hub");
290270
}
291-
.edit-site-layout__header {
292-
width: 100%;
293-
}
294-
295271
}
296272

297273
.edit-site-layout__area {

‎test/e2e/specs/site-editor/hybrid-theme.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ test.describe( 'Hybrid theme', () => {
5353

5454
test( 'can not export Site Editor Templates', async ( { admin, page } ) => {
5555
await admin.visitSiteEditor( {
56-
postId: 'emptyhybrid//header',
56+
postId: 'gutenberg-test-themes/emptyhybrid//header',
5757
postType: 'wp_template_part',
5858
canvas: 'edit',
5959
} );

0 commit comments

Comments
 (0)