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

Generic block editor.

/**
 * WordPress dependencies
 */
import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element';

/**
 * Internal dependencies
 */
import BlockPopoverInbetween from '../block-popover/inbetween';
import ZoomOutModeInserterButton from './zoom-out-mode-inserter-button';
import { store as blockEditorStore } from '../../store';
import { unlock } from '../../lock-unlock';
import { jsx as _jsx } from "react/jsx-runtime";
function ZoomOutModeInserters() {
  const [isReady, setIsReady] = useState(false);
  const {
    hasSelection,
    blockOrder,
    setInserterIsOpened,
    sectionRootClientId,
    selectedBlockClientId,
    blockInsertionPoint,
    insertionPointVisible
  } = useSelect(select => {
    const {
      getSettings,
      getBlockOrder,
      getSelectionStart,
      getSelectedBlockClientId,
      getSectionRootClientId,
      getBlockInsertionPoint,
      isBlockInsertionPointVisible
    } = unlock(select(blockEditorStore));
    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
  } = unlock(useDispatch(blockEditorStore));

  // Defer the initial rendering to avoid the jumps due to the animation.
  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__*/_jsx(BlockPopoverInbetween, {
    previousClientId: previousClientId,
    nextClientId: nextClientId,
    children: /*#__PURE__*/_jsx(ZoomOutModeInserterButton, {
      onClick: () => {
        setInserterIsOpened({
          rootClientId: sectionRootClientId,
          insertionIndex,
          tab: 'patterns',
          category: 'all'
        });
        showInsertionPoint(sectionRootClientId, insertionIndex, {
          operation: 'insert'
        });
      }
    })
  });
}
export default ZoomOutModeInserters;
//# sourceMappingURL=zoom-out-mode-inserters.js.map