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

Generic block editor.

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

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

import { store as blockEditorStore } from '../../store';
import BlockPreview from '../block-preview';
import SetupToolbar from './setup-toolbar';
import usePatternsSetup from './use-patterns-setup';
import { VIEWMODES } from './constants';

const SetupContent = ({
  viewMode,
  activeSlide,
  patterns,
  onBlockPatternSelect,
  showTitles
}) => {
  const composite = useCompositeState();
  const containerClass = 'block-editor-block-pattern-setup__container';

  if (viewMode === VIEWMODES.carousel) {
    const slideClass = new Map([[activeSlide, 'active-slide'], [activeSlide - 1, 'previous-slide'], [activeSlide + 1, 'next-slide']]);
    return createElement("div", {
      className: "block-editor-block-pattern-setup__carousel"
    }, createElement("div", {
      className: containerClass
    }, createElement("ul", {
      className: "carousel-container"
    }, patterns.map((pattern, index) => createElement(BlockPatternSlide, {
      className: slideClass.get(index) || '',
      key: pattern.name,
      pattern: pattern
    })))));
  }

  return createElement("div", {
    className: "block-editor-block-pattern-setup__grid"
  }, createElement(Composite, _extends({}, composite, {
    role: "listbox",
    className: containerClass,
    "aria-label": __('Patterns list')
  }), patterns.map(pattern => createElement(BlockPattern, {
    key: pattern.name,
    pattern: pattern,
    onSelect: onBlockPatternSelect,
    composite: composite,
    showTitles: showTitles
  }))));
};

function BlockPattern({
  pattern,
  onSelect,
  composite,
  showTitles
}) {
  const baseClassName = 'block-editor-block-pattern-setup-list';
  const {
    blocks,
    description,
    viewportWidth = 700
  } = pattern;
  const descriptionId = useInstanceId(BlockPattern, `${baseClassName}__item-description`);
  return createElement("div", {
    className: `${baseClassName}__list-item`,
    "aria-label": pattern.title,
    "aria-describedby": pattern.description ? descriptionId : undefined
  }, createElement(CompositeItem, _extends({
    role: "option",
    as: "div"
  }, composite, {
    className: `${baseClassName}__item`,
    onClick: () => onSelect(blocks)
  }), createElement(BlockPreview, {
    blocks: blocks,
    viewportWidth: viewportWidth
  }), showTitles && createElement("div", {
    className: `${baseClassName}__item-title`
  }, pattern.title), !!description && createElement(VisuallyHidden, {
    id: descriptionId
  }, description)));
}

function BlockPatternSlide({
  className,
  pattern,
  minHeight
}) {
  const {
    blocks,
    title,
    description
  } = pattern;
  const descriptionId = useInstanceId(BlockPatternSlide, 'block-editor-block-pattern-setup-list__item-description');
  return createElement("li", {
    className: `pattern-slide ${className}`,
    "aria-label": title,
    "aria-describedby": description ? descriptionId : undefined
  }, createElement(BlockPreview, {
    blocks: blocks,
    minHeight: minHeight
  }), !!description && createElement(VisuallyHidden, {
    id: descriptionId
  }, description));
}

const BlockPatternSetup = ({
  clientId,
  blockName,
  filterPatternsFn,
  onBlockPatternSelect,
  initialViewMode = VIEWMODES.carousel,
  showTitles = false
}) => {
  const [viewMode, setViewMode] = useState(initialViewMode);
  const [activeSlide, setActiveSlide] = useState(0);
  const {
    replaceBlock
  } = useDispatch(blockEditorStore);
  const patterns = usePatternsSetup(clientId, blockName, filterPatternsFn);

  if (!patterns?.length) {
    return null;
  }

  const onBlockPatternSelectDefault = blocks => {
    const clonedBlocks = blocks.map(block => cloneBlock(block));
    replaceBlock(clientId, clonedBlocks);
  };

  const onPatternSelectCallback = onBlockPatternSelect || onBlockPatternSelectDefault;
  return createElement(Fragment, null, createElement("div", {
    className: `block-editor-block-pattern-setup view-mode-${viewMode}`
  }, createElement(SetupContent, {
    viewMode: viewMode,
    activeSlide: activeSlide,
    patterns: patterns,
    onBlockPatternSelect: onPatternSelectCallback,
    showTitles: showTitles
  }), createElement(SetupToolbar, {
    viewMode: viewMode,
    setViewMode: setViewMode,
    activeSlide: activeSlide,
    totalSlides: patterns.length,
    handleNext: () => {
      setActiveSlide(active => active + 1);
    },
    handlePrevious: () => {
      setActiveSlide(active => active - 1);
    },
    onBlockPatternSelect: () => {
      onPatternSelectCallback(patterns[activeSlide].blocks);
    }
  })));
};

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