@wordpress/block-editor
Version:
200 lines (198 loc) • 6.53 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-editor/src/hooks/fit-text.js
var fit_text_exports = {};
__export(fit_text_exports, {
FIT_TEXT_SUPPORT_KEY: () => FIT_TEXT_SUPPORT_KEY,
default: () => fit_text_default
});
module.exports = __toCommonJS(fit_text_exports);
var import_hooks = require("@wordpress/hooks");
var import_blocks = require("@wordpress/blocks");
var import_element = require("@wordpress/element");
var import_data = require("@wordpress/data");
var import_fit_text_utils = require("../utils/fit-text-utils");
var import_store = require("../store");
var import_use_block_refs = require("../components/block-list/use-block-props/use-block-refs");
var EMPTY_OBJECT = {};
var FIT_TEXT_SUPPORT_KEY = "typography.fitText";
function addAttributes(settings) {
if (!(0, import_blocks.hasBlockSupport)(settings, FIT_TEXT_SUPPORT_KEY)) {
return settings;
}
if (settings.attributes?.fitText) {
return settings;
}
return {
...settings,
attributes: {
...settings.attributes,
fitText: {
type: "boolean"
}
}
};
}
function useFitText({ fitText, name, clientId }) {
const hasFitTextSupport2 = (0, import_blocks.hasBlockSupport)(name, FIT_TEXT_SUPPORT_KEY);
const blockElement = (0, import_use_block_refs.useBlockElement)(clientId);
const { blockAttributes, parentId } = (0, import_data.useSelect)(
(select) => {
if (!clientId || !hasFitTextSupport2 || !fitText) {
return EMPTY_OBJECT;
}
return {
blockAttributes: select(import_store.store).getBlockAttributes(clientId),
parentId: select(import_store.store).getBlockRootClientId(clientId)
};
},
[clientId, hasFitTextSupport2, fitText]
);
const applyFitText = (0, import_element.useCallback)(() => {
if (!blockElement || !hasFitTextSupport2 || !fitText) {
return;
}
const styleId = `fit-text-${clientId}`;
let styleElement = blockElement.ownerDocument.getElementById(styleId);
if (!styleElement) {
styleElement = blockElement.ownerDocument.createElement("style");
styleElement.id = styleId;
blockElement.ownerDocument.head.appendChild(styleElement);
}
const blockSelector = `#block-${clientId}`;
const applyFontSize = (fontSize) => {
if (fontSize === 0) {
styleElement.textContent = "";
} else {
styleElement.textContent = `${blockSelector} { font-size: ${fontSize}px !important; }`;
}
};
(0, import_fit_text_utils.optimizeFitText)(blockElement, applyFontSize);
}, [blockElement, clientId, hasFitTextSupport2, fitText]);
(0, import_element.useEffect)(() => {
if (!fitText || !blockElement || !clientId || !hasFitTextSupport2) {
return;
}
const currentElement = blockElement;
const previousVisibility = currentElement.style.visibility;
let hideFrameId = null;
let calculateFrameId = null;
let showTimeoutId = null;
hideFrameId = window.requestAnimationFrame(() => {
currentElement.style.visibility = "hidden";
calculateFrameId = window.requestAnimationFrame(() => {
applyFitText();
showTimeoutId = setTimeout(() => {
currentElement.style.visibility = previousVisibility;
}, 10);
});
});
let resizeObserver;
if (window.ResizeObserver && currentElement.parentElement) {
resizeObserver = new window.ResizeObserver(applyFitText);
resizeObserver.observe(currentElement.parentElement);
resizeObserver.observe(currentElement);
}
return () => {
if (hideFrameId !== null) {
window.cancelAnimationFrame(hideFrameId);
}
if (calculateFrameId !== null) {
window.cancelAnimationFrame(calculateFrameId);
}
if (showTimeoutId !== null) {
clearTimeout(showTimeoutId);
}
if (resizeObserver) {
resizeObserver.disconnect();
}
const styleId = `fit-text-${clientId}`;
const styleElement = currentElement.ownerDocument.getElementById(styleId);
if (styleElement) {
styleElement.remove();
}
};
}, [
fitText,
clientId,
parentId,
applyFitText,
blockElement,
hasFitTextSupport2
]);
(0, import_element.useEffect)(() => {
if (fitText && blockElement && hasFitTextSupport2) {
const frameId = window.requestAnimationFrame(() => {
if (blockElement) {
applyFitText();
}
});
return () => window.cancelAnimationFrame(frameId);
}
}, [
blockAttributes,
fitText,
applyFitText,
blockElement,
hasFitTextSupport2
]);
}
function addSaveProps(props, blockType, attributes) {
if (!(0, import_blocks.hasBlockSupport)(blockType, FIT_TEXT_SUPPORT_KEY)) {
return props;
}
const { fitText } = attributes;
if (!fitText) {
return props;
}
const className = props.className ? `${props.className} has-fit-text` : "has-fit-text";
return {
...props,
className
};
}
function useBlockProps({ name, fitText, clientId }) {
useFitText({ fitText, name, clientId });
if (!fitText || !(0, import_blocks.hasBlockSupport)(name, FIT_TEXT_SUPPORT_KEY)) {
return {};
}
return {
className: "has-fit-text"
};
}
(0, import_hooks.addFilter)(
"blocks.registerBlockType",
"core/fit-text/addAttribute",
addAttributes
);
var hasFitTextSupport = (blockNameOrType) => {
return (0, import_blocks.hasBlockSupport)(blockNameOrType, FIT_TEXT_SUPPORT_KEY);
};
var fit_text_default = {
useBlockProps,
addSaveProps,
attributeKeys: ["fitText"],
hasSupport: hasFitTextSupport,
edit: () => null
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
FIT_TEXT_SUPPORT_KEY
});
//# sourceMappingURL=fit-text.js.map