@wordpress/block-editor 10.4.0 → 11.0.0

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

@@ -0,0 +1,298 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+
+import { createBlock, hasBlockSupport } from '@wordpress/blocks';
+import { __experimentalTreeGridCell as TreeGridCell, __experimentalTreeGridItem as TreeGridItem, MenuItem } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { moreVertical } from '@wordpress/icons';
+import { useState, useRef, useEffect, useCallback, memo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { sprintf, __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import ListViewLeaf from './leaf';
+import { BlockMoverUpButton, BlockMoverDownButton } from '../block-mover/button';
+import ListViewBlockContents from './block-contents';
+import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
+import BlockEditButton from './block-edit-button';
+import { useListViewContext } from './context';
+import { getBlockPositionDescription } from './utils';
+import { store as blockEditorStore } from '../../store';
+import useBlockDisplayInformation from '../use-block-display-information';
+import { useBlockLock } from '../block-lock';
+
+function ListViewBlock(_ref) {
+  let {
+    block,
+    isDragged,
+    isSelected,
+    isBranchSelected,
+    selectBlock,
+    position,
+    level,
+    rowCount,
+    siblingBlockCount,
+    showBlockMovers,
+    path,
+    isExpanded,
+    selectedClientIds,
+    preventAnnouncement,
+    selectBlockInCanvas
+  } = _ref;
+  const cellRef = useRef(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const {
+    clientId,
+    attributes
+  } = block;
+  const {
+    isLocked,
+    isContentLocked
+  } = useBlockLock(clientId);
+  const forceSelectionContentLock = useSelect(select => {
+    if (isSelected) {
+      return false;
+    }
+
+    if (!isContentLocked) {
+      return false;
+    }
+
+    return select(blockEditorStore).hasSelectedInnerBlock(clientId, true);
+  }, [isContentLocked, clientId, isSelected]);
+  const isFirstSelectedBlock = forceSelectionContentLock || isSelected && selectedClientIds[0] === clientId;
+  const isLastSelectedBlock = forceSelectionContentLock || isSelected && selectedClientIds[selectedClientIds.length - 1] === clientId;
+  const {
+    replaceBlock,
+    toggleBlockHighlight
+  } = useDispatch(blockEditorStore);
+  const blockInformation = useBlockDisplayInformation(clientId);
+  const blockName = useSelect(select => select(blockEditorStore).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 = hasBlockSupport(blockName, '__experimentalToolbar', true);
+  const instanceId = useInstanceId(ListViewBlock);
+  const descriptionId = `list-view-block-select-button__${instanceId}`;
+  const blockPositionDescription = getBlockPositionDescription(position, siblingBlockCount, level);
+
+  let blockAriaLabel = __('Link');
+
+  if (blockInformation) {
+    blockAriaLabel = isLocked ? sprintf( // translators: %s: The title of the block. This string indicates a link to select the locked block.
+    __('%s link (locked)'), blockInformation.title) : sprintf( // translators: %s: The title of the block. This string indicates a link to select the block.
+    __('%s link'), blockInformation.title);
+  }
+
+  const settingsAriaLabel = blockInformation ? sprintf( // translators: %s: The title of the block.
+  __('Options for %s block'), blockInformation.title) : __('Options');
+  const editAriaLabel = blockInformation ? sprintf( // translators: %s: The title of the block.
+  __('Edit %s block'), blockInformation.title) : __('Edit');
+  const {
+    isTreeGridMounted,
+    expand,
+    collapse
+  } = useListViewContext();
+  const isEditable = block.name !== 'core/page-list-item';
+  const hasSiblings = siblingBlockCount > 0;
+  const hasRenderedMovers = showBlockMovers && hasSiblings;
+  const moverCellClassName = classnames('block-editor-list-view-block__mover-cell', {
+    'is-visible': isHovered || isSelected
+  });
+  const listViewBlockSettingsClassName = classnames('block-editor-list-view-block__menu-cell', {
+    'is-visible': isHovered || isFirstSelectedBlock
+  });
+  const listViewBlockEditClassName = classnames('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.
+
+  useEffect(() => {
+    if (!isTreeGridMounted && isSelected) {
+      cellRef.current.focus();
+    }
+  }, []);
+  const onMouseEnter = useCallback(() => {
+    setIsHovered(true);
+    toggleBlockHighlight(clientId, true);
+  }, [clientId, setIsHovered, toggleBlockHighlight]);
+  const onMouseLeave = useCallback(() => {
+    setIsHovered(false);
+    toggleBlockHighlight(clientId, false);
+  }, [clientId, setIsHovered, toggleBlockHighlight]);
+  const selectEditorBlock = useCallback(event => {
+    selectBlock(event, clientId);
+    event.preventDefault();
+  }, [clientId, selectBlock]);
+  const updateSelection = useCallback(newClientId => {
+    selectBlock(undefined, newClientId);
+  }, [selectBlock]);
+  const toggleExpanded = 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 = classnames({
+    '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 createElement(ListViewLeaf, {
+    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
+  }, createElement(TreeGridCell, {
+    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 createElement("div", {
+      className: "block-editor-list-view-block__contents-container"
+    }, createElement(ListViewBlockContents, {
+      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
+    }), createElement("div", {
+      className: "block-editor-list-view-block-select-button__description",
+      id: descriptionId
+    }, blockPositionDescription));
+  }), hasRenderedMovers && createElement(Fragment, null, createElement(TreeGridCell, {
+    className: moverCellClassName,
+    withoutGridItem: true
+  }, createElement(TreeGridItem, null, _ref3 => {
+    let {
+      ref,
+      tabIndex,
+      onFocus
+    } = _ref3;
+    return createElement(BlockMoverUpButton, {
+      orientation: "vertical",
+      clientIds: [clientId],
+      ref: ref,
+      tabIndex: tabIndex,
+      onFocus: onFocus
+    });
+  }), createElement(TreeGridItem, null, _ref4 => {
+    let {
+      ref,
+      tabIndex,
+      onFocus
+    } = _ref4;
+    return createElement(BlockMoverDownButton, {
+      orientation: "vertical",
+      clientIds: [clientId],
+      ref: ref,
+      tabIndex: tabIndex,
+      onFocus: onFocus
+    });
+  }))), showBlockActions && createElement(Fragment, null, isEditable && createElement(TreeGridCell, {
+    className: listViewBlockEditClassName,
+    "aria-selected": !!isSelected || forceSelectionContentLock
+  }, props => createElement(BlockEditButton, _extends({}, props, {
+    label: editAriaLabel,
+    clientId: clientId
+  }))), createElement(TreeGridCell, {
+    className: listViewBlockSettingsClassName,
+    "aria-selected": !!isSelected || forceSelectionContentLock,
+    colSpan: isEditable ? 1 : 2 // When an item is not editable then we don't output the cell for the edit button, so we need to adjust the colspan so that the HTML is valid.
+
+  }, _ref5 => {
+    let {
+      ref,
+      tabIndex,
+      onFocus
+    } = _ref5;
+    return createElement(BlockSettingsDropdown, {
+      clientIds: dropdownClientIds,
+      icon: moreVertical,
+      label: settingsAriaLabel,
+      toggleProps: {
+        ref,
+        className: 'block-editor-list-view-block__menu',
+        tabIndex,
+        onFocus
+      },
+      disableOpenOnArrowDown: true,
+      __experimentalSelectBlock: updateSelection
+    }, _ref6 => {
+      let {
+        onClose
+      } = _ref6;
+      return createElement(MenuItem, {
+        onClick: () => {
+          const newLink = createBlock('core/navigation-link');
+          const newSubmenu = createBlock('core/navigation-submenu', attributes, block.innerBlocks ? [...block.innerBlocks, newLink] : [newLink]);
+          replaceBlock(clientId, newSubmenu);
+          onClose();
+        }
+      }, __('Add a submenu item'));
+    });
+  })));
+}
+
+export default memo(ListViewBlock);
+//# sourceMappingURL=block.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/off-canvas-editor/block.js"],"names":["classnames","createBlock","hasBlockSupport","__experimentalTreeGridCell","TreeGridCell","__experimentalTreeGridItem","TreeGridItem","MenuItem","useInstanceId","moreVertical","useState","useRef","useEffect","useCallback","memo","useDispatch","useSelect","sprintf","__","ListViewLeaf","BlockMoverUpButton","BlockMoverDownButton","ListViewBlockContents","BlockSettingsDropdown","BlockEditButton","useListViewContext","getBlockPositionDescription","store","blockEditorStore","useBlockDisplayInformation","useBlockLock","ListViewBlock","block","isDragged","isSelected","isBranchSelected","selectBlock","position","level","rowCount","siblingBlockCount","showBlockMovers","path","isExpanded","selectedClientIds","preventAnnouncement","selectBlockInCanvas","cellRef","isHovered","setIsHovered","clientId","attributes","isLocked","isContentLocked","forceSelectionContentLock","select","hasSelectedInnerBlock","isFirstSelectedBlock","isLastSelectedBlock","length","replaceBlock","toggleBlockHighlight","blockInformation","blockName","getBlockName","showBlockActions","instanceId","descriptionId","blockPositionDescription","blockAriaLabel","title","settingsAriaLabel","editAriaLabel","isTreeGridMounted","expand","collapse","isEditable","name","hasSiblings","hasRenderedMovers","moverCellClassName","listViewBlockSettingsClassName","listViewBlockEditClassName","current","focus","onMouseEnter","onMouseLeave","selectEditorBlock","event","preventDefault","updateSelection","newClientId","undefined","toggleExpanded","stopPropagation","colSpan","classes","dropdownClientIds","includes","ref","tabIndex","onFocus","props","className","onClose","newLink","newSubmenu","innerBlocks"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { createBlock, hasBlockSupport } from '@wordpress/blocks';\nimport {\n\t__experimentalTreeGridCell as TreeGridCell,\n\t__experimentalTreeGridItem as TreeGridItem,\n\tMenuItem,\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 BlockEditButton from './block-edit-button';\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, attributes } = 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 { replaceBlock, toggleBlockHighlight } =\n\t\tuseDispatch( 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 editAriaLabel = blockInformation\n\t\t? sprintf(\n\t\t\t\t// translators: %s: The title of the block.\n\t\t\t\t__( 'Edit %s block' ),\n\t\t\t\tblockInformation.title\n\t\t  )\n\t\t: __( 'Edit' );\n\n\tconst { isTreeGridMounted, expand, collapse } = useListViewContext();\n\n\tconst isEditable = block.name !== 'core/page-list-item';\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\tconst listViewBlockEditClassName = 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<>\n\t\t\t\t\t{ isEditable && (\n\t\t\t\t\t\t<TreeGridCell\n\t\t\t\t\t\t\tclassName={ listViewBlockEditClassName }\n\t\t\t\t\t\t\taria-selected={\n\t\t\t\t\t\t\t\t!! isSelected || forceSelectionContentLock\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( props ) => (\n\t\t\t\t\t\t\t\t<BlockEditButton\n\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\tlabel={ editAriaLabel }\n\t\t\t\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</TreeGridCell>\n\t\t\t\t\t) }\n\t\t\t\t\t<TreeGridCell\n\t\t\t\t\t\tclassName={ listViewBlockSettingsClassName }\n\t\t\t\t\t\taria-selected={\n\t\t\t\t\t\t\t!! isSelected || forceSelectionContentLock\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolSpan={ isEditable ? 1 : 2 } // When an item is not editable then we don't output the cell for the edit button, so we need to adjust the colspan so that the HTML is valid.\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( { ref, tabIndex, onFocus } ) => (\n\t\t\t\t\t\t\t<BlockSettingsDropdown\n\t\t\t\t\t\t\t\tclientIds={ dropdownClientIds }\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={ settingsAriaLabel }\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tref,\n\t\t\t\t\t\t\t\t\tclassName:\n\t\t\t\t\t\t\t\t\t\t'block-editor-list-view-block__menu',\n\t\t\t\t\t\t\t\t\ttabIndex,\n\t\t\t\t\t\t\t\t\tonFocus,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tdisableOpenOnArrowDown\n\t\t\t\t\t\t\t\t__experimentalSelectBlock={ updateSelection }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tconst newLink = createBlock(\n\t\t\t\t\t\t\t\t\t\t\t\t'core/navigation-link'\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\tconst newSubmenu = createBlock(\n\t\t\t\t\t\t\t\t\t\t\t\t'core/navigation-submenu',\n\t\t\t\t\t\t\t\t\t\t\t\tattributes,\n\t\t\t\t\t\t\t\t\t\t\t\tblock.innerBlocks\n\t\t\t\t\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...block.innerBlocks,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnewLink,\n\t\t\t\t\t\t\t\t\t\t\t\t\t  ]\n\t\t\t\t\t\t\t\t\t\t\t\t\t: [ newLink ]\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\treplaceBlock(\n\t\t\t\t\t\t\t\t\t\t\t\tclientId,\n\t\t\t\t\t\t\t\t\t\t\t\tnewSubmenu\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Add a submenu item' ) }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</BlockSettingsDropdown>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</TreeGridCell>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</ListViewLeaf>\n\t);\n}\n\nexport default memo( ListViewBlock );\n"]}

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

@@ -0,0 +1,164 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { memo } from '@wordpress/element';
+import { AsyncModeProvider, useSelect } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+
+import ListViewBlock from './block';
+import { useListViewContext } from './context';
+import { isClientIdSelected } from './utils';
+import { store as blockEditorStore } from '../../store';
+/**
+ * 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;
+};
+
+const noop = () => {};
+
+function ListViewBranch(props) {
+  const {
+    blocks,
+    selectBlock = noop,
+    showBlockMovers,
+    selectedClientIds,
+    level = 1,
+    path = '',
+    isBranchSelected = false,
+    listPosition = 0,
+    fixedListWindow,
+    isExpanded,
+    parentId,
+    shouldShowInnerBlocks = true,
+    selectBlockInCanvas
+  } = props;
+  const isContentLocked = useSelect(select => {
+    return !!(parentId && select(blockEditorStore).getTemplateLock(parentId) === 'contentOnly');
+  }, [parentId]);
+  const {
+    expandedState,
+    draggedClientIds
+  } = useListViewContext();
+
+  if (isContentLocked) {
+    return null;
+  }
+
+  const filteredBlocks = blocks.filter(Boolean);
+  const blockCount = filteredBlocks.length;
+  let nextPosition = listPosition;
+  return createElement(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 = isClientIdSelected(clientId, selectedClientIds);
+    const isSelectedBranch = isBranchSelected || isSelected && hasNestedBlocks;
+    return createElement(AsyncModeProvider, {
+      key: clientId,
+      value: !isSelected
+    }, showBlock && createElement(ListViewBlock, {
+      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 && createElement("tr", null, createElement("td", {
+      className: "block-editor-list-view-placeholder"
+    })), hasNestedBlocks && shouldExpand && !isDragged && 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
+    }));
+  }));
+}
+
+export default memo(ListViewBranch);
+//# sourceMappingURL=branch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/off-canvas-editor/branch.js"],"names":["memo","AsyncModeProvider","useSelect","ListViewBlock","useListViewContext","isClientIdSelected","store","blockEditorStore","countBlocks","block","expandedState","draggedClientIds","isExpandedByDefault","isDragged","includes","clientId","isExpanded","innerBlocks","reduce","countReducer","count","length","noop","ListViewBranch","props","blocks","selectBlock","showBlockMovers","selectedClientIds","level","path","isBranchSelected","listPosition","fixedListWindow","parentId","shouldShowInnerBlocks","selectBlockInCanvas","isContentLocked","select","getTemplateLock","filteredBlocks","filter","Boolean","blockCount","nextPosition","map","index","itemInView","blockInView","position","updatedPath","hasNestedBlocks","shouldExpand","undefined","showBlock","isSelected","isSelectedBranch"],"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\nconst noop = () => {};\n\nfunction ListViewBranch( props ) {\n\tconst {\n\t\tblocks,\n\t\tselectBlock = noop,\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\nexport default memo( ListViewBranch );\n"]}

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

@@ -0,0 +1,7 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+export const ListViewContext = createContext({});
+export const useListViewContext = () => useContext(ListViewContext);
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/off-canvas-editor/context.js"],"names":["createContext","useContext","ListViewContext","useListViewContext"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,oBAA1C;AAEA,OAAO,MAAMC,eAAe,GAAGF,aAAa,CAAE,EAAF,CAArC;AAEP,OAAO,MAAMG,kBAAkB,GAAG,MAAMF,UAAU,CAAEC,eAAF,CAA3C","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-module/components/off-canvas-editor/drop-indicator.js

@@ -0,0 +1,111 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { Popover } from '@wordpress/components';
+import { useCallback, useMemo } from '@wordpress/element';
+export default function ListViewDropIndicator(_ref) {
+  let {
+    listViewRef,
+    blockDropTarget
+  } = _ref;
+  const {
+    rootClientId,
+    clientId,
+    dropPosition
+  } = blockDropTarget || {};
+  const [rootBlockElement, blockElement] = 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 = 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 = useMemo(() => {
+    if (!targetElement) {
+      return {};
+    }
+
+    const indent = getDropIndicatorIndent();
+    return {
+      width: targetElement.offsetWidth - indent
+    };
+  }, [getDropIndicatorIndent, targetElement]);
+  const popoverAnchor = 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 createElement(Popover, {
+    animate: false,
+    anchor: popoverAnchor,
+    focusOnMount: false,
+    className: "block-editor-list-view-drop-indicator",
+    variant: "unstyled"
+  }, createElement("div", {
+    style: style,
+    className: "block-editor-list-view-drop-indicator__line"
+  }));
+}
+//# sourceMappingURL=drop-indicator.js.map