From 3d94be216c773751fbb0674834fd1f0bb45a8186 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 13 Apr 2021 13:40:08 +0100
Subject: [PATCH] Animate the canvas transitions

---
 .../edit-post/src/components/visual-editor/index.js  |  3 +++
 .../src/components/visual-editor/style.scss          | 12 ++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index a78806557eb6e3..c6ed160717f439 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -40,6 +40,7 @@ import { store as editPostStore } from '../../store';
 
 export default function VisualEditor( { styles } ) {
 	const ref = useRef();
+
 	const { deviceType, isTemplateMode } = useSelect( ( select ) => {
 		const {
 			isEditingTemplate,
@@ -61,6 +62,8 @@ export default function VisualEditor( { styles } ) {
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	const desktopCanvasStyles = {
 		height: '100%',
+		width: '100%',
+		margin: 0,
 		// 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',
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index 6a687b1d454f0f..7e54c9152ba88b 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -1,5 +1,8 @@
 .edit-post-visual-editor {
 	position: relative;
+	transition: padding 0.2s linear;
+	@include reduce-motion("transition");
+	padding: 0;
 
 	// The button element easily inherits styles that are meant for the editor style.
 	// These rules enhance the specificity to reduce that inheritance.
@@ -32,6 +35,15 @@
 			border: 1px solid $gray-300;
 		}
 	}
+
+	&.is-preview {
+		padding: $grid-unit-60;
+	}
+
+	.editor-styles-wrapper {
+		transition: all 0.2s linear;
+		@include reduce-motion("transition");
+	}
 }
 
 .editor-styles-wrapper {