@wordpress/block-editor 10.4.0 → 10.5.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/off-canvas-editor/block-contents.js"],"names":["ListViewBlockContents","ref","onClick","onToggleExpanded","block","isSelected","position","siblingBlockCount","level","isExpanded","selectedClientIds","props","clientId","blockMovingClientId","selectedBlockInBlockEditor","select","hasBlockMovingClientId","getSelectedBlockClientId","blockEditorStore","isBlockMoveTarget","className","draggableClientIds","includes","draggable","onDragStart","onDragEnd"],"mappings":";;;;;;;;;AASA;;;;AANA;;AAKA;;AAMA;;AACA;;AACA;;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAKA,MAAMA,qBAAqB,GAAG,yBAC7B,OAaCC,GAbD,KAcK;AAAA,MAbJ;AACCC,IAAAA,OADD;AAECC,IAAAA,gBAFD;AAGCC,IAAAA,KAHD;AAICC,IAAAA,UAJD;AAKCC,IAAAA,QALD;AAMCC,IAAAA,iBAND;AAOCC,IAAAA,KAPD;AAQCC,IAAAA,UARD;AASCC,IAAAA,iBATD;AAUC,OAAGC;AAVJ,GAaI;AACJ,QAAM;AAAEC,IAAAA;AAAF,MAAeR,KAArB;AAEA,QAAM;AAAES,IAAAA,mBAAF;AAAuBC,IAAAA;AAAvB,MAAsD,qBACzDC,MAAF,IAAc;AACb,UAAM;AAAEC,MAAAA,sBAAF;AAA0BC,MAAAA;AAA1B,QACLF,MAAM,CAAEG,YAAF,CADP;AAEA,WAAO;AACNL,MAAAA,mBAAmB,EAAEG,sBAAsB,EADrC;AAENF,MAAAA,0BAA0B,EAAEG,wBAAwB;AAF9C,KAAP;AAIA,GAR0D,EAS3D,CAAEL,QAAF,CAT2D,CAA5D;AAYA,QAAMO,iBAAiB,GACtBN,mBAAmB,IAAIC,0BAA0B,KAAKF,QADvD;AAGA,QAAMQ,SAAS,GAAG,yBAAY,uCAAZ,EAAqD;AACtE,0BAAsBD;AADgD,GAArD,CAAlB,CAlBI,CAsBJ;AACA;AACA;AACA;;AACA,QAAME,kBAAkB,GAAGX,iBAAiB,CAACY,QAAlB,CAA4BV,QAA5B,IACxBF,iBADwB,GAExB,CAAEE,QAAF,CAFH;AAIA,SACC,4BAAC,uBAAD;AAAgB,IAAA,SAAS,EAAGS;AAA5B,KACG;AAAA,QAAE;AAAEE,MAAAA,SAAF;AAAaC,MAAAA,WAAb;AAA0BC,MAAAA;AAA1B,KAAF;AAAA,WACD,4BAAC,0BAAD;AACC,MAAA,GAAG,EAAGxB,GADP;AAEC,MAAA,SAAS,EAAGmB,SAFb;AAGC,MAAA,KAAK,EAAGhB,KAHT;AAIC,MAAA,OAAO,EAAGF,OAJX;AAKC,MAAA,gBAAgB,EAAGC,gBALpB;AAMC,MAAA,UAAU,EAAGE,UANd;AAOC,MAAA,QAAQ,EAAGC,QAPZ;AAQC,MAAA,iBAAiB,EAAGC,iBARrB;AASC,MAAA,KAAK,EAAGC,KATT;AAUC,MAAA,SAAS,EAAGe,SAVb;AAWC,MAAA,WAAW,EAAGC,WAXf;AAYC,MAAA,SAAS,EAAGC,SAZb;AAaC,MAAA,UAAU,EAAGhB;AAbd,OAcME,KAdN,EADC;AAAA,GADH,CADD;AAsBA,CAnE4B,CAA9B;eAsEeX,qB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ListViewBlockSelectButton from './block-select-button';\nimport BlockDraggable from '../block-draggable';\nimport { store as blockEditorStore } from '../../store';\n\nconst ListViewBlockContents = forwardRef(\n\t(\n\t\t{\n\t\t\tonClick,\n\t\t\tonToggleExpanded,\n\t\t\tblock,\n\t\t\tisSelected,\n\t\t\tposition,\n\t\t\tsiblingBlockCount,\n\t\t\tlevel,\n\t\t\tisExpanded,\n\t\t\tselectedClientIds,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tconst { clientId } = block;\n\n\t\tconst { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst { hasBlockMovingClientId, getSelectedBlockClientId } =\n\t\t\t\t\tselect( blockEditorStore );\n\t\t\t\treturn {\n\t\t\t\t\tblockMovingClientId: hasBlockMovingClientId(),\n\t\t\t\t\tselectedBlockInBlockEditor: getSelectedBlockClientId(),\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ clientId ]\n\t\t);\n\n\t\tconst isBlockMoveTarget =\n\t\t\tblockMovingClientId && selectedBlockInBlockEditor === clientId;\n\n\t\tconst className = classnames( 'block-editor-list-view-block-contents', {\n\t\t\t'is-dropping-before': isBlockMoveTarget,\n\t\t} );\n\n\t\t// Only include all selected blocks if the currently clicked on block\n\t\t// is one of the selected blocks. This ensures that if a user attempts\n\t\t// to drag a block that isn't part of the selection, they're still able\n\t\t// to drag it and rearrange its position.\n\t\tconst draggableClientIds = selectedClientIds.includes( clientId )\n\t\t\t? selectedClientIds\n\t\t\t: [ clientId ];\n\n\t\treturn (\n\t\t\t<BlockDraggable clientIds={ draggableClientIds }>\n\t\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\n\t\t\t\t\t<ListViewBlockSelectButton\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\t\tonToggleExpanded={ onToggleExpanded }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tposition={ position }\n\t\t\t\t\t\tsiblingBlockCount={ siblingBlockCount }\n\t\t\t\t\t\tlevel={ level }\n\t\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\t\tonDragStart={ onDragStart }\n\t\t\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</BlockDraggable>\n\t\t);\n\t}\n);\n\nexport default ListViewBlockContents;\n"]}

package/build/components/off-canvas-editor/block-select-button.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("@wordpress/components");
+
+var _icons = require("@wordpress/icons");
+
+var _keycodes = require("@wordpress/keycodes");
+
+var _blockIcon = _interopRequireDefault(require("../block-icon"));
+
+var _useBlockDisplayInformation = _interopRequireDefault(require("../use-block-display-information"));
+
+var _useBlockDisplayTitle = _interopRequireDefault(require("../block-title/use-block-display-title"));
+
+var _expander = _interopRequireDefault(require("./expander"));
+
+var _blockLock = require("../block-lock");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ListViewBlockSelectButton(_ref, ref) {
+  let {
+    className,
+    block: {
+      clientId
+    },
+    onClick,
+    onToggleExpanded,
+    tabIndex,
+    onFocus,
+    onDragStart,
+    onDragEnd,
+    draggable
+  } = _ref;
+  const blockInformation = (0, _useBlockDisplayInformation.default)(clientId);
+  const blockTitle = (0, _useBlockDisplayTitle.default)({
+    clientId,
+    context: 'list-view'
+  });
+  const {
+    isLocked
+  } = (0, _blockLock.useBlockLock)(clientId); // The `href` attribute triggers the browser's native HTML drag operations.
+  // When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
+  // We need to clear any HTML drag data to prevent `pasteHandler` from firing
+  // inside the `useOnBlockDrop` hook.
+
+  const onDragStartHandler = event => {
+    event.dataTransfer.clearData();
+    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
+  };
+
+  function onKeyDownHandler(event) {
+    if (event.keyCode === _keycodes.ENTER || event.keyCode === _keycodes.SPACE) {
+      onClick(event);
+    }
+  }
+
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Button, {
+    className: (0, _classnames.default)('block-editor-list-view-block-select-button', className),
+    onClick: onClick,
+    onKeyDown: onKeyDownHandler,
+    ref: ref,
+    tabIndex: tabIndex,
+    onFocus: onFocus,
+    onDragStart: onDragStartHandler,
+    onDragEnd: onDragEnd,
+    draggable: draggable,
+    href: `#block-${clientId}`,
+    "aria-hidden": true
+  }, (0, _element.createElement)(_expander.default, {
+    onClick: onToggleExpanded
+  }), (0, _element.createElement)(_blockIcon.default, {
+    icon: blockInformation === null || blockInformation === void 0 ? void 0 : blockInformation.icon,
+    showColors: true
+  }), (0, _element.createElement)(_components.__experimentalHStack, {
+    alignment: "center",
+    className: "block-editor-list-view-block-select-button__label-wrapper",
+    justify: "flex-start",
+    spacing: 1
+  }, (0, _element.createElement)("span", {
+    className: "block-editor-list-view-block-select-button__title"
+  }, (0, _element.createElement)(_components.__experimentalTruncate, {
+    ellipsizeMode: "auto"
+  }, blockTitle)), (blockInformation === null || blockInformation === void 0 ? void 0 : blockInformation.anchor) && (0, _element.createElement)("span", {
+    className: "block-editor-list-view-block-select-button__anchor-wrapper"
+  }, (0, _element.createElement)(_components.__experimentalTruncate, {
+    className: "block-editor-list-view-block-select-button__anchor",
+    ellipsizeMode: "auto"
+  }, blockInformation.anchor)), isLocked && (0, _element.createElement)("span", {
+    className: "block-editor-list-view-block-select-button__lock"
+  }, (0, _element.createElement)(_icons.Icon, {
+    icon: _icons.lock
+  })))));
+}
+
+var _default = (0, _element.forwardRef)(ListViewBlockSelectButton);
+
+exports.default = _default;
+//# sourceMappingURL=block-select-button.js.map

package/build/components/off-canvas-editor/block-select-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/off-canvas-editor/block-select-button.js"],"names":["ListViewBlockSelectButton","ref","className","block","clientId","onClick","onToggleExpanded","tabIndex","onFocus","onDragStart","onDragEnd","draggable","blockInformation","blockTitle","context","isLocked","onDragStartHandler","event","dataTransfer","clearData","onKeyDownHandler","keyCode","ENTER","SPACE","icon","anchor","lock"],"mappings":";;;;;;;;;AAaA;;AAVA;;AAKA;;AAMA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAxBA;AACA;AACA;;AAGA;AACA;AACA;;AAUA;AACA;AACA;AAOA,SAASA,yBAAT,OAYCC,GAZD,EAaE;AAAA,MAZD;AACCC,IAAAA,SADD;AAECC,IAAAA,KAAK,EAAE;AAAEC,MAAAA;AAAF,KAFR;AAGCC,IAAAA,OAHD;AAICC,IAAAA,gBAJD;AAKCC,IAAAA,QALD;AAMCC,IAAAA,OAND;AAOCC,IAAAA,WAPD;AAQCC,IAAAA,SARD;AASCC,IAAAA;AATD,GAYC;AACD,QAAMC,gBAAgB,GAAG,yCAA4BR,QAA5B,CAAzB;AACA,QAAMS,UAAU,GAAG,mCAAsB;AACxCT,IAAAA,QADwC;AAExCU,IAAAA,OAAO,EAAE;AAF+B,GAAtB,CAAnB;AAIA,QAAM;AAAEC,IAAAA;AAAF,MAAe,6BAAcX,QAAd,CAArB,CANC,CAQD;AACA;AACA;AACA;;AACA,QAAMY,kBAAkB,GAAKC,KAAF,IAAa;AACvCA,IAAAA,KAAK,CAACC,YAAN,CAAmBC,SAAnB;AACAV,IAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAIQ,KAAJ,CAAX;AACA,GAHD;;AAKA,WAASG,gBAAT,CAA2BH,KAA3B,EAAmC;AAClC,QAAKA,KAAK,CAACI,OAAN,KAAkBC,eAAlB,IAA2BL,KAAK,CAACI,OAAN,KAAkBE,eAAlD,EAA0D;AACzDlB,MAAAA,OAAO,CAAEY,KAAF,CAAP;AACA;AACD;;AAED,SACC,qDACC,4BAAC,kBAAD;AACC,IAAA,SAAS,EAAG,yBACX,4CADW,EAEXf,SAFW,CADb;AAKC,IAAA,OAAO,EAAGG,OALX;AAMC,IAAA,SAAS,EAAGe,gBANb;AAOC,IAAA,GAAG,EAAGnB,GAPP;AAQC,IAAA,QAAQ,EAAGM,QARZ;AASC,IAAA,OAAO,EAAGC,OATX;AAUC,IAAA,WAAW,EAAGQ,kBAVf;AAWC,IAAA,SAAS,EAAGN,SAXb;AAYC,IAAA,SAAS,EAAGC,SAZb;AAaC,IAAA,IAAI,EAAI,UAAUP,QAAU,EAb7B;AAcC,mBAAc;AAdf,KAgBC,4BAAC,iBAAD;AAAkB,IAAA,OAAO,EAAGE;AAA5B,IAhBD,EAiBC,4BAAC,kBAAD;AAAW,IAAA,IAAI,EAAGM,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAgB,CAAEY,IAApC;AAA2C,IAAA,UAAU;AAArD,IAjBD,EAkBC,4BAAC,gCAAD;AACC,IAAA,SAAS,EAAC,QADX;AAEC,IAAA,SAAS,EAAC,2DAFX;AAGC,IAAA,OAAO,EAAC,YAHT;AAIC,IAAA,OAAO,EAAG;AAJX,KAMC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC,4BAAC,kCAAD;AAAU,IAAA,aAAa,EAAC;AAAxB,KAAiCX,UAAjC,CADD,CAND,EASG,CAAAD,gBAAgB,SAAhB,IAAAA,gBAAgB,WAAhB,YAAAA,gBAAgB,CAAEa,MAAlB,KACD;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC,4BAAC,kCAAD;AACC,IAAA,SAAS,EAAC,oDADX;AAEC,IAAA,aAAa,EAAC;AAFf,KAIGb,gBAAgB,CAACa,MAJpB,CADD,CAVF,EAmBGV,QAAQ,IACT;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGW;AAAb,IADD,CApBF,CAlBD,CADD,CADD;AAgDA;;eAEc,yBAAY1B,yBAAZ,C","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n} from '@wordpress/components';\nimport { forwardRef } from '@wordpress/element';\nimport { Icon, lock } from '@wordpress/icons';\nimport { SPACE, ENTER } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport useBlockDisplayTitle from '../block-title/use-block-display-title';\nimport ListViewExpander from './expander';\nimport { useBlockLock } from '../block-lock';\n\nfunction ListViewBlockSelectButton(\n\t{\n\t\tclassName,\n\t\tblock: { clientId },\n\t\tonClick,\n\t\tonToggleExpanded,\n\t\ttabIndex,\n\t\tonFocus,\n\t\tonDragStart,\n\t\tonDragEnd,\n\t\tdraggable,\n\t},\n\tref\n) {\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\tconst blockTitle = useBlockDisplayTitle( {\n\t\tclientId,\n\t\tcontext: 'list-view',\n\t} );\n\tconst { isLocked } = useBlockLock( clientId );\n\n\t// The `href` attribute triggers the browser's native HTML drag operations.\n\t// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.\n\t// We need to clear any HTML drag data to prevent `pasteHandler` from firing\n\t// inside the `useOnBlockDrop` hook.\n\tconst onDragStartHandler = ( event ) => {\n\t\tevent.dataTransfer.clearData();\n\t\tonDragStart?.( event );\n\t};\n\n\tfunction onKeyDownHandler( event ) {\n\t\tif ( event.keyCode === ENTER || event.keyCode === SPACE ) {\n\t\t\tonClick( event );\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'block-editor-list-view-block-select-button',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tonKeyDown={ onKeyDownHandler }\n\t\t\t\tref={ ref }\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\tonFocus={ onFocus }\n\t\t\t\tonDragStart={ onDragStartHandler }\n\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\tdraggable={ draggable }\n\t\t\t\thref={ `#block-${ clientId }` }\n\t\t\t\taria-hidden={ true }\n\t\t\t>\n\t\t\t\t<ListViewExpander onClick={ onToggleExpanded } />\n\t\t\t\t<BlockIcon icon={ blockInformation?.icon } showColors />\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"center\"\n\t\t\t\t\tclassName=\"block-editor-list-view-block-select-button__label-wrapper\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\tspacing={ 1 }\n\t\t\t\t>\n\t\t\t\t\t<span className=\"block-editor-list-view-block-select-button__title\">\n\t\t\t\t\t\t<Truncate ellipsizeMode=\"auto\">{ blockTitle }</Truncate>\n\t\t\t\t\t</span>\n\t\t\t\t\t{ blockInformation?.anchor && (\n\t\t\t\t\t\t<span className=\"block-editor-list-view-block-select-button__anchor-wrapper\">\n\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\tclassName=\"block-editor-list-view-block-select-button__anchor\"\n\t\t\t\t\t\t\t\tellipsizeMode=\"auto\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ blockInformation.anchor }\n\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isLocked && (\n\t\t\t\t\t\t<span className=\"block-editor-list-view-block-select-button__lock\">\n\t\t\t\t\t\t\t<Icon icon={ lock } />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t</>\n\t);\n}\n\nexport default forwardRef( ListViewBlockSelectButton );\n"]}

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

@@ -0,0 +1,292 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _blocks = require("@wordpress/blocks");
+
+var _components = require("@wordpress/components");
+
+var _compose = require("@wordpress/compose");
+
+var _icons = require("@wordpress/icons");
+
+var _data = require("@wordpress/data");
+
+var _i18n = require("@wordpress/i18n");
+
+var _leaf = _interopRequireDefault(require("./leaf"));
+
+var _button = require("../block-mover/button");
+
+var _blockContents = _interopRequireDefault(require("./block-contents"));
+
+var _blockSettingsDropdown = _interopRequireDefault(require("../block-settings-menu/block-settings-dropdown"));
+
+var _context = require("./context");
+
+var _utils = require("./utils");
+
+var _store = require("../../store");
+
+var _useBlockDisplayInformation = _interopRequireDefault(require("../use-block-display-information"));
+
+var _blockLock = require("../block-lock");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ListViewBlock(_ref) {
+  let {
+    block,
+    isDragged,
+    isSelected,
+    isBranchSelected,
+    selectBlock,
+    position,
+    level,
+    rowCount,
+    siblingBlockCount,
+    showBlockMovers,
+    path,
+    isExpanded,
+    selectedClientIds,
+    preventAnnouncement,
+    selectBlockInCanvas
+  } = _ref;
+  const cellRef = (0, _element.useRef)(null);
+  const [isHovered, setIsHovered] = (0, _element.useState)(false);
+  const {
+    clientId
+  } = block;
+  const {
+    isLocked,
+    isContentLocked
+  } = (0, _blockLock.useBlockLock)(clientId);
+  const forceSelectionContentLock = (0, _data.useSelect)(select => {
+    if (isSelected) {
+      return false;
+    }
+
+    if (!isContentLocked) {
+      return false;
+    }
+
+    return select(_store.store).hasSelectedInnerBlock(clientId, true);
+  }, [isContentLocked, clientId, isSelected]);
+  const isFirstSelectedBlock = forceSelectionContentLock || isSelected && selectedClientIds[0] === clientId;
+  const isLastSelectedBlock = forceSelectionContentLock || isSelected && selectedClientIds[selectedClientIds.length - 1] === clientId;
+  const {
+    toggleBlockHighlight
+  } = (0, _data.useDispatch)(_store.store);
+  const blockInformation = (0, _useBlockDisplayInformation.default)(clientId);
+  const blockName = (0, _data.useSelect)(select => select(_store.store).getBlockName(clientId), [clientId]); // When a block hides its toolbar it also hides the block settings menu,
+  // since that menu is part of the toolbar in the editor canvas.
+  // List View respects this by also hiding the block settings menu.
+
+  const showBlockActions = (0, _blocks.hasBlockSupport)(blockName, '__experimentalToolbar', true);
+  const instanceId = (0, _compose.useInstanceId)(ListViewBlock);
+  const descriptionId = `list-view-block-select-button__${instanceId}`;
+  const blockPositionDescription = (0, _utils.getBlockPositionDescription)(position, siblingBlockCount, level);
+  let blockAriaLabel = (0, _i18n.__)('Link');
+
+  if (blockInformation) {
+    blockAriaLabel = isLocked ? (0, _i18n.sprintf)( // translators: %s: The title of the block. This string indicates a link to select the locked block.
+    (0, _i18n.__)('%s link (locked)'), blockInformation.title) : (0, _i18n.sprintf)( // translators: %s: The title of the block. This string indicates a link to select the block.
+    (0, _i18n.__)('%s link'), blockInformation.title);
+  }
+
+  const settingsAriaLabel = blockInformation ? (0, _i18n.sprintf)( // translators: %s: The title of the block.
+  (0, _i18n.__)('Options for %s block'), blockInformation.title) : (0, _i18n.__)('Options');
+  const {
+    isTreeGridMounted,
+    expand,
+    collapse
+  } = (0, _context.useListViewContext)();
+  const hasSiblings = siblingBlockCount > 0;
+  const hasRenderedMovers = showBlockMovers && hasSiblings;
+  const moverCellClassName = (0, _classnames.default)('block-editor-list-view-block__mover-cell', {
+    'is-visible': isHovered || isSelected
+  });
+  const listViewBlockSettingsClassName = (0, _classnames.default)('block-editor-list-view-block__menu-cell', {
+    'is-visible': isHovered || isFirstSelectedBlock
+  }); // If ListView has experimental features related to the Persistent List View,
+  // only focus the selected list item on mount; otherwise the list would always
+  // try to steal the focus from the editor canvas.
+
+  (0, _element.useEffect)(() => {
+    if (!isTreeGridMounted && isSelected) {
+      cellRef.current.focus();
+    }
+  }, []);
+  const onMouseEnter = (0, _element.useCallback)(() => {
+    setIsHovered(true);
+    toggleBlockHighlight(clientId, true);
+  }, [clientId, setIsHovered, toggleBlockHighlight]);
+  const onMouseLeave = (0, _element.useCallback)(() => {
+    setIsHovered(false);
+    toggleBlockHighlight(clientId, false);
+  }, [clientId, setIsHovered, toggleBlockHighlight]);
+  const selectEditorBlock = (0, _element.useCallback)(event => {
+    selectBlock(event, clientId);
+    event.preventDefault();
+  }, [clientId, selectBlock]);
+  const updateSelection = (0, _element.useCallback)(newClientId => {
+    selectBlock(undefined, newClientId);
+  }, [selectBlock]);
+  const toggleExpanded = (0, _element.useCallback)(event => {
+    // Prevent shift+click from opening link in a new window when toggling.
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (isExpanded === true) {
+      collapse(clientId);
+    } else if (isExpanded === false) {
+      expand(clientId);
+    }
+  }, [clientId, expand, collapse, isExpanded]);
+  let colSpan;
+
+  if (hasRenderedMovers) {
+    colSpan = 2;
+  } else if (!showBlockActions) {
+    colSpan = 3;
+  }
+
+  const classes = (0, _classnames.default)({
+    'is-selected': isSelected || forceSelectionContentLock,
+    'is-first-selected': isFirstSelectedBlock,
+    'is-last-selected': isLastSelectedBlock,
+    'is-branch-selected': isBranchSelected,
+    'is-dragging': isDragged,
+    'has-single-cell': !showBlockActions
+  }); // Only include all selected blocks if the currently clicked on block
+  // is one of the selected blocks. This ensures that if a user attempts
+  // to alter a block that isn't part of the selection, they're still able
+  // to do so.
+
+  const dropdownClientIds = selectedClientIds.includes(clientId) ? selectedClientIds : [clientId];
+  return (0, _element.createElement)(_leaf.default, {
+    className: classes,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onFocus: onMouseEnter,
+    onBlur: onMouseLeave,
+    level: level,
+    position: position,
+    rowCount: rowCount,
+    path: path,
+    id: `list-view-block-${clientId}`,
+    "data-block": clientId,
+    isExpanded: isContentLocked ? undefined : isExpanded,
+    "aria-selected": !!isSelected || forceSelectionContentLock
+  }, (0, _element.createElement)(_components.__experimentalTreeGridCell, {
+    className: "block-editor-list-view-block__contents-cell",
+    colSpan: colSpan,
+    ref: cellRef,
+    "aria-label": blockAriaLabel,
+    "aria-selected": !!isSelected || forceSelectionContentLock,
+    "aria-expanded": isContentLocked ? undefined : isExpanded,
+    "aria-describedby": descriptionId
+  }, _ref2 => {
+    let {
+      ref,
+      tabIndex,
+      onFocus
+    } = _ref2;
+    return (0, _element.createElement)("div", {
+      className: "block-editor-list-view-block__contents-container"
+    }, (0, _element.createElement)(_blockContents.default, {
+      block: block,
+      onClick: selectBlockInCanvas ? selectEditorBlock : event => {
+        event.preventDefault();
+      },
+      onToggleExpanded: toggleExpanded,
+      isSelected: isSelected,
+      position: position,
+      siblingBlockCount: siblingBlockCount,
+      level: level,
+      ref: ref,
+      tabIndex: tabIndex,
+      onFocus: onFocus,
+      isExpanded: isExpanded,
+      selectedClientIds: selectedClientIds,
+      preventAnnouncement: preventAnnouncement
+    }), (0, _element.createElement)("div", {
+      className: "block-editor-list-view-block-select-button__description",
+      id: descriptionId
+    }, blockPositionDescription));
+  }), hasRenderedMovers && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalTreeGridCell, {
+    className: moverCellClassName,
+    withoutGridItem: true
+  }, (0, _element.createElement)(_components.__experimentalTreeGridItem, null, _ref3 => {
+    let {
+      ref,
+      tabIndex,
+      onFocus
+    } = _ref3;
+    return (0, _element.createElement)(_button.BlockMoverUpButton, {
+      orientation: "vertical",
+      clientIds: [clientId],
+      ref: ref,
+      tabIndex: tabIndex,
+      onFocus: onFocus
+    });
+  }), (0, _element.createElement)(_components.__experimentalTreeGridItem, null, _ref4 => {
+    let {
+      ref,
+      tabIndex,
+      onFocus
+    } = _ref4;
+    return (0, _element.createElement)(_button.BlockMoverDownButton, {
+      orientation: "vertical",
+      clientIds: [clientId],
+      ref: ref,
+      tabIndex: tabIndex,
+      onFocus: onFocus
+    });
+  }))), showBlockActions && (0, _element.createElement)(_components.__experimentalTreeGridCell, {
+    className: listViewBlockSettingsClassName,
+    "aria-selected": !!isSelected || forceSelectionContentLock
+  }, _ref5 => {
+    let {
+      ref,
+      tabIndex,
+      onFocus
+    } = _ref5;
+    return (0, _element.createElement)(_blockSettingsDropdown.default, {
+      clientIds: dropdownClientIds,
+      icon: _icons.moreVertical,
+      label: settingsAriaLabel,
+      toggleProps: {
+        ref,
+        className: 'block-editor-list-view-block__menu',
+        tabIndex,
+        onFocus
+      },
+      disableOpenOnArrowDown: true,
+      __experimentalSelectBlock: updateSelection
+    });
+  }));
+}
+
+var _default = (0, _element.memo)(ListViewBlock);
+
+exports.default = _default;
+//# sourceMappingURL=block.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/off-canvas-editor/block.js"],"names":["ListViewBlock","block","isDragged","isSelected","isBranchSelected","selectBlock","position","level","rowCount","siblingBlockCount","showBlockMovers","path","isExpanded","selectedClientIds","preventAnnouncement","selectBlockInCanvas","cellRef","isHovered","setIsHovered","clientId","isLocked","isContentLocked","forceSelectionContentLock","select","blockEditorStore","hasSelectedInnerBlock","isFirstSelectedBlock","isLastSelectedBlock","length","toggleBlockHighlight","blockInformation","blockName","getBlockName","showBlockActions","instanceId","descriptionId","blockPositionDescription","blockAriaLabel","title","settingsAriaLabel","isTreeGridMounted","expand","collapse","hasSiblings","hasRenderedMovers","moverCellClassName","listViewBlockSettingsClassName","current","focus","onMouseEnter","onMouseLeave","selectEditorBlock","event","preventDefault","updateSelection","newClientId","undefined","toggleExpanded","stopPropagation","colSpan","classes","dropdownClientIds","includes","ref","tabIndex","onFocus","moreVertical","className"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport {\n\t__experimentalTreeGridCell as TreeGridCell,\n\t__experimentalTreeGridItem as TreeGridItem,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { moreVertical } from '@wordpress/icons';\nimport {\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n\tmemo,\n} from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ListViewLeaf from './leaf';\nimport {\n\tBlockMoverUpButton,\n\tBlockMoverDownButton,\n} from '../block-mover/button';\nimport ListViewBlockContents from './block-contents';\nimport BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';\nimport { useListViewContext } from './context';\nimport { getBlockPositionDescription } from './utils';\nimport { store as blockEditorStore } from '../../store';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport { useBlockLock } from '../block-lock';\n\nfunction ListViewBlock( {\n\tblock,\n\tisDragged,\n\tisSelected,\n\tisBranchSelected,\n\tselectBlock,\n\tposition,\n\tlevel,\n\trowCount,\n\tsiblingBlockCount,\n\tshowBlockMovers,\n\tpath,\n\tisExpanded,\n\tselectedClientIds,\n\tpreventAnnouncement,\n\tselectBlockInCanvas,\n} ) {\n\tconst cellRef = useRef( null );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst { clientId } = block;\n\n\tconst { isLocked, isContentLocked } = useBlockLock( clientId );\n\tconst forceSelectionContentLock = useSelect(\n\t\t( select ) => {\n\t\t\tif ( isSelected ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\tif ( ! isContentLocked ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn select( blockEditorStore ).hasSelectedInnerBlock(\n\t\t\t\tclientId,\n\t\t\t\ttrue\n\t\t\t);\n\t\t},\n\t\t[ isContentLocked, clientId, isSelected ]\n\t);\n\n\tconst isFirstSelectedBlock =\n\t\tforceSelectionContentLock ||\n\t\t( isSelected && selectedClientIds[ 0 ] === clientId );\n\tconst isLastSelectedBlock =\n\t\tforceSelectionContentLock ||\n\t\t( isSelected &&\n\t\t\tselectedClientIds[ selectedClientIds.length - 1 ] === clientId );\n\n\tconst { toggleBlockHighlight } = useDispatch( blockEditorStore );\n\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\tconst blockName = useSelect(\n\t\t( select ) => select( blockEditorStore ).getBlockName( clientId ),\n\t\t[ clientId ]\n\t);\n\n\t// When a block hides its toolbar it also hides the block settings menu,\n\t// since that menu is part of the toolbar in the editor canvas.\n\t// List View respects this by also hiding the block settings menu.\n\tconst showBlockActions = hasBlockSupport(\n\t\tblockName,\n\t\t'__experimentalToolbar',\n\t\ttrue\n\t);\n\tconst instanceId = useInstanceId( ListViewBlock );\n\tconst descriptionId = `list-view-block-select-button__${ instanceId }`;\n\tconst blockPositionDescription = getBlockPositionDescription(\n\t\tposition,\n\t\tsiblingBlockCount,\n\t\tlevel\n\t);\n\n\tlet blockAriaLabel = __( 'Link' );\n\tif ( blockInformation ) {\n\t\tblockAriaLabel = isLocked\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The title of the block. This string indicates a link to select the locked block.\n\t\t\t\t\t__( '%s link (locked)' ),\n\t\t\t\t\tblockInformation.title\n\t\t\t  )\n\t\t\t: sprintf(\n\t\t\t\t\t// translators: %s: The title of the block. This string indicates a link to select the block.\n\t\t\t\t\t__( '%s link' ),\n\t\t\t\t\tblockInformation.title\n\t\t\t  );\n\t}\n\n\tconst settingsAriaLabel = blockInformation\n\t\t? sprintf(\n\t\t\t\t// translators: %s: The title of the block.\n\t\t\t\t__( 'Options for %s block' ),\n\t\t\t\tblockInformation.title\n\t\t  )\n\t\t: __( 'Options' );\n\n\tconst { isTreeGridMounted, expand, collapse } = useListViewContext();\n\n\tconst hasSiblings = siblingBlockCount > 0;\n\tconst hasRenderedMovers = showBlockMovers && hasSiblings;\n\tconst moverCellClassName = classnames(\n\t\t'block-editor-list-view-block__mover-cell',\n\t\t{ 'is-visible': isHovered || isSelected }\n\t);\n\n\tconst listViewBlockSettingsClassName = classnames(\n\t\t'block-editor-list-view-block__menu-cell',\n\t\t{ 'is-visible': isHovered || isFirstSelectedBlock }\n\t);\n\n\t// If ListView has experimental features related to the Persistent List View,\n\t// only focus the selected list item on mount; otherwise the list would always\n\t// try to steal the focus from the editor canvas.\n\tuseEffect( () => {\n\t\tif ( ! isTreeGridMounted && isSelected ) {\n\t\t\tcellRef.current.focus();\n\t\t}\n\t}, [] );\n\n\tconst onMouseEnter = useCallback( () => {\n\t\tsetIsHovered( true );\n\t\ttoggleBlockHighlight( clientId, true );\n\t}, [ clientId, setIsHovered, toggleBlockHighlight ] );\n\tconst onMouseLeave = useCallback( () => {\n\t\tsetIsHovered( false );\n\t\ttoggleBlockHighlight( clientId, false );\n\t}, [ clientId, setIsHovered, toggleBlockHighlight ] );\n\n\tconst selectEditorBlock = useCallback(\n\t\t( event ) => {\n\t\t\tselectBlock( event, clientId );\n\t\t\tevent.preventDefault();\n\t\t},\n\t\t[ clientId, selectBlock ]\n\t);\n\n\tconst updateSelection = useCallback(\n\t\t( newClientId ) => {\n\t\t\tselectBlock( undefined, newClientId );\n\t\t},\n\t\t[ selectBlock ]\n\t);\n\n\tconst toggleExpanded = useCallback(\n\t\t( event ) => {\n\t\t\t// Prevent shift+click from opening link in a new window when toggling.\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopPropagation();\n\t\t\tif ( isExpanded === true ) {\n\t\t\t\tcollapse( clientId );\n\t\t\t} else if ( isExpanded === false ) {\n\t\t\t\texpand( clientId );\n\t\t\t}\n\t\t},\n\t\t[ clientId, expand, collapse, isExpanded ]\n\t);\n\n\tlet colSpan;\n\tif ( hasRenderedMovers ) {\n\t\tcolSpan = 2;\n\t} else if ( ! showBlockActions ) {\n\t\tcolSpan = 3;\n\t}\n\n\tconst classes = classnames( {\n\t\t'is-selected': isSelected || forceSelectionContentLock,\n\t\t'is-first-selected': isFirstSelectedBlock,\n\t\t'is-last-selected': isLastSelectedBlock,\n\t\t'is-branch-selected': isBranchSelected,\n\t\t'is-dragging': isDragged,\n\t\t'has-single-cell': ! showBlockActions,\n\t} );\n\n\t// Only include all selected blocks if the currently clicked on block\n\t// is one of the selected blocks. This ensures that if a user attempts\n\t// to alter a block that isn't part of the selection, they're still able\n\t// to do so.\n\tconst dropdownClientIds = selectedClientIds.includes( clientId )\n\t\t? selectedClientIds\n\t\t: [ clientId ];\n\n\treturn (\n\t\t<ListViewLeaf\n\t\t\tclassName={ classes }\n\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\tonFocus={ onMouseEnter }\n\t\t\tonBlur={ onMouseLeave }\n\t\t\tlevel={ level }\n\t\t\tposition={ position }\n\t\t\trowCount={ rowCount }\n\t\t\tpath={ path }\n\t\t\tid={ `list-view-block-${ clientId }` }\n\t\t\tdata-block={ clientId }\n\t\t\tisExpanded={ isContentLocked ? undefined : isExpanded }\n\t\t\taria-selected={ !! isSelected || forceSelectionContentLock }\n\t\t>\n\t\t\t<TreeGridCell\n\t\t\t\tclassName=\"block-editor-list-view-block__contents-cell\"\n\t\t\t\tcolSpan={ colSpan }\n\t\t\t\tref={ cellRef }\n\t\t\t\taria-label={ blockAriaLabel }\n\t\t\t\taria-selected={ !! isSelected || forceSelectionContentLock }\n\t\t\t\taria-expanded={ isContentLocked ? undefined : isExpanded }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t>\n\t\t\t\t{ ( { ref, tabIndex, onFocus } ) => (\n\t\t\t\t\t<div className=\"block-editor-list-view-block__contents-container\">\n\t\t\t\t\t\t<ListViewBlockContents\n\t\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\tselectBlockInCanvas\n\t\t\t\t\t\t\t\t\t? selectEditorBlock\n\t\t\t\t\t\t\t\t\t: ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonToggleExpanded={ toggleExpanded }\n\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\tposition={ position }\n\t\t\t\t\t\t\tsiblingBlockCount={ siblingBlockCount }\n\t\t\t\t\t\t\tlevel={ level }\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\tselectedClientIds={ selectedClientIds }\n\t\t\t\t\t\t\tpreventAnnouncement={ preventAnnouncement }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"block-editor-list-view-block-select-button__description\"\n\t\t\t\t\t\t\tid={ descriptionId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ blockPositionDescription }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</TreeGridCell>\n\t\t\t{ hasRenderedMovers && (\n\t\t\t\t<>\n\t\t\t\t\t<TreeGridCell\n\t\t\t\t\t\tclassName={ moverCellClassName }\n\t\t\t\t\t\twithoutGridItem\n\t\t\t\t\t>\n\t\t\t\t\t\t<TreeGridItem>\n\t\t\t\t\t\t\t{ ( { ref, tabIndex, onFocus } ) => (\n\t\t\t\t\t\t\t\t<BlockMoverUpButton\n\t\t\t\t\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\t\t\t\t\tclientIds={ [ clientId ] }\n\t\t\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</TreeGridItem>\n\t\t\t\t\t\t<TreeGridItem>\n\t\t\t\t\t\t\t{ ( { ref, tabIndex, onFocus } ) => (\n\t\t\t\t\t\t\t\t<BlockMoverDownButton\n\t\t\t\t\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\t\t\t\t\tclientIds={ [ clientId ] }\n\t\t\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</TreeGridItem>\n\t\t\t\t\t</TreeGridCell>\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ showBlockActions && (\n\t\t\t\t<TreeGridCell\n\t\t\t\t\tclassName={ listViewBlockSettingsClassName }\n\t\t\t\t\taria-selected={ !! isSelected || forceSelectionContentLock }\n\t\t\t\t>\n\t\t\t\t\t{ ( { ref, tabIndex, onFocus } ) => (\n\t\t\t\t\t\t<BlockSettingsDropdown\n\t\t\t\t\t\t\tclientIds={ dropdownClientIds }\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ settingsAriaLabel }\n\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\tref,\n\t\t\t\t\t\t\t\tclassName: 'block-editor-list-view-block__menu',\n\t\t\t\t\t\t\t\ttabIndex,\n\t\t\t\t\t\t\t\tonFocus,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tdisableOpenOnArrowDown\n\t\t\t\t\t\t\t__experimentalSelectBlock={ updateSelection }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</TreeGridCell>\n\t\t\t) }\n\t\t</ListViewLeaf>\n\t);\n}\n\nexport default memo( ListViewBlock );\n"]}

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

