@wordpress/block-editor/build/components/block-tools/selected-block-popover.js

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = WrappedBlockPopover;

var _element = require("@wordpress/element");

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

var _classnames = _interopRequireDefault(require("classnames"));

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

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

var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");

var _blockSelectionButton = _interopRequireDefault(require("./block-selection-button"));

var _blockContextualToolbar = _interopRequireDefault(require("./block-contextual-toolbar"));

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

var _blockPopover = _interopRequireDefault(require("../block-popover"));

var _useBlockToolbarPopoverProps = _interopRequireDefault(require("./use-block-toolbar-popover-props"));

var _inserter = _interopRequireDefault(require("../inserter"));

var _useShouldContextualToolbarShow = require("../../utils/use-should-contextual-toolbar-show");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function selector(select) {
  const {
    __unstableGetEditorMode,
    hasMultiSelection,
    isTyping,
    getLastMultiSelectedBlockClientId
  } = select(_store.store);
  return {
    editorMode: __unstableGetEditorMode(),
    hasMultiSelection: hasMultiSelection(),
    isTyping: isTyping(),
    lastClientId: hasMultiSelection() ? getLastMultiSelectedBlockClientId() : null
  };
}

function SelectedBlockPopover({
  clientId,
  rootClientId,
  isEmptyDefaultBlock,
  capturingClientId,
  __unstablePopoverSlot,
  __unstableContentRef
}) {
  const {
    editorMode,
    hasMultiSelection,
    isTyping,
    lastClientId
  } = (0, _data.useSelect)(selector, []);
  const isInsertionPointVisible = (0, _data.useSelect)(select => {
    const {
      isBlockInsertionPointVisible,
      getBlockInsertionPoint,
      getBlockOrder
    } = select(_store.store);

    if (!isBlockInsertionPointVisible()) {
      return false;
    }

    const insertionPoint = getBlockInsertionPoint();
    const order = getBlockOrder(insertionPoint.rootClientId);
    return order[insertionPoint.index] === clientId;
  }, [clientId]);
  const isToolbarForced = (0, _element.useRef)(false);
  const {
    shouldShowContextualToolbar,
    canFocusHiddenToolbar
  } = (0, _useShouldContextualToolbarShow.useShouldContextualToolbarShow)();
  const {
    stopTyping
  } = (0, _data.useDispatch)(_store.store);
  const showEmptyBlockSideInserter = !isTyping && editorMode === 'edit' && isEmptyDefaultBlock;
  const shouldShowBreadcrumb = !hasMultiSelection && (editorMode === 'navigation' || editorMode === 'zoom-out');
  (0, _keyboardShortcuts.useShortcut)('core/block-editor/focus-toolbar', () => {
    isToolbarForced.current = true;
    stopTyping(true);
  }, {
    isDisabled: !canFocusHiddenToolbar
  });
  (0, _element.useEffect)(() => {
    isToolbarForced.current = false;
  }); // Stores the active toolbar item index so the block toolbar can return focus
  // to it when re-mounting.

  const initialToolbarItemIndexRef = (0, _element.useRef)();
  (0, _element.useEffect)(() => {
    // Resets the index whenever the active block changes so this is not
    // persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
    initialToolbarItemIndexRef.current = undefined;
  }, [clientId]);
  const popoverProps = (0, _useBlockToolbarPopoverProps.default)({
    contentElement: __unstableContentRef?.current,
    clientId
  });

  if (showEmptyBlockSideInserter) {
    return (0, _element.createElement)(_blockPopover.default, (0, _extends2.default)({
      clientId: capturingClientId || clientId,
      __unstableCoverTarget: true,
      bottomClientId: lastClientId,
      className: (0, _classnames.default)('block-editor-block-list__block-side-inserter-popover', {
        'is-insertion-point-visible': isInsertionPointVisible
      }),
      __unstablePopoverSlot: __unstablePopoverSlot,
      __unstableContentRef: __unstableContentRef,
      resize: false,
      shift: false
    }, popoverProps), (0, _element.createElement)("div", {
      className: "block-editor-block-list__empty-block-inserter"
    }, (0, _element.createElement)(_inserter.default, {
      position: "bottom right",
      rootClientId: rootClientId,
      clientId: clientId,
      __experimentalIsQuick: true
    })));
  }

  if (shouldShowBreadcrumb || shouldShowContextualToolbar) {
    return (0, _element.createElement)(_blockPopover.default, (0, _extends2.default)({
      clientId: capturingClientId || clientId,
      bottomClientId: lastClientId,
      className: (0, _classnames.default)('block-editor-block-list__block-popover', {
        'is-insertion-point-visible': isInsertionPointVisible
      }),
      __unstablePopoverSlot: __unstablePopoverSlot,
      __unstableContentRef: __unstableContentRef,
      resize: false
    }, popoverProps), shouldShowContextualToolbar && (0, _element.createElement)(_blockContextualToolbar.default // If the toolbar is being shown because of being forced
    // it should focus the toolbar right after the mount.
    , {
      focusOnMount: isToolbarForced.current,
      __experimentalInitialIndex: initialToolbarItemIndexRef.current,
      __experimentalOnIndexChange: index => {
        initialToolbarItemIndexRef.current = index;
      } // Resets the index whenever the active block changes so
      // this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
      ,
      key: clientId
    }), shouldShowBreadcrumb && (0, _element.createElement)(_blockSelectionButton.default, {
      clientId: clientId,
      rootClientId: rootClientId
    }));
  }

  return null;
}

function wrapperSelector(select) {
  const {
    getSelectedBlockClientId,
    getFirstMultiSelectedBlockClientId,
    getBlockRootClientId,
    getBlock,
    getBlockParents,
    __experimentalGetBlockListSettingsForBlocks
  } = select(_store.store);
  const clientId = getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();

  if (!clientId) {
    return;
  }

  const {
    name,
    attributes = {}
  } = getBlock(clientId) || {};
  const blockParentsClientIds = getBlockParents(clientId); // Get Block List Settings for all ancestors of the current Block clientId.

  const parentBlockListSettings = __experimentalGetBlockListSettingsForBlocks(blockParentsClientIds); // Get the clientId of the topmost parent with the capture toolbars setting.


  const capturingClientId = blockParentsClientIds.find(parentClientId => parentBlockListSettings[parentClientId]?.__experimentalCaptureToolbars);
  return {
    clientId,
    rootClientId: getBlockRootClientId(clientId),
    name,
    isEmptyDefaultBlock: name && (0, _blocks.isUnmodifiedDefaultBlock)({
      name,
      attributes
    }),
    capturingClientId
  };
}

function WrappedBlockPopover({
  __unstablePopoverSlot,
  __unstableContentRef
}) {
  const selected = (0, _data.useSelect)(wrapperSelector, []);

  if (!selected) {
    return null;
  }

  const {
    clientId,
    rootClientId,
    name,
    isEmptyDefaultBlock,
    capturingClientId
  } = selected;

  if (!name) {
    return null;
  }

  return (0, _element.createElement)(SelectedBlockPopover, {
    clientId: clientId,
    rootClientId: rootClientId,
    isEmptyDefaultBlock: isEmptyDefaultBlock,
    capturingClientId: capturingClientId,
    __unstablePopoverSlot: __unstablePopoverSlot,
    __unstableContentRef: __unstableContentRef
  });
}
//# sourceMappingURL=selected-block-popover.js.map