@wordpress/block-editor
Version:
231 lines (230 loc) • 7.49 kB
JavaScript
// packages/block-editor/src/hooks/position.js
import clsx from "clsx";
import { __, _x, sprintf } from "@wordpress/i18n";
import { getBlockSupport, hasBlockSupport } from "@wordpress/blocks";
import { BaseControl, CustomSelectControl } from "@wordpress/components";
import { useInstanceId } from "@wordpress/compose";
import { useSelect } from "@wordpress/data";
import { useMemo, Platform } from "@wordpress/element";
import { useSettings } from "../components/use-settings";
import InspectorControls from "../components/inspector-controls";
import useBlockDisplayInformation from "../components/use-block-display-information";
import { cleanEmptyObject, useStyleOverride } from "./utils";
import { store as blockEditorStore } from "../store";
import { jsx } from "react/jsx-runtime";
var POSITION_SUPPORT_KEY = "position";
var DEFAULT_OPTION = {
key: "default",
value: "",
name: __("Default")
};
var STICKY_OPTION = {
key: "sticky",
value: "sticky",
name: _x("Sticky", "Name for the value of the CSS position property"),
hint: __(
"The block will stick to the top of the window instead of scrolling."
)
};
var FIXED_OPTION = {
key: "fixed",
value: "fixed",
name: _x("Fixed", "Name for the value of the CSS position property"),
hint: __("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 = getBlockSupport(blockType, POSITION_SUPPORT_KEY);
return !!(true === support || support?.sticky);
}
function hasFixedPositionSupport(blockType) {
const support = getBlockSupport(blockType, POSITION_SUPPORT_KEY);
return !!(true === support || support?.fixed);
}
function hasPositionSupport(blockType) {
const support = 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: 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] = 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 } = useSelect(
(select) => {
const { getBlockParents } = select(blockEditorStore);
const parents = getBlockParents(clientId);
return { firstParentClientId: parents[parents.length - 1] };
},
[clientId]
);
const blockInformation = useBlockDisplayInformation(firstParentClientId);
const stickyHelpText = allowSticky && value === STICKY_OPTION.value && blockInformation ? sprintf(
/* translators: %s: the name of the parent block. */
__(
"The block will stick to the scrollable area of the parent %s block."
),
blockInformation.title
) : null;
const options = 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: cleanEmptyObject(newStyle)
});
};
const selectedOption = value ? options.find((option) => option.value === value) || DEFAULT_OPTION : DEFAULT_OPTION;
return Platform.select({
web: options.length > 1 ? /* @__PURE__ */ jsx(InspectorControls, { group: "position", children: /* @__PURE__ */ jsx(
BaseControl,
{
__nextHasNoMarginBottom: true,
help: stickyHelpText,
children: /* @__PURE__ */ jsx(
CustomSelectControl,
{
__next40pxDefaultSize: true,
label: __("Position"),
hideLabelFromVision: true,
describedBy: sprintf(
// translators: %s: Currently selected position.
__("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__ */ jsx(PositionPanelPure, { ...props });
},
useBlockProps,
attributeKeys: ["style"],
hasSupport(name) {
return hasBlockSupport(name, POSITION_SUPPORT_KEY);
}
};
var POSITION_BLOCK_PROPS_REFERENCE = {};
function useBlockProps({ name, style }) {
const hasPositionBlockSupport = hasBlockSupport(
name,
POSITION_SUPPORT_KEY
);
const isPositionDisabled = useIsPositionDisabled({ name });
const allowPositionStyles = hasPositionBlockSupport && !isPositionDisabled;
const id = useInstanceId(POSITION_BLOCK_PROPS_REFERENCE);
const positionSelector = `.wp-container-${id}.wp-container-${id}`;
let css;
if (allowPositionStyles) {
css = getPositionCSS({
selector: positionSelector,
style
}) || "";
}
const className = clsx({
[`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
});
useStyleOverride({ css });
return { className };
}
export {
PositionPanelPure,
position_default as default,
getPositionCSS,
hasFixedPositionSupport,
hasPositionSupport,
hasPositionValue,
hasStickyOrFixedPositionValue,
hasStickyPositionSupport,
resetPosition,
useIsPositionDisabled
};
//# sourceMappingURL=position.js.map