@wordpress/block-library/build-module/gallery/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, useInnerBlocksProps, __experimentalGetElementClassName } from '@wordpress/block-editor';
import { VisuallyHidden } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
import { View } from '@wordpress/primitives';
const allowedBlocks = ['core/image'];
export const Gallery = props => {
  const {
    attributes,
    isSelected,
    setAttributes,
    mediaPlaceholder,
    insertBlocksAfter,
    blockProps
  } = props;
  const {
    align,
    columns,
    caption,
    imageCrop
  } = attributes;
  const {
    children,
    ...innerBlocksProps
  } = useInnerBlocksProps(blockProps, {
    allowedBlocks,
    orientation: 'horizontal',
    renderAppender: false,
    __experimentalLayout: {
      type: 'default',
      alignments: []
    }
  });
  const [captionFocused, setCaptionFocused] = useState(false);

  function onFocusCaption() {
    if (!captionFocused) {
      setCaptionFocused(true);
    }
  }

  function removeCaptionFocus() {
    if (captionFocused) {
      setCaptionFocused(false);
    }
  }

  useEffect(() => {
    if (!isSelected) {
      setCaptionFocused(false);
    }
  }, [isSelected]);
  return createElement("figure", _extends({}, innerBlocksProps, {
    className: classnames(blockProps.className, 'blocks-gallery-grid', {
      [`align${align}`]: align,
      [`columns-${columns}`]: columns !== undefined,
      [`columns-default`]: columns === undefined,
      'is-cropped': imageCrop
    })
  }), children, isSelected && !children && createElement(View, {
    className: "blocks-gallery-media-placeholder-wrapper",
    onClick: removeCaptionFocus
  }, mediaPlaceholder), createElement(RichTextVisibilityHelper, {
    isHidden: !isSelected && RichText.isEmpty(caption),
    captionFocused: captionFocused,
    onFocusCaption: onFocusCaption,
    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,
    captionFocused,
    onFocusCaption,
    className,
    value,
    placeholder,
    tagName,
    captionRef,
    ...richTextProps
  } = _ref;

  if (isHidden) {
    return createElement(VisuallyHidden, _extends({
      as: RichText
    }, richTextProps));
  }

  return createElement(RichText, _extends({
    ref: captionRef,
    value: value,
    placeholder: placeholder,
    className: className,
    tagName: tagName,
    isSelected: captionFocused,
    onClick: onFocusCaption
  }, richTextProps));
}

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