UNPKG

@wordpress/block-library

Version:
132 lines (131 loc) 4.96 kB
"use strict"; var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( // If the importer is in node compatibility mode or this is not an ESM // file that has been converted to a CommonJS file using a Babel- // compatible transform (i.e. "__esModule" has not been set), then set // "default" to the CommonJS "module.exports" for node compatibility. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod )); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); var caption_exports = {}; __export(caption_exports, { Caption: () => Caption }); module.exports = __toCommonJS(caption_exports); var import_jsx_runtime = require("react/jsx-runtime"); var import_clsx = __toESM(require("clsx")); var import_element = require("@wordpress/element"); var import_compose = require("@wordpress/compose"); var import_i18n = require("@wordpress/i18n"); var import_block_editor = require("@wordpress/block-editor"); var import_components = require("@wordpress/components"); var import_icons = require("@wordpress/icons"); var import_blocks = require("@wordpress/blocks"); var import_lock_unlock = require("../lock-unlock"); function Caption({ attributeKey = "caption", attributes, setAttributes, isSelected, insertBlocksAfter, placeholder = (0, import_i18n.__)("Add caption"), label = (0, import_i18n.__)("Caption text"), showToolbarButton = true, excludeElementClassName, className, readOnly, tagName = "figcaption", addLabel = (0, import_i18n.__)("Add caption"), removeLabel = (0, import_i18n.__)("Remove caption"), icon = import_icons.caption, ...props }) { const caption = attributes[attributeKey]; const prevCaption = (0, import_compose.usePrevious)(caption); const { PrivateRichText: RichText } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis); const isCaptionEmpty = RichText.isEmpty(caption); const isPrevCaptionEmpty = RichText.isEmpty(prevCaption); const [showCaption, setShowCaption] = (0, import_element.useState)(!isCaptionEmpty); (0, import_element.useEffect)(() => { if (!isCaptionEmpty && isPrevCaptionEmpty) { setShowCaption(true); } }, [isCaptionEmpty, isPrevCaptionEmpty]); (0, import_element.useEffect)(() => { if (!isSelected && isCaptionEmpty) { setShowCaption(false); } }, [isSelected, isCaptionEmpty]); const ref = (0, import_element.useCallback)( (node) => { if (node && isCaptionEmpty) { node.focus(); } }, [isCaptionEmpty] ); return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ showToolbarButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { group: "block", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_components.ToolbarButton, { onClick: () => { setShowCaption(!showCaption); if (showCaption && caption) { setAttributes({ [attributeKey]: void 0 }); } }, icon, isPressed: showCaption, label: showCaption ? removeLabel : addLabel } ) }), showCaption && (!RichText.isEmpty(caption) || isSelected) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)( RichText, { identifier: attributeKey, tagName, className: (0, import_clsx.default)( className, excludeElementClassName ? "" : (0, import_block_editor.__experimentalGetElementClassName)("caption") ), ref, "aria-label": label, placeholder, value: caption, onChange: (value) => setAttributes({ [attributeKey]: value }), inlineToolbar: true, __unstableOnSplitAtEnd: () => insertBlocksAfter( (0, import_blocks.createBlock)((0, import_blocks.getDefaultBlockName)()) ), readOnly, ...props } ) ] }); } // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { Caption }); //# sourceMappingURL=caption.js.map