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

Generic block editor.

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

/**
 * WordPress dependencies
 */
import { VisuallyHidden, __unstableComposite as Composite, __unstableUseCompositeState as useCompositeState, __unstableCompositeItem as CompositeItem } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
/**
 * Internal dependencies
 */

import BlockPreview from '../block-preview';
import InserterDraggableBlocks from '../inserter-draggable-blocks';
import { store as blockEditorStore } from '../../store';

function BlockPattern({
  isDraggable,
  pattern,
  onClick,
  composite
}) {
  const {
    name,
    viewportWidth
  } = pattern;
  const {
    blocks
  } = useSelect(select => select(blockEditorStore).__experimentalGetParsedPattern(name), [name]);
  const instanceId = useInstanceId(BlockPattern);
  const descriptionId = `block-editor-block-patterns-list__item-description-${instanceId}`;
  return createElement(InserterDraggableBlocks, {
    isEnabled: isDraggable,
    blocks: blocks
  }, ({
    draggable,
    onDragStart,
    onDragEnd
  }) => createElement("div", {
    className: "block-editor-block-patterns-list__list-item",
    "aria-label": pattern.title,
    "aria-describedby": pattern.description ? descriptionId : undefined,
    draggable: draggable,
    onDragStart: onDragStart,
    onDragEnd: onDragEnd
  }, createElement(CompositeItem, _extends({
    role: "option",
    as: "div"
  }, composite, {
    className: "block-editor-block-patterns-list__item",
    onClick: () => onClick(pattern, blocks)
  }), createElement(BlockPreview, {
    blocks: blocks,
    viewportWidth: viewportWidth
  }), createElement("div", {
    className: "block-editor-block-patterns-list__item-title"
  }, pattern.title), !!pattern.description && createElement(VisuallyHidden, {
    id: descriptionId
  }, pattern.description))));
}

function BlockPatternPlaceholder() {
  return createElement("div", {
    className: "block-editor-block-patterns-list__item is-placeholder"
  });
}

function BlockPatternList({
  isDraggable,
  blockPatterns,
  shownPatterns,
  onClickPattern,
  orientation,
  label = __('Block Patterns')
}) {
  const composite = useCompositeState({
    orientation
  });
  return createElement(Composite, _extends({}, composite, {
    role: "listbox",
    className: "block-editor-block-patterns-list",
    "aria-label": label
  }), blockPatterns.map(pattern => {
    const isShown = shownPatterns.includes(pattern);
    return isShown ? createElement(BlockPattern, {
      key: pattern.name,
      pattern: pattern,
      onClick: onClickPattern,
      isDraggable: isDraggable,
      composite: composite
    }) : createElement(BlockPatternPlaceholder, {
      key: pattern.name
    });
  }));
}

export default BlockPatternList;
//# sourceMappingURL=index.js.map