Skip to content

Commit 56bc88f

Browse files
youknowriadyouknowriad
authored
Post Editor: Add the back button animation similar to the site editor (WordPress#71929)
1 parent b18a9da commit 56bc88f

File tree

4 files changed

+149
-185
lines changed

4 files changed

+149
-185
lines changed

‎packages/edit-post/src/components/back-button/fullscreen-mode-close.js‎

Lines changed: 79 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,35 @@ import {
1414
} from '@wordpress/components';
1515
import { __ } from '@wordpress/i18n';
1616
import { addQueryArgs } from '@wordpress/url';
17-
import { wordpress } from '@wordpress/icons';
17+
import { wordpress, arrowUpLeft } from '@wordpress/icons';
1818
import { store as editorStore } from '@wordpress/editor';
1919
import { store as coreStore } from '@wordpress/core-data';
2020
import { useReducedMotion } from '@wordpress/compose';
2121

22+
const siteIconVariants = {
23+
edit: {
24+
clipPath: 'inset(0% round 0px)',
25+
},
26+
hover: {
27+
clipPath: 'inset( 22% round 2px )',
28+
},
29+
tap: {
30+
clipPath: 'inset(0% round 0px)',
31+
},
32+
};
33+
34+
const toggleHomeIconVariants = {
35+
edit: {
36+
opacity: 0,
37+
scale: 0.2,
38+
},
39+
hover: {
40+
opacity: 1,
41+
scale: 1,
42+
clipPath: 'inset( 22% round 2px )',
43+
},
44+
};
45+
2246
function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
2347
const { isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
2448
( select ) => {
@@ -38,43 +62,50 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
3862
siteIconUrl: siteData.site_icon_url,
3963
};
4064
},
41-
[]
65+
[ initialPost?.type ]
4266
);
4367

4468
const disableMotion = useReducedMotion();
69+
const transition = {
70+
duration: disableMotion ? 0 : 0.2,
71+
};
4572

4673
if ( ! postType ) {
4774
return null;
4875
}
4976

