Fix toolbar in device preview (#31600)

WordPress · May 16, 2021 · 449fb8b · 449fb8b
1 parent 66ee794
commit 449fb8b
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 65 deletions.
diff --git a/packages/block-editor/src/components/use-resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js
@@ -63,7 +63,7 @@ export default function useResizeCanvas(
 					width: getCanvasWidth( device ),
 					margin: marginValue() + 'px auto',
 					height,
-					borderRadius: '2px',
+					borderRadius: '2px 2px 2px 2px',
 					border: '1px solid #ddd',
 					overflowY: 'auto',
 				};

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -60,7 +60,7 @@ function MaybeIframe( {
 				<div
 					ref={ contentRef }
 					className="editor-styles-wrapper"
-					style={ { width: '100%', height: '100%', ...style } }
+					style={ style }
 				>
 					{ children }
 				</div>
@@ -167,14 +167,10 @@ export default function VisualEditor( { styles } ) {
 	);
 
 	return (
-		<motion.div
+		<div
 			className={ classnames( 'edit-post-visual-editor', {
 				'is-template-mode': isTemplateMode,
 			} ) }
-			animate={
-				isTemplateMode ? { padding: '48px 48px 0' } : { padding: 0 }
-			}
-			ref={ blockSelectionClearerRef }
 		>
 			{ themeSupportsLayout && (
 				<LayoutStyle
@@ -183,67 +179,75 @@ export default function VisualEditor( { styles } ) {
 				/>
 			) }
 			<VisualEditorGlobalKeyboardShortcuts />
-			{ isTemplateMode && (
-				<Button
-					className="edit-post-visual-editor__exit-template-mode"
-					icon={ arrowLeft }
-					onClick={ () => {
-						clearSelectedBlock();
-						setIsEditingTemplate( false );
+			<BlockTools __unstableContentRef={ ref }>
+				<motion.div
+					className="edit-post-visual-editor__content-area"
+					animate={ {
+						padding: isTemplateMode ? '48px 48px 0' : '0',
 					} }
+					ref={ blockSelectionClearerRef }
 				>
-					{ __( 'Back' ) }
-				</Button>
-			) }
-			<motion.div
-				animate={ animatedStyles }
-				initial={ desktopCanvasStyles }
-			>
-				<BlockTools __unstableContentRef={ ref }>
-					<MaybeIframe
-						isTemplateMode={ isTemplateMode }
-						contentRef={ contentRef }
-						styles={ styles }
-						style={ { paddingBottom } }
+					{ isTemplateMode && (
+						<Button
+							className="edit-post-visual-editor__exit-template-mode"
+							icon={ arrowLeft }
+							onClick={ () => {
+								clearSelectedBlock();
+								setIsEditingTemplate( false );
+							} }
+						>
+							{ __( 'Back' ) }
+						</Button>
+					) }
+					<motion.div
+						animate={ animatedStyles }
+						initial={ desktopCanvasStyles }
 					>
-						<AnimatePresence>
-							<motion.div
-								key={ isTemplateMode ? 'template' : 'post' }
-								initial={ { opacity: 0 } }
-								animate={ { opacity: 1 } }
-							>
-								<WritingFlow>
-									{ ! isTemplateMode && (
-										<div className="edit-post-visual-editor__post-title-wrapper">
-											<PostTitle />
-										</div>
-									) }
-									<RecursionProvider>
-										<BlockList
-											__experimentalLayout={
-												themeSupportsLayout
-													? {
-															type: 'default',
-															// Find a way to inject this in the support flag code (hooks).
-															alignments: themeSupportsLayout
-																? alignments
-																: undefined,
-													  }
-													: undefined
-											}
-										/>
-									</RecursionProvider>
-								</WritingFlow>
-							</motion.div>
-						</AnimatePresence>
-					</MaybeIframe>
-				</BlockTools>
-			</motion.div>
+						<MaybeIframe
+							isTemplateMode={ isTemplateMode }
+							contentRef={ contentRef }
+							styles={ styles }
+							style={ { paddingBottom } }
+						>
+							<AnimatePresence>
+								<motion.div
+									key={ isTemplateMode ? 'template' : 'post' }
+									initial={ { opacity: 0 } }
+									animate={ { opacity: 1 } }
+								>
+									<WritingFlow>
+										{ ! isTemplateMode && (
+											<div className="edit-post-visual-editor__post-title-wrapper">
+												<PostTitle />
+											</div>
+										) }
+										<RecursionProvider>
+											<BlockList
+												__experimentalLayout={
+													themeSupportsLayout
+														? {
+																type: 'default',
+																// Find a way to inject this in the support flag code (hooks).
+																alignments: themeSupportsLayout
+																	? alignments
+																	: undefined,
+														  }
+														: undefined
+												}
+											/>
+										</RecursionProvider>
+									</WritingFlow>
+								</motion.div>
+							</AnimatePresence>
+						</MaybeIframe>
+					</motion.div>
+				</motion.div>
+			</BlockTools>
 			<__unstableBlockSettingsMenuFirstItem>
 				{ ( { onClose } ) => (
 					<BlockInspectorButton onClick={ onClose } />
 				) }
 			</__unstableBlockSettingsMenuFirstItem>
-		</motion.div>
+		</div>
 	);
 }
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
@@ -32,16 +32,13 @@
 	// Default background color so that grey .edit-post-editor-regions__content
 	// color doesn't show through.
 	background-color: $white;
+	flex: 1;
 
 	cursor: text;
 
 	> * {
 		cursor: auto;
 	}
-
-	> div {
-		min-height: 100%;
-	}
 }
 
 // Ideally this wrapper div is not needed but if we want to match the positioning of blocks
@@ -74,3 +71,9 @@
 		color: $gray-100;
 	}
 }
+
+.edit-post-visual-editor__content-area {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}