@wordpress/block-editor 10.4.0 → 10.5.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/off-canvas-editor/branch.js"],"names":["countBlocks","block","expandedState","draggedClientIds","isExpandedByDefault","isDragged","includes","clientId","isExpanded","innerBlocks","reduce","countReducer","count","length","ListViewBranch","props","blocks","selectBlock","showBlockMovers","selectedClientIds","level","path","isBranchSelected","listPosition","fixedListWindow","parentId","shouldShowInnerBlocks","selectBlockInCanvas","isContentLocked","select","blockEditorStore","getTemplateLock","filteredBlocks","filter","Boolean","blockCount","nextPosition","map","index","itemInView","blockInView","position","updatedPath","hasNestedBlocks","shouldExpand","undefined","showBlock","isSelected","isSelectedBranch","defaultProps"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\nimport { AsyncModeProvider, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport ListViewBlock from './block';\nimport { useListViewContext } from './context';\nimport { isClientIdSelected } from './utils';\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Given a block, returns the total number of blocks in that subtree. This is used to help determine\n * the list position of a block.\n *\n * When a block is collapsed, we do not count their children as part of that total. In the current drag\n * implementation dragged blocks and their children are not counted.\n *\n * @param {Object}  block               block tree\n * @param {Object}  expandedState       state that notes which branches are collapsed\n * @param {Array}   draggedClientIds    a list of dragged client ids\n * @param {boolean} isExpandedByDefault flag to determine the default fallback expanded state.\n * @return {number} block count\n */\nfunction countBlocks(\n\tblock,\n\texpandedState,\n\tdraggedClientIds,\n\tisExpandedByDefault\n) {\n\tconst isDragged = draggedClientIds?.includes( block.clientId );\n\tif ( isDragged ) {\n\t\treturn 0;\n\t}\n\tconst isExpanded = expandedState[ block.clientId ] ?? isExpandedByDefault;\n\n\tif ( isExpanded ) {\n\t\treturn (\n\t\t\t1 +\n\t\t\tblock.innerBlocks.reduce(\n\t\t\t\tcountReducer(\n\t\t\t\t\texpandedState,\n\t\t\t\t\tdraggedClientIds,\n\t\t\t\t\tisExpandedByDefault\n\t\t\t\t),\n\t\t\t\t0\n\t\t\t)\n\t\t);\n\t}\n\treturn 1;\n}\nconst countReducer =\n\t( expandedState, draggedClientIds, isExpandedByDefault ) =>\n\t( count, block ) => {\n\t\tconst isDragged = draggedClientIds?.includes( block.clientId );\n\t\tif ( isDragged ) {\n\t\t\treturn count;\n\t\t}\n\t\tconst isExpanded =\n\t\t\texpandedState[ block.clientId ] ?? isExpandedByDefault;\n\t\tif ( isExpanded && block.innerBlocks.length > 0 ) {\n\t\t\treturn (\n\t\t\t\tcount +\n\t\t\t\tcountBlocks(\n\t\t\t\t\tblock,\n\t\t\t\t\texpandedState,\n\t\t\t\t\tdraggedClientIds,\n\t\t\t\t\tisExpandedByDefault\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t\treturn count + 1;\n\t};\n\nfunction ListViewBranch( props ) {\n\tconst {\n\t\tblocks,\n\t\tselectBlock,\n\t\tshowBlockMovers,\n\t\tselectedClientIds,\n\t\tlevel = 1,\n\t\tpath = '',\n\t\tisBranchSelected = false,\n\t\tlistPosition = 0,\n\t\tfixedListWindow,\n\t\tisExpanded,\n\t\tparentId,\n\t\tshouldShowInnerBlocks = true,\n\t\tselectBlockInCanvas,\n\t} = props;\n\n\tconst isContentLocked = useSelect(\n\t\t( select ) => {\n\t\t\treturn !! (\n\t\t\t\tparentId &&\n\t\t\t\tselect( blockEditorStore ).getTemplateLock( parentId ) ===\n\t\t\t\t\t'contentOnly'\n\t\t\t);\n\t\t},\n\t\t[ parentId ]\n\t);\n\n\tconst { expandedState, draggedClientIds } = useListViewContext();\n\n\tif ( isContentLocked ) {\n\t\treturn null;\n\t}\n\n\tconst filteredBlocks = blocks.filter( Boolean );\n\tconst blockCount = filteredBlocks.length;\n\tlet nextPosition = listPosition;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredBlocks.map( ( block, index ) => {\n\t\t\t\tconst { clientId, innerBlocks } = block;\n\n\t\t\t\tif ( index > 0 ) {\n\t\t\t\t\tnextPosition += countBlocks(\n\t\t\t\t\t\tfilteredBlocks[ index - 1 ],\n\t\t\t\t\t\texpandedState,\n\t\t\t\t\t\tdraggedClientIds,\n\t\t\t\t\t\tisExpanded\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tconst { itemInView } = fixedListWindow;\n\t\t\t\tconst blockInView = itemInView( nextPosition );\n\n\t\t\t\tconst position = index + 1;\n\t\t\t\tconst updatedPath =\n\t\t\t\t\tpath.length > 0\n\t\t\t\t\t\t? `${ path }_${ position }`\n\t\t\t\t\t\t: `${ position }`;\n\t\t\t\tconst hasNestedBlocks = !! innerBlocks?.length;\n\n\t\t\t\tconst shouldExpand =\n\t\t\t\t\thasNestedBlocks && shouldShowInnerBlocks\n\t\t\t\t\t\t? expandedState[ clientId ] ?? isExpanded\n\t\t\t\t\t\t: undefined;\n\n\t\t\t\tconst isDragged = !! draggedClientIds?.includes( clientId );\n\n\t\t\t\tconst showBlock = isDragged || blockInView;\n\n\t\t\t\t// Make updates to the selected or dragged blocks synchronous,\n\t\t\t\t// but asynchronous for any other block.\n\t\t\t\tconst isSelected = isClientIdSelected(\n\t\t\t\t\tclientId,\n\t\t\t\t\tselectedClientIds\n\t\t\t\t);\n\t\t\t\tconst isSelectedBranch =\n\t\t\t\t\tisBranchSelected || ( isSelected && hasNestedBlocks );\n\t\t\t\treturn (\n\t\t\t\t\t<AsyncModeProvider key={ clientId } value={ ! isSelected }>\n\t\t\t\t\t\t{ showBlock && (\n\t\t\t\t\t\t\t<ListViewBlock\n\t\t\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\t\t\tselectBlock={ selectBlock }\n\t\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\t\tisBranchSelected={ isSelectedBranch }\n\t\t\t\t\t\t\t\tisDragged={ isDragged }\n\t\t\t\t\t\t\t\tlevel={ level }\n\t\t\t\t\t\t\t\tposition={ position }\n\t\t\t\t\t\t\t\trowCount={ blockCount }\n\t\t\t\t\t\t\t\tsiblingBlockCount={ blockCount }\n\t\t\t\t\t\t\t\tshowBlockMovers={ showBlockMovers }\n\t\t\t\t\t\t\t\tpath={ updatedPath }\n\t\t\t\t\t\t\t\tisExpanded={ shouldExpand }\n\t\t\t\t\t\t\t\tlistPosition={ nextPosition }\n\t\t\t\t\t\t\t\tselectedClientIds={ selectedClientIds }\n\t\t\t\t\t\t\t\tselectBlockInCanvas={ selectBlockInCanvas }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! showBlock && (\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td className=\"block-editor-list-view-placeholder\" />\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ hasNestedBlocks && shouldExpand && ! isDragged && (\n\t\t\t\t\t\t\t<ListViewBranch\n\t\t\t\t\t\t\t\tparentId={ clientId }\n\t\t\t\t\t\t\t\tblocks={ innerBlocks }\n\t\t\t\t\t\t\t\tselectBlock={ selectBlock }\n\t\t\t\t\t\t\t\tshowBlockMovers={ showBlockMovers }\n\t\t\t\t\t\t\t\tlevel={ level + 1 }\n\t\t\t\t\t\t\t\tpath={ updatedPath }\n\t\t\t\t\t\t\t\tlistPosition={ nextPosition + 1 }\n\t\t\t\t\t\t\t\tfixedListWindow={ fixedListWindow }\n\t\t\t\t\t\t\t\tisBranchSelected={ isSelectedBranch }\n\t\t\t\t\t\t\t\tselectedClientIds={ selectedClientIds }\n\t\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t\tselectBlockInCanvas={ selectBlockInCanvas }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AsyncModeProvider>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nListViewBranch.defaultProps = {\n\tselectBlock: () => {},\n};\n\nexport default memo( ListViewBranch );\n"]}

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListViewContext = exports.ListViewContext = void 0;
+
+var _element = require("@wordpress/element");
+
+/**
+ * WordPress dependencies
+ */
+const ListViewContext = (0, _element.createContext)({});
+exports.ListViewContext = ListViewContext;
+
+const useListViewContext = () => (0, _element.useContext)(ListViewContext);
+
+exports.useListViewContext = useListViewContext;
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/off-canvas-editor/context.js"],"names":["ListViewContext","useListViewContext"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,eAAe,GAAG,4BAAe,EAAf,CAAxB;;;AAEA,MAAMC,kBAAkB,GAAG,MAAM,yBAAYD,eAAZ,CAAjC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\nexport const ListViewContext = createContext( {} );\n\nexport const useListViewContext = () => useContext( ListViewContext );\n"]}

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,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":"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","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"]}