50-
let buttonIcon = <Icon size="36px" icon={ wordpress } />;
51-
52-
const effect = {
53-
expand: {
54-
scale: 1.25,
55-
transition: { type: 'tween', duration: '0.3' },
56-
},
57-
};
58-
59-
if ( siteIconUrl ) {
60-
buttonIcon = (
61-
<motion.img
62-
variants={ ! disableMotion && effect }
77+
// Create SiteIcon equivalent structure exactly like edit-site
78+
let siteIconContent;
79+
if ( isRequestingSiteIcon && ! siteIconUrl ) {
80+
siteIconContent = (
81+
<div className="edit-post-fullscreen-mode-close-site-icon__image" />
82+
);
83+
} else if ( siteIconUrl ) {
84+
siteIconContent = (
85+
<img
86+
className="edit-post-fullscreen-mode-close-site-icon__image"
6387
alt={ __( 'Site Icon' ) }
64-
className="edit-post-fullscreen-mode-close_site-icon"
6588
src={ siteIconUrl }
6689
/>
6790
);
68-
}
69-
70-
if ( isRequestingSiteIcon ) {
71-
buttonIcon = null;
91+
} else {
92+
siteIconContent = (
93+
<Icon
94+
className="edit-post-fullscreen-mode-close-site-icon__icon"
95+
icon={ wordpress }
96+
size={ 48 }
97+
/>
98+
);
7299
}
73100

74101
// Override default icon if custom icon is provided via props.
75-
if ( icon ) {
76-
buttonIcon = <Icon size="36px" icon={ icon } />;
77-
}
102+
const buttonIcon = icon ? (
103+
<Icon size="36px" icon={ icon } />
104+
) : (
105+
<div className="edit-post-fullscreen-mode-close-site-icon">
106+
{ siteIconContent }
107+
</div>
108+
);
78109

79110
const classes = clsx( 'edit-post-fullscreen-mode-close', {
80111
'has-icon': siteIconUrl,
@@ -89,16 +120,39 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
89120
const buttonLabel = postType?.labels?.view_items ?? __( 'Back' );
90121

91122
return (
92-
<motion.div whileHover="expand">
123+
<motion.div
124+
className="edit-post-fullscreen-mode-close__view-mode-toggle"
125+
animate="edit"
126+
initial="edit"
127+
whileHover="hover"
128+
whileTap="tap"
129+
transition={ transition }
130+
>
93131
<Button
94132
__next40pxDefaultSize
95133
className={ classes }
96134
href={ buttonHref }
97135
label={ buttonLabel }
98136
showTooltip={ showTooltip }
137+
tooltipPosition="middle right"
99138
>
100-
{ buttonIcon }
139+
<motion.div variants={ ! disableMotion && siteIconVariants }>
140+
<div className="edit-post-fullscreen-mode-close__view-mode-toggle-icon">
141+
{ buttonIcon }
142+
</div>
143+
</motion.div>
101144
</Button>
145+
<motion.div
146+
className={ clsx(
147+
'edit-post-fullscreen-mode-close__back-icon',
148+
{
149+
'has-site-icon': siteIconUrl,
150+
}
151+
) }
152+
variants={ ! disableMotion && toggleHomeIconVariants }
153+
>
154+
<Icon icon={ arrowUpLeft } />
155+
</motion.div>
102156
</motion.div>
103157
);
104158
}

‎packages/edit-post/src/components/back-button/style.scss‎

Lines changed: 70 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,93 @@
1-
// Developer notes: these rules are duplicated for the site editor.
1+
// Developer notes: these rules are copied from the site editor.
22
// They need to be updated in both places.
33

4-
.edit-post-fullscreen-mode-close.components-button {
5-
@include break-medium() {
4+
.edit-post-fullscreen-mode-close__view-mode-toggle {
5+
top: 0;
6+
left: 0;
7+
height: $header-height;
8+
width: $header-height;
9+
z-index: 100;
10+
11+
.components-button {
12+
color: $white;
13+
height: 100%;
14+
width: 100%;
15+
border-radius: 0;
16+
overflow: hidden;
17+
padding: 0;
618
display: flex;
719
align-items: center;
8-
align-self: stretch;
920
justify-content: center;
10-
border: none;
11-
background: $gray-900;
12-
color: $white;
13-
border-radius: 0;
14-
height: $header-height;
15-
width: $header-height;
16-
position: relative;
17-
21+
&:hover,
1822
&:active {
1923
color: $white;
2024
}
2125

2226
&:focus {
2327
box-shadow: none;
2428
}
29+
}
2530

26-
&::before {
27-
@media not (prefers-reduced-motion) {
28-
transition: box-shadow 0.1s ease;
29-
}
30-
content: "";
31+
.edit-post-fullscreen-mode-close__view-mode-toggle-icon {
32+
svg,
33+
img {
34+
background: $gray-900;
3135
display: block;
32-
position: absolute;
33-
top: $grid-unit-10 + $border-width;
34-
right: $grid-unit-10 + $border-width;
35-
bottom: $grid-unit-10 + $border-width;
36-
left: $grid-unit-10 + $border-width;
37-
border-radius: $radius-small + $border-width + $border-width;
38-
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
3936
}
37+
}
38+
}
4039

41-
// Hover color.
42-
&:hover::before {
43-
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
44-
}
40+
.edit-post-fullscreen-mode-close-site-icon__icon {
41+
fill: currentColor;
42+
width: 100%;
43+
height: 100%;
44+
padding: $grid-unit-15;
45+
}
4546

46-
&.has-icon:hover::before {
47-
box-shadow: none;
48-
}
47+
.edit-post-fullscreen-mode-close-site-icon__image {
48+
width: 100%;
49+
height: 100%;
50+
object-fit: cover;
51+
background: #333;
52+
aspect-ratio: 1 / 1;
53+
}
4954

50-
// Lightened spot color focus.
51-
&:focus::before {
52-
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
53-
}
55+
.edit-post-fullscreen-mode-close.components-button:focus {
56+
position: relative;
57+
58+
&::before {
59+
content: "";
60+
display: block;
61+
position: absolute;
62+
z-index: 1;
63+
top: 0;
64+
right: 0;
65+
bottom: 0;
66+
left: 0;
67+
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(#{ $border-width } + var(--wp-admin-border-width-focus)) $white;
68+
}
69+
}
70+
71+
.edit-post-fullscreen-mode-close__back-icon {
72+
position: absolute;
73+
top: 0;
74+
left: 0;
75+
width: $header-height;
76+
height: $header-height;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
background-color: hsla(0, 0%, 80%);
81+
pointer-events: none;
82+
83+
svg {
84+
fill: currentColor;
5485
}
5586

56-
.edit-post-fullscreen-mode-close_site-icon {
57-
width: $button-size;
58-
height: $button-size;
59-
border-radius: $radius-small;
60-
object-fit: cover;
61-
// Compensate for the top-bar border.
62-
margin-top: -($border-width);
87+
&.has-site-icon {
88+
background-color: hsla(0, 0%, 100%, 0.6);
89+
-webkit-backdrop-filter: saturate(180%) blur(15px);
90+
backdrop-filter: saturate(180%) blur(15px);
6391
}
6492
}
6593

‎packages/edit-post/src/components/back-button/test/__snapshots__/fullscreen-mode-close.js.snap‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

0 commit comments

Comments
 (0)