@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.default = BlockList;
exports.BlockListItems = BlockListItems;

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 _useBlockDropZone = _interopRequireDefault(require("../use-block-drop-zone"));

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

var _blockTools = _interopRequireDefault(require("../block-tools"));

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

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

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function Root({
  className,
  children
}) {
  const isLargeViewport = (0, _compose.useViewportMatch)('medium');
  const {
    isTyping,
    isOutlineMode,
    isFocusMode,
    isNavigationMode
  } = (0, _data.useSelect)(select => {
    const {
      isTyping: _isTyping,
      getSettings,
      isNavigationMode: _isNavigationMode
    } = select(_store.store);
    const {
      outlineMode,
      focusMode
    } = getSettings();
    return {
      isTyping: _isTyping(),
      isOutlineMode: outlineMode,
      isFocusMode: focusMode,
      isNavigationMode: _isNavigationMode()
    };
  }, []);
  return (0, _element.createElement)("div", {
    ref: (0, _compose.useMergeRefs)([(0, _useBlockDropZone.default)(), (0, _useInBetweenInserter.useInBetweenInserter)()]),
    className: (0, _classnames.default)('block-editor-block-list__layout is-root-container', className, {
      'is-typing': isTyping,
      'is-outline-mode': isOutlineMode,
      'is-focus-mode': isFocusMode && isLargeViewport,
      'is-navigate-mode': isNavigationMode
    })
  }, children);
}

function BlockList({
  className,
  __experimentalLayout
}) {
  (0, _preParsePatterns.usePreParsePatterns)();
  return (0, _element.createElement)(_blockTools.default, null, (0, _element.createElement)(Root, {
    className: className
  }, (0, _element.createElement)(BlockListItems, {
    __experimentalLayout: __experimentalLayout
  })));
}

function Items({
  placeholder,
  rootClientId,
  renderAppender,
  __experimentalAppenderTagName,
  __experimentalLayout: layout = _layout.defaultLayout
}) {
  function selector(select) {
    const {
      getBlockOrder,
      getSelectedBlockClientId,
      getMultiSelectedBlockClientIds,
      hasMultiSelection
    } = select(_store.store);
    return {
      blockClientIds: getBlockOrder(rootClientId),
      selectedBlockClientId: getSelectedBlockClientId(),
      multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
      hasMultiSelection: hasMultiSelection()
    };
  }

  const {
    blockClientIds,
    selectedBlockClientId,
    multiSelectedBlockClientIds,
    hasMultiSelection
  } = (0, _data.useSelect)(selector, [rootClientId]);
  return (0, _element.createElement)(_layout.LayoutProvider, {
    value: layout
  }, blockClientIds.map((clientId, index) => {
    const isBlockInSelection = hasMultiSelection ? multiSelectedBlockClientIds.includes(clientId) : selectedBlockClientId === clientId;
    return (0, _element.createElement)(_data.AsyncModeProvider, {
      key: clientId,
      value: !isBlockInSelection
    }, (0, _element.createElement)(_block.default, {
      rootClientId: rootClientId,
      clientId: clientId // This prop is explicitely computed and passed down
      // to avoid being impacted by the async mode
      // otherwise there might be a small delay to trigger the animation.
      ,
      index: index
    }));
  }), blockClientIds.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