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

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

@@ -0,0 +1,377 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScaleCanvas = useScaleCanvas;
+var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * @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.
+ */
+function useScaleCanvas({
+  frameSize,
+  iframeDocument,
+  maxContainerWidth = 750,
+  scale
+}) {
+  const [contentResizeListener, {
+    height: contentHeight
+  }] = (0, _compose.useResizeObserver)();
+  const [containerResizeListener, {
+    width: containerWidth
+  }] = (0, _compose.useResizeObserver)();
+  const initialContainerWidthRef = (0, _element.useRef)(0);
+  const isZoomedOut = scale !== 1;
+  const prefersReducedMotion = (0, _compose.useReducedMotion)();
+  const isAutoScaled = scale === 'auto-scaled';
+  // Track if the animation should start when the useEffect runs.
+  const startAnimationRef = (0, _element.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 = (0, _element.useRef)(null);
+  (0, _element.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 = (0, _element.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 = (0, _element.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 = (0, _element.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 = (0, _element.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.
+   */
+  (0, _element.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
+   */
+  (0, _element.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/components/iframe/use-scale-canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_compose","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","useResizeObserver","containerResizeListener","width","initialContainerWidthRef","useRef","isZoomedOut","prefersReducedMotion","useReducedMotion","isAutoScaled","startAnimationRef","animationRef","useEffect","current","transitionFromRef","transitionToRef","startZoomOutAnimation","useCallback","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/components/image-editor/use-save-image.js

@@ -17,6 +17,11 @@ var _dom = require("@wordpress/dom");
 // Disable Reason: Needs to be refactored.
 // eslint-disable-next-line no-restricted-imports
 
+const messages = {
+  crop: (0, _i18n.__)('Image cropped.'),
+  rotate: (0, _i18n.__)('Image rotated.'),
+  cropAndRotate: (0, _i18n.__)('Image cropped and rotated.')
+};
 function useSaveImage({
   crop,
   rotation,
@@ -26,7 +31,8 @@ function useSaveImage({
   onFinishEditing
 }) {
   const {
-    createErrorNotice
+    createErrorNotice,
+    createSuccessNotice
   } = (0, _data.useDispatch)(_notices.store);
   const [isInProgress, setIsInProgress] = (0, _element.useState)(false);
   const cancel = (0, _element.useCallback)(() => {
@@ -64,6 +70,7 @@ function useSaveImage({
       onFinishEditing();
       return;
     }
+    const modifierType = modifiers.length === 1 ? modifiers[0].type : 'cropAndRotate';
     (0, _apiFetch.default)({
       path: `/wp/v2/media/${id}/edit`,
       method: 'POST',
@@ -76,8 +83,20 @@ function useSaveImage({
         id: response.id,
         url: response.source_url
       });
+      createSuccessNotice(messages[modifierType], {
+        type: 'snackbar',
+        actions: [{
+          label: (0, _i18n.__)('Undo'),
+          onClick: () => {
+            onSaveImage({
+              id,
+              url
+            });
+          }
+        }]
+      });
     }).catch(error => {
-      createErrorNotice((0, _i18n.sprintf)(/* translators: 1. Error message */
+      createErrorNotice((0, _i18n.sprintf)(/* translators: %s: Error message. */
       (0, _i18n.__)('Could not edit image. %s'), (0, _dom.__unstableStripHTML)(error.message)), {
         id: 'image-editing-error',
         type: 'snackbar'
@@ -86,7 +105,7 @@ function useSaveImage({
       setIsInProgress(false);
       onFinishEditing();
     });
-  }, [crop, rotation, id, url, onSaveImage, createErrorNotice, onFinishEditing]);
+  }, [crop, rotation, id, url, onSaveImage, createErrorNotice, createSuccessNotice, onFinishEditing]);
   return (0, _element.useMemo)(() => ({
     isInProgress,
     apply,

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

@@ -1 +1 @@
-{"version":3,"names":["_apiFetch","_interopRequireDefault","require","_data","_element","_i18n","_notices","_dom","useSaveImage","crop","rotation","url","id","onSaveImage","onFinishEditing","createErrorNotice","useDispatch","noticesStore","isInProgress","setIsInProgress","useState","cancel","useCallback","apply","modifiers","push","type","args","angle","width","height","left","x","top","y","length","apiFetch","path","method","data","src","then","response","source_url","catch","error","sprintf","__","stripHTML","message","finally","useMemo"],"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","_interopRequireDefault","require","_data","_element","_i18n","_notices","_dom","messages","crop","__","rotate","cropAndRotate","useSaveImage","rotation","url","id","onSaveImage","onFinishEditing","createErrorNotice","createSuccessNotice","useDispatch","noticesStore","isInProgress","setIsInProgress","useState","cancel","useCallback","apply","modifiers","push","type","args","angle","width","height","left","x","top","y","length","modifierType","apiFetch","path","method","data","src","then","response","source_url","actions","label","onClick","catch","error","sprintf","stripHTML","message","finally","useMemo"],"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/block-toolbar/index.js

@@ -69,7 +69,9 @@ export function PrivateBlockToolbar({
     showSlots,
     showGroupButtons,
     showLockButtons,
-    showSwitchSectionStyleButton
+    showSwitchSectionStyleButton,
+    hasFixedToolbar,
+    isNavigationMode
   } = useSelect(select => {
     const {
       getBlockName,
@@ -81,8 +83,10 @@ export function PrivateBlockToolbar({
       getBlockAttributes,
       getBlockParentsByBlockName,
       getTemplateLock,
+      getSettings,
       getParentSectionBlock,
-      isZoomOut
+      isZoomOut,
+      isNavigationMode: _isNavigationMode
     } = unlock(select(blockEditorStore));
     const selectedBlockClientIds = getSelectedBlockClientIds();
     const selectedBlockClientId = selectedBlockClientIds[0];
@@ -116,7 +120,9 @@ export function PrivateBlockToolbar({
       showSlots: !isZoomOut(),
       showGroupButtons: !isZoomOut(),
       showLockButtons: !isZoomOut(),
-      showSwitchSectionStyleButton: isZoomOut()
+      showSwitchSectionStyleButton: isZoomOut(),
+      hasFixedToolbar: getSettings().hasFixedToolbar,
+      isNavigationMode: _isNavigationMode()
     };
   }, []);
   const toolbarWrapperRef = useRef(null);
@@ -137,7 +143,8 @@ export function PrivateBlockToolbar({
 
   // Shifts the toolbar to make room for the parent block selector.
   const classes = clsx('block-editor-block-contextual-toolbar', {
-    'has-parent': showParentSelector
+    'has-parent': showParentSelector,
+    'is-inverted-toolbar': isNavigationMode && !hasFixedToolbar
   });
   const innerClasses = clsx('block-editor-block-toolbar', {
     'is-synced': isSynced,