@wordpress/block-editor/build/components/block-tools/zoom-out-mode-inserters.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _inbetween = _interopRequireDefault(require("../block-popover/inbetween"));
var _zoomOutModeInserterButton = _interopRequireDefault(require("./zoom-out-mode-inserter-button"));
var _store = require("../../store");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function ZoomOutModeInserters() {
  const [isReady, setIsReady] = (0, _element.useState)(false);
  const {
    hasSelection,
    blockOrder,
    setInserterIsOpened,
    sectionRootClientId,
    selectedBlockClientId,
    blockInsertionPoint,
    insertionPointVisible
  } = (0, _data.useSelect)(select => {
    const {
      getSettings,
      getBlockOrder,
      getSelectionStart,
      getSelectedBlockClientId,
      getSectionRootClientId,
      getBlockInsertionPoint,
      isBlockInsertionPointVisible
    } = (0, _lockUnlock.unlock)(select(_store.store));
    const root = getSectionRootClientId();
    return {
      hasSelection: !!getSelectionStart().clientId,
      blockOrder: getBlockOrder(root),
      sectionRootClientId: root,
      setInserterIsOpened: getSettings().__experimentalSetIsInserterOpened,
      selectedBlockClientId: getSelectedBlockClientId(),
      blockInsertionPoint: getBlockInsertionPoint(),
      insertionPointVisible: isBlockInsertionPointVisible()
    };
  }, []);

  // eslint-disable-next-line @wordpress/no-unused-vars-before-return
  const {
    showInsertionPoint
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));

  // Defer the initial rendering to avoid the jumps due to the animation.
  (0, _element.useEffect)(() => {
    const timeout = setTimeout(() => {
      setIsReady(true);
    }, 500);
    return () => {
      clearTimeout(timeout);
    };
  }, []);
  if (!isReady || !hasSelection) {
    return null;
  }
  const previousClientId = selectedBlockClientId;
  const index = blockOrder.findIndex(clientId => selectedBlockClientId === clientId);
  const insertionIndex = index + 1;
  const nextClientId = blockOrder[insertionIndex];

  // If the block insertion point is visible, and the insertion
  // Indices match then we don't need to render the inserter.
  if (insertionPointVisible && blockInsertionPoint?.index === insertionIndex) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_inbetween.default, {
    previousClientId: previousClientId,
    nextClientId: nextClientId,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_zoomOutModeInserterButton.default, {
      onClick: () => {
        setInserterIsOpened({
          rootClientId: sectionRootClientId,
          insertionIndex,
          tab: 'patterns',
          category: 'all'
        });
        showInsertionPoint(sectionRootClientId, insertionIndex, {
          operation: 'insert'
        });
      }
    })
  });
}
var _default = exports.default = ZoomOutModeInserters;
//# sourceMappingURL=zoom-out-mode-inserters.js.map