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

Generic block editor.

"use strict";

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

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

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

var _lodash = require("lodash");

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

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

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

var _defaultBlockAppender = _interopRequireDefault(require("../default-block-appender"));

var _buttonBlockAppender = _interopRequireDefault(require("../button-block-appender"));

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
// A Context to store the map of the appender map.
const AppenderNodesContext = (0, _element.createContext)();
exports.AppenderNodesContext = AppenderNodesContext;

function stopPropagation(event) {
  event.stopPropagation();
}

function BlockListAppender({
  blockClientIds,
  rootClientId,
  canInsertDefaultBlock,
  isLocked,
  renderAppender: CustomAppender,
  className,
  selectedBlockClientId,
  tagName: TagName = 'div'
}) {
  if (isLocked || CustomAppender === false) {
    return null;
  }

  let appender;

  if (CustomAppender) {
    // Prefer custom render prop if provided.
    appender = (0, _element.createElement)(CustomAppender, null);
  } else {
    const isDocumentAppender = !rootClientId;
    const isParentSelected = selectedBlockClientId === rootClientId;
    const isAnotherDefaultAppenderAlreadyDisplayed = selectedBlockClientId && !blockClientIds.includes(selectedBlockClientId);

    if (!isDocumentAppender && !isParentSelected && (!selectedBlockClientId || isAnotherDefaultAppenderAlreadyDisplayed)) {
      return null;
    }

    if (canInsertDefaultBlock) {
      // Render the default block appender when renderAppender has not been
      // provided and the context supports use of the default appender.
      appender = (0, _element.createElement)(_defaultBlockAppender.default, {
        rootClientId: rootClientId,
        lastBlockClientId: (0, _lodash.last)(blockClientIds)
      });
    } else {
      // Fallback in the case no renderAppender has been provided and the
      // default block can't be inserted.
      appender = (0, _element.createElement)(_buttonBlockAppender.default, {
        rootClientId: rootClientId,
        className: "block-list-appender__toggle"
      });
    }
  }

  return (0, _element.createElement)(TagName // A `tabIndex` is used on the wrapping `div` element in order to
  // force a focus event to occur when an appender `button` element
  // is clicked. In some browsers (Firefox, Safari), button clicks do
  // not emit a focus event, which could cause this event to propagate
  // unexpectedly. The `tabIndex` ensures that the interaction is
  // captured as a focus, without also adding an extra tab stop.
  //
  // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
  , {
    tabIndex: -1 // Prevent the block from being selected when the appender is
    // clicked.
    ,
    onFocus: stopPropagation,
    className: (0, _classnames.default)('block-list-appender', 'wp-block', className)
  }, appender);
}

var _default = (0, _data.withSelect)((select, {
  rootClientId
}) => {
  const {
    getBlockOrder,
    canInsertBlockType,
    getTemplateLock,
    getSelectedBlockClientId
  } = select(_store.store);
  return {
    isLocked: !!getTemplateLock(rootClientId),
    blockClientIds: getBlockOrder(rootClientId),
    canInsertDefaultBlock: canInsertBlockType((0, _blocks.getDefaultBlockName)(), rootClientId),
    selectedBlockClientId: getSelectedBlockClientId()
  };
})(BlockListAppender);

exports.default = _default;
//# sourceMappingURL=index.js.map