@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 _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _element = require("@wordpress/element");
var _blockTitle = _interopRequireDefault(require("../block-title"));
var _store = require("../../store");
var _lockUnlock = require("../../lock-unlock");
var _useBlockRefs = require("../block-list/use-block-props/use-block-refs");
var _getEditorRegion = _interopRequireDefault(require("../../utils/get-editor-region"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * 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 {Element}                   Block Breadcrumb.
 */function BlockBreadcrumb({
  rootLabelText
}) {
  const {
    selectBlock,
    clearSelectedBlock
  } = (0, _data.useDispatch)(_store.store);
  const {
    clientId,
    parents,
    hasSelection
  } = (0, _data.useSelect)(select => {
    const {
      getSelectionStart,
      getSelectedBlockClientId,
      getEnabledBlockParents
    } = (0, _lockUnlock.unlock)(select(_store.store));
    const selectedBlockClientId = getSelectedBlockClientId();
    return {
      parents: getEnabledBlockParents(selectedBlockClientId),
      clientId: selectedBlockClientId,
      hasSelection: !!getSelectionStart().clientId
    };
  }, []);
  const rootLabel = rootLabelText || (0, _i18n.__)('Document');

  // We don't care about this specific ref, but this is a way
  // to get a ref within the editor canvas so we can focus it later.
  const blockRef = (0, _element.useRef)();
  (0, _useBlockRefs.useBlockElementRef)(clientId, blockRef);

  /*
   * 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 /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
    className: "block-editor-block-breadcrumb",
    role: "list",
    "aria-label": (0, _i18n.__)('Block breadcrumb'),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
      className: !hasSelection ? 'block-editor-block-breadcrumb__current' : undefined,
      "aria-current": !hasSelection ? 'true' : undefined,
      children: [hasSelection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
        size: "small",
        className: "block-editor-block-breadcrumb__button",
        onClick: () => {
          // Find the block editor wrapper for the selected block
          const blockEditor = blockRef.current?.closest('.editor-styles-wrapper');
          clearSelectedBlock();
          (0, _getEditorRegion.default)(blockEditor)?.focus();
        },
        children: rootLabel
      }), !hasSelection && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        children: rootLabel
      }), !!clientId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
        icon: _icons.chevronRightSmall,
        className: "block-editor-block-breadcrumb__separator"
      })]
    }), parents.map(parentClientId => /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
        size: "small",
        className: "block-editor-block-breadcrumb__button",
        onClick: () => selectBlock(parentClientId),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockTitle.default, {
          clientId: parentClientId,
          maximumLength: 35
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
        icon: _icons.chevronRightSmall,
        className: "block-editor-block-breadcrumb__separator"
      })]
    }, parentClientId)), !!clientId && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
      className: "block-editor-block-breadcrumb__current",
      "aria-current": "true",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockTitle.default, {
        clientId: clientId,
        maximumLength: 35
      })
    })]
  })
  /* eslint-enable jsx-a11y/no-redundant-roles */;
}
var _default = exports.default = BlockBreadcrumb;
//# sourceMappingURL=index.js.map