@wordpress/block-editor 14.7.1-next.082ed6819.0 → 14.8.0

package/build-module/components/iframe/use-scale-canvas.js

@@ -0,0 +1,371 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef, useCallback } from '@wordpress/element';
+import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
+
+/**
+ * @typedef {Object} TransitionState
+ * @property {number} scaleValue   Scale of the canvas.
+ * @property {number} frameSize    Size of the frame/offset around the canvas.
+ * @property {number} clientHeight ClientHeight of the iframe.
+ * @property {number} scrollTop    ScrollTop of the iframe.
+ * @property {number} scrollHeight ScrollHeight of the iframe.
+ */
+
+/**
+ * Calculate the scale of the canvas.
+ *
+ * @param {Object} options                     Object of options
+ * @param {number} options.frameSize           Size of the frame/offset around the canvas
+ * @param {number} options.containerWidth      Actual width of the canvas container
+ * @param {number} options.maxContainerWidth   Maximum width of the container to use for the scale calculation. This locks the canvas to a maximum width when zooming out.
+ * @param {number} options.scaleContainerWidth Width the of the container wrapping the canvas container
+ * @return {number} Scale value between 0 and/or equal to 1
+ */
+function calculateScale({
+  frameSize,
+  containerWidth,
+  maxContainerWidth,
+  scaleContainerWidth
+}) {
+  return (Math.min(containerWidth, maxContainerWidth) - frameSize * 2) / scaleContainerWidth;
+}
+
+/**
+ * Compute the next scrollTop position after scaling the iframe content.
+ *
+ * @param {TransitionState} transitionFrom Starting point of the transition
+ * @param {TransitionState} transitionTo   Ending state of the transition
+ * @return {number} Next scrollTop position after scaling the iframe content.
+ */
+function computeScrollTopNext(transitionFrom, transitionTo) {
+  const {
+    clientHeight: prevClientHeight,
+    frameSize: prevFrameSize,
+    scaleValue: prevScale,
+    scrollTop,
+    scrollHeight
+  } = transitionFrom;
+  const {
+    clientHeight,
+    frameSize,
+    scaleValue
+  } = transitionTo;
+  // Step 0: Start with the current scrollTop.
+  let scrollTopNext = scrollTop;
+  // Step 1: Undo the effects of the previous scale and frame around the
+  // midpoint of the visible area.
+  scrollTopNext = (scrollTopNext + prevClientHeight / 2 - prevFrameSize) / prevScale - prevClientHeight / 2;
+
+  // Step 2: Apply the new scale and frame around the midpoint of the
+  // visible area.
+  scrollTopNext = (scrollTopNext + clientHeight / 2) * scaleValue + frameSize - clientHeight / 2;
+
+  // Step 3: Handle an edge case so that you scroll to the top of the
+  // iframe if the top of the iframe content is visible in the container.
+  // The same edge case for the bottom is skipped because changing content
+  // makes calculating it impossible.
+  scrollTopNext = scrollTop <= prevFrameSize ? 0 : scrollTopNext;
+
+  // This is the scrollTop value if you are scrolled to the bottom of the
+  // iframe. We can't just let the browser handle it because we need to
+  // animate the scaling.
+  const maxScrollTop = scrollHeight * (scaleValue / prevScale) + frameSize * 2 - clientHeight;
+
+  // Step 4: Clamp the scrollTopNext between the minimum and maximum
+  // possible scrollTop positions. Round the value to avoid subpixel
+  // truncation by the browser which sometimes causes a 1px error.
+  return Math.round(Math.min(Math.max(0, scrollTopNext), Math.max(0, maxScrollTop)));
+}
+
+/**
+ * Generate the keyframes to use for the zoom out animation.
+ *
+ * @param {TransitionState} transitionFrom Starting transition state.
+ * @param {TransitionState} transitionTo   Ending transition state.
+ * @return {Object[]} An array of keyframes to use for the animation.
+ */
+function getAnimationKeyframes(transitionFrom, transitionTo) {
+  const {
+    scaleValue: prevScale,
+    frameSize: prevFrameSize,
+    scrollTop
+  } = transitionFrom;
+  const {
+    scaleValue,
+    frameSize,
+    scrollTop: scrollTopNext
+  } = transitionTo;
+  return [{
+    translate: `0 0`,
+    scale: prevScale,
+    paddingTop: `${prevFrameSize / prevScale}px`,
+    paddingBottom: `${prevFrameSize / prevScale}px`
+  }, {
+    translate: `0 ${scrollTop - scrollTopNext}px`,
+    scale: scaleValue,
+    paddingTop: `${frameSize / scaleValue}px`,
+    paddingBottom: `${frameSize / scaleValue}px`
+  }];
+}
+
+/**
+ * @typedef {Object} ScaleCanvasResult
+ * @property {boolean} isZoomedOut             A boolean indicating if the canvas is zoomed out.
+ * @property {number}  scaleContainerWidth     The width of the container used to calculate the scale.
+ * @property {Object}  contentResizeListener   A resize observer for the content.
+ * @property {Object}  containerResizeListener A resize observer for the container.
+ */
+
+/**
+ * Handles scaling the canvas for the zoom out mode and animating between
+ * the states.
+ *
+ * @param {Object}        options                   Object of options.
+ * @param {number}        options.frameSize         Size of the frame around the content.
+ * @param {Document}      options.iframeDocument    Document of the iframe.
+ * @param {number}        options.maxContainerWidth Max width of the canvas to use as the starting scale point. Defaults to 750.
+ * @param {number|string} options.scale             Scale of the canvas. Can be an decimal between 0 and 1, 1, or 'auto-scaled'.
+ * @return {ScaleCanvasResult} Properties of the result.
+ */
+export function useScaleCanvas({
+  frameSize,
+  iframeDocument,
+  maxContainerWidth = 750,
+  scale
+}) {
+  const [contentResizeListener, {
+    height: contentHeight
+  }] = useResizeObserver();
+  const [containerResizeListener, {
+    width: containerWidth
+  }] = useResizeObserver();
+  const initialContainerWidthRef = useRef(0);
+  const isZoomedOut = scale !== 1;
+  const prefersReducedMotion = useReducedMotion();
+  const isAutoScaled = scale === 'auto-scaled';
+  // Track if the animation should start when the useEffect runs.
+  const startAnimationRef = useRef(false);
+  // Track the animation so we know if we have an animation running,
+  // and can cancel it, reverse it, call a finish event, etc.
+  const animationRef = useRef(null);
+  useEffect(() => {
+    if (!isZoomedOut) {
+      initialContainerWidthRef.current = containerWidth;
+    }
+  }, [containerWidth, isZoomedOut]);
+  const scaleContainerWidth = Math.max(initialContainerWidthRef.current, containerWidth);
+  const scaleValue = isAutoScaled ? calculateScale({
+    frameSize,
+    containerWidth,
+    maxContainerWidth,
+    scaleContainerWidth
+  }) : scale;
+
+  /**
+   * The starting transition state for the zoom out animation.
+   * @type {import('react').RefObject<TransitionState>}
+   */
+  const transitionFromRef = useRef({
+    scaleValue,
+    frameSize,
+    clientHeight: 0,
+    scrollTop: 0,
+    scrollHeight: 0
+  });
+
+  /**
+   * The ending transition state for the zoom out animation.
+   * @type {import('react').RefObject<TransitionState>}
+   */
+  const transitionToRef = useRef({
+    scaleValue,
+    frameSize,
+    clientHeight: 0,
+    scrollTop: 0,
+    scrollHeight: 0
+  });
+
+  /**
+   * Start the zoom out animation. This sets the necessary CSS variables
+   * for animating the canvas and returns the Animation object.
+   *
+   * @return {Animation} The animation object for the zoom out animation.
+   */
+  const startZoomOutAnimation = useCallback(() => {
+    const {
+      scrollTop
+    } = transitionFromRef.current;
+    const {
+      scrollTop: scrollTopNext
+    } = transitionToRef.current;
+    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scroll-top', `${scrollTop}px`);
+    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scroll-top-next', `${scrollTopNext}px`);
+    iframeDocument.documentElement.classList.add('zoom-out-animation');
+    return iframeDocument.documentElement.animate(getAnimationKeyframes(transitionFromRef.current, transitionToRef.current), {
+      easing: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',
+      duration: 400
+    });
+  }, [iframeDocument]);
+
+  /**
+   * Callback when the zoom out animation is finished.
+   * - Cleans up animations refs.
+   * - Adds final CSS vars for scale and frame size to preserve the state.
+   * - Removes the 'zoom-out-animation' class (which has the fixed positioning).
+   * - Sets the final scroll position after the canvas is no longer in fixed position.
+   * - Removes CSS vars related to the animation.
+   * - Sets the transitionFrom to the transitionTo state to be ready for the next animation.
+   */
+  const finishZoomOutAnimation = useCallback(() => {
+    startAnimationRef.current = false;
+    animationRef.current = null;
+
+    // Add our final scale and frame size now that the animation is done.
+    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale', transitionToRef.current.scaleValue);
+    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-frame-size', `${transitionToRef.current.frameSize}px`);
+    iframeDocument.documentElement.classList.remove('zoom-out-animation');
+
+    // Set the final scroll position that was just animated to.
+    // Disable reason: Eslint isn't smart enough to know that this is a
+    // DOM element. https://github.com/facebook/react/issues/31483
+    // eslint-disable-next-line react-compiler/react-compiler
+    iframeDocument.documentElement.scrollTop = transitionToRef.current.scrollTop;
+    iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-scroll-top');
+    iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-scroll-top-next');
+
+    // Update previous values.
+    transitionFromRef.current = transitionToRef.current;
+  }, [iframeDocument]);
+
+  /**
+   * Runs when zoom out mode is toggled, and sets the startAnimation flag
+   * so the animation will start when the next useEffect runs. We _only_
+   * want to animate when the zoom out mode is toggled, not when the scale
+   * changes due to the container resizing.
+   */
+  useEffect(() => {
+    if (!iframeDocument) {
+      return;
+    }
+    if (isZoomedOut) {
+      iframeDocument.documentElement.classList.add('is-zoomed-out');
+    }
+    startAnimationRef.current = true;
+    return () => {
+      iframeDocument.documentElement.classList.remove('is-zoomed-out');
+    };
+  }, [iframeDocument, isZoomedOut]);
+
+  /**
+   * This handles:
+   * 1. Setting the correct scale and vars of the canvas when zoomed out
+   * 2. If zoom out mode has been toggled, runs the animation of zooming in/out
+   */
+  useEffect(() => {
+    if (!iframeDocument) {
+      return;
+    }
+
+    // We need to update the appropriate scale to exit from. If sidebars have been opened since setting the
+    // original scale, we will snap to a much smaller scale due to the scale container immediately changing sizes when exiting.
+    if (isAutoScaled && transitionFromRef.current.scaleValue !== 1) {
+      // We use containerWidth as the divisor, as scaleContainerWidth will always match the containerWidth when
+      // exiting.
+      transitionFromRef.current.scaleValue = calculateScale({
+        frameSize: transitionFromRef.current.frameSize,
+        containerWidth,
+        maxContainerWidth,
+        scaleContainerWidth: containerWidth
+      });
+    }
+
+    // If we are not going to animate the transition, set the scale and frame size directly.
+    // If we are animating, these values will be set when the animation is finished.
+    // Example: Opening sidebars that reduce the scale of the canvas, but we don't want to
+    // animate the transition.
+    if (!startAnimationRef.current) {
+      iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale', scaleValue);
+      iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-frame-size', `${frameSize}px`);
+    }
+    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-content-height', `${contentHeight}px`);
+    const clientHeight = iframeDocument.documentElement.clientHeight;
+    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-inner-height', `${clientHeight}px`);
+    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-container-width', `${containerWidth}px`);
+    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale-container-width', `${scaleContainerWidth}px`);
+
+    /**
+     * Handle the zoom out animation:
+     *
+     * - Get the current scrollTop position.
+     * - Calculate where the same scroll position is after scaling.
+     * - Apply fixed positioning to the canvas with a transform offset
+     *   to keep the canvas centered.
+     * - Animate the scale and padding to the new scale and frame size.
+     * - After the animation is complete, remove the fixed positioning
+     *   and set the scroll position that keeps everything centered.
+     */
+    if (startAnimationRef.current) {
+      // Don't allow a new transition to start again unless it was started by the zoom out mode changing.
+      startAnimationRef.current = false;
+
+      /**
+       * If we already have an animation running, reverse it.
+       */
+      if (animationRef.current) {
+        animationRef.current.reverse();
+        // Swap the transition to/from refs so that we set the correct values when
+        // finishZoomOutAnimation runs.
+        const tempTransitionFrom = transitionFromRef.current;
+        const tempTransitionTo = transitionToRef.current;
+        transitionFromRef.current = tempTransitionTo;
+        transitionToRef.current = tempTransitionFrom;
+      } else {
+        var _transitionFromRef$cu;
+        /**
+         * Start a new zoom animation.
+         */
+
+        // We can't trust the set value from contentHeight, as it was measured
+        // before the zoom out mode was changed. After zoom out mode is changed,
+        // appenders may appear or disappear, so we need to get the height from
+        // the iframe at this point when we're about to animate the zoom out.
+        // The iframe scrollTop, scrollHeight, and clientHeight will all be
+        // the most accurate.
+        transitionFromRef.current.clientHeight = (_transitionFromRef$cu = transitionFromRef.current.clientHeight) !== null && _transitionFromRef$cu !== void 0 ? _transitionFromRef$cu : clientHeight;
+        transitionFromRef.current.scrollTop = iframeDocument.documentElement.scrollTop;
+        transitionFromRef.current.scrollHeight = iframeDocument.documentElement.scrollHeight;
+        transitionToRef.current = {
+          scaleValue,
+          frameSize,
+          clientHeight
+        };
+        transitionToRef.current.scrollTop = computeScrollTopNext(transitionFromRef.current, transitionToRef.current);
+        animationRef.current = startZoomOutAnimation();
+
+        // If the user prefers reduced motion, finish the animation immediately and set the final state.
+        if (prefersReducedMotion) {
+          finishZoomOutAnimation();
+        } else {
+          animationRef.current.onfinish = finishZoomOutAnimation;
+        }
+      }
+    }
+    return () => {
+      iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-scale');
+      iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-frame-size');
+      iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-content-height');
+      iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-inner-height');
+      iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-container-width');
+      iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-scale-container-width');
+    };
+  }, [startZoomOutAnimation, finishZoomOutAnimation, prefersReducedMotion, isAutoScaled, scaleValue, frameSize, iframeDocument, contentHeight, containerWidth, maxContainerWidth, scaleContainerWidth]);
+  return {
+    isZoomedOut,
+    scaleContainerWidth,
+    contentResizeListener,
+    containerResizeListener
+  };
+}
+//# sourceMappingURL=use-scale-canvas.js.map

