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

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

@@ -0,0 +1,392 @@
+/**
+ * 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} containerHeight containerHeight 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 scrollHeight based on the transition states.
+ *
+ * @param {TransitionState} transitionFrom Starting point of the transition
+ * @param {TransitionState} transitionTo   Ending state of the transition
+ * @return {number} Next scrollHeight based on scale and frame value changes.
+ */
+function computeScrollHeightNext(transitionFrom, transitionTo) {
+  const {
+    scaleValue: prevScale,
+    scrollHeight: prevScrollHeight
+  } = transitionFrom;
+  const {
+    frameSize,
+    scaleValue
+  } = transitionTo;
+  return prevScrollHeight * (scaleValue / prevScale) + frameSize * 2;
+}
+
+/**
+ * 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 {
+    containerHeight: prevContainerHeight,
+    frameSize: prevFrameSize,
+    scaleValue: prevScale,
+    scrollTop: prevScrollTop
+  } = transitionFrom;
+  const {
+    containerHeight,
+    frameSize,
+    scaleValue,
+    scrollHeight
+  } = transitionTo;
+  // Step 0: Start with the current scrollTop.
+  let scrollTopNext = prevScrollTop;
+  // Step 1: Undo the effects of the previous scale and frame around the
+  // midpoint of the visible area.
+  scrollTopNext = (scrollTopNext + prevContainerHeight / 2 - prevFrameSize) / prevScale - prevContainerHeight / 2;
+
+  // Step 2: Apply the new scale and frame around the midpoint of the
+  // visible area.
+  scrollTopNext = (scrollTopNext + containerHeight / 2) * scaleValue + frameSize - containerHeight / 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 = prevScrollTop <= 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 - containerHeight;
+
+  // 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,
+    height: containerHeight
+  }] = 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,
+    containerHeight: 0,
+    scrollTop: 0,
+    scrollHeight: 0
+  });
+
+  /**
+   * The ending transition state for the zoom out animation.
+   * @type {import('react').RefObject<TransitionState>}
+   */
+  const transitionToRef = useRef({
+    scaleValue,
+    frameSize,
+    containerHeight: 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`);
+
+    // If the container has a scrolllbar, force a scrollbar to prevent the content from shifting while animating.
+    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-overflow-behavior', transitionFromRef.current.scrollHeight === transitionFromRef.current.containerHeight ? 'auto' : 'scroll');
+    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');
+    iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-overflow-behavior');
+
+    // Update previous values.
+    transitionFromRef.current = transitionToRef.current;
+  }, [iframeDocument]);
+  const previousIsZoomedOut = useRef(false);
+
+  /**
+   * 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(() => {
+    const trigger = iframeDocument && previousIsZoomedOut.current !== isZoomedOut;
+    previousIsZoomedOut.current = isZoomedOut;
+    if (!trigger) {
+      return;
+    }
+    startAnimationRef.current = true;
+    if (!isZoomedOut) {
+      return;
+    }
+    iframeDocument.documentElement.classList.add('is-zoomed-out');
+    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 (scaleValue < 1) {
+      // 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`);
+      iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-inner-height', `${containerHeight}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 {
+        /**
+         * 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.scrollTop = iframeDocument.documentElement.scrollTop;
+        transitionFromRef.current.scrollHeight = iframeDocument.documentElement.scrollHeight;
+        // Use containerHeight, as it's the previous container height before the zoom out animation starts.
+        transitionFromRef.current.containerHeight = containerHeight;
+        transitionToRef.current = {
+          scaleValue,
+          frameSize,
+          containerHeight: iframeDocument.documentElement.clientHeight // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.
+        };
+        transitionToRef.current.scrollHeight = computeScrollHeightNext(transitionFromRef.current, transitionToRef.current);
+        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;
+        }
+      }
+    }
+  }, [startZoomOutAnimation, finishZoomOutAnimation, prefersReducedMotion, isAutoScaled, scaleValue, frameSize, iframeDocument, contentHeight, containerWidth, containerHeight, 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","computeScrollHeightNext","transitionFrom","transitionTo","scaleValue","prevScale","scrollHeight","prevScrollHeight","computeScrollTopNext","containerHeight","prevContainerHeight","prevFrameSize","scrollTop","prevScrollTop","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","previousIsZoomedOut","trigger","reverse","tempTransitionFrom","tempTransitionTo","clientHeight","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} containerHeight containerHeight 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 scrollHeight based on the transition states.\n *\n * @param {TransitionState} transitionFrom Starting point of the transition\n * @param {TransitionState} transitionTo   Ending state of the transition\n * @return {number} Next scrollHeight based on scale and frame value changes.\n */\nfunction computeScrollHeightNext( transitionFrom, transitionTo ) {\n\tconst { scaleValue: prevScale, scrollHeight: prevScrollHeight } =\n\t\ttransitionFrom;\n\tconst { frameSize, scaleValue } = transitionTo;\n\n\treturn prevScrollHeight * ( scaleValue / prevScale ) + frameSize * 2;\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\tcontainerHeight: prevContainerHeight,\n\t\tframeSize: prevFrameSize,\n\t\tscaleValue: prevScale,\n\t\tscrollTop: prevScrollTop,\n\t} = transitionFrom;\n\tconst { containerHeight, frameSize, scaleValue, scrollHeight } =\n\t\ttransitionTo;\n\t// Step 0: Start with the current scrollTop.\n\tlet scrollTopNext = prevScrollTop;\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 + prevContainerHeight / 2 - prevFrameSize ) /\n\t\t\tprevScale -\n\t\tprevContainerHeight / 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 + containerHeight / 2 ) * scaleValue +\n\t\tframeSize -\n\t\tcontainerHeight / 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 = prevScrollTop <= 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 = scrollHeight - containerHeight;\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 [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth, height: containerHeight },\n\t] = useResizeObserver();\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\tcontainerHeight: 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\tcontainerHeight: 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\t// If the container has a scrolllbar, force a scrollbar to prevent the content from shifting while animating.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-overflow-behavior',\n\t\t\ttransitionFromRef.current.scrollHeight ===\n\t\t\t\ttransitionFromRef.current.containerHeight\n\t\t\t\t? 'auto'\n\t\t\t\t: 'scroll'\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\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-overflow-behavior'\n\t\t);\n\n\t\t// Update previous values.\n\t\ttransitionFromRef.current = transitionToRef.current;\n\t}, [ iframeDocument ] );\n\n\tconst previousIsZoomedOut = useRef( false );\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\tconst trigger =\n\t\t\tiframeDocument && previousIsZoomedOut.current !== isZoomedOut;\n\n\t\tpreviousIsZoomedOut.current = isZoomedOut;\n\n\t\tif ( ! trigger ) {\n\t\t\treturn;\n\t\t}\n\n\t\tstartAnimationRef.current = true;\n\n\t\tif ( ! isZoomedOut ) {\n\t\t\treturn;\n\t\t}\n\n\t\tiframeDocument.documentElement.classList.add( 'is-zoomed-out' );\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\tif ( scaleValue < 1 ) {\n\t\t\t// If we are not going to animate the transition, set the scale and frame size directly.\n\t\t\t// If we are animating, these values will be set when the animation is finished.\n\t\t\t// Example: Opening sidebars that reduce the scale of the canvas, but we don't want to\n\t\t\t// animate the transition.\n\t\t\tif ( ! startAnimationRef.current ) {\n\t\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\t\t\tscaleValue\n\t\t\t\t);\n\t\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t\t\t`${ frameSize }px`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-content-height',\n\t\t\t\t`${ contentHeight }px`\n\t\t\t);\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height',\n\t\t\t\t`${ containerHeight }px`\n\t\t\t);\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-container-width',\n\t\t\t\t`${ containerWidth }px`\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width',\n\t\t\t\t`${ scaleContainerWidth }px`\n\t\t\t);\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.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\t\t\t\t// Use containerHeight, as it's the previous container height before the zoom out animation starts.\n\t\t\t\ttransitionFromRef.current.containerHeight = containerHeight;\n\n\t\t\t\ttransitionToRef.current = {\n\t\t\t\t\tscaleValue,\n\t\t\t\t\tframeSize,\n\t\t\t\t\tcontainerHeight:\n\t\t\t\t\t\tiframeDocument.documentElement.clientHeight, // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.\n\t\t\t\t};\n\n\t\t\t\ttransitionToRef.current.scrollHeight = computeScrollHeightNext(\n\t\t\t\t\ttransitionFromRef.current,\n\t\t\t\t\ttransitionToRef.current\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\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\tcontainerHeight,\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-module/components/inserter/block-patterns-tab/index.js

@@ -3,9 +3,8 @@
  */
 import { useState } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-import { Button, Spinner } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -16,8 +15,6 @@ import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
 import CategoryTabs from '../category-tabs';
 import InserterNoResults from '../no-results';
-import { store as blockEditorStore } from '../../../store';
-import { unlock } from '../../../lock-unlock';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function BlockPatternsTab({
   onSelectCategory,
@@ -29,13 +26,6 @@ function BlockPatternsTab({
   const [showPatternsExplorer, setShowPatternsExplorer] = useState(false);
   const categories = usePatternCategories(rootClientId);
   const isMobile = useViewportMatch('medium', '<');
-  const isResolvingPatterns = useSelect(select => unlock(select(blockEditorStore)).isResolvingPatterns(), []);
-  if (isResolvingPatterns) {
-    return /*#__PURE__*/_jsx("div", {
-      className: "block-editor-inserter__patterns-loading",
-      children: /*#__PURE__*/_jsx(Spinner, {})
-    });
-  }
   if (!categories.length) {
     return /*#__PURE__*/_jsx(InserterNoResults, {});
   }

package/build-module/components/inserter/block-patterns-tab/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useState","useViewportMatch","Button","Spinner","__","useSelect","PatternsExplorerModal","MobileTabNavigation","PatternCategoryPreviews","usePatternCategories","CategoryTabs","InserterNoResults","store","blockEditorStore","unlock","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","BlockPatternsTab","onSelectCategory","selectedCategory","onInsert","rootClientId","children","showPatternsExplorer","setShowPatternsExplorer","categories","isMobile","isResolvingPatterns","select","className","length","__next40pxDefaultSize","onClick","variant","category","name","initialCategory","patternCategories","onModalClose"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-tab/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Button, Spinner } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport PatternsExplorerModal from '../block-patterns-explorer';\nimport MobileTabNavigation from '../mobile-tab-navigation';\nimport { PatternCategoryPreviews } from './pattern-category-previews';\nimport { usePatternCategories } from './use-pattern-categories';\nimport CategoryTabs from '../category-tabs';\nimport InserterNoResults from '../no-results';\nimport { store as blockEditorStore } from '../../../store';\nimport { unlock } from '../../../lock-unlock';\n\nfunction BlockPatternsTab( {\n\tonSelectCategory,\n\tselectedCategory,\n\tonInsert,\n\trootClientId,\n\tchildren,\n} ) {\n\tconst [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );\n\n\tconst categories = usePatternCategories( rootClientId );\n\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst isResolvingPatterns = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( blockEditorStore ) ).isResolvingPatterns(),\n\t\t[]\n\t);\n\n\tif ( isResolvingPatterns ) {\n\t\treturn (\n\t\t\t<div className=\"block-editor-inserter__patterns-loading\">\n\t\t\t\t<Spinner />\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif ( ! categories.length ) {\n\t\treturn <InserterNoResults />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<div className=\"block-editor-inserter__block-patterns-tabs-container\">\n\t\t\t\t\t<CategoryTabs\n\t\t\t\t\t\tcategories={ categories }\n\t\t\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\t\t\tonSelectCategory={ onSelectCategory }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CategoryTabs>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tclassName=\"block-editor-inserter__patterns-explore-button\"\n\t\t\t\t\t\tonClick={ () => setShowPatternsExplorer( true ) }\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Explore all patterns' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isMobile && (\n\t\t\t\t<MobileTabNavigation categories={ categories }>\n\t\t\t\t\t{ ( category ) => (\n\t\t\t\t\t\t<div className=\"block-editor-inserter__category-panel\">\n\t\t\t\t\t\t\t<PatternCategoryPreviews\n\t\t\t\t\t\t\t\tkey={ category.name }\n\t\t\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</MobileTabNavigation>\n\t\t\t) }\n\t\t\t{ showPatternsExplorer && (\n\t\t\t\t<PatternsExplorerModal\n\t\t\t\t\tinitialCategory={ selectedCategory || categories[ 0 ] }\n\t\t\t\t\tpatternCategories={ categories }\n\t\t\t\t\tonModalClose={ () => setShowPatternsExplorer( false ) }\n\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default BlockPatternsTab;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useState","useViewportMatch","Button","__","PatternsExplorerModal","MobileTabNavigation","PatternCategoryPreviews","usePatternCategories","CategoryTabs","InserterNoResults","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","BlockPatternsTab","onSelectCategory","selectedCategory","onInsert","rootClientId","children","showPatternsExplorer","setShowPatternsExplorer","categories","isMobile","length","className","__next40pxDefaultSize","onClick","variant","category","name","initialCategory","patternCategories","onModalClose"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-tab/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport PatternsExplorerModal from '../block-patterns-explorer';\nimport MobileTabNavigation from '../mobile-tab-navigation';\nimport { PatternCategoryPreviews } from './pattern-category-previews';\nimport { usePatternCategories } from './use-pattern-categories';\nimport CategoryTabs from '../category-tabs';\nimport InserterNoResults from '../no-results';\n\nfunction BlockPatternsTab( {\n\tonSelectCategory,\n\tselectedCategory,\n\tonInsert,\n\trootClientId,\n\tchildren,\n} ) {\n\tconst [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );\n\n\tconst categories = usePatternCategories( rootClientId );\n\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\tif ( ! categories.length ) {\n\t\treturn <InserterNoResults />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<div className=\"block-editor-inserter__block-patterns-tabs-container\">\n\t\t\t\t\t<CategoryTabs\n\t\t\t\t\t\tcategories={ categories }\n\t\t\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\t\t\tonSelectCategory={ onSelectCategory }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CategoryTabs>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tclassName=\"block-editor-inserter__patterns-explore-button\"\n\t\t\t\t\t\tonClick={ () => setShowPatternsExplorer( true ) }\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Explore all patterns' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isMobile && (\n\t\t\t\t<MobileTabNavigation categories={ categories }>\n\t\t\t\t\t{ ( category ) => (\n\t\t\t\t\t\t<div className=\"block-editor-inserter__category-panel\">\n\t\t\t\t\t\t\t<PatternCategoryPreviews\n\t\t\t\t\t\t\t\tkey={ category.name }\n\t\t\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</MobileTabNavigation>\n\t\t\t) }\n\t\t\t{ showPatternsExplorer && (\n\t\t\t\t<PatternsExplorerModal\n\t\t\t\t\tinitialCategory={ selectedCategory || categories[ 0 ] }\n\t\t\t\t\tpatternCategories={ categories }\n\t\t\t\t\tonModalClose={ () => setShowPatternsExplorer( false ) }\n\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default BlockPatternsTab;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,qBAAqB,MAAM,4BAA4B;AAC9D,OAAOC,mBAAmB,MAAM,0BAA0B;AAC1D,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,OAAOC,YAAY,MAAM,kBAAkB;AAC3C,OAAOC,iBAAiB,MAAM,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAE9C,SAASC,gBAAgBA,CAAE;EAC1BC,gBAAgB;EAChBC,gBAAgB;EAChBC,QAAQ;EACRC,YAAY;EACZC;AACD,CAAC,EAAG;EACH,MAAM,CAAEC,oBAAoB,EAAEC,uBAAuB,CAAE,GAAGvB,QAAQ,CAAE,KAAM,CAAC;EAE3E,MAAMwB,UAAU,GAAGjB,oBAAoB,CAAEa,YAAa,CAAC;EAEvD,MAAMK,QAAQ,GAAGxB,gBAAgB,CAAE,QAAQ,EAAE,GAAI,CAAC;EAElD,IAAK,CAAEuB,UAAU,CAACE,MAAM,EAAG;IAC1B,oBAAOf,IAAA,CAACF,iBAAiB,IAAE,CAAC;EAC7B;EAEA,oBACCI,KAAA,CAAAE,SAAA;IAAAM,QAAA,GACG,CAAEI,QAAQ,iBACXZ,KAAA;MAAKc,SAAS,EAAC,sDAAsD;MAAAN,QAAA,gBACpEV,IAAA,CAACH,YAAY;QACZgB,UAAU,EAAGA,UAAY;QACzBN,gBAAgB,EAAGA,gBAAkB;QACrCD,gBAAgB,EAAGA,gBAAkB;QAAAI,QAAA,EAEnCA;MAAQ,CACG,CAAC,eACfV,IAAA,CAACT,MAAM;QACN0B,qBAAqB;QACrBD,SAAS,EAAC,gDAAgD;QAC1DE,OAAO,EAAGA,CAAA,KAAMN,uBAAuB,CAAE,IAAK,CAAG;QACjDO,OAAO,EAAC,WAAW;QAAAT,QAAA,EAEjBlB,EAAE,CAAE,sBAAuB;MAAC,CACvB,CAAC;IAAA,CACL,CACL,EACCsB,QAAQ,iBACTd,IAAA,CAACN,mBAAmB;MAACmB,UAAU,EAAGA,UAAY;MAAAH,QAAA,EACzCU,QAAQ,iBACXpB,IAAA;QAAKgB,SAAS,EAAC,uCAAuC;QAAAN,QAAA,eACrDV,IAAA,CAACL,uBAAuB;UAEvBa,QAAQ,EAAGA,QAAU;UACrBC,YAAY,EAAGA,YAAc;UAC7BW,QAAQ,EAAGA;QAAU,GAHfA,QAAQ,CAACC,IAIf;MAAC,CACE;IACL,CACmB,CACrB,EACCV,oBAAoB,iBACrBX,IAAA,CAACP,qBAAqB;MACrB6B,eAAe,EAAGf,gBAAgB,IAAIM,UAAU,CAAE,CAAC,CAAI;MACvDU,iBAAiB,EAAGV,UAAY;MAChCW,YAAY,EAAGA,CAAA,KAAMZ,uBAAuB,CAAE,KAAM,CAAG;MACvDH,YAAY,EAAGA;IAAc,CAC7B,CACD;EAAA,CACA,CAAC;AAEL;AAEA,eAAeJ,gBAAgB","ignoreList":[]}

package/build-module/components/inserter/menu.js

@@ -45,6 +45,7 @@ function InserterMenu({
   __experimentalInitialCategory
 }, ref) {
   const isZoomOutMode = useSelect(select => unlock(select(blockEditorStore)).isZoomOut(), []);
+  const hasSectionRootClientId = useSelect(select => !!unlock(select(blockEditorStore)).getSectionRootClientId(), []);
   const [filterValue, setFilterValue, delayedFilterValue] = useDebouncedInput(__experimentalFilterValue);
   const [hoveredItem, setHoveredItem] = useState(null);
   const [selectedPatternCategory, setSelectedPatternCategory] = useState(__experimentalInitialCategory);
@@ -60,7 +61,7 @@ function InserterMenu({
     }
   }
   const [selectedTab, setSelectedTab] = useState(getInitialTab());
-  const shouldUseZoomOut = selectedTab === 'patterns' || selectedTab === 'media';
+  const shouldUseZoomOut = hasSectionRootClientId && (selectedTab === 'patterns' || selectedTab === 'media');
   useZoomOut(shouldUseZoomOut && isLargeViewport);
   const [destinationRootClientId, onInsertBlocks, onToggleInsertionPoint] = useInsertionPoint({
     rootClientId,