Fix stylebook

WordPress · May 23, 2024 · 480f10b · 480f10b
1 parent 5d3b558
commit 480f10b
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 29 deletions.
diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -124,25 +124,27 @@ function EditorCanvasContainer( {
 
 	return (
 		<EditorCanvasContainerFill>
-			<ResizableEditor enableResizing={ enableResizing }>
-				{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
-				<section
-					className="edit-site-editor-canvas-container"
-					ref={ shouldShowCloseButton ? focusOnMountRef : null }
-					onKeyDown={ closeOnEscape }
-					aria-label={ title }
-				>
-					{ shouldShowCloseButton && (
-						<Button
-							className="edit-site-editor-canvas-container__close-button"
-							icon={ closeSmall }
-							label={ closeButtonLabel || __( 'Close' ) }
-							onClick={ onCloseContainer }
-						/>
-					) }
-					{ childrenWithProps }
-				</section>
-			</ResizableEditor>
+			<div className="edit-site-editor-canvas-container">
+				<ResizableEditor enableResizing={ enableResizing }>
+					{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+					<section
+						className="edit-site-editor-canvas-container__section"
+						ref={ shouldShowCloseButton ? focusOnMountRef : null }
+						onKeyDown={ closeOnEscape }
+						aria-label={ title }
+					>
+						{ shouldShowCloseButton && (
+							<Button
+								className="edit-site-editor-canvas-container__close-button"
+								icon={ closeSmall }
+								label={ closeButtonLabel || __( 'Close' ) }
+								onClick={ onCloseContainer }
+							/>
+						) }
+						{ childrenWithProps }
+					</section>
+				</ResizableEditor>
+			</div>
 		</EditorCanvasContainerFill>
 	);
 }

diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss
@@ -1,4 +1,12 @@
 .edit-site-editor-canvas-container {
+	height: 100%;
+
+	.edit-site-layout.is-full-canvas & {
+		padding: $grid-unit-30 $grid-unit-30 0;
+	}
+}
+
+.edit-site-editor-canvas-container__section {
 	background: $white; // Fallback color, overridden by JavaScript.
 	border-radius: $radius-block-ui;
 	bottom: 0;

diff --git a/packages/editor/src/components/editor-canvas/style.scss b/packages/editor/src/components/editor-canvas/style.scss
@@ -3,13 +3,6 @@
 
 	&.is-resizable {
 		max-height: 100%;
-
-		// To hide the horizontal scrollbar and show the drag handle on the
-		// left and right of the container.
-		.components-resizable-box__container {
-			overflow: visible;
-			margin: 0 auto;
-		}
 	}
 
 	&.has-padding {

diff --git a/packages/editor/src/components/resizable-editor/index.js b/packages/editor/src/components/resizable-editor/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -32,7 +37,9 @@ function ResizableEditor( { className, enableResizing, height, children } ) {
 	}, [] );
 	return (
 		<ResizableBox
-			className={ className }
+			className={ clsx( 'editor-resizable-editor', className, {
+				'is-resizable': enableResizing,
+			} ) }
 			ref={ ( api ) => {
 				resizableRef.current = api?.resizable;
 			} }

diff --git a/packages/editor/src/components/resizable-editor/resize-handle.js b/packages/editor/src/components/resizable-editor/resize-handle.js
@@ -41,7 +41,7 @@ export default function ResizeHandle( { direction, resizeWidthBy } ) {
 		<>
 			<Tooltip text={ __( 'Drag to resize' ) }>
 				<motion.button
-					className={ `resizable-editor__resize-handle is-${ direction }` }
+					className={ `editor-resizable-editor__resize-handle is-${ direction }` }
 					aria-label={ __( 'Drag to resize' ) }
 					aria-describedby={ resizableHandleHelpId }
 					onKeyDown={ handleKeyDown }

diff --git a/packages/editor/src/components/resizable-editor/style.scss b/packages/editor/src/components/resizable-editor/style.scss
@@ -1,4 +1,11 @@
-.resizable-editor__resize-handle {
+// To hide the horizontal scrollbar and show the drag handle on the
+// left and right of the container.
+.editor-resizable-editor.is-resizable {
+	overflow: visible;
+	margin: 0 auto;
+}
+
+.editor-resizable-editor__resize-handle {
 	position: absolute;
 	top: 0;
 	bottom: 0;