Skip to content

Commit af4bb4d

Browse files
youknowriadyouknowriad
committed
Allow resizing the sidebar and frame of the site editor
1 parent d9f13a8 commit af4bb4d

File tree

4 files changed

+132
-21
lines changed

4 files changed

+132
-21
lines changed

‎packages/edit-site/src/components/block-editor/style.scss

+17-5
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,27 @@
8484
bottom: 0;
8585
padding: 0;
8686
margin: auto 0;
87-
width: $grid-unit-05;
87+
width: $grid-unit-15;
8888
height: $height;
8989
appearance: none;
9090
cursor: ew-resize;
9191
outline: none;
92-
background: $gray-600;
92+
background: none;
9393
border-radius: 2px;
9494
border: 0;
9595

96+
&::after {
97+
position: absolute;
98+
top: 0;
99+
left: $grid-unit-05;
100+
right: 0;
101+
bottom: 0;
102+
content: "";
103+
width: $grid-unit-05;
104+
background: $gray-600;
105+
border-radius: 2px;
106+
}
107+
96108
&.is-left {
97109
left: -$grid-unit-20;
98110
}
@@ -101,12 +113,12 @@
101113
right: -$grid-unit-20;
102114
}
103115

104-
&:hover,
105-
&:active {
116+
&:hover::after,
117+
&:active::after {
106118
background: $gray-400;
107119
}
108120

109-
&:focus {
121+
&:focus::after {
110122
box-shadow: 0 0 0 1px $gray-800, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
111123
}
112124
}

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

+72-11
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
__unstableMotion as motion,
1212
__unstableAnimatePresence as AnimatePresence,
1313
__unstableUseNavigateRegions as useNavigateRegions,
14+
ResizableBox,
1415
} from '@wordpress/components';
1516
import {
1617
useReducedMotion,
@@ -35,8 +36,20 @@ import getIsListPage from '../../utils/get-is-list-page';
3536
import Header from '../header-edit-mode';
3637
import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
3738
import SiteHub from '../site-hub';
39+
import ResizeHandle from '../block-editor/resize-handle';
3840

3941
const ANIMATION_DURATION = 0.5;
42+
const emptyResizeHandleStyles = {
43+
position: undefined,
44+
userSelect: undefined,
45+
cursor: undefined,
46+
width: undefined,
47+
height: undefined,
48+
top: undefined,
49+
right: undefined,
50+
bottom: undefined,
51+
left: undefined,
52+
};
4053

4154
export default function Layout( { onError } ) {
4255
// This ensures the edited entity id and type are initialized properly.
@@ -86,6 +99,8 @@ export default function Layout( { onError } ) {
8699
// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
87100
const [ canvasResizer, canvasSize ] = useResizeObserver();
88101
const [ fullResizer, fullSize ] = useResizeObserver();
102+
const [ forcedWidth, setForcedWidth ] = useState( null );
103+
const [ isResizing, setIsResizing ] = useState( false );
89104
useEffect( () => {
90105
if ( canvasMode === 'view' && isMobileViewport ) {
91106
setIsMobileCanvasVisible( false );
@@ -113,6 +128,9 @@ export default function Layout( { onError } ) {
113128
>
114129
<SiteHub
115130
className="edit-site-layout__hub"
131+
style={ {
132+
width: forcedWidth ? forcedWidth - 48 : undefined,
133+
} }
116134
isMobileCanvasVisible={ isMobileCanvasVisible }
117135
setIsMobileCanvasVisible={ setIsMobileCanvasVisible }
118136
/>
@@ -149,7 +167,7 @@ export default function Layout( { onError } ) {
149167
<div className="edit-site-layout__content">
150168
<AnimatePresence initial={ false }>
151169
{ showSidebar && (
152-
<NavigableRegion
170+
<ResizableBox
153171
as={ motion.div }
154172
initial={ {
155173
opacity: 0,
@@ -167,17 +185,58 @@ export default function Layout( { onError } ) {
167185
: ANIMATION_DURATION,
168186
ease: 'easeOut',
169187
} }
188+
size={ {
189+
height: '100%',
190+
width:
191+
! isMobileViewport &&
192+
isEditorPage &&
193+
canvasMode === 'view'
194+
? forcedWidth ?? 360
195+
: undefined,
196+
} }
170197
className="edit-site-layout__sidebar"
171-
ariaLabel={ __( 'Navigation sidebar' ) }
198+
enable={ {
199+
right:
200+
! isMobileViewport &&
201+
isEditorPage &&
202+
canvasMode === 'view',
203+
} }
204+
onResizeStop={ ( event, direction, elt ) => {
205+
setForcedWidth( elt.clientWidth );
206+
setIsResizing( false );
207+
} }
208+
onResizeStart={ () => {
209+
setIsResizing( true );
210+
} }
211+
handleComponent={ {
212+
right: <ResizeHandle direction="right" />,
213+
} }
214+
handleClasses={ undefined }
215+
handleStyles={ {
216+
right: emptyResizeHandleStyles,
217+
} }
218+
minWidth={ 320 }
219+
maxWidth={
220+
fullSize ? fullSize.width - 360 : undefined
221+
}
172222
>
173-
<Sidebar />
174-
</NavigableRegion>
223+
<NavigableRegion
224+
ariaLabel={ __( 'Navigation sidebar' ) }
225+
>
226+
<Sidebar />
227+
</NavigableRegion>
228+
</ResizableBox>
175229
) }
176230
</AnimatePresence>
177231

178232
{ showCanvas && (
179233
<div
180-
className="edit-site-layout__canvas-container"
234+
className={ classnames(
235+
'edit-site-layout__canvas-container',
236+
{
237+
'is-resizing': isResizing,
238+
}
239+
) }
181240
style={ {
182241
paddingTop: showFrame ? canvasPadding : 0,
183242
paddingBottom: showFrame ? canvasPadding : 0,
@@ -191,9 +250,10 @@ export default function Layout( { onError } ) {
191250
className="edit-site-layout__canvas"
192251
transition={ {
193252
type: 'tween',
194-
duration: disableMotion
195-
? 0
196-
: ANIMATION_DURATION,
253+
duration:
254+
disableMotion || isResizing
255+
? 0
256+
: ANIMATION_DURATION,
197257
ease: 'easeOut',
198258
} }
199259
>
@@ -213,9 +273,10 @@ export default function Layout( { onError } ) {
213273
} }
214274
transition={ {
215275
type: 'tween',
216-
duration: disableMotion
217-
? 0
218-
: ANIMATION_DURATION,
276+
duration:
277+
disableMotion || isResizing
278+
? 0
279+
: ANIMATION_DURATION,
219280
ease: 'easeOut',
220281
} }
221282
>

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

+40-3
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
7070

7171
.edit-site-layout__sidebar {
7272
z-index: z-index(".edit-site-layout__sidebar");
73-
overflow-y: auto;
7473
width: 100vw;
75-
@include custom-scrollbars-on-hover;
7674

7775
@include break-medium {
7876
width: $nav-sidebar-width;
@@ -85,12 +83,37 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
8583
left: 0;
8684
top: 0;
8785
}
86+
87+
.resizable-editor__drag-handle {
88+
opacity: 1;
89+
animation: drag-handle__fade-in-animation 1s ease;
90+
&.is-right {
91+
right: -$grid-unit-20 + $canvas-padding;
92+
}
93+
}
94+
95+
> div {
96+
overflow-y: auto;
97+
min-height: 100%;
98+
@include custom-scrollbars-on-hover;
99+
}
88100
}
89101

90102
.edit-site-layout__canvas-container {
91103
position: relative;
92104
flex-grow: 1;
93105
z-index: z-index(".edit-site-layout__canvas-container");
106+
107+
&.is-resizing::after {
108+
// This covers the whole content which ensures mouse up triggers
109+
// even if the content is "inert".
110+
position: absolute;
111+
top: 0;
112+
left: 0;
113+
right: 0;
114+
bottom: 0;
115+
content: "";
116+
}
94117
}
95118

96119
.edit-site-layout__canvas {
@@ -99,11 +122,12 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
99122
left: 0;
100123
bottom: 0;
101124
width: 100%;
102-
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
103125

104126
& > div {
105127
color: $gray-900;
106128
background: $white;
129+
z-index: -1;
130+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
107131
}
108132
@include break-medium {
109133
top: $canvas-padding;
@@ -181,3 +205,16 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
181205
border-radius: $radius-block-ui;
182206
}
183207
}
208+
209+
@keyframes drag-handle__fade-in-animation {
210+
0% {
211+
opacity: 0;
212+
}
213+
// Delay showing the drag handles after the layout animation finishes.
214+
50% {
215+
opacity: 0;
216+
}
217+
100% {
218+
opacity: 1;
219+
}
220+
}

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ import useEditedEntityRecord from '../use-edited-entity-record';
3030
const HUB_ANIMATION_DURATION = 0.3;
3131

3232
function SiteHub( {
33-
className,
3433
isMobileCanvasVisible,
3534
setIsMobileCanvasVisible,
35+
...props
3636
} ) {
3737
const { params } = useLocation();
3838
const isListPage = getIsListPage( params );
@@ -81,7 +81,8 @@ function SiteHub( {
8181

8282
return (
8383
<motion.div
84-
className={ classnames( 'edit-site-site-hub', className ) }
84+
{ ...props }
85+
className={ classnames( 'edit-site-site-hub', props.className ) }
8586
layout
8687
transition={ {
8788
type: 'tween',

0 commit comments

Comments
 (0)