@wordpress/block-editor/build/components/block-parent-selector/index.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BlockParentSelector;
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _useBlockDisplayInformation = _interopRequireDefault(require("../use-block-display-information"));
var _blockIcon = _interopRequireDefault(require("../block-icon"));
var _utils = require("../block-toolbar/utils");
var _store = require("../../store");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Block parent selector component, displaying the hierarchy of the
 * current block selection as a single icon to "go up" a level.
 *
 * @return {Component} Parent block selector.
 */function BlockParentSelector() {
  const {
    selectBlock
  } = (0, _data.useDispatch)(_store.store);
  const {
    parentClientId
  } = (0, _data.useSelect)(select => {
    const {
      getBlockParents,
      getSelectedBlockClientId,
      getParentSectionBlock
    } = (0, _lockUnlock.unlock)(select(_store.store));
    const selectedBlockClientId = getSelectedBlockClientId();
    const parentSection = getParentSectionBlock(selectedBlockClientId);
    const parents = getBlockParents(selectedBlockClientId);
    const _parentClientId = parentSection !== null && parentSection !== void 0 ? parentSection : parents[parents.length - 1];
    return {
      parentClientId: _parentClientId
    };
  }, []);
  const blockInformation = (0, _useBlockDisplayInformation.default)(parentClientId);

  // Allows highlighting the parent block outline when focusing or hovering
  // the parent block selector within the child.
  const nodeRef = (0, _element.useRef)();
  const showHoveredOrFocusedGestures = (0, _utils.useShowHoveredOrFocusedGestures)({
    ref: nodeRef,
    highlightParent: true
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "block-editor-block-parent-selector",
    ref: nodeRef,
    ...showHoveredOrFocusedGestures,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
      className: "block-editor-block-parent-selector__button",
      onClick: () => selectBlock(parentClientId),
      label: (0, _i18n.sprintf)(/* translators: %s: Name of the block's parent. */
      (0, _i18n.__)('Select parent block: %s'), blockInformation?.title),
      showTooltip: true,
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockIcon.default, {
        icon: blockInformation?.icon
      })
    })
  }, parentClientId);
}
//# sourceMappingURL=index.js.map