@wordpress/block-editor
Version:
283 lines (281 loc) • 9.79 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/style.js
var style_exports = {};
__export(style_exports, {
addSaveProps: () => addSaveProps,
default: () => style_default,
getInlineStyles: () => getInlineStyles,
omitStyle: () => omitStyle
});
module.exports = __toCommonJS(style_exports);
var import_element = require("@wordpress/element");
var import_hooks = require("@wordpress/hooks");
var import_blocks = require("@wordpress/blocks");
var import_compose = require("@wordpress/compose");
var import_style_engine = require("@wordpress/style-engine");
var import_background = require("./background");
var import_border = require("./border");
var import_color = require("./color");
var import_typography = require("./typography");
var import_dimensions = require("./dimensions");
var import_utils = require("./utils");
var import_utils2 = require("../components/global-styles/utils");
var import_block_editing_mode = require("../components/block-editing-mode");
var import_jsx_runtime = require("react/jsx-runtime");
var styleSupportKeys = [
...import_typography.TYPOGRAPHY_SUPPORT_KEYS,
import_border.BORDER_SUPPORT_KEY,
import_color.COLOR_SUPPORT_KEY,
import_dimensions.DIMENSIONS_SUPPORT_KEY,
import_background.BACKGROUND_SUPPORT_KEY,
import_dimensions.SPACING_SUPPORT_KEY,
import_border.SHADOW_SUPPORT_KEY
];
var hasStyleSupport = (nameOrType) => styleSupportKeys.some((key) => (0, import_blocks.hasBlockSupport)(nameOrType, key));
function getInlineStyles(styles = {}) {
const output = {};
(0, import_style_engine.getCSSRules)(styles).forEach((rule) => {
output[rule.key] = rule.value;
});
return output;
}
function addAttribute(settings) {
if (!hasStyleSupport(settings)) {
return settings;
}
if (!settings.attributes.style) {
Object.assign(settings.attributes, {
style: {
type: "object"
}
});
}
return settings;
}
var skipSerializationPathsEdit = {
[`${import_border.BORDER_SUPPORT_KEY}.__experimentalSkipSerialization`]: ["border"],
[`${import_color.COLOR_SUPPORT_KEY}.__experimentalSkipSerialization`]: [
import_color.COLOR_SUPPORT_KEY
],
[`${import_typography.TYPOGRAPHY_SUPPORT_KEY}.__experimentalSkipSerialization`]: [
import_typography.TYPOGRAPHY_SUPPORT_KEY
],
[`${import_dimensions.DIMENSIONS_SUPPORT_KEY}.__experimentalSkipSerialization`]: [
import_dimensions.DIMENSIONS_SUPPORT_KEY
],
[`${import_dimensions.SPACING_SUPPORT_KEY}.__experimentalSkipSerialization`]: [
import_dimensions.SPACING_SUPPORT_KEY
],
[`${import_border.SHADOW_SUPPORT_KEY}.__experimentalSkipSerialization`]: [
import_border.SHADOW_SUPPORT_KEY
]
};
var skipSerializationPathsSave = {
...skipSerializationPathsEdit,
[`${import_dimensions.DIMENSIONS_SUPPORT_KEY}.aspectRatio`]: [
`${import_dimensions.DIMENSIONS_SUPPORT_KEY}.aspectRatio`
],
// Skip serialization of aspect ratio in save mode.
[`${import_background.BACKGROUND_SUPPORT_KEY}`]: [import_background.BACKGROUND_SUPPORT_KEY]
// Skip serialization of background support in save mode.
};
var skipSerializationPathsSaveChecks = {
[`${import_dimensions.DIMENSIONS_SUPPORT_KEY}.aspectRatio`]: true,
[`${import_background.BACKGROUND_SUPPORT_KEY}`]: true
};
var renamedFeatures = { gradients: "gradient" };
function omitStyle(style, paths, preserveReference = false) {
if (!style) {
return style;
}
let newStyle = style;
if (!preserveReference) {
newStyle = JSON.parse(JSON.stringify(style));
}
if (!Array.isArray(paths)) {
paths = [paths];
}
paths.forEach((path) => {
if (!Array.isArray(path)) {
path = path.split(".");
}
if (path.length > 1) {
const [firstSubpath, ...restPath] = path;
omitStyle(newStyle[firstSubpath], [restPath], true);
} else if (path.length === 1) {
delete newStyle[path[0]];
}
});
return newStyle;
}
function addSaveProps(props, blockNameOrType, attributes, skipPaths = skipSerializationPathsSave) {
if (!hasStyleSupport(blockNameOrType)) {
return props;
}
let { style } = attributes;
Object.entries(skipPaths).forEach(([indicator, path]) => {
const skipSerialization = skipSerializationPathsSaveChecks[indicator] || (0, import_blocks.getBlockSupport)(blockNameOrType, indicator);
if (skipSerialization === true) {
style = omitStyle(style, path);
}
if (Array.isArray(skipSerialization)) {
skipSerialization.forEach((featureName) => {
const feature = renamedFeatures[featureName] || featureName;
style = omitStyle(style, [[...path, feature]]);
});
}
});
props.style = {
...getInlineStyles(style),
...props.style
};
return props;
}
function BlockStyleControls({
clientId,
name,
setAttributes,
__unstableParentLayout
}) {
const settings = (0, import_utils.useBlockSettings)(name, __unstableParentLayout);
const blockEditingMode = (0, import_block_editing_mode.useBlockEditingMode)();
const passedProps = {
clientId,
name,
setAttributes,
settings: {
...settings,
typography: {
...settings.typography,
// The text alignment UI for individual blocks is rendered in
// the block toolbar, so disable it here.
textAlign: false
}
}
};
if (blockEditingMode !== "default") {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color.ColorEdit, { ...passedProps }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_background.BackgroundImagePanel, { ...passedProps }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.TypographyPanel, { ...passedProps }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_border.BorderPanel, { ...passedProps }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dimensions.DimensionsPanel, { ...passedProps })
] });
}
var style_default = {
edit: BlockStyleControls,
hasSupport: hasStyleSupport,
addSaveProps,
attributeKeys: ["style"],
useBlockProps
};
var elementTypes = [
{ elementType: "button" },
{ elementType: "link", pseudo: [":hover"] },
{
elementType: "heading",
elements: ["h1", "h2", "h3", "h4", "h5", "h6"]
}
];
var STYLE_BLOCK_PROPS_REFERENCE = {};
function useBlockProps({ name, style }) {
const blockElementsContainerIdentifier = (0, import_compose.useInstanceId)(
STYLE_BLOCK_PROPS_REFERENCE,
"wp-elements"
);
const baseElementSelector = `.${blockElementsContainerIdentifier}`;
const blockElementStyles = style?.elements;
const styles = (0, import_element.useMemo)(() => {
if (!blockElementStyles) {
return;
}
const elementCSSRules = [];
elementTypes.forEach(({ elementType, pseudo, elements }) => {
const skipSerialization = (0, import_utils.shouldSkipSerialization)(
name,
import_color.COLOR_SUPPORT_KEY,
elementType
);
if (skipSerialization) {
return;
}
const elementStyles = blockElementStyles?.[elementType];
if (elementStyles) {
const selector = (0, import_utils2.scopeSelector)(
baseElementSelector,
import_blocks.__EXPERIMENTAL_ELEMENTS[elementType]
);
elementCSSRules.push(
(0, import_style_engine.compileCSS)(elementStyles, { selector })
);
if (pseudo) {
pseudo.forEach((pseudoSelector) => {
if (elementStyles[pseudoSelector]) {
elementCSSRules.push(
(0, import_style_engine.compileCSS)(elementStyles[pseudoSelector], {
selector: (0, import_utils2.scopeSelector)(
baseElementSelector,
`${import_blocks.__EXPERIMENTAL_ELEMENTS[elementType]}${pseudoSelector}`
)
})
);
}
});
}
}
if (elements) {
elements.forEach((element) => {
if (blockElementStyles[element]) {
elementCSSRules.push(
(0, import_style_engine.compileCSS)(blockElementStyles[element], {
selector: (0, import_utils2.scopeSelector)(
baseElementSelector,
import_blocks.__EXPERIMENTAL_ELEMENTS[element]
)
})
);
}
});
}
});
return elementCSSRules.length > 0 ? elementCSSRules.join("") : void 0;
}, [baseElementSelector, blockElementStyles, name]);
(0, import_utils.useStyleOverride)({ css: styles });
return addSaveProps(
{ className: blockElementsContainerIdentifier },
name,
{ style },
skipSerializationPathsEdit
);
}
(0, import_hooks.addFilter)(
"blocks.registerBlockType",
"core/style/addAttribute",
addAttribute
);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
addSaveProps,
getInlineStyles,
omitStyle
});
//# sourceMappingURL=style.js.map