Zoomed-out view instead of exploded view

WordPress · May 27, 2022 · f03c057 · f03c057
1 parent d83a3f9
commit f03c057
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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,29 +109,28 @@ 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 ] );
 
 	function onChange( { value } ) {
 		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 },