Fix animation

WordPress · Apr 14, 2021 · 985a7fd · 985a7fd
1 parent e23bc1a
commit 985a7fd
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 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,10 +63,9 @@ export default function useResizeCanvas(
 					width: getCanvasWidth( device ),
 					margin: marginValue() + 'px auto',
 					height,
-					minHeight: height,
-					maxHeight: height,
 					borderRadius: '2px',
 					border: '1px solid #ddd',
+					overflowY: 'auto',
 				};
 			default:
 				return null;

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -65,9 +65,6 @@ export default function VisualEditor( { styles } ) {
 		height: '100%',
 		width: '100%',
 		margin: 0,
-		// padding: 0,
-		minHeight: 'auto',
-		maxHeight: 'auto',
 		// Add a constant padding for the typewritter effect. When typing at the
 		// bottom, there needs to be room to scroll up.
 		paddingBottom: hasMetaBoxes ? null : '40vh',
@@ -76,6 +73,7 @@ export default function VisualEditor( { styles } ) {
 		...desktopCanvasStyles,
 		borderRadius: '2px',
 		border: '1px solid #ddd',
+		paddingBottom: null,
 	};
 	const resizedCanvasStyles = useResizeCanvas( deviceType );
 	const defaultLayout = useEditorFeature( 'layout' );
@@ -85,11 +83,11 @@ export default function VisualEditor( { styles } ) {
 			? [ 'wide', 'full' ]
 			: [ 'left', 'center', 'right' ];
 
-	let appliedStyles = isTemplateMode
+	let animatedStyles = isTemplateMode
 		? templateModeStyles
 		: desktopCanvasStyles;
 	if ( resizedCanvasStyles ) {
-		appliedStyles = resizedCanvasStyles;
+		animatedStyles = resizedCanvasStyles;
 	}
 
 	const mergedRefs = useMergeRefs( [
@@ -132,7 +130,7 @@ export default function VisualEditor( { styles } ) {
 			<motion.div
 				ref={ mergedRefs }
 				className="editor-styles-wrapper"
-				animate={ appliedStyles }
+				animate={ animatedStyles }
 			>
 				<AnimatePresence>
 					<motion.div