@wordpress/block-editor
Version:
274 lines (272 loc) • 10.2 kB
JavaScript
;
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);
// packages/block-editor/src/hooks/position.js
var position_exports = {};
__export(position_exports, {
PositionPanelPure: () => PositionPanelPure,
default: () => position_default,
getPositionCSS: () => getPositionCSS,
hasFixedPositionSupport: () => hasFixedPositionSupport,
hasPositionSupport: () => hasPositionSupport,
hasPositionValue: () => hasPositionValue,
hasStickyOrFixedPositionValue: () => hasStickyOrFixedPositionValue,
hasStickyPositionSupport: () => hasStickyPositionSupport,
resetPosition: () => resetPosition,
useIsPositionDisabled: () => useIsPositionDisabled
});
module.exports = __toCommonJS(position_exports);
var import_clsx = __toESM(require("clsx"));
var import_i18n = require("@wordpress/i18n");
var import_blocks = require("@wordpress/blocks");
var import_components = require("@wordpress/components");
var import_compose = require("@wordpress/compose");
var import_data = require("@wordpress/data");
var import_element = require("@wordpress/element");
var import_use_settings = require("../components/use-settings");
var import_inspector_controls = __toESM(require("../components/inspector-controls"));
var import_use_block_display_information = __toESM(require("../components/use-block-display-information"));
var import_utils = require("./utils");
var import_store = require("../store");
var import_jsx_runtime = require("react/jsx-runtime");
var POSITION_SUPPORT_KEY = "position";
var DEFAULT_OPTION = {
key: "default",
value: "",
name: (0, import_i18n.__)("Default")
};
var STICKY_OPTION = {
key: "sticky",
value: "sticky",
name: (0, import_i18n._x)("Sticky", "Name for the value of the CSS position property"),
hint: (0, import_i18n.__)(
"The block will stick to the top of the window instead of scrolling."
)
};
var FIXED_OPTION = {
key: "fixed",
value: "fixed",
name: (0, import_i18n._x)("Fixed", "Name for the value of the CSS position property"),
hint: (0, import_i18n.__)("The block will not move when the page is scrolled.")
};
var POSITION_SIDES = ["top", "right", "bottom", "left"];
var VALID_POSITION_TYPES = ["sticky", "fixed"];
function getPositionCSS({ selector, style }) {
let output = "";
const { type: positionType } = style?.position || {};
if (!VALID_POSITION_TYPES.includes(positionType)) {
return output;
}
output += `${selector} {`;
output += `position: ${positionType};`;
POSITION_SIDES.forEach((side) => {
if (style?.position?.[side] !== void 0) {
output += `${side}: ${style.position[side]};`;
}
});
if (positionType === "sticky" || positionType === "fixed") {
output += `z-index: 10`;
}
output += `}`;
return output;
}
function hasStickyPositionSupport(blockType) {
const support = (0, import_blocks.getBlockSupport)(blockType, POSITION_SUPPORT_KEY);
return !!(true === support || support?.sticky);
}
function hasFixedPositionSupport(blockType) {
const support = (0, import_blocks.getBlockSupport)(blockType, POSITION_SUPPORT_KEY);
return !!(true === support || support?.fixed);
}
function hasPositionSupport(blockType) {
const support = (0, import_blocks.getBlockSupport)(blockType, POSITION_SUPPORT_KEY);
return !!support;
}
function hasPositionValue(props) {
return props.attributes.style?.position?.type !== void 0;
}
function hasStickyOrFixedPositionValue(attributes) {
const positionType = attributes?.style?.position?.type;
return positionType === "sticky" || positionType === "fixed";
}
function resetPosition({ attributes = {}, setAttributes }) {
const { style = {} } = attributes;
setAttributes({
style: (0, import_utils.cleanEmptyObject)({
...style,
position: {
...style?.position,
type: void 0,
top: void 0,
right: void 0,
bottom: void 0,
left: void 0
}
})
});
}
function useIsPositionDisabled({ name: blockName } = {}) {
const [allowFixed, allowSticky] = (0, import_use_settings.useSettings)(
"position.fixed",
"position.sticky"
);
const isDisabled = !allowFixed && !allowSticky;
return !hasPositionSupport(blockName) || isDisabled;
}
function PositionPanelPure({
style = {},
clientId,
name: blockName,
setAttributes
}) {
const allowFixed = hasFixedPositionSupport(blockName);
const allowSticky = hasStickyPositionSupport(blockName);
const value = style?.position?.type;
const { firstParentClientId } = (0, import_data.useSelect)(
(select) => {
const { getBlockParents } = select(import_store.store);
const parents = getBlockParents(clientId);
return { firstParentClientId: parents[parents.length - 1] };
},
[clientId]
);
const blockInformation = (0, import_use_block_display_information.default)(firstParentClientId);
const stickyHelpText = allowSticky && value === STICKY_OPTION.value && blockInformation ? (0, import_i18n.sprintf)(
/* translators: %s: the name of the parent block. */
(0, import_i18n.__)(
"The block will stick to the scrollable area of the parent %s block."
),
blockInformation.title
) : null;
const options = (0, import_element.useMemo)(() => {
const availableOptions = [DEFAULT_OPTION];
if (allowSticky || value === STICKY_OPTION.value) {
availableOptions.push(STICKY_OPTION);
}
if (allowFixed || value === FIXED_OPTION.value) {
availableOptions.push(FIXED_OPTION);
}
return availableOptions;
}, [allowFixed, allowSticky, value]);
const onChangeType = (next) => {
const placementValue = "0px";
const newStyle = {
...style,
position: {
...style?.position,
type: next,
top: next === "sticky" || next === "fixed" ? placementValue : void 0
}
};
setAttributes({
style: (0, import_utils.cleanEmptyObject)(newStyle)
});
};
const selectedOption = value ? options.find((option) => option.value === value) || DEFAULT_OPTION : DEFAULT_OPTION;
return import_element.Platform.select({
web: options.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inspector_controls.default, { group: "position", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.BaseControl,
{
__nextHasNoMarginBottom: true,
help: stickyHelpText,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.CustomSelectControl,
{
__next40pxDefaultSize: true,
label: (0, import_i18n.__)("Position"),
hideLabelFromVision: true,
describedBy: (0, import_i18n.sprintf)(
// translators: %s: Currently selected position.
(0, import_i18n.__)("Currently selected position: %s"),
selectedOption.name
),
options,
value: selectedOption,
onChange: ({ selectedItem }) => {
onChangeType(selectedItem.value);
},
size: "__unstable-large"
}
)
}
) }) : null,
native: null
});
}
var position_default = {
edit: function Edit(props) {
const isPositionDisabled = useIsPositionDisabled(props);
if (isPositionDisabled) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PositionPanelPure, { ...props });
},
useBlockProps,
attributeKeys: ["style"],
hasSupport(name) {
return (0, import_blocks.hasBlockSupport)(name, POSITION_SUPPORT_KEY);
}
};
var POSITION_BLOCK_PROPS_REFERENCE = {};
function useBlockProps({ name, style }) {
const hasPositionBlockSupport = (0, import_blocks.hasBlockSupport)(
name,
POSITION_SUPPORT_KEY
);
const isPositionDisabled = useIsPositionDisabled({ name });
const allowPositionStyles = hasPositionBlockSupport && !isPositionDisabled;
const id = (0, import_compose.useInstanceId)(POSITION_BLOCK_PROPS_REFERENCE);
const positionSelector = `.wp-container-${id}.wp-container-${id}`;
let css;
if (allowPositionStyles) {
css = getPositionCSS({
selector: positionSelector,
style
}) || "";
}
const className = (0, import_clsx.default)({
[`wp-container-${id}`]: allowPositionStyles && !!css,
// Only attach a container class if there is generated CSS to be attached.
[`is-position-${style?.position?.type}`]: allowPositionStyles && !!css && !!style?.position?.type
});
(0, import_utils.useStyleOverride)({ css });
return { className };
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
PositionPanelPure,
getPositionCSS,
hasFixedPositionSupport,
hasPositionSupport,
hasPositionValue,
hasStickyOrFixedPositionValue,
hasStickyPositionSupport,
resetPosition,
useIsPositionDisabled
});
//# sourceMappingURL=position.js.map