@wordpress/block-editor/build/components/block-breadcrumb/index.js

Generic block editor.

"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 _components = require("@wordpress/components");

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

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

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

var _blockTitle = _interopRequireDefault(require("../block-title"));

var _store = require("../../store");

var _lockUnlock = require("../../lock-unlock");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
 *
 * @param {Object} props               Component props.
 * @param {string} props.rootLabelText Translated label for the root element of the breadcrumb trail.
 * @return {WPElement}                 Block Breadcrumb.
 */
function BlockBreadcrumb({
  rootLabelText
}) {
  const {
    selectBlock,
    clearSelectedBlock
  } = (0, _data.useDispatch)(_store.store);
  const {
    clientId,
    parents,
    hasSelection
  } = (0, _data.useSelect)(select => {
    const {
      getSelectionStart,
      getSelectedBlockClientId,
      getBlockParents,
      getBlockEditingMode
    } = (0, _lockUnlock.unlock)(select(_store.store));
    const selectedBlockClientId = getSelectedBlockClientId();
    return {
      parents: getBlockParents(selectedBlockClientId).filter(parentClientId => getBlockEditingMode(parentClientId) !== 'disabled'),
      clientId: selectedBlockClientId,
      hasSelection: !!getSelectionStart().clientId
    };
  }, []);
  const rootLabel = rootLabelText || (0, _i18n.__)('Document');
  /*
   * Disable reason: The `list` ARIA role is redundant but
   * Safari+VoiceOver won't announce the list otherwise.
   */

  /* eslint-disable jsx-a11y/no-redundant-roles */

  return (0, _element.createElement)("ul", {
    className: "block-editor-block-breadcrumb",
    role: "list",
    "aria-label": (0, _i18n.__)('Block breadcrumb')
  }, (0, _element.createElement)("li", {
    className: !hasSelection ? 'block-editor-block-breadcrumb__current' : undefined,
    "aria-current": !hasSelection ? 'true' : undefined
  }, hasSelection && (0, _element.createElement)(_components.Button, {
    className: "block-editor-block-breadcrumb__button",
    variant: "tertiary",
    onClick: clearSelectedBlock
  }, rootLabel), !hasSelection && rootLabel, !!clientId && (0, _element.createElement)(_icons.Icon, {
    icon: _icons.chevronRightSmall,
    className: "block-editor-block-breadcrumb__separator"
  })), parents.map(parentClientId => (0, _element.createElement)("li", {
    key: parentClientId
  }, (0, _element.createElement)(_components.Button, {
    className: "block-editor-block-breadcrumb__button",
    variant: "tertiary",
    onClick: () => selectBlock(parentClientId)
  }, (0, _element.createElement)(_blockTitle.default, {
    clientId: parentClientId,
    maximumLength: 35
  })), (0, _element.createElement)(_icons.Icon, {
    icon: _icons.chevronRightSmall,
    className: "block-editor-block-breadcrumb__separator"
  }))), !!clientId && (0, _element.createElement)("li", {
    className: "block-editor-block-breadcrumb__current",
    "aria-current": "true"
  }, (0, _element.createElement)(_blockTitle.default, {
    clientId: clientId,
    maximumLength: 35
  })))
  /* eslint-enable jsx-a11y/no-redundant-roles */
  ;
}

var _default = BlockBreadcrumb;
exports.default = _default;
//# sourceMappingURL=index.js.map