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

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

var _blocks = require("@wordpress/blocks");

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

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

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

var _useBlockDisplayInformation = _interopRequireDefault(require("../use-block-display-information"));

var _blockIcon = _interopRequireDefault(require("../block-icon"));

var _utils = require("../block-toolbar/utils");

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

/**
 * 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 {WPComponent} Parent block selector.
 */
function BlockParentSelector() {
  const {
    selectBlock,
    toggleBlockHighlight
  } = (0, _data.useDispatch)(_store.store);
  const {
    firstParentClientId,
    shouldHide,
    isDistractionFree
  } = (0, _data.useSelect)(select => {
    const {
      getBlockName,
      getBlockParents,
      getSelectedBlockClientId,
      getSettings
    } = select(_store.store);
    const {
      hasBlockSupport
    } = select(_blocks.store);
    const selectedBlockClientId = getSelectedBlockClientId();
    const parents = getBlockParents(selectedBlockClientId);
    const _firstParentClientId = parents[parents.length - 1];
    const parentBlockName = getBlockName(_firstParentClientId);

    const _parentBlockType = (0, _blocks.getBlockType)(parentBlockName);

    const settings = getSettings();
    return {
      firstParentClientId: _firstParentClientId,
      shouldHide: !hasBlockSupport(_parentBlockType, '__experimentalParentSelector', true),
      isDistractionFree: settings.isDistractionFree
    };
  }, []);
  const blockInformation = (0, _useBlockDisplayInformation.default)(firstParentClientId); // Allows highlighting the parent block outline when focusing or hovering
  // the parent block selector within the child.

  const nodeRef = (0, _element.useRef)();
  const {
    gestures: showMoversGestures
  } = (0, _utils.useShowMoversGestures)({
    ref: nodeRef,

    onChange(isFocused) {
      if (isFocused && isDistractionFree) {
        return;
      }

      toggleBlockHighlight(firstParentClientId, isFocused);
    }

  });

  if (shouldHide || firstParentClientId === undefined) {
    return null;
  }

  return (0, _element.createElement)("div", (0, _extends2.default)({
    className: "block-editor-block-parent-selector",
    key: firstParentClientId,
    ref: nodeRef
  }, showMoversGestures), (0, _element.createElement)(_components.ToolbarButton, {
    className: "block-editor-block-parent-selector__button",
    onClick: () => selectBlock(firstParentClientId),
    label: (0, _i18n.sprintf)(
    /* translators: %s: Name of the block's parent. */
    (0, _i18n.__)('Select %s'), blockInformation?.title),
    showTooltip: true,
    icon: (0, _element.createElement)(_blockIcon.default, {
      icon: blockInformation?.icon
    })
  }));
}
//# sourceMappingURL=index.js.map