From f03c057ca3932cb339c101660ab6b2f15bd06b28 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 19 May 2022 13:46:58 +0100
Subject: [PATCH] Zoomed-out view instead of exploded view

---
 .../src/components/block-list/style.scss           | 11 ++++++++---
 .../block-editor/src/components/iframe/index.js    |  2 +-
 .../src/components/use-moving-animation/index.js   | 14 +++++---------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index b6c37cb2cf2b0..80f3a6599aa60 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -410,11 +410,16 @@
 }
 
 /** Exploded mode styles **/
-.is-root-container.is-exploded-mode > .wp-block {
+.is-root-container {
+	transition: transform 0.3s;
+}
+
+.is-root-container.is-exploded-mode {
 	transform-origin: center center;
-	position: relative;
-	overflow: hidden;
+	transform: scale(0.9);
+}
 
+.is-root-container.is-exploded-mode > .wp-block {
 	&::after {
 		content: "";
 		position: absolute;
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 43b0c6efc232b..7af304f04f546 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -216,7 +216,7 @@ function useExplodedModeBackgroundStyles( isExplodedMode, deps = [] ) {
 			newBackgroundStyles += hasTransparentBackground
 				? 'background-color: white;'
 				: '';
-			copiedStylesElement.innerHTML = `:where( .is-root-container.is-exploded-mode > .wp-block ) { ${ newBackgroundStyles } }`;
+			copiedStylesElement.innerHTML = `:where( .is-root-container.is-exploded-mode ) { ${ newBackgroundStyles } }`;
 			bodyStyleElement.innerHTML =
 				'body { background: #2f2f2f !important; }';
 
diff --git a/packages/block-editor/src/components/use-moving-animation/index.js b/packages/block-editor/src/components/use-moving-animation/index.js
index 503a83aeafb67..171169e1bd04e 100644
--- a/packages/block-editor/src/components/use-moving-animation/index.js
+++ b/packages/block-editor/src/components/use-moving-animation/index.js
@@ -47,14 +47,12 @@ const getAbsolutePosition = ( element ) => {
  * @param {boolean} $1.adjustScrolling          Adjust the scroll position to the current block.
  * @param {boolean} $1.enableAnimation          Enable/Disable animation.
  * @param {*}       $1.triggerAnimationOnChange Variable used to trigger the animation if it changes.
- * @param {*}       $1.scale                    Scale of the element
  */
 function useMovingAnimation( {
 	isSelected,
 	adjustScrolling,
 	enableAnimation,
 	triggerAnimationOnChange,
-	scale = 1,
 } ) {
 	const ref = useRef();
 	const prefersReducedMotion = useReducedMotion() || ! enableAnimation;
@@ -111,14 +109,13 @@ function useMovingAnimation( {
 			return;
 		}
 
-		ref.current.style.transform = `scale( ${ scale } )`;
+		ref.current.style.transform = undefined;
 		const destination = getAbsolutePosition( ref.current );
 
 		triggerAnimation();
 		setTransform( {
 			x: Math.round( previous.left - destination.left ),
 			y: Math.round( previous.top - destination.top ),
-			scale,
 		} );
 	}, [ triggerAnimationOnChange ] );
 
@@ -126,14 +123,14 @@ function useMovingAnimation( {
 		if ( ! ref.current ) {
 			return;
 		}
-		let { x, y, scale: currentScale } = value;
+		let { x, y } = value;
 		x = Math.round( x );
 		y = Math.round( y );
-		const finishedMoving = x === 0 && y === 0 && currentScale === scale;
+		const finishedMoving = x === 0 && y === 0;
 		ref.current.style.transformOrigin = 'center center';
 		ref.current.style.transform = finishedMoving
-			? `scale( ${ scale } )`
-			: `translate3d(${ x }px,${ y }px,0) scale(${ currentScale })`;
+			? undefined
+			: `translate3d(${ x }px,${ y }px,0)`;
 		ref.current.style.zIndex = isSelected ? '1' : '';
 
 		preserveScrollPosition();
@@ -148,7 +145,6 @@ function useMovingAnimation( {
 		to: {
 			x: 0,
 			y: 0,
-			scale,
 		},
 		reset: triggeredAnimation !== finishedAnimation,
 		config: { mass: 5, tension: 2000, friction: 200 },