Animate the canvas transitions

WordPress · Apr 13, 2021 · 3d94be2 · 3d94be2
1 parent af1950d
commit 3d94be2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git 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
@@ -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 {