@wordpress/block-editor/build/components/block-list/index.js

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BlockListItems = BlockListItems;
exports.IntersectionObserver = void 0;
exports.default = BlockList;

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

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

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

var _compose = require("@wordpress/compose");

var _block = _interopRequireDefault(require("./block"));

var _blockListAppender = _interopRequireDefault(require("../block-list-appender"));

var _useInBetweenInserter = require("./use-in-between-inserter");

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

var _preParsePatterns = require("../../utils/pre-parse-patterns");

var _layout = require("./layout");

var _backCompat = _interopRequireDefault(require("../block-tools/back-compat"));

var _blockSelectionClearer = require("../block-selection-clearer");

var _innerBlocks = require("../inner-blocks");

var _context = require("../block-edit/context");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const elementContext = (0, _element.createContext)();
const IntersectionObserver = (0, _element.createContext)();
exports.IntersectionObserver = IntersectionObserver;
const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();

function Root({
  className,
  ...settings
}) {
  const [element, setElement] = (0, _element.useState)();
  const isLargeViewport = (0, _compose.useViewportMatch)('medium');
  const {
    isOutlineMode,
    isFocusMode,
    editorMode
  } = (0, _data.useSelect)(select => {
    const {
      getSettings,
      __unstableGetEditorMode
    } = select(_store.store);
    const {
      outlineMode,
      focusMode
    } = getSettings();
    return {
      isOutlineMode: outlineMode,
      isFocusMode: focusMode,
      editorMode: __unstableGetEditorMode()
    };
  }, []);
  const registry = (0, _data.useRegistry)();
  const {
    setBlockVisibility
  } = (0, _data.useDispatch)(_store.store);
  const delayedBlockVisibilityUpdates = (0, _compose.useDebounce)((0, _element.useCallback)(() => {
    const updates = {};
    pendingBlockVisibilityUpdatesPerRegistry.get(registry).forEach(([id, isIntersecting]) => {
      updates[id] = isIntersecting;
    });
    setBlockVisibility(updates);
  }, [registry]), 300, {
    trailing: true
  });
  const intersectionObserver = (0, _element.useMemo)(() => {
    const {
      IntersectionObserver: Observer
    } = window;

    if (!Observer) {
      return;
    }

    return new Observer(entries => {
      if (!pendingBlockVisibilityUpdatesPerRegistry.get(registry)) {
        pendingBlockVisibilityUpdatesPerRegistry.set(registry, []);
      }

      for (const entry of entries) {
        const clientId = entry.target.getAttribute('data-block');
        pendingBlockVisibilityUpdatesPerRegistry.get(registry).push([clientId, entry.isIntersecting]);
      }

      delayedBlockVisibilityUpdates();
    });
  }, []);
  const innerBlocksProps = (0, _innerBlocks.useInnerBlocksProps)({
    ref: (0, _compose.useMergeRefs)([(0, _blockSelectionClearer.useBlockSelectionClearer)(), (0, _useInBetweenInserter.useInBetweenInserter)(), setElement]),
    className: (0, _classnames.default)('is-root-container', className, {
      'is-outline-mode': isOutlineMode,
      'is-focus-mode': isFocusMode && isLargeViewport,
      'is-navigate-mode': editorMode === 'navigation'
    })
  }, settings);
  return (0, _element.createElement)(elementContext.Provider, {
    value: element
  }, (0, _element.createElement)(IntersectionObserver.Provider, {
    value: intersectionObserver
  }, (0, _element.createElement)("div", innerBlocksProps)));
}

function BlockList(settings) {
  (0, _preParsePatterns.usePreParsePatterns)();
  return (0, _element.createElement)(_backCompat.default, null, (0, _element.createElement)(_context.BlockEditContextProvider, {
    value: _context.DEFAULT_BLOCK_EDIT_CONTEXT
  }, (0, _element.createElement)(Root, settings)));
}

BlockList.__unstableElementContext = elementContext;

function Items({
  placeholder,
  rootClientId,
  renderAppender,
  __experimentalAppenderTagName,
  __experimentalLayout: layout = _layout.defaultLayout
}) {
  const {
    order,
    selectedBlocks,
    visibleBlocks
  } = (0, _data.useSelect)(select => {
    const {
      getBlockOrder,
      getSelectedBlockClientIds,
      __unstableGetVisibleBlocks
    } = select(_store.store);
    return {
      order: getBlockOrder(rootClientId),
      selectedBlocks: getSelectedBlockClientIds(),
      visibleBlocks: __unstableGetVisibleBlocks()
    };
  }, [rootClientId]);
  return (0, _element.createElement)(_layout.LayoutProvider, {
    value: layout
  }, order.map(clientId => (0, _element.createElement)(_data.AsyncModeProvider, {
    key: clientId,
    value: // Only provide data asynchronously if the block is
    // not visible and not selected.
    !visibleBlocks.has(clientId) && !selectedBlocks.includes(clientId)
  }, (0, _element.createElement)(_block.default, {
    rootClientId: rootClientId,
    clientId: clientId
  }))), order.length < 1 && placeholder, (0, _element.createElement)(_blockListAppender.default, {
    tagName: __experimentalAppenderTagName,
    rootClientId: rootClientId,
    renderAppender: renderAppender
  }));
}

function BlockListItems(props) {
  // This component needs to always be synchronous as it's the one changing
  // the async mode depending on the block selection.
  return (0, _element.createElement)(_data.AsyncModeProvider, {
    value: false
  }, (0, _element.createElement)(Items, props));
}
//# sourceMappingURL=index.js.map