Try adding a resize handle to resize the canvas

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

@@ -26,11 +26,7 @@ import {
 	store as blockEditorStore,
 	__unstableBlockNameContext,
 } from '@wordpress/block-editor';
-import {
-	useMergeRefs,
-	useViewportMatch,
-	useResizeObserver,
-} from '@wordpress/compose';
+import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 import { listView } from '@wordpress/icons';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
@@ -143,7 +139,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const [ resizeObserver, sizes ] = useResizeObserver();
 
 	const isTemplatePart = templateType === 'wp_template_part';
 	const hasBlocks = blocks.length !== 0;
@@ -229,28 +224,22 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 						>
 							<BlockEditorKeyboardShortcuts.Register />
 							<BackButton />
-							<ResizableEditor
+							<EditorCanvas
 								enableResizing={ enableResizing }
-								height={ sizes.height }
+								settings={ settings }
+								contentRef={ mergedRefs }
+								readonly={ canvasMode === 'view' }
 							>
-								<EditorCanvas
-									enableResizing={ enableResizing }
-									settings={ settings }
-									contentRef={ mergedRefs }
-									readonly={ canvasMode === 'view' }
-								>
-									{ resizeObserver }
-									<BlockList
-										className="edit-site-block-editor__block-list wp-site-blocks"
-										__experimentalLayout={ LAYOUT }
-										renderAppender={
-											isTemplatePart && hasBlocks
-												? false
-												: undefined
-										}
-									/>
-								</EditorCanvas>
-							</ResizableEditor>
+								<BlockList
+									className="edit-site-block-editor__block-list wp-site-blocks"
+									__experimentalLayout={ LAYOUT }
+									renderAppender={
+										isTemplatePart && hasBlocks
+											? false
+											: undefined
+									}
+								/>
+							</EditorCanvas>
 							<__unstableBlockSettingsMenuFirstItem>
 								{ ( { onClose } ) => (
 									<BlockInspectorButton onClick={ onClose } />

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

@@ -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;
 	}
@@ -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);
 	}
 }

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

@@ -12,6 +12,7 @@ import {
 	__experimentalHStack as HStack,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
+	ResizableBox,
 	__unstableUseNavigateRegions as useNavigateRegions,
 } from '@wordpress/components';
 import {
@@ -38,9 +39,21 @@ import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
 import SiteIcon from '../site-icon';
 import SiteTitle from '../site-title';
+import ResizeHandle from '../block-editor/resize-handle';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 
 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.
@@ -96,6 +109,9 @@ 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 [ canvasContainerResizer, canvasContainerSize ] = useResizeObserver();
+	const [ forcedWidth, setForcedWidth ] = useState( null );
+	const [ isResizing, setIsResizing ] = useState( false );
 	useEffect( () => {
 		if ( canvasMode === 'view' && isMobileViewport ) {
 			setIsMobileCanvasVisible( false );
@@ -245,54 +261,105 @@ export default function Layout( { onError } ) {
 
 				{ 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,
 						} }
 					>
-						{ canvasResizer }
-						{ !! canvasSize.width && (
-							<motion.div
-								initial={ false }
-								layout="position"
-								className="edit-site-layout__canvas"
-								transition={ {
-									type: 'tween',
-									duration: disableMotion
-										? 0
-										: ANIMATION_DURATION,
-									ease: 'easeOut',
-								} }
-							>
+						{ canvasContainerResizer }
+						<ResizableBox
+							size={ {
+								height: '100%',
+								width:
+									! isMobileViewport &&
+									isEditorPage &&
+									canvasMode === 'view'
+										? forcedWidth ?? '100%'
+										: '100%',
+							} }
+							resizeRatio={ 2 }
+							className="edit-site-layout__resize-handle-container"
+							minWidth={ 360 }
+							maxWidth={ canvasContainerSize.width }
+							enable={ {
+								left:
+									! isMobileViewport &&
+									isEditorPage &&
+									canvasMode === 'view',
+								right:
+									! isMobileViewport &&
+									isEditorPage &&
+									canvasMode === 'view',
+							} }
+							onResizeStop={ () => {
+								setForcedWidth( canvasSize.width );
+								setIsResizing( false );
+							} }
+							onResizeStart={ () => {
+								setIsResizing( true );
+							} }
+							handleComponent={ {
+								left: <ResizeHandle direction="left" />,
+								right: <ResizeHandle direction="right" />,
+							} }
+							handleClasses={ undefined }
+							handleStyles={ {
+								left: emptyResizeHandleStyles,
+								right: emptyResizeHandleStyles,
+							} }
+						>
+							{ canvasResizer }
+							{ !! canvasSize.width && (
 								<motion.div
-									style={ {
-										position: 'absolute',
-										top: 0,
-										left: 0,
-										bottom: 0,
-									} }
 									initial={ false }
-									animate={ {
-										width: showFrame
-											? canvasSize.width - canvasPadding
-											: fullSize.width,
-									} }
+									layout="position"
+									className="edit-site-layout__canvas"
 									transition={ {
 										type: 'tween',
-										duration: disableMotion
-											? 0
-											: ANIMATION_DURATION,
+										duration:
+											disableMotion || isResizing
+												? 0
+												: ANIMATION_DURATION,
 										ease: 'easeOut',
 									} }
 								>
-									<ErrorBoundary onError={ onError }>
-										{ isEditorPage && <Editor /> }
-										{ isListPage && <ListPage /> }
-									</ErrorBoundary>
+									<motion.div
+										style={ {
+											position: 'absolute',
+											top: 0,
+											left: 0,
+											bottom: 0,
+										} }
+										initial={ false }
+										animate={ {
+											width: showFrame
+												? canvasSize.width -
+												  canvasPadding
+												: fullSize.width,
+										} }
+										transition={ {
+											type: 'tween',
+											duration:
+												disableMotion || isResizing
+													? 0
+													: ANIMATION_DURATION,
+											ease: 'easeOut',
+										} }
+									>
+										<ErrorBoundary onError={ onError }>
+											{ isEditorPage && <Editor /> }
+											{ isListPage && <ListPage /> }
+										</ErrorBoundary>
+									</motion.div>
 								</motion.div>
-							</motion.div>
-						) }
+							) }
+						</ResizableBox>
 					</div>
 				) }
 			</div>

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

@@ -78,6 +78,19 @@
 	position: relative;
 	flex-grow: 1;
 	z-index: 2;
+	justify-self: center;
+	width: 100%;
+
+	&.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 {
@@ -86,12 +99,14 @@
 	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 {
+		z-index: -1;
 		color: $gray-900;
 		background: $white;
+		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 	}
+
 	@include break-small {
 		top: $canvas-padding;
 		bottom: $canvas-padding;
@@ -174,3 +189,28 @@
 		object-fit: cover;
 	}
 }
+
+.edit-site-layout__resize-handle-container {
+	margin: auto;
+
+	.resizable-editor__drag-handle {
+		opacity: 1;
+		animation: drag-handle__fade-in-animation 1s ease;
+		&.is-right {
+			right: -$grid-unit-20 + $canvas-padding;
+		}
+	}
+}
+
+@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;
+	}
+}