@wordpress/edit-site 5.10.0 → 5.11.0

package/build-module/components/list/actions/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/list/actions/index.js"],"names":["useDispatch","store","coreStore","__","DropdownMenu","MenuGroup","MenuItem","moreVertical","noticesStore","editSiteStore","isTemplateRemovable","isTemplateRevertable","RenameMenuItem","Actions","template","removeTemplate","revertTemplate","saveEditedEntityRecord","createSuccessNotice","createErrorNotice","isRemovable","isRevertable","revertAndSaveTemplate","allowUndo","type","id","error","errorMessage","message","code","onClose"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,WAAT,QAA4B,iBAA5B;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,sBAAnC;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,EAAuBC,SAAvB,EAAkCC,QAAlC,QAAkD,uBAAlD;AACA,SAASC,YAAT,QAA6B,kBAA7B;AACA,SAASN,KAAK,IAAIO,YAAlB,QAAsC,oBAAtC;AAEA;AACA;AACA;;AACA,SAASP,KAAK,IAAIQ,aAAlB,QAAuC,gBAAvC;AACA,OAAOC,mBAAP,MAAgC,sCAAhC;AACA,OAAOC,oBAAP,MAAiC,uCAAjC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AAEA,eAAe,SAASC,OAAT,OAAiC;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AAC/C,QAAM;AAAEC,IAAAA,cAAF;AAAkBC,IAAAA;AAAlB,MAAqChB,WAAW,CAAES,aAAF,CAAtD;AACA,QAAM;AAAEQ,IAAAA;AAAF,MAA6BjB,WAAW,CAAEE,SAAF,CAA9C;AACA,QAAM;AAAEgB,IAAAA,mBAAF;AAAuBC,IAAAA;AAAvB,MACLnB,WAAW,CAAEQ,YAAF,CADZ;AAGA,QAAMY,WAAW,GAAGV,mBAAmB,CAAEI,QAAF,CAAvC;AACA,QAAMO,YAAY,GAAGV,oBAAoB,CAAEG,QAAF,CAAzC;;AAEA,MAAK,CAAEM,WAAF,IAAiB,CAAEC,YAAxB,EAAuC;AACtC,WAAO,IAAP;AACA;;AAED,iBAAeC,qBAAf,GAAuC;AACtC,QAAI;AACH,YAAMN,cAAc,CAAEF,QAAF,EAAY;AAAES,QAAAA,SAAS,EAAE;AAAb,OAAZ,CAApB;AACA,YAAMN,sBAAsB,CAC3B,UAD2B,EAE3BH,QAAQ,CAACU,IAFkB,EAG3BV,QAAQ,CAACW,EAHkB,CAA5B;AAMAP,MAAAA,mBAAmB,CAAEf,EAAE,CAAE,kBAAF,CAAJ,EAA4B;AAC9CqB,QAAAA,IAAI,EAAE;AADwC,OAA5B,CAAnB;AAGA,KAXD,CAWE,OAAQE,KAAR,EAAgB;AACjB,YAAMC,YAAY,GACjBD,KAAK,CAACE,OAAN,IAAiBF,KAAK,CAACG,IAAN,KAAe,eAAhC,GACGH,KAAK,CAACE,OADT,GAEGzB,EAAE,CAAE,+CAAF,CAHN;AAKAgB,MAAAA,iBAAiB,CAAEQ,YAAF,EAAgB;AAAEH,QAAAA,IAAI,EAAE;AAAR,OAAhB,CAAjB;AACA;AACD;;AAED,SACC,cAAC,YAAD;AACC,IAAA,IAAI,EAAGjB,YADR;AAEC,IAAA,KAAK,EAAGJ,EAAE,CAAE,SAAF,CAFX;AAGC,IAAA,SAAS,EAAC;AAHX,KAKG;AAAA,QAAE;AAAE2B,MAAAA;AAAF,KAAF;AAAA,WACD,cAAC,SAAD,QACGV,WAAW,IACZ,8BACC,cAAC,cAAD;AACC,MAAA,QAAQ,EAAGN,QADZ;AAEC,MAAA,OAAO,EAAGgB;AAFX,MADD,EAKC,cAAC,QAAD;AACC,MAAA,aAAa,MADd;AAEC,MAAA,UAAU,MAFX;AAGC,MAAA,OAAO,EAAG,MAAM;AACff,QAAAA,cAAc,CAAED,QAAF,CAAd;AACAgB,QAAAA,OAAO;AACP;AANF,OAQG3B,EAAE,CAAE,QAAF,CARL,CALD,CAFF,EAmBGkB,YAAY,IACb,cAAC,QAAD;AACC,MAAA,IAAI,EAAGlB,EAAE,CACR,4CADQ,CADV;AAIC,MAAA,OAAO,EAAG,MAAM;AACfmB,QAAAA,qBAAqB;AACrBQ,QAAAA,OAAO;AACP;AAPF,OASG3B,EAAE,CAAE,sBAAF,CATL,CApBF,CADC;AAAA,GALH,CADD;AA2CA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __ } from '@wordpress/i18n';\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { moreVertical } from '@wordpress/icons';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\nimport isTemplateRemovable from '../../../utils/is-template-removable';\nimport isTemplateRevertable from '../../../utils/is-template-revertable';\nimport RenameMenuItem from './rename-menu-item';\n\nexport default function Actions( { template } ) {\n\tconst { removeTemplate, revertTemplate } = useDispatch( editSiteStore );\n\tconst { saveEditedEntityRecord } = useDispatch( coreStore );\n\tconst { createSuccessNotice, createErrorNotice } =\n\t\tuseDispatch( noticesStore );\n\n\tconst isRemovable = isTemplateRemovable( template );\n\tconst isRevertable = isTemplateRevertable( template );\n\n\tif ( ! isRemovable && ! isRevertable ) {\n\t\treturn null;\n\t}\n\n\tasync function revertAndSaveTemplate() {\n\t\ttry {\n\t\t\tawait revertTemplate( template, { allowUndo: false } );\n\t\t\tawait saveEditedEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\ttemplate.type,\n\t\t\t\ttemplate.id\n\t\t\t);\n\n\t\t\tcreateSuccessNotice( __( 'Entity reverted.' ), {\n\t\t\t\ttype: 'snackbar',\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tconst errorMessage =\n\t\t\t\terror.message && error.code !== 'unknown_error'\n\t\t\t\t\t? error.message\n\t\t\t\t\t: __( 'An error occurred while reverting the entity.' );\n\n\t\t\tcreateErrorNotice( errorMessage, { type: 'snackbar' } );\n\t\t}\n\t}\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\ticon={ moreVertical }\n\t\t\tlabel={ __( 'Actions' ) }\n\t\t\tclassName=\"edit-site-list-table__actions\"\n\t\t>\n\t\t\t{ ( { onClose } ) => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t{ isRemovable && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<RenameMenuItem\n\t\t\t\t\t\t\t\ttemplate={ template }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tisDestructive\n\t\t\t\t\t\t\t\tisTertiary\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tremoveTemplate( template );\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isRevertable && (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tinfo={ __(\n\t\t\t\t\t\t\t\t'Use the template as supplied by the theme.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\trevertAndSaveTemplate();\n\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear customizations' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t) }\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/list/actions/index.js"],"names":["useDispatch","store","coreStore","__","sprintf","DropdownMenu","MenuGroup","MenuItem","moreVertical","noticesStore","editSiteStore","isTemplateRemovable","isTemplateRevertable","RenameMenuItem","Actions","template","removeTemplate","revertTemplate","saveEditedEntityRecord","createSuccessNotice","createErrorNotice","isRemovable","isRevertable","revertAndSaveTemplate","allowUndo","type","id","title","rendered","error","errorMessage","message","code","onClose"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { moreVertical } from '@wordpress/icons';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\nimport isTemplateRemovable from '../../../utils/is-template-removable';\nimport isTemplateRevertable from '../../../utils/is-template-revertable';\nimport RenameMenuItem from './rename-menu-item';\n\nexport default function Actions( { template } ) {\n\tconst { removeTemplate, revertTemplate } = useDispatch( editSiteStore );\n\tconst { saveEditedEntityRecord } = useDispatch( coreStore );\n\tconst { createSuccessNotice, createErrorNotice } =\n\t\tuseDispatch( noticesStore );\n\tconst isRemovable = isTemplateRemovable( template );\n\tconst isRevertable = isTemplateRevertable( template );\n\n\tif ( ! isRemovable && ! isRevertable ) {\n\t\treturn null;\n\t}\n\n\tasync function revertAndSaveTemplate() {\n\t\ttry {\n\t\t\tawait revertTemplate( template, { allowUndo: false } );\n\t\t\tawait saveEditedEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\ttemplate.type,\n\t\t\t\ttemplate.id\n\t\t\t);\n\n\t\t\tcreateSuccessNotice(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: The template/part's name. */\n\t\t\t\t\t__( '\"%s\" reverted.' ),\n\t\t\t\t\ttemplate.title.rendered\n\t\t\t\t),\n\t\t\t\t{\n\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\tid: 'edit-site-template-reverted',\n\t\t\t\t}\n\t\t\t);\n\t\t} catch ( error ) {\n\t\t\tconst errorMessage =\n\t\t\t\terror.message && error.code !== 'unknown_error'\n\t\t\t\t\t? error.message\n\t\t\t\t\t: __( 'An error occurred while reverting the entity.' );\n\n\t\t\tcreateErrorNotice( errorMessage, { type: 'snackbar' } );\n\t\t}\n\t}\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\ticon={ moreVertical }\n\t\t\tlabel={ __( 'Actions' ) }\n\t\t\tclassName=\"edit-site-list-table__actions\"\n\t\t>\n\t\t\t{ ( { onClose } ) => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t{ isRemovable && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<RenameMenuItem\n\t\t\t\t\t\t\t\ttemplate={ template }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tisDestructive\n\t\t\t\t\t\t\t\tisTertiary\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tremoveTemplate( template );\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isRevertable && (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tinfo={ __(\n\t\t\t\t\t\t\t\t'Use the template as supplied by the theme.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\trevertAndSaveTemplate();\n\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear customizations' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t) }\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n"]}

package/build-module/components/resizable-frame/index.js

@@ -0,0 +1,228 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+
+import { useState, useRef, useEffect } from '@wordpress/element';
+import { ResizableBox, __unstableMotion as motion } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store'; // Removes the inline styles in the drag handles.
+
+const HANDLE_STYLES_OVERRIDE = {
+  position: undefined,
+  userSelect: undefined,
+  cursor: undefined,
+  width: undefined,
+  height: undefined,
+  top: undefined,
+  right: undefined,
+  bottom: undefined,
+  left: undefined
+}; // The minimum width of the frame (in px) while resizing.
+
+const FRAME_MIN_WIDTH = 340; // The reference width of the frame (in px) used to calculate the aspect ratio.
+
+const FRAME_REFERENCE_WIDTH = 1300; // 9 : 19.5 is the target aspect ratio enforced (when possible) while resizing.
+
+const FRAME_TARGET_ASPECT_RATIO = 9 / 19.5; // The minimum distance (in px) between the frame resize handle and the
+// viewport's edge. If the frame is resized to be closer to the viewport's edge
+// than this distance, then "canvas mode" will be enabled.
+
+const SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD = 200;
+
+function calculateNewHeight(width, initialAspectRatio) {
+  const lerp = (a, b, amount) => {
+    return a + (b - a) * amount;
+  }; // Calculate the intermediate aspect ratio based on the current width.
+
+
+  const lerpFactor = 1 - Math.max(0, Math.min(1, (width - FRAME_MIN_WIDTH) / (FRAME_REFERENCE_WIDTH - FRAME_MIN_WIDTH))); // Calculate the height based on the intermediate aspect ratio
+  // ensuring the frame arrives at the target aspect ratio.
+
+  const intermediateAspectRatio = lerp(initialAspectRatio, FRAME_TARGET_ASPECT_RATIO, lerpFactor);
+  return width / intermediateAspectRatio;
+}
+
+function ResizableFrame(_ref2) {
+  let {
+    isFullWidth,
+    isReady,
+    children,
+    oversizedClassName
+  } = _ref2;
+  const [frameSize, setFrameSize] = useState({
+    width: '100%',
+    height: '100%'
+  }); // The width of the resizable frame when a new resize gesture starts.
+
+  const [startingWidth, setStartingWidth] = useState();
+  const [isResizing, setIsResizing] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const [isOversized, setIsOversized] = useState(false);
+  const [resizeRatio, setResizeRatio] = useState(1);
+  const {
+    setCanvasMode
+  } = unlock(useDispatch(editSiteStore));
+  const initialAspectRatioRef = useRef(null); // The width of the resizable frame on initial render.
+
+  const initialComputedWidthRef = useRef(null);
+  const FRAME_TRANSITION = {
+    type: 'tween',
+    duration: isResizing ? 0 : 0.5
+  };
+  const frameRef = useRef(null); // Remember frame dimensions on initial render.
+
+  useEffect(() => {
+    const {
+      offsetWidth,
+      offsetHeight
+    } = frameRef.current.resizable;
+    initialComputedWidthRef.current = offsetWidth;
+    initialAspectRatioRef.current = offsetWidth / offsetHeight;
+  }, []);
+
+  const handleResizeStart = (_event, _direction, ref) => {
+    // Remember the starting width so we don't have to get `ref.offsetWidth` on
+    // every resize event thereafter, which will cause layout thrashing.
+    setStartingWidth(ref.offsetWidth);
+    setIsResizing(true);
+  }; // Calculate the frame size based on the window width as its resized.
+
+
+  const handleResize = (_event, _direction, _ref, delta) => {
+    const normalizedDelta = delta.width / resizeRatio;
+    const deltaAbs = Math.abs(normalizedDelta);
+    const maxDoubledDelta = delta.width < 0 // is shrinking
+    ? deltaAbs : (initialComputedWidthRef.current - startingWidth) / 2;
+    const deltaToDouble = Math.min(deltaAbs, maxDoubledDelta);
+    const doubleSegment = deltaAbs === 0 ? 0 : deltaToDouble / deltaAbs;
+    const singleSegment = 1 - doubleSegment;
+    setResizeRatio(singleSegment + doubleSegment * 2);
+    const updatedWidth = startingWidth + delta.width;
+    setIsOversized(updatedWidth > initialComputedWidthRef.current); // Width will be controlled by the library (via `resizeRatio`),
+    // so we only need to update the height.
+
+    setFrameSize({
+      height: isOversized ? '100%' : calculateNewHeight(updatedWidth, initialAspectRatioRef.current)
+    });
+  };
+
+  const handleResizeStop = (_event, _direction, ref) => {
+    setIsResizing(false);
+
+    if (!isOversized) {
+      return;
+    }
+
+    setIsOversized(false);
+    const remainingWidth = ref.ownerDocument.documentElement.offsetWidth - ref.offsetWidth;
+
+    if (remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD) {
+      // Reset the initial aspect ratio if the frame is resized slightly
+      // above the sidebar but not far enough to trigger full screen.
+      setFrameSize({
+        width: '100%',
+        height: '100%'
+      });
+    } else {
+      // Trigger full screen if the frame is resized far enough to the left.
+      setCanvasMode('edit');
+    }
+  };
+
+  const frameAnimationVariants = {
+    default: {
+      flexGrow: 0,
+      height: frameSize.height
+    },
+    fullWidth: {
+      flexGrow: 1,
+      height: frameSize.height
+    }
+  };
+  return createElement(ResizableBox, {
+    as: motion.div,
+    ref: frameRef,
+    initial: false,
+    variants: frameAnimationVariants,
+    animate: isFullWidth ? 'fullWidth' : 'default',
+    onAnimationComplete: definition => {
+      if (definition === 'fullWidth') setFrameSize({
+        width: '100%',
+        height: '100%'
+      });
+    },
+    transition: FRAME_TRANSITION,
+    size: frameSize,
+    enable: {
+      top: false,
+      right: false,
+      bottom: false,
+      // Resizing will be disabled until the editor content is loaded.
+      left: isReady,
+      topRight: false,
+      bottomRight: false,
+      bottomLeft: false,
+      topLeft: false
+    },
+    resizeRatio: resizeRatio,
+    handleClasses: undefined,
+    handleStyles: {
+      left: HANDLE_STYLES_OVERRIDE,
+      right: HANDLE_STYLES_OVERRIDE
+    },
+    minWidth: FRAME_MIN_WIDTH,
+    maxWidth: isFullWidth ? '100%' : '150%',
+    maxHeight: '100%',
+    onMouseOver: () => setIsHovering(true),
+    onMouseOut: () => setIsHovering(false),
+    handleComponent: {
+      left: isHovering || isResizing ? createElement(motion.div, {
+        key: "handle",
+        className: "edit-site-resizable-frame__handle",
+        title: "Drag to resize",
+        initial: {
+          opacity: 0,
+          left: 0
+        },
+        animate: {
+          opacity: 1,
+          left: -15
+        },
+        exit: {
+          opacity: 0,
+          left: 0
+        },
+        whileHover: {
+          scale: 1.1
+        }
+      }) : null
+    },
+    onResizeStart: handleResizeStart,
+    onResize: handleResize,
+    onResizeStop: handleResizeStop,
+    className: classnames('edit-site-resizable-frame__inner', {
+      'is-resizing': isResizing,
+      [oversizedClassName]: isOversized
+    })
+  }, createElement(motion.div, {
+    className: "edit-site-resizable-frame__inner-content",
+    animate: {
+      borderRadius: isFullWidth ? 0 : 8
+    },
+    transition: FRAME_TRANSITION
+  }, children));
+}
+
+export default ResizableFrame;
+//# sourceMappingURL=index.js.map

package/build-module/components/resizable-frame/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/resizable-frame/index.js"],"names":["classnames","useState","useRef","useEffect","ResizableBox","__unstableMotion","motion","useDispatch","unlock","store","editSiteStore","HANDLE_STYLES_OVERRIDE","position","undefined","userSelect","cursor","width","height","top","right","bottom","left","FRAME_MIN_WIDTH","FRAME_REFERENCE_WIDTH","FRAME_TARGET_ASPECT_RATIO","SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD","calculateNewHeight","initialAspectRatio","lerp","a","b","amount","lerpFactor","Math","max","min","intermediateAspectRatio","ResizableFrame","isFullWidth","isReady","children","oversizedClassName","frameSize","setFrameSize","startingWidth","setStartingWidth","isResizing","setIsResizing","isHovering","setIsHovering","isOversized","setIsOversized","resizeRatio","setResizeRatio","setCanvasMode","initialAspectRatioRef","initialComputedWidthRef","FRAME_TRANSITION","type","duration","frameRef","offsetWidth","offsetHeight","current","resizable","handleResizeStart","_event","_direction","ref","handleResize","_ref","delta","normalizedDelta","deltaAbs","abs","maxDoubledDelta","deltaToDouble","doubleSegment","singleSegment","updatedWidth","handleResizeStop","remainingWidth","ownerDocument","documentElement","frameAnimationVariants","default","flexGrow","fullWidth","div","definition","topRight","bottomRight","bottomLeft","topLeft","opacity","scale","borderRadius"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport {\n\tResizableBox,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport { store as editSiteStore } from '../../store';\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDE = {\n\tposition: undefined,\n\tuserSelect: undefined,\n\tcursor: undefined,\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\n// The minimum width of the frame (in px) while resizing.\nconst FRAME_MIN_WIDTH = 340;\n// The reference width of the frame (in px) used to calculate the aspect ratio.\nconst FRAME_REFERENCE_WIDTH = 1300;\n// 9 : 19.5 is the target aspect ratio enforced (when possible) while resizing.\nconst FRAME_TARGET_ASPECT_RATIO = 9 / 19.5;\n// The minimum distance (in px) between the frame resize handle and the\n// viewport's edge. If the frame is resized to be closer to the viewport's edge\n// than this distance, then \"canvas mode\" will be enabled.\nconst SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD = 200;\n\nfunction calculateNewHeight( width, initialAspectRatio ) {\n\tconst lerp = ( a, b, amount ) => {\n\t\treturn a + ( b - a ) * amount;\n\t};\n\n\t// Calculate the intermediate aspect ratio based on the current width.\n\tconst lerpFactor =\n\t\t1 -\n\t\tMath.max(\n\t\t\t0,\n\t\t\tMath.min(\n\t\t\t\t1,\n\t\t\t\t( width - FRAME_MIN_WIDTH ) /\n\t\t\t\t\t( FRAME_REFERENCE_WIDTH - FRAME_MIN_WIDTH )\n\t\t\t)\n\t\t);\n\n\t// Calculate the height based on the intermediate aspect ratio\n\t// ensuring the frame arrives at the target aspect ratio.\n\tconst intermediateAspectRatio = lerp(\n\t\tinitialAspectRatio,\n\t\tFRAME_TARGET_ASPECT_RATIO,\n\t\tlerpFactor\n\t);\n\n\treturn width / intermediateAspectRatio;\n}\n\nfunction ResizableFrame( {\n\tisFullWidth,\n\tisReady,\n\tchildren,\n\toversizedClassName,\n} ) {\n\tconst [ frameSize, setFrameSize ] = useState( {\n\t\twidth: '100%',\n\t\theight: '100%',\n\t} );\n\t// The width of the resizable frame when a new resize gesture starts.\n\tconst [ startingWidth, setStartingWidth ] = useState();\n\tconst [ isResizing, setIsResizing ] = useState( false );\n\tconst [ isHovering, setIsHovering ] = useState( false );\n\tconst [ isOversized, setIsOversized ] = useState( false );\n\tconst [ resizeRatio, setResizeRatio ] = useState( 1 );\n\tconst { setCanvasMode } = unlock( useDispatch( editSiteStore ) );\n\tconst initialAspectRatioRef = useRef( null );\n\t// The width of the resizable frame on initial render.\n\tconst initialComputedWidthRef = useRef( null );\n\tconst FRAME_TRANSITION = { type: 'tween', duration: isResizing ? 0 : 0.5 };\n\tconst frameRef = useRef( null );\n\n\t// Remember frame dimensions on initial render.\n\tuseEffect( () => {\n\t\tconst { offsetWidth, offsetHeight } = frameRef.current.resizable;\n\t\tinitialComputedWidthRef.current = offsetWidth;\n\t\tinitialAspectRatioRef.current = offsetWidth / offsetHeight;\n\t}, [] );\n\n\tconst handleResizeStart = ( _event, _direction, ref ) => {\n\t\t// Remember the starting width so we don't have to get `ref.offsetWidth` on\n\t\t// every resize event thereafter, which will cause layout thrashing.\n\t\tsetStartingWidth( ref.offsetWidth );\n\t\tsetIsResizing( true );\n\t};\n\n\t// Calculate the frame size based on the window width as its resized.\n\tconst handleResize = ( _event, _direction, _ref, delta ) => {\n\t\tconst normalizedDelta = delta.width / resizeRatio;\n\t\tconst deltaAbs = Math.abs( normalizedDelta );\n\t\tconst maxDoubledDelta =\n\t\t\tdelta.width < 0 // is shrinking\n\t\t\t\t? deltaAbs\n\t\t\t\t: ( initialComputedWidthRef.current - startingWidth ) / 2;\n\t\tconst deltaToDouble = Math.min( deltaAbs, maxDoubledDelta );\n\t\tconst doubleSegment = deltaAbs === 0 ? 0 : deltaToDouble / deltaAbs;\n\t\tconst singleSegment = 1 - doubleSegment;\n\n\t\tsetResizeRatio( singleSegment + doubleSegment * 2 );\n\n\t\tconst updatedWidth = startingWidth + delta.width;\n\n\t\tsetIsOversized( updatedWidth > initialComputedWidthRef.current );\n\n\t\t// Width will be controlled by the library (via `resizeRatio`),\n\t\t// so we only need to update the height.\n\t\tsetFrameSize( {\n\t\t\theight: isOversized\n\t\t\t\t? '100%'\n\t\t\t\t: calculateNewHeight(\n\t\t\t\t\t\tupdatedWidth,\n\t\t\t\t\t\tinitialAspectRatioRef.current\n\t\t\t\t  ),\n\t\t} );\n\t};\n\n\tconst handleResizeStop = ( _event, _direction, ref ) => {\n\t\tsetIsResizing( false );\n\n\t\tif ( ! isOversized ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsOversized( false );\n\n\t\tconst remainingWidth =\n\t\t\tref.ownerDocument.documentElement.offsetWidth - ref.offsetWidth;\n\n\t\tif ( remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD ) {\n\t\t\t// Reset the initial aspect ratio if the frame is resized slightly\n\t\t\t// above the sidebar but not far enough to trigger full screen.\n\t\t\tsetFrameSize( { width: '100%', height: '100%' } );\n\t\t} else {\n\t\t\t// Trigger full screen if the frame is resized far enough to the left.\n\t\t\tsetCanvasMode( 'edit' );\n\t\t}\n\t};\n\n\tconst frameAnimationVariants = {\n\t\tdefault: {\n\t\t\tflexGrow: 0,\n\t\t\theight: frameSize.height,\n\t\t},\n\t\tfullWidth: {\n\t\t\tflexGrow: 1,\n\t\t\theight: frameSize.height,\n\t\t},\n\t};\n\n\treturn (\n\t\t<ResizableBox\n\t\t\tas={ motion.div }\n\t\t\tref={ frameRef }\n\t\t\tinitial={ false }\n\t\t\tvariants={ frameAnimationVariants }\n\t\t\tanimate={ isFullWidth ? 'fullWidth' : 'default' }\n\t\t\tonAnimationComplete={ ( definition ) => {\n\t\t\t\tif ( definition === 'fullWidth' )\n\t\t\t\t\tsetFrameSize( { width: '100%', height: '100%' } );\n\t\t\t} }\n\t\t\ttransition={ FRAME_TRANSITION }\n\t\t\tsize={ frameSize }\n\t\t\tenable={ {\n\t\t\t\ttop: false,\n\t\t\t\tright: false,\n\t\t\t\tbottom: false,\n\t\t\t\t// Resizing will be disabled until the editor content is loaded.\n\t\t\t\tleft: isReady,\n\t\t\t\ttopRight: false,\n\t\t\t\tbottomRight: false,\n\t\t\t\tbottomLeft: false,\n\t\t\t\ttopLeft: false,\n\t\t\t} }\n\t\t\tresizeRatio={ resizeRatio }\n\t\t\thandleClasses={ undefined }\n\t\t\thandleStyles={ {\n\t\t\t\tleft: HANDLE_STYLES_OVERRIDE,\n\t\t\t\tright: HANDLE_STYLES_OVERRIDE,\n\t\t\t} }\n\t\t\tminWidth={ FRAME_MIN_WIDTH }\n\t\t\tmaxWidth={ isFullWidth ? '100%' : '150%' }\n\t\t\tmaxHeight={ '100%' }\n\t\t\tonMouseOver={ () => setIsHovering( true ) }\n\t\t\tonMouseOut={ () => setIsHovering( false ) }\n\t\t\thandleComponent={ {\n\t\t\t\tleft:\n\t\t\t\t\tisHovering || isResizing ? (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tkey=\"handle\"\n\t\t\t\t\t\t\tclassName=\"edit-site-resizable-frame__handle\"\n\t\t\t\t\t\t\ttitle=\"Drag to resize\"\n\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\tleft: -15,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\texit={ {\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\twhileHover={ { scale: 1.1 } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null,\n\t\t\t} }\n\t\t\tonResizeStart={ handleResizeStart }\n\t\t\tonResize={ handleResize }\n\t\t\tonResizeStop={ handleResizeStop }\n\t\t\tclassName={ classnames( 'edit-site-resizable-frame__inner', {\n\t\t\t\t'is-resizing': isResizing,\n\t\t\t\t[ oversizedClassName ]: isOversized,\n\t\t\t} ) }\n\t\t>\n\t\t\t<motion.div\n\t\t\t\tclassName=\"edit-site-resizable-frame__inner-content\"\n\t\t\t\tanimate={ {\n\t\t\t\t\tborderRadius: isFullWidth ? 0 : 8,\n\t\t\t\t} }\n\t\t\t\ttransition={ FRAME_TRANSITION }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</motion.div>\n\t\t</ResizableBox>\n\t);\n}\n\nexport default ResizableFrame;\n"]}

