@wordpress/block-library/build/utils/caption.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Caption = Caption;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _blocks = require("@wordpress/blocks");
var _lockUnlock = require("../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function Caption({
  attributeKey = 'caption',
  attributes,
  setAttributes,
  isSelected,
  insertBlocksAfter,
  placeholder = (0, _i18n.__)('Add caption'),
  label = (0, _i18n.__)('Caption text'),
  showToolbarButton = true,
  excludeElementClassName,
  className,
  readOnly,
  tagName = 'figcaption',
  addLabel = (0, _i18n.__)('Add caption'),
  removeLabel = (0, _i18n.__)('Remove caption'),
  icon = _icons.caption,
  ...props
}) {
  const caption = attributes[attributeKey];
  const prevCaption = (0, _compose.usePrevious)(caption);
  const {
    PrivateRichText: RichText
  } = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
  const isCaptionEmpty = RichText.isEmpty(caption);
  const isPrevCaptionEmpty = RichText.isEmpty(prevCaption);
  const [showCaption, setShowCaption] = (0, _element.useState)(!isCaptionEmpty);

  // We need to show the caption when changes come from
  // history navigation(undo/redo).
  (0, _element.useEffect)(() => {
    if (!isCaptionEmpty && isPrevCaptionEmpty) {
      setShowCaption(true);
    }
  }, [isCaptionEmpty, isPrevCaptionEmpty]);
  (0, _element.useEffect)(() => {
    if (!isSelected && isCaptionEmpty) {
      setShowCaption(false);
    }
  }, [isSelected, isCaptionEmpty]);

  // Focus the caption when we click to add one.
  const ref = (0, _element.useCallback)(node => {
    if (node && isCaptionEmpty) {
      node.focus();
    }
  }, [isCaptionEmpty]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [showToolbarButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
      group: "block",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
        onClick: () => {
          setShowCaption(!showCaption);
          if (showCaption && caption) {
            setAttributes({
              [attributeKey]: undefined
            });
          }
        },
        icon: icon,
        isPressed: showCaption,
        label: showCaption ? removeLabel : addLabel
      })
    }), showCaption && (!RichText.isEmpty(caption) || isSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(RichText, {
      identifier: attributeKey,
      tagName: tagName,
      className: (0, _clsx.default)(className, excludeElementClassName ? '' : (0, _blockEditor.__experimentalGetElementClassName)('caption')),
      ref: ref,
      "aria-label": label,
      placeholder: placeholder,
      value: caption,
      onChange: value => setAttributes({
        [attributeKey]: value
      }),
      inlineToolbar: true,
      __unstableOnSplitAtEnd: () => insertBlocksAfter((0, _blocks.createBlock)((0, _blocks.getDefaultBlockName)())),
      readOnly: readOnly,
      ...props
    })]
  });
}
//# sourceMappingURL=caption.js.map