@wordpress/block-editor/build-module/components/inserter/index.js

Generic block editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import { size } from 'lodash';
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { speak } from '@wordpress/a11y';
import { __, _x, sprintf } from '@wordpress/i18n';
import { Dropdown, Button } from '@wordpress/components';
import { Component } from '@wordpress/element';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose, ifCondition } from '@wordpress/compose';
import { createBlock, store as blocksStore } from '@wordpress/blocks';
import { plus } from '@wordpress/icons';
/**
 * Internal dependencies
 */

import InserterMenu from './menu';
import QuickInserter from './quick-inserter';
import { store as blockEditorStore } from '../../store';

const defaultRenderToggle = ({
  onToggle,
  disabled,
  isOpen,
  blockTitle,
  hasSingleBlockType,
  toggleProps = {}
}) => {
  let label;

  if (hasSingleBlockType) {
    label = sprintf( // translators: %s: the name of the block when there is only one
    _x('Add %s', 'directly add the only allowed block'), blockTitle);
  } else {
    label = _x('Add block', 'Generic label for block inserter button');
  }

  const {
    onClick,
    ...rest
  } = toggleProps; // Handle both onClick functions from the toggle and the parent component

  function handleClick(event) {
    if (onToggle) {
      onToggle(event);
    }

    if (onClick) {
      onClick(event);
    }
  }

  return createElement(Button, _extends({
    icon: plus,
    label: label,
    tooltipPosition: "bottom",
    onClick: handleClick,
    className: "block-editor-inserter__toggle",
    "aria-haspopup": !hasSingleBlockType ? 'true' : false,
    "aria-expanded": !hasSingleBlockType ? isOpen : false,
    disabled: disabled
  }, rest));
};

class Inserter extends Component {
  constructor() {
    super(...arguments);
    this.onToggle = this.onToggle.bind(this);
    this.renderToggle = this.renderToggle.bind(this);
    this.renderContent = this.renderContent.bind(this);
  }

  onToggle(isOpen) {
    const {
      onToggle
    } = this.props; // Surface toggle callback to parent component

    if (onToggle) {
      onToggle(isOpen);
    }
  }
  /**
   * Render callback to display Dropdown toggle element.
   *
   * @param {Object}   options
   * @param {Function} options.onToggle Callback to invoke when toggle is
   *                                    pressed.
   * @param {boolean}  options.isOpen   Whether dropdown is currently open.
   *
   * @return {WPElement} Dropdown toggle element.
   */


  renderToggle({
    onToggle,
    isOpen
  }) {
    const {
      disabled,
      blockTitle,
      hasSingleBlockType,
      toggleProps,
      hasItems,
      renderToggle = defaultRenderToggle
    } = this.props;
    return renderToggle({
      onToggle,
      isOpen,
      disabled: disabled || !hasItems,
      blockTitle,
      hasSingleBlockType,
      toggleProps
    });
  }
  /**
   * Render callback to display Dropdown content element.
   *
   * @param {Object}   options
   * @param {Function} options.onClose Callback to invoke when dropdown is
   *                                   closed.
   *
   * @return {WPElement} Dropdown content element.
   */


  renderContent({
    onClose
  }) {
    const {
      rootClientId,
      clientId,
      isAppender,
      showInserterHelpPanel,
      // This prop is experimental to give some time for the quick inserter to mature
      // Feel free to make them stable after a few releases.
      __experimentalIsQuick: isQuick
    } = this.props;

    if (isQuick) {
      return createElement(QuickInserter, {
        onSelect: () => {
          onClose();
        },
        rootClientId: rootClientId,
        clientId: clientId,
        isAppender: isAppender
      });
    }

    return createElement(InserterMenu, {
      onSelect: () => {
        onClose();
      },
      rootClientId: rootClientId,
      clientId: clientId,
      isAppender: isAppender,
      showInserterHelpPanel: showInserterHelpPanel
    });
  }

  render() {
    const {
      position,
      hasSingleBlockType,
      insertOnlyAllowedBlock,
      __experimentalIsQuick: isQuick,
      onSelectOrClose
    } = this.props;

    if (hasSingleBlockType) {
      return this.renderToggle({
        onToggle: insertOnlyAllowedBlock
      });
    }

    return createElement(Dropdown, {
      className: "block-editor-inserter",
      contentClassName: classnames('block-editor-inserter__popover', {
        'is-quick': isQuick
      }),
      position: position,
      onToggle: this.onToggle,
      expandOnMobile: true,
      headerTitle: __('Add a block'),
      renderToggle: this.renderToggle,
      renderContent: this.renderContent,
      onClose: onSelectOrClose
    });
  }

}

export default compose([withSelect((select, {
  clientId,
  rootClientId
}) => {
  const {
    getBlockRootClientId,
    hasInserterItems,
    __experimentalGetAllowedBlocks
  } = select(blockEditorStore);
  const {
    getBlockVariations
  } = select(blocksStore);
  rootClientId = rootClientId || getBlockRootClientId(clientId) || undefined;

  const allowedBlocks = __experimentalGetAllowedBlocks(rootClientId);

  const hasSingleBlockType = size(allowedBlocks) === 1 && size(getBlockVariations(allowedBlocks[0].name, 'inserter')) === 0;
  let allowedBlockType = false;

  if (hasSingleBlockType) {
    allowedBlockType = allowedBlocks[0];
  }

  return {
    hasItems: hasInserterItems(rootClientId),
    hasSingleBlockType,
    blockTitle: allowedBlockType ? allowedBlockType.title : '',
    allowedBlockType,
    rootClientId
  };
}), withDispatch((dispatch, ownProps, {
  select
}) => {
  return {
    insertOnlyAllowedBlock() {
      const {
        rootClientId,
        clientId,
        isAppender,
        hasSingleBlockType,
        allowedBlockType,
        onSelectOrClose
      } = ownProps;

      if (!hasSingleBlockType) {
        return;
      }

      function getInsertionIndex() {
        const {
          getBlockIndex,
          getBlockSelectionEnd,
          getBlockOrder,
          getBlockRootClientId
        } = select(blockEditorStore); // If the clientId is defined, we insert at the position of the block.

        if (clientId) {
          return getBlockIndex(clientId, rootClientId);
        } // If there a selected block, we insert after the selected block.


        const end = getBlockSelectionEnd();

        if (!isAppender && end && getBlockRootClientId(end) === rootClientId) {
          return getBlockIndex(end, rootClientId) + 1;
        } // Otherwise, we insert at the end of the current rootClientId


        return getBlockOrder(rootClientId).length;
      }

      const {
        insertBlock
      } = dispatch(blockEditorStore);
      const blockToInsert = createBlock(allowedBlockType.name);
      insertBlock(blockToInsert, getInsertionIndex(), rootClientId);

      if (onSelectOrClose) {
        onSelectOrClose();
      }

      const message = sprintf( // translators: %s: the name of the block that has been added
      __('%s block added'), allowedBlockType.title);
      speak(message);
    }

  };
}), // The global inserter should always be visible, we are using ( ! isAppender && ! rootClientId && ! clientId ) as
// a way to detect the global Inserter.
ifCondition(({
  hasItems,
  isAppender,
  rootClientId,
  clientId
}) => hasItems || !isAppender && !rootClientId && !clientId)])(Inserter);
//# sourceMappingURL=index.js.map