@wordpress/block-editor 10.3.0 → 10.5.0

package/build/components/off-canvas-editor/drop-indicator.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ListViewDropIndicator;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+/**
+ * WordPress dependencies
+ */
+function ListViewDropIndicator(_ref) {
+  let {
+    listViewRef,
+    blockDropTarget
+  } = _ref;
+  const {
+    rootClientId,
+    clientId,
+    dropPosition
+  } = blockDropTarget || {};
+  const [rootBlockElement, blockElement] = (0, _element.useMemo)(() => {
+    if (!listViewRef.current) {
+      return [];
+    } // The rootClientId will be defined whenever dropping into inner
+    // block lists, but is undefined when dropping at the root level.
+
+
+    const _rootBlockElement = rootClientId ? listViewRef.current.querySelector(`[data-block="${rootClientId}"]`) : undefined; // The clientId represents the sibling block, the dragged block will
+    // usually be inserted adjacent to it. It will be undefined when
+    // dropping a block into an empty block list.
+
+
+    const _blockElement = clientId ? listViewRef.current.querySelector(`[data-block="${clientId}"]`) : undefined;
+
+    return [_rootBlockElement, _blockElement];
+  }, [rootClientId, clientId]); // The targetElement is the element that the drop indicator will appear
+  // before or after. When dropping into an empty block list, blockElement
+  // is undefined, so the indicator will appear after the rootBlockElement.
+
+  const targetElement = blockElement || rootBlockElement;
+  const getDropIndicatorIndent = (0, _element.useCallback)(() => {
+    if (!rootBlockElement) {
+      return 0;
+    } // Calculate the indent using the block icon of the root block.
+    // Using a classname selector here might be flaky and could be
+    // improved.
+
+
+    const targetElementRect = targetElement.getBoundingClientRect();
+    const rootBlockIconElement = rootBlockElement.querySelector('.block-editor-block-icon');
+    const rootBlockIconRect = rootBlockIconElement.getBoundingClientRect();
+    return rootBlockIconRect.right - targetElementRect.left;
+  }, [rootBlockElement, targetElement]);
+  const style = (0, _element.useMemo)(() => {
+    if (!targetElement) {
+      return {};
+    }
+
+    const indent = getDropIndicatorIndent();
+    return {
+      width: targetElement.offsetWidth - indent
+    };
+  }, [getDropIndicatorIndent, targetElement]);
+  const popoverAnchor = (0, _element.useMemo)(() => {
+    const isValidDropPosition = dropPosition === 'top' || dropPosition === 'bottom' || dropPosition === 'inside';
+
+    if (!targetElement || !isValidDropPosition) {
+      return undefined;
+    }
+
+    return {
+      ownerDocument: targetElement.ownerDocument,
+
+      getBoundingClientRect() {
+        const rect = targetElement.getBoundingClientRect();
+        const indent = getDropIndicatorIndent();
+        const left = rect.left + indent;
+        const right = rect.right;
+        let top = 0;
+        let bottom = 0;
+
+        if (dropPosition === 'top') {
+          top = rect.top;
+          bottom = rect.top;
+        } else {
+          // `dropPosition` is either `bottom` or `inside`
+          top = rect.bottom;
+          bottom = rect.bottom;
+        }
+
+        const width = right - left;
+        const height = bottom - top;
+        return new window.DOMRect(left, top, width, height);
+      }
+
+    };
+  }, [targetElement, dropPosition, getDropIndicatorIndent]);
+
+  if (!targetElement) {
+    return null;
+  }
+
+  return (0, _element.createElement)(_components.Popover, {
+    animate: false,
+    anchor: popoverAnchor,
+    focusOnMount: false,
+    className: "block-editor-list-view-drop-indicator",
+    variant: "unstyled"
+  }, (0, _element.createElement)("div", {
+    style: style,
+    className: "block-editor-list-view-drop-indicator__line"
+  }));
+}
+//# sourceMappingURL=drop-indicator.js.map

