Skip to content

Commit

Permalink
Allow resizing the sidebar and frame of the site editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad committed Jan 5, 2023
1 parent d9f13a8 commit af4bb4d
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 21 deletions.
22 changes: 17 additions & 5 deletions packages/edit-site/src/components/block-editor/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,15 +84,27 @@
bottom: 0;
padding: 0;
margin: auto 0;
width: $grid-unit-05;
width: $grid-unit-15;
height: $height;
appearance: none;
cursor: ew-resize;
outline: none;
background: $gray-600;
background: none;
border-radius: 2px;
border: 0;

&::after {
position: absolute;
top: 0;
left: $grid-unit-05;
right: 0;
bottom: 0;
content: "";
width: $grid-unit-05;
background: $gray-600;
border-radius: 2px;
}

&.is-left {
left: -$grid-unit-20;
}
Expand All @@ -101,12 +113,12 @@
right: -$grid-unit-20;
}

&:hover,
&:active {
&:hover::after,
&:active::after {
background: $gray-400;
}

&:focus {
&:focus::after {
box-shadow: 0 0 0 1px $gray-800, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
}
}
83 changes: 72 additions & 11 deletions packages/edit-site/src/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
__unstableMotion as motion,
__unstableAnimatePresence as AnimatePresence,
__unstableUseNavigateRegions as useNavigateRegions,
ResizableBox,
} from '@wordpress/components';
import {
useReducedMotion,
Expand All @@ -35,8 +36,20 @@ import getIsListPage from '../../utils/get-is-list-page';
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 ResizeHandle from '../block-editor/resize-handle';

const ANIMATION_DURATION = 0.5;
const emptyResizeHandleStyles = {
position: undefined,
userSelect: undefined,
cursor: undefined,
width: undefined,
height: undefined,
top: undefined,
right: undefined,
bottom: undefined,
left: undefined,
};

export default function Layout( { onError } ) {
// This ensures the edited entity id and type are initialized properly.
Expand Down Expand Up @@ -86,6 +99,8 @@ export default function Layout( { onError } ) {
// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
const [ canvasResizer, canvasSize ] = useResizeObserver();
const [ fullResizer, fullSize ] = useResizeObserver();
const [ forcedWidth, setForcedWidth ] = useState( null );
const [ isResizing, setIsResizing ] = useState( false );
useEffect( () => {
if ( canvasMode === 'view' && isMobileViewport ) {
setIsMobileCanvasVisible( false );
Expand Down Expand Up @@ -113,6 +128,9 @@ export default function Layout( { onError } ) {
>
<SiteHub
className="edit-site-layout__hub"
style={ {
width: forcedWidth ? forcedWidth - 48 : undefined,
} }
isMobileCanvasVisible={ isMobileCanvasVisible }
setIsMobileCanvasVisible={ setIsMobileCanvasVisible }
/>
Expand Down Expand Up @@ -149,7 +167,7 @@ export default function Layout( { onError } ) {
<div className="edit-site-layout__content">
<AnimatePresence initial={ false }>
{ showSidebar && (
<NavigableRegion
<ResizableBox
as={ motion.div }
initial={ {
opacity: 0,
Expand All @@ -167,17 +185,58 @@ export default function Layout( { onError } ) {
: ANIMATION_DURATION,
ease: 'easeOut',
} }
size={ {
height: '100%',
width:
! isMobileViewport &&
isEditorPage &&
canvasMode === 'view'
? forcedWidth ?? 360
: undefined,
} }
className="edit-site-layout__sidebar"
ariaLabel={ __( 'Navigation sidebar' ) }
enable={ {
right:
! isMobileViewport &&
isEditorPage &&
canvasMode === 'view',
} }
onResizeStop={ ( event, direction, elt ) => {
setForcedWidth( elt.clientWidth );
setIsResizing( false );
} }
onResizeStart={ () => {
setIsResizing( true );
} }
handleComponent={ {
right: <ResizeHandle direction="right" />,
} }
handleClasses={ undefined }
handleStyles={ {
right: emptyResizeHandleStyles,
} }
minWidth={ 320 }
maxWidth={
fullSize ? fullSize.width - 360 : undefined
}
>
<Sidebar />
</NavigableRegion>
<NavigableRegion
ariaLabel={ __( 'Navigation sidebar' ) }
>
<Sidebar />
</NavigableRegion>
</ResizableBox>
) }
</AnimatePresence>

{ showCanvas && (
<div
className="edit-site-layout__canvas-container"
className={ classnames(
'edit-site-layout__canvas-container',
{
'is-resizing': isResizing,
}
) }
style={ {
paddingTop: showFrame ? canvasPadding : 0,
paddingBottom: showFrame ? canvasPadding : 0,
Expand All @@ -191,9 +250,10 @@ export default function Layout( { onError } ) {
className="edit-site-layout__canvas"
transition={ {
type: 'tween',
duration: disableMotion
? 0
: ANIMATION_DURATION,
duration:
disableMotion || isResizing
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
} }
>
Expand All @@ -213,9 +273,10 @@ export default function Layout( { onError } ) {
} }
transition={ {
type: 'tween',
duration: disableMotion
? 0
: ANIMATION_DURATION,
duration:
disableMotion || isResizing
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
} }
>
Expand Down
43 changes: 40 additions & 3 deletions packages/edit-site/src/components/layout/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size;

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

@include break-medium {
width: $nav-sidebar-width;
Expand All @@ -85,12 +83,37 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
left: 0;
top: 0;
}

.resizable-editor__drag-handle {
opacity: 1;
animation: drag-handle__fade-in-animation 1s ease;
&.is-right {
right: -$grid-unit-20 + $canvas-padding;
}
}

> div {
overflow-y: auto;
min-height: 100%;
@include custom-scrollbars-on-hover;
}
}

.edit-site-layout__canvas-container {
position: relative;
flex-grow: 1;
z-index: z-index(".edit-site-layout__canvas-container");

&.is-resizing::after {
// This covers the whole content which ensures mouse up triggers
// even if the content is "inert".
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
}
}

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

& > div {
color: $gray-900;
background: $white;
z-index: -1;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
}
@include break-medium {
top: $canvas-padding;
Expand Down Expand Up @@ -181,3 +205,16 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
border-radius: $radius-block-ui;
}
}

@keyframes drag-handle__fade-in-animation {
0% {
opacity: 0;
}
// Delay showing the drag handles after the layout animation finishes.
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
5 changes: 3 additions & 2 deletions packages/edit-site/src/components/site-hub/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ import useEditedEntityRecord from '../use-edited-entity-record';
const HUB_ANIMATION_DURATION = 0.3;

function SiteHub( {
className,
isMobileCanvasVisible,
setIsMobileCanvasVisible,
...props
} ) {
const { params } = useLocation();
const isListPage = getIsListPage( params );
Expand Down Expand Up @@ -81,7 +81,8 @@ function SiteHub( {

return (
<motion.div
className={ classnames( 'edit-site-site-hub', className ) }
{ ...props }
className={ classnames( 'edit-site-site-hub', props.className ) }
layout
transition={ {
type: 'tween',
Expand Down

1 comment on commit af4bb4d

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3846531521
📝 Reported issues:

Please sign in to comment.