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

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Gallery = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classnames = _interopRequireDefault(require("classnames"));

var _blockEditor = require("@wordpress/block-editor");

var _components = require("@wordpress/components");

var _i18n = require("@wordpress/i18n");

var _blocks = require("@wordpress/blocks");

var _primitives = require("@wordpress/primitives");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
const allowedBlocks = ['core/image'];

const Gallery = props => {
  const {
    attributes,
    isSelected,
    setAttributes,
    mediaPlaceholder,
    insertBlocksAfter,
    blockProps
  } = props;
  const {
    align,
    columns,
    caption,
    imageCrop
  } = attributes;
  const {
    children,
    ...innerBlocksProps
  } = (0, _blockEditor.useInnerBlocksProps)(blockProps, {
    allowedBlocks,
    orientation: 'horizontal',
    renderAppender: false,
    __experimentalLayout: {
      type: 'default',
      alignments: []
    }
  });
  const [captionFocused, setCaptionFocused] = (0, _element.useState)(false);

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

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

  (0, _element.useEffect)(() => {
    if (!isSelected) {
      setCaptionFocused(false);
    }
  }, [isSelected]);
  return (0, _element.createElement)("figure", (0, _extends2.default)({}, innerBlocksProps, {
    className: (0, _classnames.default)(blockProps.className, 'blocks-gallery-grid', {
      [`align${align}`]: align,
      [`columns-${columns}`]: columns !== undefined,
      [`columns-default`]: columns === undefined,
      'is-cropped': imageCrop
    })
  }), children, isSelected && !children && (0, _element.createElement)(_primitives.View, {
    className: "blocks-gallery-media-placeholder-wrapper",
    onClick: removeCaptionFocus
  }, mediaPlaceholder), (0, _element.createElement)(RichTextVisibilityHelper, {
    isHidden: !isSelected && _blockEditor.RichText.isEmpty(caption),
    captionFocused: captionFocused,
    onFocusCaption: onFocusCaption,
    tagName: "figcaption",
    className: (0, _classnames.default)('blocks-gallery-caption', (0, _blockEditor.__experimentalGetElementClassName)('caption')),
    "aria-label": (0, _i18n.__)('Gallery caption text'),
    placeholder: (0, _i18n.__)('Write gallery caption…'),
    value: caption,
    onChange: value => setAttributes({
      caption: value
    }),
    inlineToolbar: true,
    __unstableOnSplitAtEnd: () => insertBlocksAfter((0, _blocks.createBlock)((0, _blocks.getDefaultBlockName)()))
  }));
};

exports.Gallery = Gallery;

function RichTextVisibilityHelper(_ref) {
  let {
    isHidden,
    captionFocused,
    onFocusCaption,
    className,
    value,
    placeholder,
    tagName,
    captionRef,
    ...richTextProps
  } = _ref;

  if (isHidden) {
    return (0, _element.createElement)(_components.VisuallyHidden, (0, _extends2.default)({
      as: _blockEditor.RichText
    }, richTextProps));
  }

  return (0, _element.createElement)(_blockEditor.RichText, (0, _extends2.default)({
    ref: captionRef,
    value: value,
    placeholder: placeholder,
    className: className,
    tagName: tagName,
    isSelected: captionFocused,
    onClick: onFocusCaption
  }, richTextProps));
}

var _default = Gallery;
exports.default = _default;
//# sourceMappingURL=gallery.js.map