package/build/components/off-canvas-editor/drop-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/off-canvas-editor/drop-indicator.js"],"names":["ListViewDropIndicator","listViewRef","blockDropTarget","rootClientId","clientId","dropPosition","rootBlockElement","blockElement","current","_rootBlockElement","querySelector","undefined","_blockElement","targetElement","getDropIndicatorIndent","targetElementRect","getBoundingClientRect","rootBlockIconElement","rootBlockIconRect","right","left","style","indent","width","offsetWidth","popoverAnchor","isValidDropPosition","ownerDocument","rect","top","bottom","height","window","DOMRect"],"mappings":";;;;;;;AAIA;;AADA;;AAHA;AACA;AACA;AAIe,SAASA,qBAAT,OAGX;AAAA,MAH2C;AAC9CC,IAAAA,WAD8C;AAE9CC,IAAAA;AAF8C,GAG3C;AACH,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA;AAA1B,MAA2CH,eAAe,IAAI,EAApE;AAEA,QAAM,CAAEI,gBAAF,EAAoBC,YAApB,IAAqC,sBAAS,MAAM;AACzD,QAAK,CAAEN,WAAW,CAACO,OAAnB,EAA6B;AAC5B,aAAO,EAAP;AACA,KAHwD,CAKzD;AACA;;;AACA,UAAMC,iBAAiB,GAAGN,YAAY,GACnCF,WAAW,CAACO,OAAZ,CAAoBE,aAApB,CACC,gBAAgBP,YAAc,IAD/B,CADmC,GAInCQ,SAJH,CAPyD,CAazD;AACA;AACA;;;AACA,UAAMC,aAAa,GAAGR,QAAQ,GAC3BH,WAAW,CAACO,OAAZ,CAAoBE,aAApB,CACC,gBAAgBN,QAAU,IAD3B,CAD2B,GAI3BO,SAJH;;AAMA,WAAO,CAAEF,iBAAF,EAAqBG,aAArB,CAAP;AACA,GAvB0C,EAuBxC,CAAET,YAAF,EAAgBC,QAAhB,CAvBwC,CAA3C,CAHG,CA4BH;AACA;AACA;;AACA,QAAMS,aAAa,GAAGN,YAAY,IAAID,gBAAtC;AAEA,QAAMQ,sBAAsB,GAAG,0BAAa,MAAM;AACjD,QAAK,CAAER,gBAAP,EAA0B;AACzB,aAAO,CAAP;AACA,KAHgD,CAKjD;AACA;AACA;;;AACA,UAAMS,iBAAiB,GAAGF,aAAa,CAACG,qBAAd,EAA1B;AACA,UAAMC,oBAAoB,GAAGX,gBAAgB,CAACI,aAAjB,CAC5B,0BAD4B,CAA7B;AAGA,UAAMQ,iBAAiB,GAAGD,oBAAoB,CAACD,qBAArB,EAA1B;AACA,WAAOE,iBAAiB,CAACC,KAAlB,GAA0BJ,iBAAiB,CAACK,IAAnD;AACA,GAd8B,EAc5B,CAAEd,gBAAF,EAAoBO,aAApB,CAd4B,CAA/B;AAgBA,QAAMQ,KAAK,GAAG,sBAAS,MAAM;AAC5B,QAAK,CAAER,aAAP,EAAuB;AACtB,aAAO,EAAP;AACA;;AAED,UAAMS,MAAM,GAAGR,sBAAsB,EAArC;AAEA,WAAO;AACNS,MAAAA,KAAK,EAAEV,aAAa,CAACW,WAAd,GAA4BF;AAD7B,KAAP;AAGA,GAVa,EAUX,CAAER,sBAAF,EAA0BD,aAA1B,CAVW,CAAd;AAYA,QAAMY,aAAa,GAAG,sBAAS,MAAM;AACpC,UAAMC,mBAAmB,GACxBrB,YAAY,KAAK,KAAjB,IACAA,YAAY,KAAK,QADjB,IAEAA,YAAY,KAAK,QAHlB;;AAIA,QAAK,CAAEQ,aAAF,IAAmB,CAAEa,mBAA1B,EAAgD;AAC/C,aAAOf,SAAP;AACA;;AAED,WAAO;AACNgB,MAAAA,aAAa,EAAEd,aAAa,CAACc,aADvB;;AAENX,MAAAA,qBAAqB,GAAG;AACvB,cAAMY,IAAI,GAAGf,aAAa,CAACG,qBAAd,EAAb;AACA,cAAMM,MAAM,GAAGR,sBAAsB,EAArC;AAEA,cAAMM,IAAI,GAAGQ,IAAI,CAACR,IAAL,GAAYE,MAAzB;AACA,cAAMH,KAAK,GAAGS,IAAI,CAACT,KAAnB;AACA,YAAIU,GAAG,GAAG,CAAV;AACA,YAAIC,MAAM,GAAG,CAAb;;AAEA,YAAKzB,YAAY,KAAK,KAAtB,EAA8B;AAC7BwB,UAAAA,GAAG,GAAGD,IAAI,CAACC,GAAX;AACAC,UAAAA,MAAM,GAAGF,IAAI,CAACC,GAAd;AACA,SAHD,MAGO;AACN;AACAA,UAAAA,GAAG,GAAGD,IAAI,CAACE,MAAX;AACAA,UAAAA,MAAM,GAAGF,IAAI,CAACE,MAAd;AACA;;AAED,cAAMP,KAAK,GAAGJ,KAAK,GAAGC,IAAtB;AACA,cAAMW,MAAM,GAAGD,MAAM,GAAGD,GAAxB;AAEA,eAAO,IAAIG,MAAM,CAACC,OAAX,CAAoBb,IAApB,EAA0BS,GAA1B,EAA+BN,KAA/B,EAAsCQ,MAAtC,CAAP;AACA;;AAxBK,KAAP;AA0BA,GAnCqB,EAmCnB,CAAElB,aAAF,EAAiBR,YAAjB,EAA+BS,sBAA/B,CAnCmB,CAAtB;;AAqCA,MAAK,CAAED,aAAP,EAAuB;AACtB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,mBAAD;AACC,IAAA,OAAO,EAAG,KADX;AAEC,IAAA,MAAM,EAAGY,aAFV;AAGC,IAAA,YAAY,EAAG,KAHhB;AAIC,IAAA,SAAS,EAAC,uCAJX;AAKC,IAAA,OAAO,EAAC;AALT,KAOC;AACC,IAAA,KAAK,EAAGJ,KADT;AAEC,IAAA,SAAS,EAAC;AAFX,IAPD,CADD;AAcA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Popover } from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\n\nexport default function ListViewDropIndicator( {\n\tlistViewRef,\n\tblockDropTarget,\n} ) {\n\tconst { rootClientId, clientId, dropPosition } = blockDropTarget || {};\n\n\tconst [ rootBlockElement, blockElement ] = useMemo( () => {\n\t\tif ( ! listViewRef.current ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t// The rootClientId will be defined whenever dropping into inner\n\t\t// block lists, but is undefined when dropping at the root level.\n\t\tconst _rootBlockElement = rootClientId\n\t\t\t? listViewRef.current.querySelector(\n\t\t\t\t\t`[data-block=\"${ rootClientId }\"]`\n\t\t\t  )\n\t\t\t: undefined;\n\n\t\t// The clientId represents the sibling block, the dragged block will\n\t\t// usually be inserted adjacent to it. It will be undefined when\n\t\t// dropping a block into an empty block list.\n\t\tconst _blockElement = clientId\n\t\t\t? listViewRef.current.querySelector(\n\t\t\t\t\t`[data-block=\"${ clientId }\"]`\n\t\t\t  )\n\t\t\t: undefined;\n\n\t\treturn [ _rootBlockElement, _blockElement ];\n\t}, [ rootClientId, clientId ] );\n\n\t// The targetElement is the element that the drop indicator will appear\n\t// before or after. When dropping into an empty block list, blockElement\n\t// is undefined, so the indicator will appear after the rootBlockElement.\n\tconst targetElement = blockElement || rootBlockElement;\n\n\tconst getDropIndicatorIndent = useCallback( () => {\n\t\tif ( ! rootBlockElement ) {\n\t\t\treturn 0;\n\t\t}\n\n\t\t// Calculate the indent using the block icon of the root block.\n\t\t// Using a classname selector here might be flaky and could be\n\t\t// improved.\n\t\tconst targetElementRect = targetElement.getBoundingClientRect();\n\t\tconst rootBlockIconElement = rootBlockElement.querySelector(\n\t\t\t'.block-editor-block-icon'\n\t\t);\n\t\tconst rootBlockIconRect = rootBlockIconElement.getBoundingClientRect();\n\t\treturn rootBlockIconRect.right - targetElementRect.left;\n\t}, [ rootBlockElement, targetElement ] );\n\n\tconst style = useMemo( () => {\n\t\tif ( ! targetElement ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tconst indent = getDropIndicatorIndent();\n\n\t\treturn {\n\t\t\twidth: targetElement.offsetWidth - indent,\n\t\t};\n\t}, [ getDropIndicatorIndent, targetElement ] );\n\n\tconst popoverAnchor = useMemo( () => {\n\t\tconst isValidDropPosition =\n\t\t\tdropPosition === 'top' ||\n\t\t\tdropPosition === 'bottom' ||\n\t\t\tdropPosition === 'inside';\n\t\tif ( ! targetElement || ! isValidDropPosition ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn {\n\t\t\townerDocument: targetElement.ownerDocument,\n\t\t\tgetBoundingClientRect() {\n\t\t\t\tconst rect = targetElement.getBoundingClientRect();\n\t\t\t\tconst indent = getDropIndicatorIndent();\n\n\t\t\t\tconst left = rect.left + indent;\n\t\t\t\tconst right = rect.right;\n\t\t\t\tlet top = 0;\n\t\t\t\tlet bottom = 0;\n\n\t\t\t\tif ( dropPosition === 'top' ) {\n\t\t\t\t\ttop = rect.top;\n\t\t\t\t\tbottom = rect.top;\n\t\t\t\t} else {\n\t\t\t\t\t// `dropPosition` is either `bottom` or `inside`\n\t\t\t\t\ttop = rect.bottom;\n\t\t\t\t\tbottom = rect.bottom;\n\t\t\t\t}\n\n\t\t\t\tconst width = right - left;\n\t\t\t\tconst height = bottom - top;\n\n\t\t\t\treturn new window.DOMRect( left, top, width, height );\n\t\t\t},\n\t\t};\n\t}, [ targetElement, dropPosition, getDropIndicatorIndent ] );\n\n\tif ( ! targetElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Popover\n\t\t\tanimate={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\tfocusOnMount={ false }\n\t\t\tclassName=\"block-editor-list-view-drop-indicator\"\n\t\t\tvariant=\"unstyled\"\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={ style }\n\t\t\t\tclassName=\"block-editor-list-view-drop-indicator__line\"\n\t\t\t/>\n\t\t</Popover>\n\t);\n}\n"]}

package/build/components/off-canvas-editor/expander.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ListViewExpander;
+
+var _element = require("@wordpress/element");
+
+var _icons = require("@wordpress/icons");
+
+var _i18n = require("@wordpress/i18n");
+
+/**
+ * WordPress dependencies
+ */
+function ListViewExpander(_ref) {
+  let {
+    onClick
+  } = _ref;
+  return (// Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js
+    //
+    // The expander component is implemented as a pseudo element in the w3 example
+    // https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html
+    //
+    // We've mimicked this by adding an icon with aria-hidden set to true to hide this from the accessibility tree.
+    // For the current tree grid implementation, please do not try to make this a button.
+    //
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    (0, _element.createElement)("span", {
+      className: "block-editor-list-view__expander",
+      onClick: event => onClick(event, {
+        forceToggle: true
+      }),
+      "aria-hidden": "true"
+    }, (0, _element.createElement)(_icons.Icon, {
+      icon: (0, _i18n.isRTL)() ? _icons.chevronLeftSmall : _icons.chevronRightSmall
+    }))
+  );
+}
+//# sourceMappingURL=expander.js.map

package/build/components/off-canvas-editor/expander.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/off-canvas-editor/expander.js"],"names":["ListViewExpander","onClick","event","forceToggle","chevronLeftSmall","chevronRightSmall"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIe,SAASA,gBAAT,OAAyC;AAAA,MAAd;AAAEC,IAAAA;AAAF,GAAc;AACvD,SACC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACC,MAAA,SAAS,EAAC,kCADX;AAEC,MAAA,OAAO,EAAKC,KAAF,IAAaD,OAAO,CAAEC,KAAF,EAAS;AAAEC,QAAAA,WAAW,EAAE;AAAf,OAAT,CAF/B;AAGC,qBAAY;AAHb,OAKC,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAG,qBAAUC,uBAAV,GAA6BC;AAA1C,MALD;AAVD;AAkBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';\nimport { isRTL } from '@wordpress/i18n';\n\nexport default function ListViewExpander( { onClick } ) {\n\treturn (\n\t\t// Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js\n\t\t//\n\t\t// The expander component is implemented as a pseudo element in the w3 example\n\t\t// https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html\n\t\t//\n\t\t// We've mimicked this by adding an icon with aria-hidden set to true to hide this from the accessibility tree.\n\t\t// For the current tree grid implementation, please do not try to make this a button.\n\t\t//\n\t\t// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n\t\t<span\n\t\t\tclassName=\"block-editor-list-view__expander\"\n\t\t\tonClick={ ( event ) => onClick( event, { forceToggle: true } ) }\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<Icon icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } />\n\t\t</span>\n\t);\n}\n"]}

package/build/components/off-canvas-editor/index.js

@@ -0,0 +1,204 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BLOCK_LIST_ITEM_HEIGHT = void 0;
+
+var _element = require("@wordpress/element");
+
+var _compose = require("@wordpress/compose");
+
+var _components = require("@wordpress/components");
+
+var _data = require("@wordpress/data");
+
+var _i18n = require("@wordpress/i18n");
+
+var _branch = _interopRequireDefault(require("./branch"));
+
+var _context = require("./context");
+
+var _dropIndicator = _interopRequireDefault(require("./drop-indicator"));
+
+var _useBlockSelection = _interopRequireDefault(require("./use-block-selection"));
+
+var _useListViewClientIds = _interopRequireDefault(require("./use-list-view-client-ids"));
+
+var _useListViewDropZone = _interopRequireDefault(require("./use-list-view-drop-zone"));
+
+var _useListViewExpandSelectedItem = _interopRequireDefault(require("./use-list-view-expand-selected-item"));
+
+var _store = require("../../store");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const expanded = (state, action) => {
+  if (Array.isArray(action.clientIds)) {
+    return { ...state,
+      ...action.clientIds.reduce((newState, id) => ({ ...newState,
+        [id]: action.type === 'expand'
+      }), {})
+    };
+  }
+
+  return state;
+};
+
+const BLOCK_LIST_ITEM_HEIGHT = 36;
+/**
+ * Show a hierarchical list of blocks.
+ *
+ * @param {Object}  props                     Components props.
+ * @param {string}  props.id                  An HTML element id for the root element of ListView.
+ * @param {Array}   props.blocks              Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {boolean} props.showBlockMovers     Flag to enable block movers
+ * @param {boolean} props.isExpanded          Flag to determine whether nested levels are expanded by default.
+ * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism,.
+ * @param {Object}  ref                       Forwarded ref
+ */
+
+exports.BLOCK_LIST_ITEM_HEIGHT = BLOCK_LIST_ITEM_HEIGHT;
+
+function __ExperimentalOffCanvasEditor(_ref, ref) {
+  let {
+    id,
+    blocks,
+    showBlockMovers = false,
+    isExpanded = false,
+    selectBlockInCanvas = true
+  } = _ref;
+  const {
+    clientIdsTree,
+    draggedClientIds,
+    selectedClientIds
+  } = (0, _useListViewClientIds.default)(blocks);
+  const {
+    visibleBlockCount,
+    shouldShowInnerBlocks
+  } = (0, _data.useSelect)(select => {
+    const {
+      getGlobalBlockCount,
+      getClientIdsOfDescendants,
+      __unstableGetEditorMode
+    } = select(_store.store);
+    const draggedBlockCount = (draggedClientIds === null || draggedClientIds === void 0 ? void 0 : draggedClientIds.length) > 0 ? getClientIdsOfDescendants(draggedClientIds).length + 1 : 0;
+    return {
+      visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
+      shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out'
+    };
+  }, [draggedClientIds]);
+  const {
+    updateBlockSelection
+  } = (0, _useBlockSelection.default)();
+  const [expandedState, setExpandedState] = (0, _element.useReducer)(expanded, {});
+  const {
+    ref: dropZoneRef,
+    target: blockDropTarget
+  } = (0, _useListViewDropZone.default)();
+  const elementRef = (0, _element.useRef)();
+  const treeGridRef = (0, _compose.useMergeRefs)([elementRef, dropZoneRef, ref]);
+  const isMounted = (0, _element.useRef)(false);
+  const {
+    setSelectedTreeId
+  } = (0, _useListViewExpandSelectedItem.default)({
+    firstSelectedBlockClientId: selectedClientIds[0],
+    setExpandedState
+  });
+  const selectEditorBlock = (0, _element.useCallback)((event, clientId) => {
+    updateBlockSelection(event, clientId);
+    setSelectedTreeId(clientId);
+  }, [setSelectedTreeId, updateBlockSelection]);
+  (0, _element.useEffect)(() => {
+    isMounted.current = true;
+  }, []); // List View renders a fixed number of items and relies on each having a fixed item height of 36px.
+  // If this value changes, we should also change the itemHeight value set in useFixedWindowList.
+  // See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
+
+  const [fixedListWindow] = (0, _compose.__experimentalUseFixedWindowList)(elementRef, BLOCK_LIST_ITEM_HEIGHT, visibleBlockCount, {
+    useWindowing: true,
+    windowOverscan: 40
+  });
+  const expand = (0, _element.useCallback)(clientId => {
+    if (!clientId) {
+      return;
+    }
+
+    setExpandedState({
+      type: 'expand',
+      clientIds: [clientId]
+    });
+  }, [setExpandedState]);
+  const collapse = (0, _element.useCallback)(clientId => {
+    if (!clientId) {
+      return;
+    }
+
+    setExpandedState({
+      type: 'collapse',
+      clientIds: [clientId]
+    });
+  }, [setExpandedState]);
+  const expandRow = (0, _element.useCallback)(row => {
+    var _row$dataset;
+
+    expand(row === null || row === void 0 ? void 0 : (_row$dataset = row.dataset) === null || _row$dataset === void 0 ? void 0 : _row$dataset.block);
+  }, [expand]);
+  const collapseRow = (0, _element.useCallback)(row => {
+    var _row$dataset2;
+
+    collapse(row === null || row === void 0 ? void 0 : (_row$dataset2 = row.dataset) === null || _row$dataset2 === void 0 ? void 0 : _row$dataset2.block);
+  }, [collapse]);
+  const focusRow = (0, _element.useCallback)((event, startRow, endRow) => {
+    if (event.shiftKey) {
+      var _startRow$dataset, _endRow$dataset;
+
+      updateBlockSelection(event, startRow === null || startRow === void 0 ? void 0 : (_startRow$dataset = startRow.dataset) === null || _startRow$dataset === void 0 ? void 0 : _startRow$dataset.block, endRow === null || endRow === void 0 ? void 0 : (_endRow$dataset = endRow.dataset) === null || _endRow$dataset === void 0 ? void 0 : _endRow$dataset.block);
+    }
+  }, [updateBlockSelection]);
+  const contextValue = (0, _element.useMemo)(() => ({
+    isTreeGridMounted: isMounted.current,
+    draggedClientIds,
+    expandedState,
+    expand,
+    collapse
+  }), [isMounted.current, draggedClientIds, expandedState, expand, collapse]);
+  return (0, _element.createElement)(_data.AsyncModeProvider, {
+    value: true
+  }, (0, _element.createElement)(_dropIndicator.default, {
+    listViewRef: elementRef,
+    blockDropTarget: blockDropTarget
+  }), (0, _element.createElement)(_components.__experimentalTreeGrid, {
+    id: id,
+    className: "block-editor-list-view-tree",
+    "aria-label": (0, _i18n.__)('Block navigation structure'),
+    ref: treeGridRef,
+    onCollapseRow: collapseRow,
+    onExpandRow: expandRow,
+    onFocusRow: focusRow,
+    applicationAriaLabel: (0, _i18n.__)('Block navigation structure')
+  }, (0, _element.createElement)(_context.ListViewContext.Provider, {
+    value: contextValue
+  }, (0, _element.createElement)(_branch.default, {
+    blocks: clientIdsTree,
+    selectBlock: selectEditorBlock,
+    showBlockMovers: showBlockMovers,
+    fixedListWindow: fixedListWindow,
+    selectedClientIds: selectedClientIds,
+    isExpanded: isExpanded,
+    shouldShowInnerBlocks: shouldShowInnerBlocks,
+    selectBlockInCanvas: selectBlockInCanvas
+  }))));
+}
+
+var _default = (0, _element.forwardRef)(__ExperimentalOffCanvasEditor);
+
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/build/components/off-canvas-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/off-canvas-editor/index.js"],"names":["expanded","state","action","Array","isArray","clientIds","reduce","newState","id","type","BLOCK_LIST_ITEM_HEIGHT","__ExperimentalOffCanvasEditor","ref","blocks","showBlockMovers","isExpanded","selectBlockInCanvas","clientIdsTree","draggedClientIds","selectedClientIds","visibleBlockCount","shouldShowInnerBlocks","select","getGlobalBlockCount","getClientIdsOfDescendants","__unstableGetEditorMode","blockEditorStore","draggedBlockCount","length","updateBlockSelection","expandedState","setExpandedState","dropZoneRef","target","blockDropTarget","elementRef","treeGridRef","isMounted","setSelectedTreeId","firstSelectedBlockClientId","selectEditorBlock","event","clientId","current","fixedListWindow","useWindowing","windowOverscan","expand","collapse","expandRow","row","dataset","block","collapseRow","focusRow","startRow","endRow","shiftKey","contextValue","isTreeGridMounted"],"mappings":";;;;;;;;;AASA;;AANA;;AAIA;;AACA;;AASA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AA7BA;AACA;AACA;;AAiBA;AACA;AACA;AAUA,MAAMA,QAAQ,GAAG,CAAEC,KAAF,EAASC,MAAT,KAAqB;AACrC,MAAKC,KAAK,CAACC,OAAN,CAAeF,MAAM,CAACG,SAAtB,CAAL,EAAyC;AACxC,WAAO,EACN,GAAGJ,KADG;AAEN,SAAGC,MAAM,CAACG,SAAP,CAAiBC,MAAjB,CACF,CAAEC,QAAF,EAAYC,EAAZ,MAAsB,EACrB,GAAGD,QADkB;AAErB,SAAEC,EAAF,GAAQN,MAAM,CAACO,IAAP,KAAgB;AAFH,OAAtB,CADE,EAKF,EALE;AAFG,KAAP;AAUA;;AACD,SAAOR,KAAP;AACA,CAdD;;AAgBO,MAAMS,sBAAsB,GAAG,EAA/B;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACA,SAASC,6BAAT,OAQCC,GARD,EASE;AAAA,MARD;AACCJ,IAAAA,EADD;AAECK,IAAAA,MAFD;AAGCC,IAAAA,eAAe,GAAG,KAHnB;AAICC,IAAAA,UAAU,GAAG,KAJd;AAKCC,IAAAA,mBAAmB,GAAG;AALvB,GAQC;AACD,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA,gBAAjB;AAAmCC,IAAAA;AAAnC,MACL,mCAAsBN,MAAtB,CADD;AAGA,QAAM;AAAEO,IAAAA,iBAAF;AAAqBC,IAAAA;AAArB,MAA+C,qBAClDC,MAAF,IAAc;AACb,UAAM;AACLC,MAAAA,mBADK;AAELC,MAAAA,yBAFK;AAGLC,MAAAA;AAHK,QAIFH,MAAM,CAAEI,YAAF,CAJV;AAKA,UAAMC,iBAAiB,GACtB,CAAAT,gBAAgB,SAAhB,IAAAA,gBAAgB,WAAhB,YAAAA,gBAAgB,CAAEU,MAAlB,IAA2B,CAA3B,GACGJ,yBAAyB,CAAEN,gBAAF,CAAzB,CAA8CU,MAA9C,GAAuD,CAD1D,GAEG,CAHJ;AAIA,WAAO;AACNR,MAAAA,iBAAiB,EAAEG,mBAAmB,KAAKI,iBADrC;AAENN,MAAAA,qBAAqB,EAAEI,uBAAuB,OAAO;AAF/C,KAAP;AAIA,GAfmD,EAgBpD,CAAEP,gBAAF,CAhBoD,CAArD;AAmBA,QAAM;AAAEW,IAAAA;AAAF,MAA2B,iCAAjC;AAEA,QAAM,CAAEC,aAAF,EAAiBC,gBAAjB,IAAsC,yBAAY/B,QAAZ,EAAsB,EAAtB,CAA5C;AAEA,QAAM;AAAEY,IAAAA,GAAG,EAAEoB,WAAP;AAAoBC,IAAAA,MAAM,EAAEC;AAA5B,MAAgD,mCAAtD;AACA,QAAMC,UAAU,GAAG,sBAAnB;AACA,QAAMC,WAAW,GAAG,2BAAc,CAAED,UAAF,EAAcH,WAAd,EAA2BpB,GAA3B,CAAd,CAApB;AAEA,QAAMyB,SAAS,GAAG,qBAAQ,KAAR,CAAlB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAwB,4CAA+B;AAC5DC,IAAAA,0BAA0B,EAAEpB,iBAAiB,CAAE,CAAF,CADe;AAE5DY,IAAAA;AAF4D,GAA/B,CAA9B;AAIA,QAAMS,iBAAiB,GAAG,0BACzB,CAAEC,KAAF,EAASC,QAAT,KAAuB;AACtBb,IAAAA,oBAAoB,CAAEY,KAAF,EAASC,QAAT,CAApB;AACAJ,IAAAA,iBAAiB,CAAEI,QAAF,CAAjB;AACA,GAJwB,EAKzB,CAAEJ,iBAAF,EAAqBT,oBAArB,CALyB,CAA1B;AAOA,0BAAW,MAAM;AAChBQ,IAAAA,SAAS,CAACM,OAAV,GAAoB,IAApB;AACA,GAFD,EAEG,EAFH,EA3CC,CA+CD;AACA;AACA;;AACA,QAAM,CAAEC,eAAF,IAAsB,+CAC3BT,UAD2B,EAE3BzB,sBAF2B,EAG3BU,iBAH2B,EAI3B;AACCyB,IAAAA,YAAY,EAAE,IADf;AAECC,IAAAA,cAAc,EAAE;AAFjB,GAJ2B,CAA5B;AAUA,QAAMC,MAAM,GAAG,0BACZL,QAAF,IAAgB;AACf,QAAK,CAAEA,QAAP,EAAkB;AACjB;AACA;;AACDX,IAAAA,gBAAgB,CAAE;AAAEtB,MAAAA,IAAI,EAAE,QAAR;AAAkBJ,MAAAA,SAAS,EAAE,CAAEqC,QAAF;AAA7B,KAAF,CAAhB;AACA,GANa,EAOd,CAAEX,gBAAF,CAPc,CAAf;AASA,QAAMiB,QAAQ,GAAG,0BACdN,QAAF,IAAgB;AACf,QAAK,CAAEA,QAAP,EAAkB;AACjB;AACA;;AACDX,IAAAA,gBAAgB,CAAE;AAAEtB,MAAAA,IAAI,EAAE,UAAR;AAAoBJ,MAAAA,SAAS,EAAE,CAAEqC,QAAF;AAA/B,KAAF,CAAhB;AACA,GANe,EAOhB,CAAEX,gBAAF,CAPgB,CAAjB;AASA,QAAMkB,SAAS,GAAG,0BACfC,GAAF,IAAW;AAAA;;AACVH,IAAAA,MAAM,CAAEG,GAAF,aAAEA,GAAF,uCAAEA,GAAG,CAAEC,OAAP,iDAAE,aAAcC,KAAhB,CAAN;AACA,GAHgB,EAIjB,CAAEL,MAAF,CAJiB,CAAlB;AAMA,QAAMM,WAAW,GAAG,0BACjBH,GAAF,IAAW;AAAA;;AACVF,IAAAA,QAAQ,CAAEE,GAAF,aAAEA,GAAF,wCAAEA,GAAG,CAAEC,OAAP,kDAAE,cAAcC,KAAhB,CAAR;AACA,GAHkB,EAInB,CAAEJ,QAAF,CAJmB,CAApB;AAMA,QAAMM,QAAQ,GAAG,0BAChB,CAAEb,KAAF,EAASc,QAAT,EAAmBC,MAAnB,KAA+B;AAC9B,QAAKf,KAAK,CAACgB,QAAX,EAAsB;AAAA;;AACrB5B,MAAAA,oBAAoB,CACnBY,KADmB,EAEnBc,QAFmB,aAEnBA,QAFmB,4CAEnBA,QAAQ,CAAEJ,OAFS,sDAEnB,kBAAmBC,KAFA,EAGnBI,MAHmB,aAGnBA,MAHmB,0CAGnBA,MAAM,CAAEL,OAHW,oDAGnB,gBAAiBC,KAHE,CAApB;AAKA;AACD,GATe,EAUhB,CAAEvB,oBAAF,CAVgB,CAAjB;AAaA,QAAM6B,YAAY,GAAG,sBACpB,OAAQ;AACPC,IAAAA,iBAAiB,EAAEtB,SAAS,CAACM,OADtB;AAEPzB,IAAAA,gBAFO;AAGPY,IAAAA,aAHO;AAIPiB,IAAAA,MAJO;AAKPC,IAAAA;AALO,GAAR,CADoB,EAQpB,CAAEX,SAAS,CAACM,OAAZ,EAAqBzB,gBAArB,EAAuCY,aAAvC,EAAsDiB,MAAtD,EAA8DC,QAA9D,CARoB,CAArB;AAWA,SACC,4BAAC,uBAAD;AAAmB,IAAA,KAAK,EAAG;AAA3B,KACC,4BAAC,sBAAD;AACC,IAAA,WAAW,EAAGb,UADf;AAEC,IAAA,eAAe,EAAGD;AAFnB,IADD,EAKC,4BAAC,kCAAD;AACC,IAAA,EAAE,EAAG1B,EADN;AAEC,IAAA,SAAS,EAAC,6BAFX;AAGC,kBAAa,cAAI,4BAAJ,CAHd;AAIC,IAAA,GAAG,EAAG4B,WAJP;AAKC,IAAA,aAAa,EAAGiB,WALjB;AAMC,IAAA,WAAW,EAAGJ,SANf;AAOC,IAAA,UAAU,EAAGK,QAPd;AAQC,IAAA,oBAAoB,EAAG,cAAI,4BAAJ;AARxB,KAUC,4BAAC,wBAAD,CAAiB,QAAjB;AAA0B,IAAA,KAAK,EAAGI;AAAlC,KACC,4BAAC,eAAD;AACC,IAAA,MAAM,EAAGzC,aADV;AAEC,IAAA,WAAW,EAAGuB,iBAFf;AAGC,IAAA,eAAe,EAAG1B,eAHnB;AAIC,IAAA,eAAe,EAAG8B,eAJnB;AAKC,IAAA,iBAAiB,EAAGzB,iBALrB;AAMC,IAAA,UAAU,EAAGJ,UANd;AAOC,IAAA,qBAAqB,EAAGM,qBAPzB;AAQC,IAAA,mBAAmB,EAAGL;AARvB,IADD,CAVD,CALD,CADD;AA+BA;;eACc,yBAAYL,6BAAZ,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseMergeRefs,\n\t__experimentalUseFixedWindowList as useFixedWindowList,\n} from '@wordpress/compose';\nimport { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';\nimport { AsyncModeProvider, useSelect } from '@wordpress/data';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseReducer,\n\tforwardRef,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ListViewBranch from './branch';\nimport { ListViewContext } from './context';\nimport ListViewDropIndicator from './drop-indicator';\nimport useBlockSelection from './use-block-selection';\nimport useListViewClientIds from './use-list-view-client-ids';\nimport useListViewDropZone from './use-list-view-drop-zone';\nimport useListViewExpandSelectedItem from './use-list-view-expand-selected-item';\nimport { store as blockEditorStore } from '../../store';\n\nconst expanded = ( state, action ) => {\n\tif ( Array.isArray( action.clientIds ) ) {\n\t\treturn {\n\t\t\t...state,\n\t\t\t...action.clientIds.reduce(\n\t\t\t\t( newState, id ) => ( {\n\t\t\t\t\t...newState,\n\t\t\t\t\t[ id ]: action.type === 'expand',\n\t\t\t\t} ),\n\t\t\t\t{}\n\t\t\t),\n\t\t};\n\t}\n\treturn state;\n};\n\nexport const BLOCK_LIST_ITEM_HEIGHT = 36;\n\n/**\n * Show a hierarchical list of blocks.\n *\n * @param {Object}  props                     Components props.\n * @param {string}  props.id                  An HTML element id for the root element of ListView.\n * @param {Array}   props.blocks              Custom subset of block client IDs to be used instead of the default hierarchy.\n * @param {boolean} props.showBlockMovers     Flag to enable block movers\n * @param {boolean} props.isExpanded          Flag to determine whether nested levels are expanded by default.\n * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism,.\n * @param {Object}  ref                       Forwarded ref\n */\nfunction __ExperimentalOffCanvasEditor(\n\t{\n\t\tid,\n\t\tblocks,\n\t\tshowBlockMovers = false,\n\t\tisExpanded = false,\n\t\tselectBlockInCanvas = true,\n\t},\n\tref\n) {\n\tconst { clientIdsTree, draggedClientIds, selectedClientIds } =\n\t\tuseListViewClientIds( blocks );\n\n\tconst { visibleBlockCount, shouldShowInnerBlocks } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetGlobalBlockCount,\n\t\t\t\tgetClientIdsOfDescendants,\n\t\t\t\t__unstableGetEditorMode,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst draggedBlockCount =\n\t\t\t\tdraggedClientIds?.length > 0\n\t\t\t\t\t? getClientIdsOfDescendants( draggedClientIds ).length + 1\n\t\t\t\t\t: 0;\n\t\t\treturn {\n\t\t\t\tvisibleBlockCount: getGlobalBlockCount() - draggedBlockCount,\n\t\t\t\tshouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',\n\t\t\t};\n\t\t},\n\t\t[ draggedClientIds ]\n\t);\n\n\tconst { updateBlockSelection } = useBlockSelection();\n\n\tconst [ expandedState, setExpandedState ] = useReducer( expanded, {} );\n\n\tconst { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();\n\tconst elementRef = useRef();\n\tconst treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );\n\n\tconst isMounted = useRef( false );\n\tconst { setSelectedTreeId } = useListViewExpandSelectedItem( {\n\t\tfirstSelectedBlockClientId: selectedClientIds[ 0 ],\n\t\tsetExpandedState,\n\t} );\n\tconst selectEditorBlock = useCallback(\n\t\t( event, clientId ) => {\n\t\t\tupdateBlockSelection( event, clientId );\n\t\t\tsetSelectedTreeId( clientId );\n\t\t},\n\t\t[ setSelectedTreeId, updateBlockSelection ]\n\t);\n\tuseEffect( () => {\n\t\tisMounted.current = true;\n\t}, [] );\n\n\t// List View renders a fixed number of items and relies on each having a fixed item height of 36px.\n\t// If this value changes, we should also change the itemHeight value set in useFixedWindowList.\n\t// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.\n\tconst [ fixedListWindow ] = useFixedWindowList(\n\t\telementRef,\n\t\tBLOCK_LIST_ITEM_HEIGHT,\n\t\tvisibleBlockCount,\n\t\t{\n\t\t\tuseWindowing: true,\n\t\t\twindowOverscan: 40,\n\t\t}\n\t);\n\n\tconst expand = useCallback(\n\t\t( clientId ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetExpandedState( { type: 'expand', clientIds: [ clientId ] } );\n\t\t},\n\t\t[ setExpandedState ]\n\t);\n\tconst collapse = useCallback(\n\t\t( clientId ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetExpandedState( { type: 'collapse', clientIds: [ clientId ] } );\n\t\t},\n\t\t[ setExpandedState ]\n\t);\n\tconst expandRow = useCallback(\n\t\t( row ) => {\n\t\t\texpand( row?.dataset?.block );\n\t\t},\n\t\t[ expand ]\n\t);\n\tconst collapseRow = useCallback(\n\t\t( row ) => {\n\t\t\tcollapse( row?.dataset?.block );\n\t\t},\n\t\t[ collapse ]\n\t);\n\tconst focusRow = useCallback(\n\t\t( event, startRow, endRow ) => {\n\t\t\tif ( event.shiftKey ) {\n\t\t\t\tupdateBlockSelection(\n\t\t\t\t\tevent,\n\t\t\t\t\tstartRow?.dataset?.block,\n\t\t\t\t\tendRow?.dataset?.block\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ updateBlockSelection ]\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tisTreeGridMounted: isMounted.current,\n\t\t\tdraggedClientIds,\n\t\t\texpandedState,\n\t\t\texpand,\n\t\t\tcollapse,\n\t\t} ),\n\t\t[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]\n\t);\n\n\treturn (\n\t\t<AsyncModeProvider value={ true }>\n\t\t\t<ListViewDropIndicator\n\t\t\t\tlistViewRef={ elementRef }\n\t\t\t\tblockDropTarget={ blockDropTarget }\n\t\t\t/>\n\t\t\t<TreeGrid\n\t\t\t\tid={ id }\n\t\t\t\tclassName=\"block-editor-list-view-tree\"\n\t\t\t\taria-label={ __( 'Block navigation structure' ) }\n\t\t\t\tref={ treeGridRef }\n\t\t\t\tonCollapseRow={ collapseRow }\n\t\t\t\tonExpandRow={ expandRow }\n\t\t\t\tonFocusRow={ focusRow }\n\t\t\t\tapplicationAriaLabel={ __( 'Block navigation structure' ) }\n\t\t\t>\n\t\t\t\t<ListViewContext.Provider value={ contextValue }>\n\t\t\t\t\t<ListViewBranch\n\t\t\t\t\t\tblocks={ clientIdsTree }\n\t\t\t\t\t\tselectBlock={ selectEditorBlock }\n\t\t\t\t\t\tshowBlockMovers={ showBlockMovers }\n\t\t\t\t\t\tfixedListWindow={ fixedListWindow }\n\t\t\t\t\t\tselectedClientIds={ selectedClientIds }\n\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\tshouldShowInnerBlocks={ shouldShowInnerBlocks }\n\t\t\t\t\t\tselectBlockInCanvas={ selectBlockInCanvas }\n\t\t\t\t\t/>\n\t\t\t\t</ListViewContext.Provider>\n\t\t\t</TreeGrid>\n\t\t</AsyncModeProvider>\n\t);\n}\nexport default forwardRef( __ExperimentalOffCanvasEditor );\n"]}