@@ -0,0 +1,181 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _data = require("@wordpress/data");
+
+var _block = _interopRequireDefault(require("./block"));
+
+var _context = require("./context");
+
+var _utils = require("./utils");
+
+var _store = require("../../store");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Given a block, returns the total number of blocks in that subtree. This is used to help determine
+ * the list position of a block.
+ *
+ * When a block is collapsed, we do not count their children as part of that total. In the current drag
+ * implementation dragged blocks and their children are not counted.
+ *
+ * @param {Object}  block               block tree
+ * @param {Object}  expandedState       state that notes which branches are collapsed
+ * @param {Array}   draggedClientIds    a list of dragged client ids
+ * @param {boolean} isExpandedByDefault flag to determine the default fallback expanded state.
+ * @return {number} block count
+ */
+function countBlocks(block, expandedState, draggedClientIds, isExpandedByDefault) {
+  var _expandedState$block$;
+
+  const isDragged = draggedClientIds === null || draggedClientIds === void 0 ? void 0 : draggedClientIds.includes(block.clientId);
+
+  if (isDragged) {
+    return 0;
+  }
+
+  const isExpanded = (_expandedState$block$ = expandedState[block.clientId]) !== null && _expandedState$block$ !== void 0 ? _expandedState$block$ : isExpandedByDefault;
+
+  if (isExpanded) {
+    return 1 + block.innerBlocks.reduce(countReducer(expandedState, draggedClientIds, isExpandedByDefault), 0);
+  }
+
+  return 1;
+}
+
+const countReducer = (expandedState, draggedClientIds, isExpandedByDefault) => (count, block) => {
+  var _expandedState$block$2;
+
+  const isDragged = draggedClientIds === null || draggedClientIds === void 0 ? void 0 : draggedClientIds.includes(block.clientId);
+
+  if (isDragged) {
+    return count;
+  }
+
+  const isExpanded = (_expandedState$block$2 = expandedState[block.clientId]) !== null && _expandedState$block$2 !== void 0 ? _expandedState$block$2 : isExpandedByDefault;
+
+  if (isExpanded && block.innerBlocks.length > 0) {
+    return count + countBlocks(block, expandedState, draggedClientIds, isExpandedByDefault);
+  }
+
+  return count + 1;
+};
+
+function ListViewBranch(props) {
+  const {
+    blocks,
+    selectBlock,
+    showBlockMovers,
+    selectedClientIds,
+    level = 1,
+    path = '',
+    isBranchSelected = false,
+    listPosition = 0,
+    fixedListWindow,
+    isExpanded,
+    parentId,
+    shouldShowInnerBlocks = true,
+    selectBlockInCanvas
+  } = props;
+  const isContentLocked = (0, _data.useSelect)(select => {
+    return !!(parentId && select(_store.store).getTemplateLock(parentId) === 'contentOnly');
+  }, [parentId]);
+  const {
+    expandedState,
+    draggedClientIds
+  } = (0, _context.useListViewContext)();
+
+  if (isContentLocked) {
+    return null;
+  }
+
+  const filteredBlocks = blocks.filter(Boolean);
+  const blockCount = filteredBlocks.length;
+  let nextPosition = listPosition;
+  return (0, _element.createElement)(_element.Fragment, null, filteredBlocks.map((block, index) => {
+    var _expandedState$client;
+
+    const {
+      clientId,
+      innerBlocks
+    } = block;
+
+    if (index > 0) {
+      nextPosition += countBlocks(filteredBlocks[index - 1], expandedState, draggedClientIds, isExpanded);
+    }
+
+    const {
+      itemInView
+    } = fixedListWindow;
+    const blockInView = itemInView(nextPosition);
+    const position = index + 1;
+    const updatedPath = path.length > 0 ? `${path}_${position}` : `${position}`;
+    const hasNestedBlocks = !!(innerBlocks !== null && innerBlocks !== void 0 && innerBlocks.length);
+    const shouldExpand = hasNestedBlocks && shouldShowInnerBlocks ? (_expandedState$client = expandedState[clientId]) !== null && _expandedState$client !== void 0 ? _expandedState$client : isExpanded : undefined;
+    const isDragged = !!(draggedClientIds !== null && draggedClientIds !== void 0 && draggedClientIds.includes(clientId));
+    const showBlock = isDragged || blockInView; // Make updates to the selected or dragged blocks synchronous,
+    // but asynchronous for any other block.
+
+    const isSelected = (0, _utils.isClientIdSelected)(clientId, selectedClientIds);
+    const isSelectedBranch = isBranchSelected || isSelected && hasNestedBlocks;
+    return (0, _element.createElement)(_data.AsyncModeProvider, {
+      key: clientId,
+      value: !isSelected
+    }, showBlock && (0, _element.createElement)(_block.default, {
+      block: block,
+      selectBlock: selectBlock,
+      isSelected: isSelected,
+      isBranchSelected: isSelectedBranch,
+      isDragged: isDragged,
+      level: level,
+      position: position,
+      rowCount: blockCount,
+      siblingBlockCount: blockCount,
+      showBlockMovers: showBlockMovers,
+      path: updatedPath,
+      isExpanded: shouldExpand,
+      listPosition: nextPosition,
+      selectedClientIds: selectedClientIds,
+      selectBlockInCanvas: selectBlockInCanvas
+    }), !showBlock && (0, _element.createElement)("tr", null, (0, _element.createElement)("td", {
+      className: "block-editor-list-view-placeholder"
+    })), hasNestedBlocks && shouldExpand && !isDragged && (0, _element.createElement)(ListViewBranch, {
+      parentId: clientId,
+      blocks: innerBlocks,
+      selectBlock: selectBlock,
+      showBlockMovers: showBlockMovers,
+      level: level + 1,
+      path: updatedPath,
+      listPosition: nextPosition + 1,
+      fixedListWindow: fixedListWindow,
+      isBranchSelected: isSelectedBranch,
+      selectedClientIds: selectedClientIds,
+      isExpanded: isExpanded,
+      selectBlockInCanvas: selectBlockInCanvas
+    }));
+  }));
+}
+
+ListViewBranch.defaultProps = {
+  selectBlock: () => {}
+};
+
+var _default = (0, _element.memo)(ListViewBranch);
+
+exports.default = _default;
+//# sourceMappingURL=branch.js.map