package/build-module/components/revisions/index.js

@@ -54,7 +54,8 @@ function Revisions(_ref) {
   return createElement(EditorCanvasContainer, {
     title: __('Revisions'),
     onClose: onClose,
-    closeButtonLabel: __('Close revisions')
+    closeButtonLabel: __('Close revisions'),
+    enableResizing: true
   }, createElement(Iframe, {
     className: "edit-site-revisions__iframe",
     name: "revisions",

package/build-module/components/revisions/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/revisions/index.js"],"names":["isEmpty","Disabled","__","BlockList","privateApis","blockEditorPrivateApis","store","blockEditorStore","__unstableEditorStyles","EditorStyles","__unstableIframe","Iframe","useSelect","useMemo","coreStore","unlock","mergeBaseAndUserConfigs","EditorCanvasContainer","ExperimentalBlockEditorProvider","useGlobalStylesOutputWithConfig","Revisions","onClose","userConfig","blocks","baseConfig","select","__experimentalGetCurrentThemeBaseGlobalStyles","mergedConfig","renderedBlocksArray","Array","isArray","originalSettings","getSettings","settings","__unstableIsPreviewMode","globalStyles","editorStyles","styles"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Disabled } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBlockList,\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\n\nimport { unlock } from '../../private-apis';\nimport { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';\nimport EditorCanvasContainer from '../editor-canvas-container';\n\nconst { ExperimentalBlockEditorProvider, useGlobalStylesOutputWithConfig } =\n\tunlock( blockEditorPrivateApis );\n\nfunction Revisions( { onClose, userConfig, blocks } ) {\n\tconst { baseConfig } = useSelect(\n\t\t( select ) => ( {\n\t\t\tbaseConfig:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeBaseGlobalStyles(),\n\t\t} ),\n\t\t[]\n\t);\n\n\tconst mergedConfig = useMemo( () => {\n\t\tif ( ! isEmpty( userConfig ) && ! isEmpty( baseConfig ) ) {\n\t\t\treturn mergeBaseAndUserConfigs( baseConfig, userConfig );\n\t\t}\n\t\treturn {};\n\t}, [ baseConfig, userConfig ] );\n\n\tconst renderedBlocksArray = useMemo(\n\t\t() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),\n\t\t[ blocks ]\n\t);\n\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),\n\t\t[ originalSettings ]\n\t);\n\n\tconst [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );\n\n\tconst editorStyles =\n\t\t! isEmpty( globalStyles ) && ! isEmpty( userConfig )\n\t\t\t? globalStyles\n\t\t\t: settings.styles;\n\n\treturn (\n\t\t<EditorCanvasContainer\n\t\t\ttitle={ __( 'Revisions' ) }\n\t\t\tonClose={ onClose }\n\t\t\tcloseButtonLabel={ __( 'Close revisions' ) }\n\t\t>\n\t\t\t<Iframe\n\t\t\t\tclassName=\"edit-site-revisions__iframe\"\n\t\t\t\tname=\"revisions\"\n\t\t\t\ttabIndex={ 0 }\n\t\t\t>\n\t\t\t\t<EditorStyles styles={ editorStyles } />\n\t\t\t\t<style>\n\t\t\t\t\t{\n\t\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t\t\t\t\t\t`.is-root-container { display: flow-root; } body { position: relative; padding: 32px; }`\n\t\t\t\t\t}\n\t\t\t\t</style>\n\t\t\t\t<Disabled className=\"edit-site-revisions__example-preview__content\">\n\t\t\t\t\t<ExperimentalBlockEditorProvider\n\t\t\t\t\t\tvalue={ renderedBlocksArray }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockList renderAppender={ false } />\n\t\t\t\t\t</ExperimentalBlockEditorProvider>\n\t\t\t\t</Disabled>\n\t\t\t</Iframe>\n\t\t</EditorCanvasContainer>\n\t);\n}\n\nexport default Revisions;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/revisions/index.js"],"names":["isEmpty","Disabled","__","BlockList","privateApis","blockEditorPrivateApis","store","blockEditorStore","__unstableEditorStyles","EditorStyles","__unstableIframe","Iframe","useSelect","useMemo","coreStore","unlock","mergeBaseAndUserConfigs","EditorCanvasContainer","ExperimentalBlockEditorProvider","useGlobalStylesOutputWithConfig","Revisions","onClose","userConfig","blocks","baseConfig","select","__experimentalGetCurrentThemeBaseGlobalStyles","mergedConfig","renderedBlocksArray","Array","isArray","originalSettings","getSettings","settings","__unstableIsPreviewMode","globalStyles","editorStyles","styles"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Disabled } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBlockList,\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\n\nimport { unlock } from '../../private-apis';\nimport { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';\nimport EditorCanvasContainer from '../editor-canvas-container';\n\nconst { ExperimentalBlockEditorProvider, useGlobalStylesOutputWithConfig } =\n\tunlock( blockEditorPrivateApis );\n\nfunction Revisions( { onClose, userConfig, blocks } ) {\n\tconst { baseConfig } = useSelect(\n\t\t( select ) => ( {\n\t\t\tbaseConfig:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeBaseGlobalStyles(),\n\t\t} ),\n\t\t[]\n\t);\n\n\tconst mergedConfig = useMemo( () => {\n\t\tif ( ! isEmpty( userConfig ) && ! isEmpty( baseConfig ) ) {\n\t\t\treturn mergeBaseAndUserConfigs( baseConfig, userConfig );\n\t\t}\n\t\treturn {};\n\t}, [ baseConfig, userConfig ] );\n\n\tconst renderedBlocksArray = useMemo(\n\t\t() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),\n\t\t[ blocks ]\n\t);\n\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),\n\t\t[ originalSettings ]\n\t);\n\n\tconst [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );\n\n\tconst editorStyles =\n\t\t! isEmpty( globalStyles ) && ! isEmpty( userConfig )\n\t\t\t? globalStyles\n\t\t\t: settings.styles;\n\n\treturn (\n\t\t<EditorCanvasContainer\n\t\t\ttitle={ __( 'Revisions' ) }\n\t\t\tonClose={ onClose }\n\t\t\tcloseButtonLabel={ __( 'Close revisions' ) }\n\t\t\tenableResizing={ true }\n\t\t>\n\t\t\t<Iframe\n\t\t\t\tclassName=\"edit-site-revisions__iframe\"\n\t\t\t\tname=\"revisions\"\n\t\t\t\ttabIndex={ 0 }\n\t\t\t>\n\t\t\t\t<EditorStyles styles={ editorStyles } />\n\t\t\t\t<style>\n\t\t\t\t\t{\n\t\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t\t\t\t\t\t`.is-root-container { display: flow-root; } body { position: relative; padding: 32px; }`\n\t\t\t\t\t}\n\t\t\t\t</style>\n\t\t\t\t<Disabled className=\"edit-site-revisions__example-preview__content\">\n\t\t\t\t\t<ExperimentalBlockEditorProvider\n\t\t\t\t\t\tvalue={ renderedBlocksArray }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockList renderAppender={ false } />\n\t\t\t\t\t</ExperimentalBlockEditorProvider>\n\t\t\t\t</Disabled>\n\t\t\t</Iframe>\n\t\t</EditorCanvasContainer>\n\t);\n}\n\nexport default Revisions;\n"]}

package/build-module/components/secondary-sidebar/list-view-sidebar.js

@@ -16,6 +16,9 @@ import { ESCAPE } from '@wordpress/keycodes';
 
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
+const {
+  PrivateListView
+} = unlock(blockEditorPrivateApis);
 export default function ListViewSidebar() {
   const {
     setIsListViewOpened
@@ -30,9 +33,6 @@ export default function ListViewSidebar() {
     }
   }
 
-  const {
-    PrivateListView
-  } = unlock(blockEditorPrivateApis);
   return (// eslint-disable-next-line jsx-a11y/no-static-element-interactions
     createElement("div", {
       className: "edit-site-editor__list-view-panel",

package/build-module/components/secondary-sidebar/list-view-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/secondary-sidebar/list-view-sidebar.js"],"names":["privateApis","blockEditorPrivateApis","Button","useFocusOnMount","useFocusReturn","useMergeRefs","useDispatch","__","closeSmall","ESCAPE","store","editSiteStore","unlock","ListViewSidebar","setIsListViewOpened","focusOnMountRef","headerFocusReturnRef","contentFocusReturnRef","closeOnEscape","event","keyCode","defaultPrevented","PrivateListView"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SACCC,eADD,EAECC,cAFD,EAGCC,YAHD,QAIO,oBAJP;AAKA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,UAAT,QAA2B,kBAA3B;AACA,SAASC,MAAT,QAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,aAAvC;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,eAAe,SAASC,eAAT,GAA2B;AACzC,QAAM;AAAEC,IAAAA;AAAF,MAA0BR,WAAW,CAAEK,aAAF,CAA3C;AAEA,QAAMI,eAAe,GAAGZ,eAAe,CAAE,cAAF,CAAvC;AACA,QAAMa,oBAAoB,GAAGZ,cAAc,EAA3C;AACA,QAAMa,qBAAqB,GAAGb,cAAc,EAA5C;;AACA,WAASc,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBX,MAAlB,IAA4B,CAAEU,KAAK,CAACE,gBAAzC,EAA4D;AAC3DP,MAAAA,mBAAmB,CAAE,KAAF,CAAnB;AACA;AACD;;AAED,QAAM;AAAEQ,IAAAA;AAAF,MAAsBV,MAAM,CAAEX,sBAAF,CAAlC;AACA,SACC;AACA;AACC,MAAA,SAAS,EAAC,mCADX;AAEC,MAAA,SAAS,EAAGiB;AAFb,OAIC;AACC,MAAA,SAAS,EAAC,0CADX;AAEC,MAAA,GAAG,EAAGF;AAFP,OAIC,8BAAUT,EAAE,CAAE,WAAF,CAAZ,CAJD,EAKC,cAAC,MAAD;AACC,MAAA,IAAI,EAAGC,UADR;AAEC,MAAA,KAAK,EAAGD,EAAE,CAAE,OAAF,CAFX;AAGC,MAAA,OAAO,EAAG,MAAMO,mBAAmB,CAAE,KAAF;AAHpC,MALD,CAJD,EAeC;AACC,MAAA,SAAS,EAAC,2CADX;AAEC,MAAA,GAAG,EAAGT,YAAY,CAAE,CACnBY,qBADmB,EAEnBF,eAFmB,CAAF;AAFnB,OAOC,cAAC,eAAD,OAPD,CAfD;AAFD;AA4BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport {\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { unlock } from '../../private-apis';\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editSiteStore );\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst headerFocusReturnRef = useFocusReturn();\n\tconst contentFocusReturnRef = useFocusReturn();\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}\n\n\tconst { PrivateListView } = unlock( blockEditorPrivateApis );\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"edit-site-editor__list-view-panel\"\n\t\t\tonKeyDown={ closeOnEscape }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-site-editor__list-view-panel-header\"\n\t\t\t\tref={ headerFocusReturnRef }\n\t\t\t>\n\t\t\t\t<strong>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\tonClick={ () => setIsListViewOpened( false ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-site-editor__list-view-panel-content\"\n\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\tcontentFocusReturnRef,\n\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t] ) }\n\t\t\t>\n\t\t\t\t<PrivateListView />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/secondary-sidebar/list-view-sidebar.js"],"names":["privateApis","blockEditorPrivateApis","Button","useFocusOnMount","useFocusReturn","useMergeRefs","useDispatch","__","closeSmall","ESCAPE","store","editSiteStore","unlock","PrivateListView","ListViewSidebar","setIsListViewOpened","focusOnMountRef","headerFocusReturnRef","contentFocusReturnRef","closeOnEscape","event","keyCode","defaultPrevented"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SACCC,eADD,EAECC,cAFD,EAGCC,YAHD,QAIO,oBAJP;AAKA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,UAAT,QAA2B,kBAA3B;AACA,SAASC,MAAT,QAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,aAAvC;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAsBD,MAAM,CAAEX,sBAAF,CAAlC;AAEA,eAAe,SAASa,eAAT,GAA2B;AACzC,QAAM;AAAEC,IAAAA;AAAF,MAA0BT,WAAW,CAAEK,aAAF,CAA3C;AAEA,QAAMK,eAAe,GAAGb,eAAe,CAAE,cAAF,CAAvC;AACA,QAAMc,oBAAoB,GAAGb,cAAc,EAA3C;AACA,QAAMc,qBAAqB,GAAGd,cAAc,EAA5C;;AACA,WAASe,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBZ,MAAlB,IAA4B,CAAEW,KAAK,CAACE,gBAAzC,EAA4D;AAC3DP,MAAAA,mBAAmB,CAAE,KAAF,CAAnB;AACA;AACD;;AAED,SACC;AACA;AACC,MAAA,SAAS,EAAC,mCADX;AAEC,MAAA,SAAS,EAAGI;AAFb,OAIC;AACC,MAAA,SAAS,EAAC,0CADX;AAEC,MAAA,GAAG,EAAGF;AAFP,OAIC,8BAAUV,EAAE,CAAE,WAAF,CAAZ,CAJD,EAKC,cAAC,MAAD;AACC,MAAA,IAAI,EAAGC,UADR;AAEC,MAAA,KAAK,EAAGD,EAAE,CAAE,OAAF,CAFX;AAGC,MAAA,OAAO,EAAG,MAAMQ,mBAAmB,CAAE,KAAF;AAHpC,MALD,CAJD,EAeC;AACC,MAAA,SAAS,EAAC,2CADX;AAEC,MAAA,GAAG,EAAGV,YAAY,CAAE,CACnBa,qBADmB,EAEnBF,eAFmB,CAAF;AAFnB,OAOC,cAAC,eAAD,OAPD,CAfD;AAFD;AA4BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport {\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { unlock } from '../../private-apis';\n\nconst { PrivateListView } = unlock( blockEditorPrivateApis );\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editSiteStore );\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst headerFocusReturnRef = useFocusReturn();\n\tconst contentFocusReturnRef = useFocusReturn();\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"edit-site-editor__list-view-panel\"\n\t\t\tonKeyDown={ closeOnEscape }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-site-editor__list-view-panel-header\"\n\t\t\t\tref={ headerFocusReturnRef }\n\t\t\t>\n\t\t\t\t<strong>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\tonClick={ () => setIsListViewOpened( false ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-site-editor__list-view-panel-content\"\n\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\tcontentFocusReturnRef,\n\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t] ) }\n\t\t\t>\n\t\t\t\t<PrivateListView />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/build-module/components/sidebar/index.js

@@ -15,10 +15,10 @@ import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templ
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
 import useSyncPathWithURL, { getPathFromURL } from '../sync-state-with-url/use-sync-path-with-url';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveHub from '../save-hub';
-import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';
 import { unlock } from '../../private-apis';
 import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
 import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
@@ -33,10 +33,10 @@ function SidebarScreens() {
   }, createElement(SidebarNavigationScreenMain, null)), createElement(NavigatorScreen, {
     path: "/navigation"
   }, createElement(SidebarNavigationScreenNavigationMenus, null)), createElement(NavigatorScreen, {
+    path: "/navigation/:postType/:postId"
+  }, createElement(SidebarNavigationScreenNavigationMenu, null)), createElement(NavigatorScreen, {
     path: "/wp_global_styles"
   }, createElement(SidebarNavigationScreenGlobalStyles, null)), createElement(NavigatorScreen, {
-    path: "/navigation/:postType/:postId"
-  }, createElement(SidebarNavigationScreenNavigationItem, null)), createElement(NavigatorScreen, {
     path: "/page"
   }, createElement(SidebarNavigationScreenPages, null)), createElement(NavigatorScreen, {
     path: "/page/:postId"

package/build-module/components/sidebar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/index.js"],"names":["memo","useRef","__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","privateApis","routerPrivateApis","SidebarNavigationScreenMain","SidebarNavigationScreenTemplates","SidebarNavigationScreenTemplate","useSyncPathWithURL","getPathFromURL","SidebarNavigationScreenNavigationMenus","SidebarNavigationScreenGlobalStyles","SidebarNavigationScreenTemplatesBrowse","SaveHub","SidebarNavigationScreenNavigationItem","unlock","SidebarNavigationScreenPages","SidebarNavigationScreenPage","useLocation","SidebarScreens","Sidebar","params","urlParams","initialPath","current"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,MAAf,QAA6B,oBAA7B;AACA,SACCC,+BAA+B,IAAIC,iBADpC,EAECC,6BAA6B,IAAIC,eAFlC,QAGO,uBAHP;AAIA,SAASC,WAAW,IAAIC,iBAAxB,QAAiD,mBAAjD;AAEA;AACA;AACA;;AACA,OAAOC,2BAAP,MAAwC,mCAAxC;AACA,OAAOC,gCAAP,MAA6C,wCAA7C;AACA,OAAOC,+BAAP,MAA4C,uCAA5C;AACA,OAAOC,kBAAP,IACCC,cADD,QAEO,+CAFP;AAGA,OAAOC,sCAAP,MAAmD,+CAAnD;AACA,OAAOC,mCAAP,MAAgD,4CAAhD;AACA,OAAOC,sCAAP,MAAmD,+CAAnD;AACA,OAAOC,OAAP,MAAoB,aAApB;AACA,OAAOC,qCAAP,MAAkD,8CAAlD;AACA,SAASC,MAAT,QAAuB,oBAAvB;AACA,OAAOC,4BAAP,MAAyC,oCAAzC;AACA,OAAOC,2BAAP,MAAwC,mCAAxC;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAkBH,MAAM,CAAEX,iBAAF,CAA9B;;AAEA,SAASe,cAAT,GAA0B;AACzBX,EAAAA,kBAAkB;AAElB,SACC,8BACC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,2BAAD,OADD,CADD,EAIC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,sCAAD,OADD,CAJD,EAOC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,mCAAD,OADD,CAPD,EAUC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,qCAAD,OADD,CAVD,EAaC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,4BAAD,OADD,CAbD,EAgBC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,2BAAD,OADD,CAhBD,EAmBC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,gCAAD,OADD,CAnBD,EAsBC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,sCAAD,OADD,CAtBD,EAyBC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,+BAAD,OADD,CAzBD,CADD;AA+BA;;AAED,SAASY,OAAT,GAAmB;AAClB,QAAM;AAAEC,IAAAA,MAAM,EAAEC;AAAV,MAAwBJ,WAAW,EAAzC;AACA,QAAMK,WAAW,GAAGzB,MAAM,CAAEW,cAAc,CAAEa,SAAF,CAAhB,CAA1B;AAEA,SACC,8BACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAC,4BADX;AAEC,IAAA,WAAW,EAAGC,WAAW,CAACC;AAF3B,KAIC,cAAC,cAAD,OAJD,CADD,EAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,OAAD,OADD,CAPD,CADD;AAaA;;AAED,eAAe3B,IAAI,CAAEuB,OAAF,CAAnB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo, useRef } from '@wordpress/element';\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n} from '@wordpress/components';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';\nimport SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';\nimport SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';\nimport useSyncPathWithURL, {\n\tgetPathFromURL,\n} from '../sync-state-with-url/use-sync-path-with-url';\nimport SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';\nimport SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';\nimport SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';\nimport SaveHub from '../save-hub';\nimport SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';\nimport { unlock } from '../../private-apis';\nimport SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';\nimport SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';\n\nconst { useLocation } = unlock( routerPrivateApis );\n\nfunction SidebarScreens() {\n\tuseSyncPathWithURL();\n\n\treturn (\n\t\t<>\n\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t<SidebarNavigationScreenMain />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/navigation\">\n\t\t\t\t<SidebarNavigationScreenNavigationMenus />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/wp_global_styles\">\n\t\t\t\t<SidebarNavigationScreenGlobalStyles />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/navigation/:postType/:postId\">\n\t\t\t\t<SidebarNavigationScreenNavigationItem />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/page\">\n\t\t\t\t<SidebarNavigationScreenPages />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/page/:postId\">\n\t\t\t\t<SidebarNavigationScreenPage />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template|wp_template_part)\">\n\t\t\t\t<SidebarNavigationScreenTemplates />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template|wp_template_part)/all\">\n\t\t\t\t<SidebarNavigationScreenTemplatesBrowse />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template|wp_template_part)/:postId\">\n\t\t\t\t<SidebarNavigationScreenTemplate />\n\t\t\t</NavigatorScreen>\n\t\t</>\n\t);\n}\n\nfunction Sidebar() {\n\tconst { params: urlParams } = useLocation();\n\tconst initialPath = useRef( getPathFromURL( urlParams ) );\n\n\treturn (\n\t\t<>\n\t\t\t<NavigatorProvider\n\t\t\t\tclassName=\"edit-site-sidebar__content\"\n\t\t\t\tinitialPath={ initialPath.current }\n\t\t\t>\n\t\t\t\t<SidebarScreens />\n\t\t\t</NavigatorProvider>\n\t\t\t<div className=\"edit-site-sidebar__footer\">\n\t\t\t\t<SaveHub />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default memo( Sidebar );\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/index.js"],"names":["memo","useRef","__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","privateApis","routerPrivateApis","SidebarNavigationScreenMain","SidebarNavigationScreenTemplates","SidebarNavigationScreenTemplate","useSyncPathWithURL","getPathFromURL","SidebarNavigationScreenNavigationMenus","SidebarNavigationScreenNavigationMenu","SidebarNavigationScreenGlobalStyles","SidebarNavigationScreenTemplatesBrowse","SaveHub","unlock","SidebarNavigationScreenPages","SidebarNavigationScreenPage","useLocation","SidebarScreens","Sidebar","params","urlParams","initialPath","current"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,MAAf,QAA6B,oBAA7B;AACA,SACCC,+BAA+B,IAAIC,iBADpC,EAECC,6BAA6B,IAAIC,eAFlC,QAGO,uBAHP;AAIA,SAASC,WAAW,IAAIC,iBAAxB,QAAiD,mBAAjD;AAEA;AACA;AACA;;AACA,OAAOC,2BAAP,MAAwC,mCAAxC;AACA,OAAOC,gCAAP,MAA6C,wCAA7C;AACA,OAAOC,+BAAP,MAA4C,uCAA5C;AACA,OAAOC,kBAAP,IACCC,cADD,QAEO,+CAFP;AAGA,OAAOC,sCAAP,MAAmD,+CAAnD;AACA,OAAOC,qCAAP,MAAkD,8CAAlD;AACA,OAAOC,mCAAP,MAAgD,4CAAhD;AACA,OAAOC,sCAAP,MAAmD,+CAAnD;AACA,OAAOC,OAAP,MAAoB,aAApB;AACA,SAASC,MAAT,QAAuB,oBAAvB;AACA,OAAOC,4BAAP,MAAyC,oCAAzC;AACA,OAAOC,2BAAP,MAAwC,mCAAxC;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAkBH,MAAM,CAAEX,iBAAF,CAA9B;;AAEA,SAASe,cAAT,GAA0B;AACzBX,EAAAA,kBAAkB;AAElB,SACC,8BACC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,2BAAD,OADD,CADD,EAIC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,sCAAD,OADD,CAJD,EAOC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,qCAAD,OADD,CAPD,EAUC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,mCAAD,OADD,CAVD,EAaC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,4BAAD,OADD,CAbD,EAgBC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,2BAAD,OADD,CAhBD,EAmBC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,gCAAD,OADD,CAnBD,EAsBC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,sCAAD,OADD,CAtBD,EAyBC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,cAAC,+BAAD,OADD,CAzBD,CADD;AA+BA;;AAED,SAASY,OAAT,GAAmB;AAClB,QAAM;AAAEC,IAAAA,MAAM,EAAEC;AAAV,MAAwBJ,WAAW,EAAzC;AACA,QAAMK,WAAW,GAAGzB,MAAM,CAAEW,cAAc,CAAEa,SAAF,CAAhB,CAA1B;AAEA,SACC,8BACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAC,4BADX;AAEC,IAAA,WAAW,EAAGC,WAAW,CAACC;AAF3B,KAIC,cAAC,cAAD,OAJD,CADD,EAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,OAAD,OADD,CAPD,CADD;AAaA;;AAED,eAAe3B,IAAI,CAAEuB,OAAF,CAAnB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo, useRef } from '@wordpress/element';\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n} from '@wordpress/components';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';\nimport SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';\nimport SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';\nimport useSyncPathWithURL, {\n\tgetPathFromURL,\n} from '../sync-state-with-url/use-sync-path-with-url';\nimport SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';\nimport SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';\nimport SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';\nimport SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';\nimport SaveHub from '../save-hub';\nimport { unlock } from '../../private-apis';\nimport SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';\nimport SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';\n\nconst { useLocation } = unlock( routerPrivateApis );\n\nfunction SidebarScreens() {\n\tuseSyncPathWithURL();\n\n\treturn (\n\t\t<>\n\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t<SidebarNavigationScreenMain />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/navigation\">\n\t\t\t\t<SidebarNavigationScreenNavigationMenus />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/navigation/:postType/:postId\">\n\t\t\t\t<SidebarNavigationScreenNavigationMenu />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/wp_global_styles\">\n\t\t\t\t<SidebarNavigationScreenGlobalStyles />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/page\">\n\t\t\t\t<SidebarNavigationScreenPages />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/page/:postId\">\n\t\t\t\t<SidebarNavigationScreenPage />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template|wp_template_part)\">\n\t\t\t\t<SidebarNavigationScreenTemplates />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template|wp_template_part)/all\">\n\t\t\t\t<SidebarNavigationScreenTemplatesBrowse />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template|wp_template_part)/:postId\">\n\t\t\t\t<SidebarNavigationScreenTemplate />\n\t\t\t</NavigatorScreen>\n\t\t</>\n\t);\n}\n\nfunction Sidebar() {\n\tconst { params: urlParams } = useLocation();\n\tconst initialPath = useRef( getPathFromURL( urlParams ) );\n\n\treturn (\n\t\t<>\n\t\t\t<NavigatorProvider\n\t\t\t\tclassName=\"edit-site-sidebar__content\"\n\t\t\t\tinitialPath={ initialPath.current }\n\t\t\t>\n\t\t\t\t<SidebarScreens />\n\t\t\t</NavigatorProvider>\n\t\t\t<div className=\"edit-site-sidebar__footer\">\n\t\t\t\t<SaveHub />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default memo( Sidebar );\n"]}

package/build-module/components/sidebar-edit-mode/template-revisions/index.js

@@ -21,7 +21,7 @@ const useRevisionData = () => {
     record: currentTemplate
   } = useEditedEntityRecord();
   const lastRevisionId = (_currentTemplate$_lin = currentTemplate === null || currentTemplate === void 0 ? void 0 : (_currentTemplate$_lin2 = currentTemplate._links) === null || _currentTemplate$_lin2 === void 0 ? void 0 : (_currentTemplate$_lin3 = _currentTemplate$_lin2['predecessor-version']) === null || _currentTemplate$_lin3 === void 0 ? void 0 : (_currentTemplate$_lin4 = _currentTemplate$_lin3[0]) === null || _currentTemplate$_lin4 === void 0 ? void 0 : _currentTemplate$_lin4.id) !== null && _currentTemplate$_lin !== void 0 ? _currentTemplate$_lin : null;
-  const revisionsCount = ((_currentTemplate$_lin5 = currentTemplate === null || currentTemplate === void 0 ? void 0 : (_currentTemplate$_lin6 = currentTemplate._links) === null || _currentTemplate$_lin6 === void 0 ? void 0 : (_currentTemplate$_lin7 = _currentTemplate$_lin6['version-history']) === null || _currentTemplate$_lin7 === void 0 ? void 0 : (_currentTemplate$_lin8 = _currentTemplate$_lin7[0]) === null || _currentTemplate$_lin8 === void 0 ? void 0 : _currentTemplate$_lin8.count) !== null && _currentTemplate$_lin5 !== void 0 ? _currentTemplate$_lin5 : 0) + 1;
+  const revisionsCount = (_currentTemplate$_lin5 = currentTemplate === null || currentTemplate === void 0 ? void 0 : (_currentTemplate$_lin6 = currentTemplate._links) === null || _currentTemplate$_lin6 === void 0 ? void 0 : (_currentTemplate$_lin7 = _currentTemplate$_lin6['version-history']) === null || _currentTemplate$_lin7 === void 0 ? void 0 : (_currentTemplate$_lin8 = _currentTemplate$_lin7[0]) === null || _currentTemplate$_lin8 === void 0 ? void 0 : _currentTemplate$_lin8.count) !== null && _currentTemplate$_lin5 !== void 0 ? _currentTemplate$_lin5 : 0;
   return {
     currentTemplate,
     lastRevisionId,

package/build-module/components/sidebar-edit-mode/template-revisions/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-edit-mode/template-revisions/index.js"],"names":["Button","sprintf","_n","backup","addQueryArgs","PostTypeSupportCheck","useEditedEntityRecord","useRevisionData","record","currentTemplate","lastRevisionId","_links","id","revisionsCount","count","PostLastRevisionCheck","children","PostLastRevision","revision","gutenberg","LastRevision"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,uBAAvB;AACA,SAASC,OAAT,EAAkBC,EAAlB,QAA4B,iBAA5B;AACA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,oBAAT,QAAqC,mBAArC;AAEA;AACA;AACA;;AACA,OAAOC,qBAAP,MAAkC,gCAAlC;;AAEA,MAAMC,eAAe,GAAG,MAAM;AAAA;;AAC7B,QAAM;AAAEC,IAAAA,MAAM,EAAEC;AAAV,MAA8BH,qBAAqB,EAAzD;AAEA,QAAMI,cAAc,4BACnBD,eADmB,aACnBA,eADmB,iDACnBA,eAAe,CAAEE,MADE,qFACnB,uBAA2B,qBAA3B,CADmB,qFACnB,uBAAsD,CAAtD,CADmB,2DACnB,uBAA2DC,EADxC,yEAC8C,IADlE;AAGA,QAAMC,cAAc,GACnB,2BAAEJ,eAAF,aAAEA,eAAF,iDAAEA,eAAe,CAAEE,MAAnB,qFAAE,uBAA2B,iBAA3B,CAAF,qFAAE,uBAAkD,CAAlD,CAAF,2DAAE,uBAAuDG,KAAzD,2EAAkE,CAAlE,IACA,CAFD;AAIA,SAAO;AACNL,IAAAA,eADM;AAENC,IAAAA,cAFM;AAGNG,IAAAA;AAHM,GAAP;AAKA,CAfD;;AAiBA,SAASE,qBAAT,OAA+C;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AAC9C,QAAM;AAAEN,IAAAA,cAAF;AAAkBG,IAAAA;AAAlB,MAAqCN,eAAe,EAA1D;;AAEA,MAAK,CAAEG,cAAF,IAAoBG,cAAc,GAAG,CAA1C,EAA8C;AAC7C,WAAO,IAAP;AACA;;AAED,SACC,cAAC,oBAAD;AAAsB,IAAA,WAAW,EAAC;AAAlC,KACGG,QADH,CADD;AAKA;;AAED,MAAMC,gBAAgB,GAAG,MAAM;AAC9B,QAAM;AAAEP,IAAAA,cAAF;AAAkBG,IAAAA;AAAlB,MAAqCN,eAAe,EAA1D;AAEA,SACC,cAAC,qBAAD,QACC,cAAC,MAAD;AACC,IAAA,IAAI,EAAGH,YAAY,CAAE,cAAF,EAAkB;AACpCc,MAAAA,QAAQ,EAAER,cAD0B;AAEpCS,MAAAA,SAAS,EAAE;AAFyB,KAAlB,CADpB;AAKC,IAAA,SAAS,EAAC,yCALX;AAMC,IAAA,IAAI,EAAGhB;AANR,KAQGF,OAAO;AACR;AACAC,EAAAA,EAAE,CAAE,aAAF,EAAiB,cAAjB,EAAiCW,cAAjC,CAFM,EAGRA,cAHQ,CARV,CADD,CADD;AAkBA,CArBD;;AAuBA,eAAe,SAASO,YAAT,GAAwB;AACtC,SACC,cAAC,qBAAD,QACC,cAAC,gBAAD,OADD,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { sprintf, _n } from '@wordpress/i18n';\nimport { backup } from '@wordpress/icons';\nimport { addQueryArgs } from '@wordpress/url';\nimport { PostTypeSupportCheck } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport useEditedEntityRecord from '../../use-edited-entity-record';\n\nconst useRevisionData = () => {\n\tconst { record: currentTemplate } = useEditedEntityRecord();\n\n\tconst lastRevisionId =\n\t\tcurrentTemplate?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;\n\n\tconst revisionsCount =\n\t\t( currentTemplate?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0 ) +\n\t\t1;\n\n\treturn {\n\t\tcurrentTemplate,\n\t\tlastRevisionId,\n\t\trevisionsCount,\n\t};\n};\n\nfunction PostLastRevisionCheck( { children } ) {\n\tconst { lastRevisionId, revisionsCount } = useRevisionData();\n\n\tif ( ! lastRevisionId || revisionsCount < 2 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<PostTypeSupportCheck supportKeys=\"revisions\">\n\t\t\t{ children }\n\t\t</PostTypeSupportCheck>\n\t);\n}\n\nconst PostLastRevision = () => {\n\tconst { lastRevisionId, revisionsCount } = useRevisionData();\n\n\treturn (\n\t\t<PostLastRevisionCheck>\n\t\t\t<Button\n\t\t\t\thref={ addQueryArgs( 'revision.php', {\n\t\t\t\t\trevision: lastRevisionId,\n\t\t\t\t\tgutenberg: true,\n\t\t\t\t} ) }\n\t\t\t\tclassName=\"edit-site-template-last-revision__title\"\n\t\t\t\ticon={ backup }\n\t\t\t>\n\t\t\t\t{ sprintf(\n\t\t\t\t\t/* translators: %d: number of revisions */\n\t\t\t\t\t_n( '%d Revision', '%d Revisions', revisionsCount ),\n\t\t\t\t\trevisionsCount\n\t\t\t\t) }\n\t\t\t</Button>\n\t\t</PostLastRevisionCheck>\n\t);\n};\n\nexport default function LastRevision() {\n\treturn (\n\t\t<PostLastRevisionCheck>\n\t\t\t<PostLastRevision />\n\t\t</PostLastRevisionCheck>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-edit-mode/template-revisions/index.js"],"names":["Button","sprintf","_n","backup","addQueryArgs","PostTypeSupportCheck","useEditedEntityRecord","useRevisionData","record","currentTemplate","lastRevisionId","_links","id","revisionsCount","count","PostLastRevisionCheck","children","PostLastRevision","revision","gutenberg","LastRevision"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,uBAAvB;AACA,SAASC,OAAT,EAAkBC,EAAlB,QAA4B,iBAA5B;AACA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,oBAAT,QAAqC,mBAArC;AAEA;AACA;AACA;;AACA,OAAOC,qBAAP,MAAkC,gCAAlC;;AAEA,MAAMC,eAAe,GAAG,MAAM;AAAA;;AAC7B,QAAM;AAAEC,IAAAA,MAAM,EAAEC;AAAV,MAA8BH,qBAAqB,EAAzD;AAEA,QAAMI,cAAc,4BACnBD,eADmB,aACnBA,eADmB,iDACnBA,eAAe,CAAEE,MADE,qFACnB,uBAA2B,qBAA3B,CADmB,qFACnB,uBAAsD,CAAtD,CADmB,2DACnB,uBAA2DC,EADxC,yEAC8C,IADlE;AAGA,QAAMC,cAAc,6BACnBJ,eADmB,aACnBA,eADmB,iDACnBA,eAAe,CAAEE,MADE,qFACnB,uBAA2B,iBAA3B,CADmB,qFACnB,uBAAkD,CAAlD,CADmB,2DACnB,uBAAuDG,KADpC,2EAC6C,CADjE;AAGA,SAAO;AACNL,IAAAA,eADM;AAENC,IAAAA,cAFM;AAGNG,IAAAA;AAHM,GAAP;AAKA,CAdD;;AAgBA,SAASE,qBAAT,OAA+C;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AAC9C,QAAM;AAAEN,IAAAA,cAAF;AAAkBG,IAAAA;AAAlB,MAAqCN,eAAe,EAA1D;;AAEA,MAAK,CAAEG,cAAF,IAAoBG,cAAc,GAAG,CAA1C,EAA8C;AAC7C,WAAO,IAAP;AACA;;AAED,SACC,cAAC,oBAAD;AAAsB,IAAA,WAAW,EAAC;AAAlC,KACGG,QADH,CADD;AAKA;;AAED,MAAMC,gBAAgB,GAAG,MAAM;AAC9B,QAAM;AAAEP,IAAAA,cAAF;AAAkBG,IAAAA;AAAlB,MAAqCN,eAAe,EAA1D;AAEA,SACC,cAAC,qBAAD,QACC,cAAC,MAAD;AACC,IAAA,IAAI,EAAGH,YAAY,CAAE,cAAF,EAAkB;AACpCc,MAAAA,QAAQ,EAAER,cAD0B;AAEpCS,MAAAA,SAAS,EAAE;AAFyB,KAAlB,CADpB;AAKC,IAAA,SAAS,EAAC,yCALX;AAMC,IAAA,IAAI,EAAGhB;AANR,KAQGF,OAAO;AACR;AACAC,EAAAA,EAAE,CAAE,aAAF,EAAiB,cAAjB,EAAiCW,cAAjC,CAFM,EAGRA,cAHQ,CARV,CADD,CADD;AAkBA,CArBD;;AAuBA,eAAe,SAASO,YAAT,GAAwB;AACtC,SACC,cAAC,qBAAD,QACC,cAAC,gBAAD,OADD,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { sprintf, _n } from '@wordpress/i18n';\nimport { backup } from '@wordpress/icons';\nimport { addQueryArgs } from '@wordpress/url';\nimport { PostTypeSupportCheck } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport useEditedEntityRecord from '../../use-edited-entity-record';\n\nconst useRevisionData = () => {\n\tconst { record: currentTemplate } = useEditedEntityRecord();\n\n\tconst lastRevisionId =\n\t\tcurrentTemplate?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;\n\n\tconst revisionsCount =\n\t\tcurrentTemplate?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;\n\n\treturn {\n\t\tcurrentTemplate,\n\t\tlastRevisionId,\n\t\trevisionsCount,\n\t};\n};\n\nfunction PostLastRevisionCheck( { children } ) {\n\tconst { lastRevisionId, revisionsCount } = useRevisionData();\n\n\tif ( ! lastRevisionId || revisionsCount < 2 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<PostTypeSupportCheck supportKeys=\"revisions\">\n\t\t\t{ children }\n\t\t</PostTypeSupportCheck>\n\t);\n}\n\nconst PostLastRevision = () => {\n\tconst { lastRevisionId, revisionsCount } = useRevisionData();\n\n\treturn (\n\t\t<PostLastRevisionCheck>\n\t\t\t<Button\n\t\t\t\thref={ addQueryArgs( 'revision.php', {\n\t\t\t\t\trevision: lastRevisionId,\n\t\t\t\t\tgutenberg: true,\n\t\t\t\t} ) }\n\t\t\t\tclassName=\"edit-site-template-last-revision__title\"\n\t\t\t\ticon={ backup }\n\t\t\t>\n\t\t\t\t{ sprintf(\n\t\t\t\t\t/* translators: %d: number of revisions */\n\t\t\t\t\t_n( '%d Revision', '%d Revisions', revisionsCount ),\n\t\t\t\t\trevisionsCount\n\t\t\t\t) }\n\t\t\t</Button>\n\t\t</PostLastRevisionCheck>\n\t);\n};\n\nexport default function LastRevision() {\n\treturn (\n\t\t<PostLastRevisionCheck>\n\t\t\t<PostLastRevision />\n\t\t</PostLastRevisionCheck>\n\t);\n}\n"]}

package/build-module/components/sidebar-navigation-screen-global-styles/index.js

@@ -1,11 +1,15 @@
-import { createElement } from "@wordpress/element";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { edit } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
+import { edit, seen } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -15,27 +19,79 @@ import StyleVariationsContainer from '../global-styles/style-variations-containe
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
-export default function SidebarNavigationScreenGlobalStyles() {
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import StyleBook from '../style-book';
+export function SidebarNavigationItemGlobalStyles(props) {
   const {
     openGeneralSidebar
   } = useDispatch(editSiteStore);
   const {
     setCanvasMode
   } = unlock(useDispatch(editSiteStore));
-  return createElement(SidebarNavigationScreen, {
+  const hasGlobalStyleVariations = useSelect(select => {
+    var _select$__experimenta;
+
+    return !!((_select$__experimenta = select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations()) !== null && _select$__experimenta !== void 0 && _select$__experimenta.length);
+  }, []);
+
+  if (hasGlobalStyleVariations) {
+    return createElement(NavigatorButton, _extends({}, props, {
+      as: SidebarNavigationItem,
+      path: "/wp_global_styles"
+    }));
+  }
+
+  return createElement(SidebarNavigationItem, _extends({}, props, {
+    onClick: () => {
+      // switch to edit mode.
+      setCanvasMode('edit'); // open global styles sidebar.
+
+      openGeneralSidebar('edit-site/global-styles');
+    }
+  }));
+}
+export default function SidebarNavigationScreenGlobalStyles() {
+  const {
+    openGeneralSidebar
+  } = useDispatch(editSiteStore);
+  const isMobileViewport = useViewportMatch('medium', '<');
+  const {
+    setCanvasMode,
+    setEditorCanvasContainerView
+  } = unlock(useDispatch(editSiteStore));
+  const isStyleBookOpened = useSelect(select => 'style-book' === unlock(select(editSiteStore)).getEditorCanvasContainerView(), []);
+
+  const openGlobalStyles = async () => Promise.all([setCanvasMode('edit'), openGeneralSidebar('edit-site/global-styles')]);
+
+  const openStyleBook = async () => {
+    await openGlobalStyles(); // Open the Style Book once the canvas mode is set to edit,
+    // and the global styles sidebar is open. This ensures that
+    // the Style Book is not prematurely closed.
+
+    setEditorCanvasContainerView('style-book');
+  };
+
+  return createElement(Fragment, null, createElement(SidebarNavigationScreen, {
     title: __('Styles'),
     description: __('Choose a different style combination for the theme styles.'),
     content: createElement(StyleVariationsContainer, null),
-    actions: createElement(SidebarButton, {
+    actions: createElement("div", null, !isMobileViewport && createElement(SidebarButton, {
+      icon: seen,
+      label: __('Style Book'),
+      onClick: () => setEditorCanvasContainerView(!isStyleBookOpened ? 'style-book' : undefined),
+      isPressed: isStyleBookOpened
+    }), createElement(SidebarButton, {
       icon: edit,
       label: __('Edit styles'),
-      onClick: () => {
-        // switch to edit mode.
-        setCanvasMode('edit'); // open global styles sidebar.
-
-        openGeneralSidebar('edit-site/global-styles');
-      }
-    })
-  });
+      onClick: async () => await openGlobalStyles()
+    }))
+  }), isStyleBookOpened && !isMobileViewport && createElement(StyleBook, {
+    enableResizing: false,
+    isSelected: () => false,
+    onClick: openStyleBook,
+    onSelect: openStyleBook,
+    showCloseButton: false,
+    showTabs: false
+  }));
 }
 //# sourceMappingURL=index.js.map

package/build-module/components/sidebar-navigation-screen-global-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js"],"names":["__","edit","useDispatch","SidebarNavigationScreen","StyleVariationsContainer","unlock","store","editSiteStore","SidebarButton","SidebarNavigationScreenGlobalStyles","openGeneralSidebar","setCanvasMode"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,WAAT,QAA4B,iBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,uBAAP,MAAoC,8BAApC;AACA,OAAOC,wBAAP,MAAqC,6CAArC;AACA,SAASC,MAAT,QAAuB,oBAAvB;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,aAAvC;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AAEA,eAAe,SAASC,mCAAT,GAA+C;AAC7D,QAAM;AAAEC,IAAAA;AAAF,MAAyBR,WAAW,CAAEK,aAAF,CAA1C;AACA,QAAM;AAAEI,IAAAA;AAAF,MAAoBN,MAAM,CAAEH,WAAW,CAAEK,aAAF,CAAb,CAAhC;AACA,SACC,cAAC,uBAAD;AACC,IAAA,KAAK,EAAGP,EAAE,CAAE,QAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,4DADe,CAFjB;AAKC,IAAA,OAAO,EAAG,cAAC,wBAAD,OALX;AAMC,IAAA,OAAO,EACN,cAAC,aAAD;AACC,MAAA,IAAI,EAAGC,IADR;AAEC,MAAA,KAAK,EAAGD,EAAE,CAAE,aAAF,CAFX;AAGC,MAAA,OAAO,EAAG,MAAM;AACf;AACAW,QAAAA,aAAa,CAAE,MAAF,CAAb,CAFe,CAGf;;AACAD,QAAAA,kBAAkB,CAAE,yBAAF,CAAlB;AACA;AARF;AAPF,IADD;AAqBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { edit } from '@wordpress/icons';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport StyleVariationsContainer from '../global-styles/style-variations-container';\nimport { unlock } from '../../private-apis';\nimport { store as editSiteStore } from '../../store';\nimport SidebarButton from '../sidebar-button';\n\nexport default function SidebarNavigationScreenGlobalStyles() {\n\tconst { openGeneralSidebar } = useDispatch( editSiteStore );\n\tconst { setCanvasMode } = unlock( useDispatch( editSiteStore ) );\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\ttitle={ __( 'Styles' ) }\n\t\t\tdescription={ __(\n\t\t\t\t'Choose a different style combination for the theme styles.'\n\t\t\t) }\n\t\t\tcontent={ <StyleVariationsContainer /> }\n\t\t\tactions={\n\t\t\t\t<SidebarButton\n\t\t\t\t\ticon={ edit }\n\t\t\t\t\tlabel={ __( 'Edit styles' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t// switch to edit mode.\n\t\t\t\t\t\tsetCanvasMode( 'edit' );\n\t\t\t\t\t\t// open global styles sidebar.\n\t\t\t\t\t\topenGeneralSidebar( 'edit-site/global-styles' );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js"],"names":["__","edit","seen","useSelect","useDispatch","store","coreStore","__experimentalNavigatorButton","NavigatorButton","useViewportMatch","SidebarNavigationScreen","StyleVariationsContainer","unlock","editSiteStore","SidebarButton","SidebarNavigationItem","StyleBook","SidebarNavigationItemGlobalStyles","props","openGeneralSidebar","setCanvasMode","hasGlobalStyleVariations","select","__experimentalGetCurrentThemeGlobalStylesVariations","length","SidebarNavigationScreenGlobalStyles","isMobileViewport","setEditorCanvasContainerView","isStyleBookOpened","getEditorCanvasContainerView","openGlobalStyles","Promise","all","openStyleBook","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { edit, seen } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport StyleVariationsContainer from '../global-styles/style-variations-container';\nimport { unlock } from '../../private-apis';\nimport { store as editSiteStore } from '../../store';\nimport SidebarButton from '../sidebar-button';\nimport SidebarNavigationItem from '../sidebar-navigation-item';\nimport StyleBook from '../style-book';\n\nexport function SidebarNavigationItemGlobalStyles( props ) {\n\tconst { openGeneralSidebar } = useDispatch( editSiteStore );\n\tconst { setCanvasMode } = unlock( useDispatch( editSiteStore ) );\n\tconst hasGlobalStyleVariations = useSelect(\n\t\t( select ) =>\n\t\t\t!! select(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,\n\t\t[]\n\t);\n\tif ( hasGlobalStyleVariations ) {\n\t\treturn (\n\t\t\t<NavigatorButton\n\t\t\t\t{ ...props }\n\t\t\t\tas={ SidebarNavigationItem }\n\t\t\t\tpath=\"/wp_global_styles\"\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<SidebarNavigationItem\n\t\t\t{ ...props }\n\t\t\tonClick={ () => {\n\t\t\t\t// switch to edit mode.\n\t\t\t\tsetCanvasMode( 'edit' );\n\t\t\t\t// open global styles sidebar.\n\t\t\t\topenGeneralSidebar( 'edit-site/global-styles' );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default function SidebarNavigationScreenGlobalStyles() {\n\tconst { openGeneralSidebar } = useDispatch( editSiteStore );\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst { setCanvasMode, setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\n\tconst isStyleBookOpened = useSelect(\n\t\t( select ) =>\n\t\t\t'style-book' ===\n\t\t\tunlock( select( editSiteStore ) ).getEditorCanvasContainerView(),\n\t\t[]\n\t);\n\n\tconst openGlobalStyles = async () =>\n\t\tPromise.all( [\n\t\t\tsetCanvasMode( 'edit' ),\n\t\t\topenGeneralSidebar( 'edit-site/global-styles' ),\n\t\t] );\n\n\tconst openStyleBook = async () => {\n\t\tawait openGlobalStyles();\n\t\t// Open the Style Book once the canvas mode is set to edit,\n\t\t// and the global styles sidebar is open. This ensures that\n\t\t// the Style Book is not prematurely closed.\n\t\tsetEditorCanvasContainerView( 'style-book' );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SidebarNavigationScreen\n\t\t\t\ttitle={ __( 'Styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a different style combination for the theme styles.'\n\t\t\t\t) }\n\t\t\t\tcontent={ <StyleVariationsContainer /> }\n\t\t\t\tactions={\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\t\t\ticon={ seen }\n\t\t\t\t\t\t\t\tlabel={ __( 'Style Book' ) }\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\tsetEditorCanvasContainerView(\n\t\t\t\t\t\t\t\t\t\t! isStyleBookOpened\n\t\t\t\t\t\t\t\t\t\t\t? 'style-book'\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tisPressed={ isStyleBookOpened }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\t\ticon={ edit }\n\t\t\t\t\t\t\tlabel={ __( 'Edit styles' ) }\n\t\t\t\t\t\t\tonClick={ async () => await openGlobalStyles() }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ isStyleBookOpened && ! isMobileViewport && (\n\t\t\t\t<StyleBook\n\t\t\t\t\tenableResizing={ false }\n\t\t\t\t\tisSelected={ () => false }\n\t\t\t\t\tonClick={ openStyleBook }\n\t\t\t\t\tonSelect={ openStyleBook }\n\t\t\t\t\tshowCloseButton={ false }\n\t\t\t\t\tshowTabs={ false }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}