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

Generic block editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@gechiui/element";

/**
 * GeChiUI dependencies
 */
import { getBlockType, store as blocksStore } from '@gechiui/blocks';
import { ToolbarButton } from '@gechiui/components';
import { useSelect, useDispatch } from '@gechiui/data';
import { __, sprintf } from '@gechiui/i18n';
import { useRef } from '@gechiui/element';
/**
 * Internal dependencies
 */

import useBlockDisplayInformation from '../use-block-display-information';
import BlockIcon from '../block-icon';
import { useShowMoversGestures } from '../block-toolbar/utils';
import { store as blockEditorStore } from '../../store';
/**
 * Block parent selector component, displaying the hierarchy of the
 * current block selection as a single icon to "go up" a level.
 *
 * @return {GCComponent} Parent block selector.
 */

export default function BlockParentSelector() {
  const {
    selectBlock,
    toggleBlockHighlight
  } = useDispatch(blockEditorStore);
  const {
    firstParentClientId,
    shouldHide,
    hasReducedUI
  } = useSelect(select => {
    const {
      getBlockName,
      getBlockParents,
      getSelectedBlockClientId,
      getSettings
    } = select(blockEditorStore);
    const {
      hasBlockSupport
    } = select(blocksStore);
    const selectedBlockClientId = getSelectedBlockClientId();
    const parents = getBlockParents(selectedBlockClientId);
    const _firstParentClientId = parents[parents.length - 1];
    const parentBlockName = getBlockName(_firstParentClientId);

    const _parentBlockType = getBlockType(parentBlockName);

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

  const nodeRef = useRef();
  const {
    gestures: showMoversGestures
  } = useShowMoversGestures({
    ref: nodeRef,

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

      toggleBlockHighlight(firstParentClientId, isFocused);
    }

  });

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

  return createElement("div", _extends({
    className: "block-editor-block-parent-selector",
    key: firstParentClientId,
    ref: nodeRef
  }, showMoversGestures), createElement(ToolbarButton, {
    className: "block-editor-block-parent-selector__button",
    onClick: () => selectBlock(firstParentClientId),
    label: sprintf(
    /* translators: %s: Name of the block's parent. */
    __('选择%s'), blockInformation.title),
    showTooltip: true,
    icon: createElement(BlockIcon, {
      icon: blockInformation.icon
    })
  }));
}
//# sourceMappingURL=index.js.map