@wordpress/block-editor 10.4.0 → 11.0.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":"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","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,213 @@
+"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");
+
+var _appender = require("./appender");
+
+/**
+ * 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, blockClientId) => {
+    updateBlockSelection(event, blockClientId);
+    setSelectedTreeId(blockClientId);
+  }, [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)(blockClientId => {
+    if (!blockClientId) {
+      return;
+    }
+
+    setExpandedState({
+      type: 'expand',
+      clientIds: [blockClientId]
+    });
+  }, [setExpandedState]);
+  const collapse = (0, _element.useCallback)(blockClientId => {
+    if (!blockClientId) {
+      return;
+    }
+
+    setExpandedState({
+      type: 'collapse',
+      clientIds: [blockClientId]
+    });
+  }, [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)("div", {
+    className: "offcanvas-editor-list-view-tree-wrapper"
+  }, (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
+  }), (0, _element.createElement)(_components.__experimentalTreeGridRow, {
+    level: 1,
+    setSize: 1,
+    positionInSet: 1,
+    isExpanded: true
+  }, (0, _element.createElement)(_components.__experimentalTreeGridCell, null, treeGridCellProps => (0, _element.createElement)(_appender.Appender, treeGridCellProps)))))));
+}
+
+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","blockClientId","current","fixedListWindow","useWindowing","windowOverscan","expand","collapse","expandRow","row","dataset","block","collapseRow","focusRow","startRow","endRow","shiftKey","contextValue","isTreeGridMounted","treeGridCellProps"],"mappings":";;;;;;;;;AAaA;;AAVA;;AAIA;;AAKA;;AASA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAlCA;AACA;AACA;;AAqBA;AACA;AACA;AAWA,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,aAAT,KAA4B;AAC3Bb,IAAAA,oBAAoB,CAAEY,KAAF,EAASC,aAAT,CAApB;AACAJ,IAAAA,iBAAiB,CAAEI,aAAF,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,aAAF,IAAqB;AACpB,QAAK,CAAEA,aAAP,EAAuB;AACtB;AACA;;AACDX,IAAAA,gBAAgB,CAAE;AACjBtB,MAAAA,IAAI,EAAE,QADW;AAEjBJ,MAAAA,SAAS,EAAE,CAAEqC,aAAF;AAFM,KAAF,CAAhB;AAIA,GATa,EAUd,CAAEX,gBAAF,CAVc,CAAf;AAYA,QAAMiB,QAAQ,GAAG,0BACdN,aAAF,IAAqB;AACpB,QAAK,CAAEA,aAAP,EAAuB;AACtB;AACA;;AACDX,IAAAA,gBAAgB,CAAE;AACjBtB,MAAAA,IAAI,EAAE,UADW;AAEjBJ,MAAAA,SAAS,EAAE,CAAEqC,aAAF;AAFM,KAAF,CAAhB;AAIA,GATe,EAUhB,CAAEX,gBAAF,CAVgB,CAAjB;AAYA,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;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,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,EAWC,4BAAC,qCAAD;AACC,IAAA,KAAK,EAAG,CADT;AAEC,IAAA,OAAO,EAAG,CAFX;AAGC,IAAA,aAAa,EAAG,CAHjB;AAIC,IAAA,UAAU,EAAG;AAJd,KAMC,4BAAC,sCAAD,QACK4C,iBAAF,IACD,4BAAC,kBAAD,EAAeA,iBAAf,CAFF,CAND,CAXD,CAVD,CADD,CALD,CADD;AA6CA;;eAEc,yBAAYjD,6BAAZ,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseMergeRefs,\n\t__experimentalUseFixedWindowList as useFixedWindowList,\n} from '@wordpress/compose';\nimport {\n\t__experimentalTreeGrid as TreeGrid,\n\t__experimentalTreeGridRow as TreeGridRow,\n\t__experimentalTreeGridCell as TreeGridCell,\n} 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';\nimport { Appender } from './appender';\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, blockClientId ) => {\n\t\t\tupdateBlockSelection( event, blockClientId );\n\t\t\tsetSelectedTreeId( blockClientId );\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( blockClientId ) => {\n\t\t\tif ( ! blockClientId ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetExpandedState( {\n\t\t\t\ttype: 'expand',\n\t\t\t\tclientIds: [ blockClientId ],\n\t\t\t} );\n\t\t},\n\t\t[ setExpandedState ]\n\t);\n\tconst collapse = useCallback(\n\t\t( blockClientId ) => {\n\t\t\tif ( ! blockClientId ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetExpandedState( {\n\t\t\t\ttype: 'collapse',\n\t\t\t\tclientIds: [ blockClientId ],\n\t\t\t} );\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<div className=\"offcanvas-editor-list-view-tree-wrapper\">\n\t\t\t\t<TreeGrid\n\t\t\t\t\tid={ id }\n\t\t\t\t\tclassName=\"block-editor-list-view-tree\"\n\t\t\t\t\taria-label={ __( 'Block navigation structure' ) }\n\t\t\t\t\tref={ treeGridRef }\n\t\t\t\t\tonCollapseRow={ collapseRow }\n\t\t\t\t\tonExpandRow={ expandRow }\n\t\t\t\t\tonFocusRow={ focusRow }\n\t\t\t\t\tapplicationAriaLabel={ __( 'Block navigation structure' ) }\n\t\t\t\t>\n\t\t\t\t\t<ListViewContext.Provider value={ contextValue }>\n\t\t\t\t\t\t<ListViewBranch\n\t\t\t\t\t\t\tblocks={ clientIdsTree }\n\t\t\t\t\t\t\tselectBlock={ selectEditorBlock }\n\t\t\t\t\t\t\tshowBlockMovers={ showBlockMovers }\n\t\t\t\t\t\t\tfixedListWindow={ fixedListWindow }\n\t\t\t\t\t\t\tselectedClientIds={ selectedClientIds }\n\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\tshouldShowInnerBlocks={ shouldShowInnerBlocks }\n\t\t\t\t\t\t\tselectBlockInCanvas={ selectBlockInCanvas }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<TreeGridRow\n\t\t\t\t\t\t\tlevel={ 1 }\n\t\t\t\t\t\t\tsetSize={ 1 }\n\t\t\t\t\t\t\tpositionInSet={ 1 }\n\t\t\t\t\t\t\tisExpanded={ true }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TreeGridCell>\n\t\t\t\t\t\t\t\t{ ( treeGridCellProps ) => (\n\t\t\t\t\t\t\t\t\t<Appender { ...treeGridCellProps } />\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</TreeGridCell>\n\t\t\t\t\t\t</TreeGridRow>\n\t\t\t\t\t</ListViewContext.Provider>\n\t\t\t\t</TreeGrid>\n\t\t\t</div>\n\t\t</AsyncModeProvider>\n\t);\n}\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', 'offcanvas-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,yBACX,6BADW,EAEX,iCAFW,EAGXH,SAHW,CAFb;AAOC,IAAA,KAAK,EAAGH,KAPT;AAQC,IAAA,aAAa,EAAGD,QARjB;AASC,IAAA,OAAO,EAAGE;AATX,KAUMI,KAVN,GAYGH,QAZH,CADD;AAgBA","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(\n\t\t\t\t'block-editor-list-view-leaf',\n\t\t\t\t'offcanvas-editor-list-view-leaf',\n\t\t\t\tclassName\n\t\t\t) }\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/link-ui.js

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkUI = LinkUI;
+exports.getSuggestionsQuery = getSuggestionsQuery;
+
+var _element = require("@wordpress/element");
+
+var _dom = require("@wordpress/dom");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _blocks = require("@wordpress/blocks");
+
+var _data = require("@wordpress/data");
+
+var _store = require("../../store");
+
+var _linkControl = _interopRequireDefault(require("../link-control"));
+
+var _blockIcon = _interopRequireDefault(require("../block-icon"));
+
+// Note: this file is copied directly from packages/block-library/src/navigation-link/link-ui.js
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Given the Link block's type attribute, return the query params to give to
+ * /wp/v2/search.
+ *
+ * @param {string} type Link block's type attribute.
+ * @param {string} kind Link block's entity of kind (post-type|taxonomy)
+ * @return {{ type?: string, subtype?: string }} Search query params.
+ */
+function getSuggestionsQuery(type, kind) {
+  switch (type) {
+    case 'post':
+    case 'page':
+      return {
+        type: 'post',
+        subtype: type
+      };
+
+    case 'category':
+      return {
+        type: 'term',
+        subtype: 'category'
+      };
+
+    case 'tag':
+      return {
+        type: 'term',
+        subtype: 'post_tag'
+      };
+
+    case 'post_format':
+      return {
+        type: 'post-format'
+      };
+
+    default:
+      if (kind === 'taxonomy') {
+        return {
+          type: 'term',
+          subtype: type
+        };
+      }
+
+      if (kind === 'post-type') {
+        return {
+          type: 'post',
+          subtype: type
+        };
+      }
+
+      return {};
+  }
+}
+/**
+ * Add transforms to Link Control
+ *
+ * @param {Object} props          Component props.
+ * @param {string} props.clientId Block client ID.
+ */
+
+
+function LinkControlTransforms(_ref) {
+  let {
+    clientId
+  } = _ref;
+  const {
+    getBlock,
+    blockTransforms
+  } = (0, _data.useSelect)(select => {
+    const {
+      getBlock: _getBlock,
+      getBlockRootClientId,
+      getBlockTransformItems
+    } = select(_store.store);
+    return {
+      getBlock: _getBlock,
+      blockTransforms: getBlockTransformItems(_getBlock(clientId), getBlockRootClientId(clientId))
+    };
+  }, [clientId]);
+  const {
+    replaceBlock
+  } = (0, _data.useDispatch)(_store.store);
+  const featuredBlocks = ['core/page-list', 'core/site-logo', 'core/social-links', 'core/search'];
+  const transforms = blockTransforms.filter(item => {
+    return featuredBlocks.includes(item.name);
+  });
+
+  if (!(transforms !== null && transforms !== void 0 && transforms.length)) {
+    return null;
+  }
+
+  if (!clientId) {
+    return null;
+  }
+
+  return (0, _element.createElement)("div", {
+    className: "link-control-transform"
+  }, (0, _element.createElement)("h3", {
+    className: "link-control-transform__subheading"
+  }, (0, _i18n.__)('Transform')), (0, _element.createElement)("div", {
+    className: "link-control-transform__items"
+  }, transforms.map((item, index) => {
+    return (0, _element.createElement)(_components.Button, {
+      key: `transform-${index}`,
+      onClick: () => replaceBlock(clientId, (0, _blocks.switchToBlockType)(getBlock(clientId), item.name)),
+      className: "link-control-transform__item"
+    }, (0, _element.createElement)(_blockIcon.default, {
+      icon: item.icon
+    }), item.title);
+  })));
+}
+
+function LinkUI(props) {
+  const {
+    label,
+    url,
+    opensInNewTab,
+    type,
+    kind
+  } = props.link;
+  const link = {
+    url,
+    opensInNewTab,
+    title: label && (0, _dom.__unstableStripHTML)(label)
+  };
+  return (0, _element.createElement)(_components.Popover, {
+    placement: "bottom",
+    onClose: props.onClose,
+    anchor: props.anchor,
+    shift: true
+  }, (0, _element.createElement)(_linkControl.default, {
+    hasTextControl: true,
+    hasRichPreviews: true,
+    className: props.className,
+    value: link,
+    showInitialSuggestions: true,
+    withCreateSuggestion: props.hasCreateSuggestion,
+    noDirectEntry: !!type,
+    noURLSuggestion: !!type,
+    suggestionsQuery: getSuggestionsQuery(type, kind),
+    onChange: props.onChange,
+    onRemove: props.onRemove,
+    renderControlBottom: !url ? () => (0, _element.createElement)(LinkControlTransforms, {
+      clientId: props.clientId
+    }) : null
+  }));
+}
+//# sourceMappingURL=link-ui.js.map