@wordpress/block-editor/build/components/block-navigation/block.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BlockNavigationBlock;

var _element = require("@wordpress/element");

var _classnames = _interopRequireDefault(require("classnames"));

var _components = require("@wordpress/components");

var _i18n = require("@wordpress/i18n");

var _icons = require("@wordpress/icons");

var _data = require("@wordpress/data");

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 _store = require("../../store");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function BlockNavigationBlock({
  block,
  isSelected,
  isBranchSelected,
  isLastOfSelectedBranch,
  onClick,
  position,
  level,
  rowCount,
  siblingBlockCount,
  showBlockMovers,
  path
}) {
  const cellRef = (0, _element.useRef)(null);
  const [isHovered, setIsHovered] = (0, _element.useState)(false);
  const {
    clientId
  } = block;
  const {
    isDragging,
    blockParents
  } = (0, _data.useSelect)(select => {
    const {
      isBlockBeingDragged,
      isAncestorBeingDragged,
      getBlockParents
    } = select(_store.store);
    return {
      isDragging: isBlockBeingDragged(clientId) || isAncestorBeingDragged(clientId),
      blockParents: getBlockParents(clientId)
    };
  }, [clientId]);
  const {
    selectBlock: selectEditorBlock,
    toggleBlockHighlight
  } = (0, _data.useDispatch)(_store.store);
  const hasSiblings = siblingBlockCount > 0;
  const hasRenderedMovers = showBlockMovers && hasSiblings;
  const moverCellClassName = (0, _classnames.default)('block-editor-block-navigation-block__mover-cell', {
    'is-visible': isHovered
  });
  const {
    __experimentalFeatures: withExperimentalFeatures,
    __experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
    isTreeGridMounted
  } = (0, _context.useBlockNavigationContext)();
  const blockNavigationBlockSettingsClassName = (0, _classnames.default)('block-editor-block-navigation-block__menu-cell', {
    'is-visible': isHovered
  }); // If BlockNavigation 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 (withExperimentalPersistentListViewFeatures && !isTreeGridMounted && isSelected) {
      cellRef.current.focus();
    }
  }, []); // If BlockNavigation has experimental features (such as drag and drop) enabled,
  // leave the focus handling as it was before, to avoid accidental regressions.

  (0, _element.useEffect)(() => {
    if (withExperimentalFeatures && isSelected) {
      cellRef.current.focus();
    }
  }, [withExperimentalFeatures, isSelected]);
  const highlightBlock = withExperimentalPersistentListViewFeatures ? toggleBlockHighlight : () => {};

  const onMouseEnter = () => {
    setIsHovered(true);
    highlightBlock(clientId, true);
  };

  const onMouseLeave = () => {
    setIsHovered(false);
    highlightBlock(clientId, false);
  };

  const classes = (0, _classnames.default)({
    'is-selected': isSelected,
    'is-branch-selected': withExperimentalPersistentListViewFeatures && isBranchSelected,
    'is-last-of-selected-branch': withExperimentalPersistentListViewFeatures && isLastOfSelectedBranch,
    'is-dragging': isDragging
  });
  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: `block-navigation-block-${clientId}`,
    "data-block": clientId
  }, (0, _element.createElement)(_components.__experimentalTreeGridCell, {
    className: "block-editor-block-navigation-block__contents-cell",
    colSpan: hasRenderedMovers ? undefined : 2,
    ref: cellRef
  }, ({
    ref,
    tabIndex,
    onFocus
  }) => (0, _element.createElement)("div", {
    className: "block-editor-block-navigation-block__contents-container"
  }, (0, _element.createElement)(_blockContents.default, {
    block: block,
    onClick: () => onClick(block.clientId),
    isSelected: isSelected,
    position: position,
    siblingBlockCount: siblingBlockCount,
    level: level,
    ref: ref,
    tabIndex: tabIndex,
    onFocus: onFocus
  }))), hasRenderedMovers && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalTreeGridCell, {
    className: moverCellClassName,
    withoutGridItem: true
  }, (0, _element.createElement)(_components.__experimentalTreeGridItem, null, ({
    ref,
    tabIndex,
    onFocus
  }) => (0, _element.createElement)(_button.BlockMoverUpButton, {
    orientation: "vertical",
    clientIds: [clientId],
    ref: ref,
    tabIndex: tabIndex,
    onFocus: onFocus
  })), (0, _element.createElement)(_components.__experimentalTreeGridItem, null, ({
    ref,
    tabIndex,
    onFocus
  }) => (0, _element.createElement)(_button.BlockMoverDownButton, {
    orientation: "vertical",
    clientIds: [clientId],
    ref: ref,
    tabIndex: tabIndex,
    onFocus: onFocus
  })))), withExperimentalFeatures && (0, _element.createElement)(_components.__experimentalTreeGridCell, {
    className: blockNavigationBlockSettingsClassName
  }, ({
    ref,
    tabIndex,
    onFocus
  }) => (0, _element.createElement)(_blockSettingsDropdown.default, {
    clientIds: [clientId],
    icon: _icons.moreVertical,
    toggleProps: {
      ref,
      tabIndex,
      onFocus
    },
    disableOpenOnArrowDown: true,
    __experimentalSelectBlock: onClick
  }, ({
    onClose
  }) => (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
    onClick: async () => {
      if (blockParents.length) {
        // If the block to select is inside a dropdown, we need to open the dropdown.
        // Otherwise focus won't transfer to the block.
        for (const parent of blockParents) {
          await selectEditorBlock(parent);
        }
      } else {
        // If clientId is already selected, it won't be focused (see block-wrapper.js)
        // This removes the selection first to ensure the focus will always switch.
        await selectEditorBlock(null);
      }

      await selectEditorBlock(clientId);
      onClose();
    }
  }, (0, _i18n.__)('Go to block'))))));
}
//# sourceMappingURL=block.js.map