package/build/components/off-canvas-editor/leaf.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ListViewLeaf;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _web = require("@react-spring/web");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("@wordpress/components");
+
+var _useMovingAnimation = _interopRequireDefault(require("../use-moving-animation"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const AnimatedTreeGridRow = (0, _web.animated)(_components.__experimentalTreeGridRow);
+
+function ListViewLeaf(_ref) {
+  let {
+    isSelected,
+    position,
+    level,
+    rowCount,
+    children,
+    className,
+    path,
+    ...props
+  } = _ref;
+  const ref = (0, _useMovingAnimation.default)({
+    isSelected,
+    adjustScrolling: false,
+    enableAnimation: true,
+    triggerAnimationOnChange: path
+  });
+  return (0, _element.createElement)(AnimatedTreeGridRow, (0, _extends2.default)({
+    ref: ref,
+    className: (0, _classnames.default)('block-editor-list-view-leaf', className),
+    level: level,
+    positionInSet: position,
+    setSize: rowCount
+  }, props), children);
+}
+//# sourceMappingURL=leaf.js.map

package/build/components/off-canvas-editor/leaf.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/off-canvas-editor/leaf.js"],"names":["AnimatedTreeGridRow","TreeGridRow","ListViewLeaf","isSelected","position","level","rowCount","children","className","path","props","ref","adjustScrolling","enableAnimation","triggerAnimationOnChange"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AAKA;;AAdA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,mBAAmB,GAAG,mBAAUC,qCAAV,CAA5B;;AAEe,SAASC,YAAT,OASX;AAAA,MATkC;AACrCC,IAAAA,UADqC;AAErCC,IAAAA,QAFqC;AAGrCC,IAAAA,KAHqC;AAIrCC,IAAAA,QAJqC;AAKrCC,IAAAA,QALqC;AAMrCC,IAAAA,SANqC;AAOrCC,IAAAA,IAPqC;AAQrC,OAAGC;AARkC,GASlC;AACH,QAAMC,GAAG,GAAG,iCAAoB;AAC/BR,IAAAA,UAD+B;AAE/BS,IAAAA,eAAe,EAAE,KAFc;AAG/BC,IAAAA,eAAe,EAAE,IAHc;AAI/BC,IAAAA,wBAAwB,EAAEL;AAJK,GAApB,CAAZ;AAOA,SACC,4BAAC,mBAAD;AACC,IAAA,GAAG,EAAGE,GADP;AAEC,IAAA,SAAS,EAAG,yBAAY,6BAAZ,EAA2CH,SAA3C,CAFb;AAGC,IAAA,KAAK,EAAGH,KAHT;AAIC,IAAA,aAAa,EAAGD,QAJjB;AAKC,IAAA,OAAO,EAAGE;AALX,KAMMI,KANN,GAQGH,QARH,CADD;AAYA","sourcesContent":["/**\n * External dependencies\n */\nimport { animated } from '@react-spring/web';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalTreeGridRow as TreeGridRow } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useMovingAnimation from '../use-moving-animation';\n\nconst AnimatedTreeGridRow = animated( TreeGridRow );\n\nexport default function ListViewLeaf( {\n\tisSelected,\n\tposition,\n\tlevel,\n\trowCount,\n\tchildren,\n\tclassName,\n\tpath,\n\t...props\n} ) {\n\tconst ref = useMovingAnimation( {\n\t\tisSelected,\n\t\tadjustScrolling: false,\n\t\tenableAnimation: true,\n\t\ttriggerAnimationOnChange: path,\n\t} );\n\n\treturn (\n\t\t<AnimatedTreeGridRow\n\t\t\tref={ ref }\n\t\t\tclassName={ classnames( 'block-editor-list-view-leaf', className ) }\n\t\t\tlevel={ level }\n\t\t\tpositionInSet={ position }\n\t\t\tsetSize={ rowCount }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</AnimatedTreeGridRow>\n\t);\n}\n"]}

package/build/components/off-canvas-editor/use-block-selection.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useBlockSelection;
+
+var _a11y = require("@wordpress/a11y");
+
+var _i18n = require("@wordpress/i18n");
+
+var _data = require("@wordpress/data");
+
+var _element = require("@wordpress/element");
+
+var _keycodes = require("@wordpress/keycodes");
+
+var _blocks = require("@wordpress/blocks");
+
+var _store = require("../../store");
+
+var _utils = require("./utils");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function useBlockSelection() {
+  const {
+    clearSelectedBlock,
+    multiSelect,
+    selectBlock
+  } = (0, _data.useDispatch)(_store.store);
+  const {
+    getBlockName,
+    getBlockParents,
+    getBlockSelectionStart,
+    getBlockSelectionEnd,
+    getSelectedBlockClientIds,
+    hasMultiSelection,
+    hasSelectedBlock
+  } = (0, _data.useSelect)(_store.store);
+  const {
+    getBlockType
+  } = (0, _data.useSelect)(_blocks.store);
+  const updateBlockSelection = (0, _element.useCallback)(async (event, clientId, destinationClientId) => {
+    if (!(event !== null && event !== void 0 && event.shiftKey)) {
+      selectBlock(clientId);
+      return;
+    } // To handle multiple block selection via the `SHIFT` key, prevent
+    // the browser default behavior of opening the link in a new window.
+
+
+    event.preventDefault();
+    const isKeyPress = event.type === 'keydown' && (event.keyCode === _keycodes.UP || event.keyCode === _keycodes.DOWN || event.keyCode === _keycodes.HOME || event.keyCode === _keycodes.END); // Handle clicking on a block when no blocks are selected, and return early.
+
+    if (!isKeyPress && !hasSelectedBlock() && !hasMultiSelection()) {
+      selectBlock(clientId, null);
+      return;
+    }
+
+    const selectedBlocks = getSelectedBlockClientIds();
+    const clientIdWithParents = [...getBlockParents(clientId), clientId];
+
+    if (isKeyPress && !selectedBlocks.some(blockId => clientIdWithParents.includes(blockId))) {
+      // Ensure that shift-selecting blocks via the keyboard only
+      // expands the current selection if focusing over already
+      // selected blocks. Otherwise, clear the selection so that
+      // a user can create a new selection entirely by keyboard.
+      await clearSelectedBlock();
+    }
+
+    let startTarget = getBlockSelectionStart();
+    let endTarget = clientId; // Handle keyboard behavior for selecting multiple blocks.
+
+    if (isKeyPress) {
+      if (!hasSelectedBlock() && !hasMultiSelection()) {
+        // Set the starting point of the selection to the currently
+        // focused block, if there are no blocks currently selected.
+        // This ensures that as the selection is expanded or contracted,
+        // the starting point of the selection is anchored to that block.
+        startTarget = clientId;
+      }
+
+      if (destinationClientId) {
+        // If the user presses UP or DOWN, we want to ensure that the block they're
+        // moving to is the target for selection, and not the currently focused one.
+        endTarget = destinationClientId;
+      }
+    }
+
+    const startParents = getBlockParents(startTarget);
+    const endParents = getBlockParents(endTarget);
+    const {
+      start,
+      end
+    } = (0, _utils.getCommonDepthClientIds)(startTarget, endTarget, startParents, endParents);
+    await multiSelect(start, end, null); // Announce deselected block, or number of deselected blocks if
+    // the total number of blocks deselected is greater than one.
+
+    const updatedSelectedBlocks = getSelectedBlockClientIds(); // If the selection is greater than 1 and the Home or End keys
+    // were used to generate the selection, then skip announcing the
+    // deselected blocks.
+
+    if ((event.keyCode === _keycodes.HOME || event.keyCode === _keycodes.END) && updatedSelectedBlocks.length > 1) {
+      return;
+    }
+
+    const selectionDiff = selectedBlocks.filter(blockId => !updatedSelectedBlocks.includes(blockId));
+    let label;
+
+    if (selectionDiff.length === 1) {
+      var _getBlockType;
+
+      const title = (_getBlockType = getBlockType(getBlockName(selectionDiff[0]))) === null || _getBlockType === void 0 ? void 0 : _getBlockType.title;
+
+      if (title) {
+        label = (0, _i18n.sprintf)(
+        /* translators: %s: block name */
+        (0, _i18n.__)('%s deselected.'), title);
+      }
+    } else if (selectionDiff.length > 1) {
+      label = (0, _i18n.sprintf)(
+      /* translators: %s: number of deselected blocks */
+      (0, _i18n.__)('%s blocks deselected.'), selectionDiff.length);
+    }
+
+    if (label) {
+      (0, _a11y.speak)(label);
+    }
+  }, [clearSelectedBlock, getBlockName, getBlockType, getBlockParents, getBlockSelectionStart, getBlockSelectionEnd, getSelectedBlockClientIds, hasMultiSelection, hasSelectedBlock, multiSelect, selectBlock]);
+  return {
+    updateBlockSelection
+  };
+}
+//# sourceMappingURL=use-block-selection.js.map

package/build/components/off-canvas-editor/use-block-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/off-canvas-editor/use-block-selection.js"],"names":["useBlockSelection","clearSelectedBlock","multiSelect","selectBlock","blockEditorStore","getBlockName","getBlockParents","getBlockSelectionStart","getBlockSelectionEnd","getSelectedBlockClientIds","hasMultiSelection","hasSelectedBlock","getBlockType","blocksStore","updateBlockSelection","event","clientId","destinationClientId","shiftKey","preventDefault","isKeyPress","type","keyCode","UP","DOWN","HOME","END","selectedBlocks","clientIdWithParents","some","blockId","includes","startTarget","endTarget","startParents","endParents","start","end","updatedSelectedBlocks","length","selectionDiff","filter","label","title"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useCallback } from '@wordpress/element';\nimport { UP, DOWN, HOME, END } from '@wordpress/keycodes';\nimport { store as blocksStore } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { getCommonDepthClientIds } from './utils';\n\nexport default function useBlockSelection() {\n\tconst { clearSelectedBlock, multiSelect, selectBlock } =\n\t\tuseDispatch( blockEditorStore );\n\tconst {\n\t\tgetBlockName,\n\t\tgetBlockParents,\n\t\tgetBlockSelectionStart,\n\t\tgetBlockSelectionEnd,\n\t\tgetSelectedBlockClientIds,\n\t\thasMultiSelection,\n\t\thasSelectedBlock,\n\t} = useSelect( blockEditorStore );\n\n\tconst { getBlockType } = useSelect( blocksStore );\n\n\tconst updateBlockSelection = useCallback(\n\t\tasync ( event, clientId, destinationClientId ) => {\n\t\t\tif ( ! event?.shiftKey ) {\n\t\t\t\tselectBlock( clientId );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// To handle multiple block selection via the `SHIFT` key, prevent\n\t\t\t// the browser default behavior of opening the link in a new window.\n\t\t\tevent.preventDefault();\n\n\t\t\tconst isKeyPress =\n\t\t\t\tevent.type === 'keydown' &&\n\t\t\t\t( event.keyCode === UP ||\n\t\t\t\t\tevent.keyCode === DOWN ||\n\t\t\t\t\tevent.keyCode === HOME ||\n\t\t\t\t\tevent.keyCode === END );\n\n\t\t\t// Handle clicking on a block when no blocks are selected, and return early.\n\t\t\tif (\n\t\t\t\t! isKeyPress &&\n\t\t\t\t! hasSelectedBlock() &&\n\t\t\t\t! hasMultiSelection()\n\t\t\t) {\n\t\t\t\tselectBlock( clientId, null );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst selectedBlocks = getSelectedBlockClientIds();\n\t\t\tconst clientIdWithParents = [\n\t\t\t\t...getBlockParents( clientId ),\n\t\t\t\tclientId,\n\t\t\t];\n\n\t\t\tif (\n\t\t\t\tisKeyPress &&\n\t\t\t\t! selectedBlocks.some( ( blockId ) =>\n\t\t\t\t\tclientIdWithParents.includes( blockId )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\t// Ensure that shift-selecting blocks via the keyboard only\n\t\t\t\t// expands the current selection if focusing over already\n\t\t\t\t// selected blocks. Otherwise, clear the selection so that\n\t\t\t\t// a user can create a new selection entirely by keyboard.\n\t\t\t\tawait clearSelectedBlock();\n\t\t\t}\n\n\t\t\tlet startTarget = getBlockSelectionStart();\n\t\t\tlet endTarget = clientId;\n\n\t\t\t// Handle keyboard behavior for selecting multiple blocks.\n\t\t\tif ( isKeyPress ) {\n\t\t\t\tif ( ! hasSelectedBlock() && ! hasMultiSelection() ) {\n\t\t\t\t\t// Set the starting point of the selection to the currently\n\t\t\t\t\t// focused block, if there are no blocks currently selected.\n\t\t\t\t\t// This ensures that as the selection is expanded or contracted,\n\t\t\t\t\t// the starting point of the selection is anchored to that block.\n\t\t\t\t\tstartTarget = clientId;\n\t\t\t\t}\n\t\t\t\tif ( destinationClientId ) {\n\t\t\t\t\t// If the user presses UP or DOWN, we want to ensure that the block they're\n\t\t\t\t\t// moving to is the target for selection, and not the currently focused one.\n\t\t\t\t\tendTarget = destinationClientId;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst startParents = getBlockParents( startTarget );\n\t\t\tconst endParents = getBlockParents( endTarget );\n\n\t\t\tconst { start, end } = getCommonDepthClientIds(\n\t\t\t\tstartTarget,\n\t\t\t\tendTarget,\n\t\t\t\tstartParents,\n\t\t\t\tendParents\n\t\t\t);\n\t\t\tawait multiSelect( start, end, null );\n\n\t\t\t// Announce deselected block, or number of deselected blocks if\n\t\t\t// the total number of blocks deselected is greater than one.\n\t\t\tconst updatedSelectedBlocks = getSelectedBlockClientIds();\n\n\t\t\t// If the selection is greater than 1 and the Home or End keys\n\t\t\t// were used to generate the selection, then skip announcing the\n\t\t\t// deselected blocks.\n\t\t\tif (\n\t\t\t\t( event.keyCode === HOME || event.keyCode === END ) &&\n\t\t\t\tupdatedSelectedBlocks.length > 1\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst selectionDiff = selectedBlocks.filter(\n\t\t\t\t( blockId ) => ! updatedSelectedBlocks.includes( blockId )\n\t\t\t);\n\n\t\t\tlet label;\n\t\t\tif ( selectionDiff.length === 1 ) {\n\t\t\t\tconst title = getBlockType(\n\t\t\t\t\tgetBlockName( selectionDiff[ 0 ] )\n\t\t\t\t)?.title;\n\t\t\t\tif ( title ) {\n\t\t\t\t\tlabel = sprintf(\n\t\t\t\t\t\t/* translators: %s: block name */\n\t\t\t\t\t\t__( '%s deselected.' ),\n\t\t\t\t\t\ttitle\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} else if ( selectionDiff.length > 1 ) {\n\t\t\t\tlabel = sprintf(\n\t\t\t\t\t/* translators: %s: number of deselected blocks */\n\t\t\t\t\t__( '%s blocks deselected.' ),\n\t\t\t\t\tselectionDiff.length\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tif ( label ) {\n\t\t\t\tspeak( label );\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\tclearSelectedBlock,\n\t\t\tgetBlockName,\n\t\t\tgetBlockType,\n\t\t\tgetBlockParents,\n\t\t\tgetBlockSelectionStart,\n\t\t\tgetBlockSelectionEnd,\n\t\t\tgetSelectedBlockClientIds,\n\t\t\thasMultiSelection,\n\t\t\thasSelectedBlock,\n\t\t\tmultiSelect,\n\t\t\tselectBlock,\n\t\t]\n\t);\n\n\treturn {\n\t\tupdateBlockSelection,\n\t};\n}\n"]}