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

Generic block editor.

import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import { last } from 'lodash';
import classnames from 'classnames';
/**
 * GeChiUI dependencies
 */

import { withSelect } from '@gechiui/data';
import { getDefaultBlockName } from '@gechiui/blocks';
/**
 * Internal dependencies
 */

import DefaultBlockAppender from '../default-block-appender';
import ButtonBlockAppender from '../button-block-appender';
import { store as blockEditorStore } from '../../store';

function BlockListAppender(_ref) {
  let {
    blockClientIds,
    rootClientId,
    canInsertDefaultBlock,
    isLocked,
    renderAppender: CustomAppender,
    className,
    selectedBlockClientId,
    tagName: TagName = 'div'
  } = _ref;

  if (isLocked || CustomAppender === false) {
    return null;
  }

  let appender;

  if (CustomAppender) {
    // Prefer custom render prop if provided.
    appender = 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 = createElement(DefaultBlockAppender, {
        rootClientId: rootClientId,
        lastBlockClientId: last(blockClientIds)
      });
    } else {
      // Fallback in the case no renderAppender has been provided and the
      // default block can't be inserted.
      appender = createElement(ButtonBlockAppender, {
        rootClientId: rootClientId,
        className: "block-list-appender__toggle"
      });
    }
  }

  return 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,
    className: classnames('block-list-appender gc-block', className) // The appender exists to let you add the first Paragraph before
    // any is inserted. To that end, this appender should visually be
    // presented as a block. That means theme CSS should style it as if
    // it were an empty paragraph block. That means a `gc-block` class to
    // ensure the width is correct, and a [data-block] attribute to ensure
    // the correct margin is applied, especially for classic themes which
    // have commonly targeted that attribute for margins.
    ,
    "data-block": true
  }, appender);
}

export default withSelect((select, _ref2) => {
  let {
    rootClientId
  } = _ref2;
  const {
    getBlockOrder,
    canInsertBlockType,
    getTemplateLock,
    getSelectedBlockClientId
  } = select(blockEditorStore);
  return {
    isLocked: !!getTemplateLock(rootClientId),
    blockClientIds: getBlockOrder(rootClientId),
    canInsertDefaultBlock: canInsertBlockType(getDefaultBlockName(), rootClientId),
    selectedBlockClientId: getSelectedBlockClientId()
  };
})(BlockListAppender);
//# sourceMappingURL=index.js.map