@wordpress/block-library/build-module/gallery/v1/gallery.js

Block library for the WordPress editor.

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

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { RichText, __experimentalGetElementClassName } from '@wordpress/block-editor';
import { VisuallyHidden } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
/**
 * Internal dependencies
 */

import GalleryImage from './gallery-image';
import { defaultColumnsNumberV1 } from '../deprecated';
export const Gallery = props => {
  const {
    attributes,
    isSelected,
    setAttributes,
    selectedImage,
    mediaPlaceholder,
    onMoveBackward,
    onMoveForward,
    onRemoveImage,
    onSelectImage,
    onDeselectImage,
    onSetImageAttributes,
    insertBlocksAfter,
    blockProps
  } = props;
  const {
    align,
    columns = defaultColumnsNumberV1(attributes),
    caption,
    imageCrop,
    images
  } = attributes;
  return createElement("figure", _extends({}, blockProps, {
    className: classnames(blockProps.className, {
      [`align${align}`]: align,
      [`columns-${columns}`]: columns,
      'is-cropped': imageCrop
    })
  }), createElement("ul", {
    className: "blocks-gallery-grid"
  }, images.map((img, index) => {
    const ariaLabel = sprintf(
    /* translators: 1: the order number of the image. 2: the total number of images. */
    __('image %1$d of %2$d in gallery'), index + 1, images.length);
    return createElement("li", {
      className: "blocks-gallery-item",
      key: img.id ? `${img.id}-${index}` : img.url
    }, createElement(GalleryImage, {
      url: img.url,
      alt: img.alt,
      id: img.id,
      isFirstItem: index === 0,
      isLastItem: index + 1 === images.length,
      isSelected: isSelected && selectedImage === index,
      onMoveBackward: onMoveBackward(index),
      onMoveForward: onMoveForward(index),
      onRemove: onRemoveImage(index),
      onSelect: onSelectImage(index),
      onDeselect: onDeselectImage(index),
      setAttributes: attrs => onSetImageAttributes(index, attrs),
      caption: img.caption,
      "aria-label": ariaLabel,
      sizeSlug: attributes.sizeSlug
    }));
  })), mediaPlaceholder, createElement(RichTextVisibilityHelper, {
    isHidden: !isSelected && RichText.isEmpty(caption),
    tagName: "figcaption",
    className: classnames('blocks-gallery-caption', __experimentalGetElementClassName('caption')),
    "aria-label": __('Gallery caption text'),
    placeholder: __('Write gallery caption…'),
    value: caption,
    onChange: value => setAttributes({
      caption: value
    }),
    inlineToolbar: true,
    __unstableOnSplitAtEnd: () => insertBlocksAfter(createBlock(getDefaultBlockName()))
  }));
};

function RichTextVisibilityHelper(_ref) {
  let {
    isHidden,
    ...richTextProps
  } = _ref;
  return isHidden ? createElement(VisuallyHidden, _extends({
    as: RichText
  }, richTextProps)) : createElement(RichText, richTextProps);
}

export default Gallery;
//# sourceMappingURL=gallery.js.map