package/build-module/components/iframe/use-scale-canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","useCallback","useReducedMotion","useResizeObserver","calculateScale","frameSize","containerWidth","maxContainerWidth","scaleContainerWidth","Math","min","computeScrollTopNext","transitionFrom","transitionTo","clientHeight","prevClientHeight","prevFrameSize","scaleValue","prevScale","scrollTop","scrollHeight","scrollTopNext","maxScrollTop","round","max","getAnimationKeyframes","translate","scale","paddingTop","paddingBottom","useScaleCanvas","iframeDocument","contentResizeListener","height","contentHeight","containerResizeListener","width","initialContainerWidthRef","isZoomedOut","prefersReducedMotion","isAutoScaled","startAnimationRef","animationRef","current","transitionFromRef","transitionToRef","startZoomOutAnimation","documentElement","style","setProperty","classList","add","animate","easing","duration","finishZoomOutAnimation","remove","removeProperty","reverse","tempTransitionFrom","tempTransitionTo","_transitionFromRef$cu","onfinish"],"sources":["@wordpress/block-editor/src/components/iframe/use-scale-canvas.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useCallback } from '@wordpress/element';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\n\n/**\n * @typedef {Object} TransitionState\n * @property {number} scaleValue   Scale of the canvas.\n * @property {number} frameSize    Size of the frame/offset around the canvas.\n * @property {number} clientHeight ClientHeight of the iframe.\n * @property {number} scrollTop    ScrollTop of the iframe.\n * @property {number} scrollHeight ScrollHeight of the iframe.\n */\n\n/**\n * Calculate the scale of the canvas.\n *\n * @param {Object} options                     Object of options\n * @param {number} options.frameSize           Size of the frame/offset around the canvas\n * @param {number} options.containerWidth      Actual width of the canvas container\n * @param {number} options.maxContainerWidth   Maximum width of the container to use for the scale calculation. This locks the canvas to a maximum width when zooming out.\n * @param {number} options.scaleContainerWidth Width the of the container wrapping the canvas container\n * @return {number} Scale value between 0 and/or equal to 1\n */\nfunction calculateScale( {\n\tframeSize,\n\tcontainerWidth,\n\tmaxContainerWidth,\n\tscaleContainerWidth,\n} ) {\n\treturn (\n\t\t( Math.min( containerWidth, maxContainerWidth ) - frameSize * 2 ) /\n\t\tscaleContainerWidth\n\t);\n}\n\n/**\n * Compute the next scrollTop position after scaling the iframe content.\n *\n * @param {TransitionState} transitionFrom Starting point of the transition\n * @param {TransitionState} transitionTo   Ending state of the transition\n * @return {number} Next scrollTop position after scaling the iframe content.\n */\nfunction computeScrollTopNext( transitionFrom, transitionTo ) {\n\tconst {\n\t\tclientHeight: prevClientHeight,\n\t\tframeSize: prevFrameSize,\n\t\tscaleValue: prevScale,\n\t\tscrollTop,\n\t\tscrollHeight,\n\t} = transitionFrom;\n\tconst { clientHeight, frameSize, scaleValue } = transitionTo;\n\t// Step 0: Start with the current scrollTop.\n\tlet scrollTopNext = scrollTop;\n\t// Step 1: Undo the effects of the previous scale and frame around the\n\t// midpoint of the visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + prevClientHeight / 2 - prevFrameSize ) / prevScale -\n\t\tprevClientHeight / 2;\n\n\t// Step 2: Apply the new scale and frame around the midpoint of the\n\t// visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + clientHeight / 2 ) * scaleValue +\n\t\tframeSize -\n\t\tclientHeight / 2;\n\n\t// Step 3: Handle an edge case so that you scroll to the top of the\n\t// iframe if the top of the iframe content is visible in the container.\n\t// The same edge case for the bottom is skipped because changing content\n\t// makes calculating it impossible.\n\tscrollTopNext = scrollTop <= prevFrameSize ? 0 : scrollTopNext;\n\n\t// This is the scrollTop value if you are scrolled to the bottom of the\n\t// iframe. We can't just let the browser handle it because we need to\n\t// animate the scaling.\n\tconst maxScrollTop =\n\t\tscrollHeight * ( scaleValue / prevScale ) +\n\t\tframeSize * 2 -\n\t\tclientHeight;\n\n\t// Step 4: Clamp the scrollTopNext between the minimum and maximum\n\t// possible scrollTop positions. Round the value to avoid subpixel\n\t// truncation by the browser which sometimes causes a 1px error.\n\treturn Math.round(\n\t\tMath.min( Math.max( 0, scrollTopNext ), Math.max( 0, maxScrollTop ) )\n\t);\n}\n\n/**\n * Generate the keyframes to use for the zoom out animation.\n *\n * @param {TransitionState} transitionFrom Starting transition state.\n * @param {TransitionState} transitionTo   Ending transition state.\n * @return {Object[]} An array of keyframes to use for the animation.\n */\nfunction getAnimationKeyframes( transitionFrom, transitionTo ) {\n\tconst {\n\t\tscaleValue: prevScale,\n\t\tframeSize: prevFrameSize,\n\t\tscrollTop,\n\t} = transitionFrom;\n\tconst { scaleValue, frameSize, scrollTop: scrollTopNext } = transitionTo;\n\n\treturn [\n\t\t{\n\t\t\ttranslate: `0 0`,\n\t\t\tscale: prevScale,\n\t\t\tpaddingTop: `${ prevFrameSize / prevScale }px`,\n\t\t\tpaddingBottom: `${ prevFrameSize / prevScale }px`,\n\t\t},\n\t\t{\n\t\t\ttranslate: `0 ${ scrollTop - scrollTopNext }px`,\n\t\t\tscale: scaleValue,\n\t\t\tpaddingTop: `${ frameSize / scaleValue }px`,\n\t\t\tpaddingBottom: `${ frameSize / scaleValue }px`,\n\t\t},\n\t];\n}\n\n/**\n * @typedef {Object} ScaleCanvasResult\n * @property {boolean} isZoomedOut             A boolean indicating if the canvas is zoomed out.\n * @property {number}  scaleContainerWidth     The width of the container used to calculate the scale.\n * @property {Object}  contentResizeListener   A resize observer for the content.\n * @property {Object}  containerResizeListener A resize observer for the container.\n */\n\n/**\n * Handles scaling the canvas for the zoom out mode and animating between\n * the states.\n *\n * @param {Object}        options                   Object of options.\n * @param {number}        options.frameSize         Size of the frame around the content.\n * @param {Document}      options.iframeDocument    Document of the iframe.\n * @param {number}        options.maxContainerWidth Max width of the canvas to use as the starting scale point. Defaults to 750.\n * @param {number|string} options.scale             Scale of the canvas. Can be an decimal between 0 and 1, 1, or 'auto-scaled'.\n * @return {ScaleCanvasResult} Properties of the result.\n */\nexport function useScaleCanvas( {\n\tframeSize,\n\tiframeDocument,\n\tmaxContainerWidth = 750,\n\tscale,\n} ) {\n\tconst [ contentResizeListener, { height: contentHeight } ] =\n\t\tuseResizeObserver();\n\tconst [ containerResizeListener, { width: containerWidth } ] =\n\t\tuseResizeObserver();\n\n\tconst initialContainerWidthRef = useRef( 0 );\n\tconst isZoomedOut = scale !== 1;\n\tconst prefersReducedMotion = useReducedMotion();\n\tconst isAutoScaled = scale === 'auto-scaled';\n\t// Track if the animation should start when the useEffect runs.\n\tconst startAnimationRef = useRef( false );\n\t// Track the animation so we know if we have an animation running,\n\t// and can cancel it, reverse it, call a finish event, etc.\n\tconst animationRef = useRef( null );\n\n\tuseEffect( () => {\n\t\tif ( ! isZoomedOut ) {\n\t\t\tinitialContainerWidthRef.current = containerWidth;\n\t\t}\n\t}, [ containerWidth, isZoomedOut ] );\n\n\tconst scaleContainerWidth = Math.max(\n\t\tinitialContainerWidthRef.current,\n\t\tcontainerWidth\n\t);\n\n\tconst scaleValue = isAutoScaled\n\t\t? calculateScale( {\n\t\t\t\tframeSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth,\n\t\t  } )\n\t\t: scale;\n\n\t/**\n\t * The starting transition state for the zoom out animation.\n\t * @type {import('react').RefObject<TransitionState>}\n\t */\n\tconst transitionFromRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tclientHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/**\n\t * The ending transition state for the zoom out animation.\n\t * @type {import('react').RefObject<TransitionState>}\n\t */\n\tconst transitionToRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tclientHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/**\n\t * Start the zoom out animation. This sets the necessary CSS variables\n\t * for animating the canvas and returns the Animation object.\n\t *\n\t * @return {Animation} The animation object for the zoom out animation.\n\t */\n\tconst startZoomOutAnimation = useCallback( () => {\n\t\tconst { scrollTop } = transitionFromRef.current;\n\t\tconst { scrollTop: scrollTopNext } = transitionToRef.current;\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top',\n\t\t\t`${ scrollTop }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next',\n\t\t\t`${ scrollTopNext }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.add( 'zoom-out-animation' );\n\n\t\treturn iframeDocument.documentElement.animate(\n\t\t\tgetAnimationKeyframes(\n\t\t\t\ttransitionFromRef.current,\n\t\t\t\ttransitionToRef.current\n\t\t\t),\n\t\t\t{\n\t\t\t\teasing: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',\n\t\t\t\tduration: 400,\n\t\t\t}\n\t\t);\n\t}, [ iframeDocument ] );\n\n\t/**\n\t * Callback when the zoom out animation is finished.\n\t * - Cleans up animations refs.\n\t * - Adds final CSS vars for scale and frame size to preserve the state.\n\t * - Removes the 'zoom-out-animation' class (which has the fixed positioning).\n\t * - Sets the final scroll position after the canvas is no longer in fixed position.\n\t * - Removes CSS vars related to the animation.\n\t * - Sets the transitionFrom to the transitionTo state to be ready for the next animation.\n\t */\n\tconst finishZoomOutAnimation = useCallback( () => {\n\t\tstartAnimationRef.current = false;\n\t\tanimationRef.current = null;\n\n\t\t// Add our final scale and frame size now that the animation is done.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\ttransitionToRef.current.scaleValue\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t`${ transitionToRef.current.frameSize }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.remove( 'zoom-out-animation' );\n\n\t\t// Set the final scroll position that was just animated to.\n\t\t// Disable reason: Eslint isn't smart enough to know that this is a\n\t\t// DOM element. https://github.com/facebook/react/issues/31483\n\t\t// eslint-disable-next-line react-compiler/react-compiler\n\t\tiframeDocument.documentElement.scrollTop =\n\t\t\ttransitionToRef.current.scrollTop;\n\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top'\n\t\t);\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next'\n\t\t);\n\n\t\t// Update previous values.\n\t\ttransitionFromRef.current = transitionToRef.current;\n\t}, [ iframeDocument ] );\n\n\t/**\n\t * Runs when zoom out mode is toggled, and sets the startAnimation flag\n\t * so the animation will start when the next useEffect runs. We _only_\n\t * want to animate when the zoom out mode is toggled, not when the scale\n\t * changes due to the container resizing.\n\t */\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isZoomedOut ) {\n\t\t\tiframeDocument.documentElement.classList.add( 'is-zoomed-out' );\n\t\t}\n\n\t\tstartAnimationRef.current = true;\n\n\t\treturn () => {\n\t\t\tiframeDocument.documentElement.classList.remove( 'is-zoomed-out' );\n\t\t};\n\t}, [ iframeDocument, isZoomedOut ] );\n\n\t/**\n\t * This handles:\n\t * 1. Setting the correct scale and vars of the canvas when zoomed out\n\t * 2. If zoom out mode has been toggled, runs the animation of zooming in/out\n\t */\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// We need to update the appropriate scale to exit from. If sidebars have been opened since setting the\n\t\t// original scale, we will snap to a much smaller scale due to the scale container immediately changing sizes when exiting.\n\t\tif ( isAutoScaled && transitionFromRef.current.scaleValue !== 1 ) {\n\t\t\t// We use containerWidth as the divisor, as scaleContainerWidth will always match the containerWidth when\n\t\t\t// exiting.\n\t\t\ttransitionFromRef.current.scaleValue = calculateScale( {\n\t\t\t\tframeSize: transitionFromRef.current.frameSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth: containerWidth,\n\t\t\t} );\n\t\t}\n\n\t\t// If we are not going to animate the transition, set the scale and frame size directly.\n\t\t// If we are animating, these values will be set when the animation is finished.\n\t\t// Example: Opening sidebars that reduce the scale of the canvas, but we don't want to\n\t\t// animate the transition.\n\t\tif ( ! startAnimationRef.current ) {\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\t\tscaleValue\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t\t`${ frameSize }px`\n\t\t\t);\n\t\t}\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-content-height',\n\t\t\t`${ contentHeight }px`\n\t\t);\n\n\t\tconst clientHeight = iframeDocument.documentElement.clientHeight;\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height',\n\t\t\t`${ clientHeight }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-container-width',\n\t\t\t`${ containerWidth }px`\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width',\n\t\t\t`${ scaleContainerWidth }px`\n\t\t);\n\n\t\t/**\n\t\t * Handle the zoom out animation:\n\t\t *\n\t\t * - Get the current scrollTop position.\n\t\t * - Calculate where the same scroll position is after scaling.\n\t\t * - Apply fixed positioning to the canvas with a transform offset\n\t\t *   to keep the canvas centered.\n\t\t * - Animate the scale and padding to the new scale and frame size.\n\t\t * - After the animation is complete, remove the fixed positioning\n\t\t *   and set the scroll position that keeps everything centered.\n\t\t */\n\t\tif ( startAnimationRef.current ) {\n\t\t\t// Don't allow a new transition to start again unless it was started by the zoom out mode changing.\n\t\t\tstartAnimationRef.current = false;\n\n\t\t\t/**\n\t\t\t * If we already have an animation running, reverse it.\n\t\t\t */\n\t\t\tif ( animationRef.current ) {\n\t\t\t\tanimationRef.current.reverse();\n\t\t\t\t// Swap the transition to/from refs so that we set the correct values when\n\t\t\t\t// finishZoomOutAnimation runs.\n\t\t\t\tconst tempTransitionFrom = transitionFromRef.current;\n\t\t\t\tconst tempTransitionTo = transitionToRef.current;\n\t\t\t\ttransitionFromRef.current = tempTransitionTo;\n\t\t\t\ttransitionToRef.current = tempTransitionFrom;\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * Start a new zoom animation.\n\t\t\t\t */\n\n\t\t\t\t// We can't trust the set value from contentHeight, as it was measured\n\t\t\t\t// before the zoom out mode was changed. After zoom out mode is changed,\n\t\t\t\t// appenders may appear or disappear, so we need to get the height from\n\t\t\t\t// the iframe at this point when we're about to animate the zoom out.\n\t\t\t\t// The iframe scrollTop, scrollHeight, and clientHeight will all be\n\t\t\t\t// the most accurate.\n\t\t\t\ttransitionFromRef.current.clientHeight =\n\t\t\t\t\ttransitionFromRef.current.clientHeight ?? clientHeight;\n\t\t\t\ttransitionFromRef.current.scrollTop =\n\t\t\t\t\tiframeDocument.documentElement.scrollTop;\n\t\t\t\ttransitionFromRef.current.scrollHeight =\n\t\t\t\t\tiframeDocument.documentElement.scrollHeight;\n\n\t\t\t\ttransitionToRef.current = {\n\t\t\t\t\tscaleValue,\n\t\t\t\t\tframeSize,\n\t\t\t\t\tclientHeight,\n\t\t\t\t};\n\t\t\t\ttransitionToRef.current.scrollTop = computeScrollTopNext(\n\t\t\t\t\ttransitionFromRef.current,\n\t\t\t\t\ttransitionToRef.current\n\t\t\t\t);\n\n\t\t\t\tanimationRef.current = startZoomOutAnimation();\n\n\t\t\t\t// If the user prefers reduced motion, finish the animation immediately and set the final state.\n\t\t\t\tif ( prefersReducedMotion ) {\n\t\t\t\t\tfinishZoomOutAnimation();\n\t\t\t\t} else {\n\t\t\t\t\tanimationRef.current.onfinish = finishZoomOutAnimation;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn () => {\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-content-height'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-container-width'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width'\n\t\t\t);\n\t\t};\n\t}, [\n\t\tstartZoomOutAnimation,\n\t\tfinishZoomOutAnimation,\n\t\tprefersReducedMotion,\n\t\tisAutoScaled,\n\t\tscaleValue,\n\t\tframeSize,\n\t\tiframeDocument,\n\t\tcontentHeight,\n\t\tcontainerWidth,\n\t\tmaxContainerWidth,\n\t\tscaleContainerWidth,\n\t] );\n\n\treturn {\n\t\tisZoomedOut,\n\t\tscaleContainerWidth,\n\t\tcontentResizeListener,\n\t\tcontainerResizeListener,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/image-editor/use-save-image.js

@@ -9,6 +9,11 @@ import { useCallback, useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+const messages = {
+  crop: __('Image cropped.'),
+  rotate: __('Image rotated.'),
+  cropAndRotate: __('Image cropped and rotated.')
+};
 export default function useSaveImage({
   crop,
   rotation,
@@ -18,7 +23,8 @@ export default function useSaveImage({
   onFinishEditing
 }) {
   const {
-    createErrorNotice
+    createErrorNotice,
+    createSuccessNotice
   } = useDispatch(noticesStore);
   const [isInProgress, setIsInProgress] = useState(false);
   const cancel = useCallback(() => {
@@ -56,6 +62,7 @@ export default function useSaveImage({
       onFinishEditing();
       return;
     }
+    const modifierType = modifiers.length === 1 ? modifiers[0].type : 'cropAndRotate';
     apiFetch({
       path: `/wp/v2/media/${id}/edit`,
       method: 'POST',
@@ -68,8 +75,20 @@ export default function useSaveImage({
         id: response.id,
         url: response.source_url
       });
+      createSuccessNotice(messages[modifierType], {
+        type: 'snackbar',
+        actions: [{
+          label: __('Undo'),
+          onClick: () => {
+            onSaveImage({
+              id,
+              url
+            });
+          }
+        }]
+      });
     }).catch(error => {
-      createErrorNotice(sprintf(/* translators: 1. Error message */
+      createErrorNotice(sprintf(/* translators: %s: Error message. */
       __('Could not edit image. %s'), stripHTML(error.message)), {
         id: 'image-editing-error',
         type: 'snackbar'
@@ -78,7 +97,7 @@ export default function useSaveImage({
       setIsInProgress(false);
       onFinishEditing();
     });
-  }, [crop, rotation, id, url, onSaveImage, createErrorNotice, onFinishEditing]);
+  }, [crop, rotation, id, url, onSaveImage, createErrorNotice, createSuccessNotice, onFinishEditing]);
   return useMemo(() => ({
     isInProgress,
     apply,

package/build-module/components/image-editor/use-save-image.js.map

@@ -1 +1 @@
-{"version":3,"names":["apiFetch","useDispatch","useCallback","useMemo","useState","__","sprintf","store","noticesStore","__unstableStripHTML","stripHTML","useSaveImage","crop","rotation","url","id","onSaveImage","onFinishEditing","createErrorNotice","isInProgress","setIsInProgress","cancel","apply","modifiers","push","type","args","angle","width","height","left","x","top","y","length","path","method","data","src","then","response","source_url","catch","error","message","finally"],"sources":["@wordpress/block-editor/src/components/image-editor/use-save-image.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\n// Disable Reason: Needs to be refactored.\n// eslint-disable-next-line no-restricted-imports\nimport apiFetch from '@wordpress/api-fetch';\nimport { useDispatch } from '@wordpress/data';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\nexport default function useSaveImage( {\n\tcrop,\n\trotation,\n\turl,\n\tid,\n\tonSaveImage,\n\tonFinishEditing,\n} ) {\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst [ isInProgress, setIsInProgress ] = useState( false );\n\n\tconst cancel = useCallback( () => {\n\t\tsetIsInProgress( false );\n\t\tonFinishEditing();\n\t}, [ onFinishEditing ] );\n\n\tconst apply = useCallback( () => {\n\t\tsetIsInProgress( true );\n\n\t\tconst modifiers = [];\n\n\t\tif ( rotation > 0 ) {\n\t\t\tmodifiers.push( {\n\t\t\t\ttype: 'rotate',\n\t\t\t\targs: {\n\t\t\t\t\tangle: rotation,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\n\t\t// The crop script may return some very small, sub-pixel values when the image was not cropped.\n\t\t// Crop only when the new size has changed by more than 0.1%.\n\t\tif ( crop.width < 99.9 || crop.height < 99.9 ) {\n\t\t\tmodifiers.push( {\n\t\t\t\ttype: 'crop',\n\t\t\t\targs: {\n\t\t\t\t\tleft: crop.x,\n\t\t\t\t\ttop: crop.y,\n\t\t\t\t\twidth: crop.width,\n\t\t\t\t\theight: crop.height,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\n\t\tif ( modifiers.length === 0 ) {\n\t\t\t// No changes to apply.\n\t\t\tsetIsInProgress( false );\n\t\t\tonFinishEditing();\n\t\t\treturn;\n\t\t}\n\n\t\tapiFetch( {\n\t\t\tpath: `/wp/v2/media/${ id }/edit`,\n\t\t\tmethod: 'POST',\n\t\t\tdata: { src: url, modifiers },\n\t\t} )\n\t\t\t.then( ( response ) => {\n\t\t\t\tonSaveImage( {\n\t\t\t\t\tid: response.id,\n\t\t\t\t\turl: response.source_url,\n\t\t\t\t} );\n\t\t\t} )\n\t\t\t.catch( ( error ) => {\n\t\t\t\tcreateErrorNotice(\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t/* translators: 1. Error message */\n\t\t\t\t\t\t__( 'Could not edit image. %s' ),\n\t\t\t\t\t\tstripHTML( error.message )\n\t\t\t\t\t),\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 'image-editing-error',\n\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t} )\n\t\t\t.finally( () => {\n\t\t\t\tsetIsInProgress( false );\n\t\t\t\tonFinishEditing();\n\t\t\t} );\n\t}, [\n\t\tcrop,\n\t\trotation,\n\t\tid,\n\t\turl,\n\t\tonSaveImage,\n\t\tcreateErrorNotice,\n\t\tonFinishEditing,\n\t] );\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\tisInProgress,\n\t\t\tapply,\n\t\t\tcancel,\n\t\t} ),\n\t\t[ isInProgress, apply, cancel ]\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["apiFetch","useDispatch","useCallback","useMemo","useState","__","sprintf","store","noticesStore","__unstableStripHTML","stripHTML","messages","crop","rotate","cropAndRotate","useSaveImage","rotation","url","id","onSaveImage","onFinishEditing","createErrorNotice","createSuccessNotice","isInProgress","setIsInProgress","cancel","apply","modifiers","push","type","args","angle","width","height","left","x","top","y","length","modifierType","path","method","data","src","then","response","source_url","actions","label","onClick","catch","error","message","finally"],"sources":["@wordpress/block-editor/src/components/image-editor/use-save-image.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\n// Disable Reason: Needs to be refactored.\n// eslint-disable-next-line no-restricted-imports\nimport apiFetch from '@wordpress/api-fetch';\nimport { useDispatch } from '@wordpress/data';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\nconst messages = {\n\tcrop: __( 'Image cropped.' ),\n\trotate: __( 'Image rotated.' ),\n\tcropAndRotate: __( 'Image cropped and rotated.' ),\n};\n\nexport default function useSaveImage( {\n\tcrop,\n\trotation,\n\turl,\n\tid,\n\tonSaveImage,\n\tonFinishEditing,\n} ) {\n\tconst { createErrorNotice, createSuccessNotice } =\n\t\tuseDispatch( noticesStore );\n\tconst [ isInProgress, setIsInProgress ] = useState( false );\n\n\tconst cancel = useCallback( () => {\n\t\tsetIsInProgress( false );\n\t\tonFinishEditing();\n\t}, [ onFinishEditing ] );\n\n\tconst apply = useCallback( () => {\n\t\tsetIsInProgress( true );\n\n\t\tconst modifiers = [];\n\n\t\tif ( rotation > 0 ) {\n\t\t\tmodifiers.push( {\n\t\t\t\ttype: 'rotate',\n\t\t\t\targs: {\n\t\t\t\t\tangle: rotation,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\n\t\t// The crop script may return some very small, sub-pixel values when the image was not cropped.\n\t\t// Crop only when the new size has changed by more than 0.1%.\n\t\tif ( crop.width < 99.9 || crop.height < 99.9 ) {\n\t\t\tmodifiers.push( {\n\t\t\t\ttype: 'crop',\n\t\t\t\targs: {\n\t\t\t\t\tleft: crop.x,\n\t\t\t\t\ttop: crop.y,\n\t\t\t\t\twidth: crop.width,\n\t\t\t\t\theight: crop.height,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\n\t\tif ( modifiers.length === 0 ) {\n\t\t\t// No changes to apply.\n\t\t\tsetIsInProgress( false );\n\t\t\tonFinishEditing();\n\t\t\treturn;\n\t\t}\n\n\t\tconst modifierType =\n\t\t\tmodifiers.length === 1 ? modifiers[ 0 ].type : 'cropAndRotate';\n\n\t\tapiFetch( {\n\t\t\tpath: `/wp/v2/media/${ id }/edit`,\n\t\t\tmethod: 'POST',\n\t\t\tdata: { src: url, modifiers },\n\t\t} )\n\t\t\t.then( ( response ) => {\n\t\t\t\tonSaveImage( {\n\t\t\t\t\tid: response.id,\n\t\t\t\t\turl: response.source_url,\n\t\t\t\t} );\n\t\t\t\tcreateSuccessNotice( messages[ modifierType ], {\n\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\tactions: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: __( 'Undo' ),\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tonSaveImage( {\n\t\t\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\t\t\turl,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t} );\n\t\t\t} )\n\t\t\t.catch( ( error ) => {\n\t\t\t\tcreateErrorNotice(\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t/* translators: %s: Error message. */\n\t\t\t\t\t\t__( 'Could not edit image. %s' ),\n\t\t\t\t\t\tstripHTML( error.message )\n\t\t\t\t\t),\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 'image-editing-error',\n\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t} )\n\t\t\t.finally( () => {\n\t\t\t\tsetIsInProgress( false );\n\t\t\t\tonFinishEditing();\n\t\t\t} );\n\t}, [\n\t\tcrop,\n\t\trotation,\n\t\tid,\n\t\turl,\n\t\tonSaveImage,\n\t\tcreateErrorNotice,\n\t\tcreateSuccessNotice,\n\t\tonFinishEditing,\n\t] );\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\tisInProgress,\n\t\t\tapply,\n\t\t\tcancel,\n\t\t} ),\n\t\t[ isInProgress, apply, cancel ]\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-style/content-rtl.css

@@ -777,13 +777,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 
 .block-editor-iframe__html {
   transform-origin: top center;
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s, translate 0s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-iframe__html {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
+  transition: background-color 400ms;
 }
 .block-editor-iframe__html.zoom-out-animation {
   position: fixed;
@@ -791,27 +785,18 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   left: 0;
   top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0));
   bottom: 0;
-  translate: 0 calc(var(--wp-block-editor-iframe-zoom-out-scroll-top, 0) - var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0));
   overflow-y: scroll;
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, top 0s, bottom 0s, left 0s, right 0s;
 }
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-iframe__html.zoom-out-animation {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-
 .block-editor-iframe__html.is-zoomed-out {
-  transform: translateX(calc(-1*((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale))));
-  scale: var(--wp-block-editor-iframe-zoom-out-scale);
+  transform: translateX(calc(-1*((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale, 1))));
+  scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
   background-color: #ddd;
-  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)) + 2px));
-  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));
-  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));
+  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale, 1))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 2px));
+  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 }
 .block-editor-iframe__html.is-zoomed-out body {
-  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale))) / var(--wp-block-editor-iframe-zoom-out-scale));
+  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1))) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 }
 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) {
   flex: 1;

package/build-style/content.css

@@ -777,13 +777,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 
 .block-editor-iframe__html {
   transform-origin: top center;
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s, translate 0s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-iframe__html {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
+  transition: background-color 400ms;
 }
 .block-editor-iframe__html.zoom-out-animation {
   position: fixed;
@@ -791,27 +785,18 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   right: 0;
   top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0));
   bottom: 0;
-  translate: 0 calc(var(--wp-block-editor-iframe-zoom-out-scroll-top, 0) - var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0));
   overflow-y: scroll;
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, top 0s, bottom 0s, right 0s, left 0s;
 }
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-iframe__html.zoom-out-animation {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-
 .block-editor-iframe__html.is-zoomed-out {
-  transform: translateX(calc((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale)));
-  scale: var(--wp-block-editor-iframe-zoom-out-scale);
+  transform: translateX(calc((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+  scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
   background-color: #ddd;
-  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)) + 2px));
-  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));
-  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));
+  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale, 1))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 2px));
+  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 }
 .block-editor-iframe__html.is-zoomed-out body {
-  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale))) / var(--wp-block-editor-iframe-zoom-out-scale));
+  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1))) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 }
 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) {
   flex: 1;