@wordpress/block-editor
Version:
288 lines (286 loc) • 10.5 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/block-style-variation.js
var block_style_variation_exports = {};
__export(block_style_variation_exports, {
__unstableBlockStyleVariationOverridesWithConfig: () => __unstableBlockStyleVariationOverridesWithConfig,
default: () => block_style_variation_default,
getVariationStylesWithRefValues: () => getVariationStylesWithRefValues
});
module.exports = __toCommonJS(block_style_variation_exports);
var import_blocks = require("@wordpress/blocks");
var import_data = require("@wordpress/data");
var import_element = require("@wordpress/element");
var import_global_styles_engine = require("@wordpress/global-styles-engine");
var import_utils = require("./utils");
var import_object = require("../utils/object");
var import_store = require("../store");
var import_private_keys = require("../store/private-keys");
var import_lock_unlock = require("../lock-unlock");
var import_jsx_runtime = require("react/jsx-runtime");
var VARIATION_PREFIX = "is-style-";
function getVariationMatches(className) {
if (!className) {
return [];
}
return className.split(/\s+/).reduce((matches, name) => {
if (name.startsWith(VARIATION_PREFIX)) {
const match = name.slice(VARIATION_PREFIX.length);
if (match !== "default") {
matches.push(match);
}
}
return matches;
}, []);
}
function getVariationNameFromClass(className, registeredStyles = []) {
const matches = getVariationMatches(className);
if (!matches) {
return null;
}
for (const variation of matches) {
if (registeredStyles.some((style) => style.name === variation)) {
return variation;
}
}
return null;
}
function OverrideStyles({ override }) {
(0, import_utils.usePrivateStyleOverride)(override);
}
function __unstableBlockStyleVariationOverridesWithConfig({ config }) {
const { getBlockStyles, overrides } = (0, import_data.useSelect)(
(select) => ({
getBlockStyles: select(import_blocks.store).getBlockStyles,
overrides: (0, import_lock_unlock.unlock)(select(import_store.store)).getStyleOverrides()
}),
[]
);
const { getBlockName } = (0, import_data.useSelect)(import_store.store);
const overridesWithConfig = (0, import_element.useMemo)(() => {
if (!overrides?.length) {
return;
}
const newOverrides = [];
const overriddenClientIds = [];
for (const [, override] of overrides) {
if (override?.variation && override?.clientId && /*
* Because this component overwrites existing style overrides,
* filter out any overrides that are already present in the store.
*/
!overriddenClientIds.includes(override.clientId)) {
const blockName = getBlockName(override.clientId);
const configStyles = config?.styles?.blocks?.[blockName]?.variations?.[override.variation];
if (configStyles) {
const variationConfig = {
settings: config?.settings,
// The variation style data is all that is needed to generate
// the styles for the current application to a block. The variation
// name is updated to match the instance specific class name.
styles: {
blocks: {
[blockName]: {
variations: {
[`${override.variation}-${override.clientId}`]: configStyles
}
}
}
}
};
const blockSelectors = (0, import_global_styles_engine.getBlockSelectors)(
(0, import_blocks.getBlockTypes)(),
override.clientId
);
const hasBlockGapSupport = false;
const hasFallbackGapSupport = true;
const disableLayoutStyles = true;
const disableRootPadding = true;
const variationStyles = (0, import_global_styles_engine.toStyles)(
variationConfig,
blockSelectors,
hasBlockGapSupport,
hasFallbackGapSupport,
disableLayoutStyles,
disableRootPadding,
{
blockGap: false,
blockStyles: true,
layoutStyles: false,
marginReset: false,
presets: false,
rootPadding: false,
variationStyles: true
}
);
newOverrides.push({
id: `${override.variation}-${override.clientId}`,
css: variationStyles,
__unstableType: "variation",
variation: override.variation,
// The clientId will be stored with the override and used to ensure
// the order of overrides matches the order of blocks so that the
// correct CSS cascade is maintained.
clientId: override.clientId
});
overriddenClientIds.push(override.clientId);
}
}
}
return newOverrides;
}, [config, overrides, getBlockStyles, getBlockName]);
if (!overridesWithConfig || !overridesWithConfig.length) {
return;
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: overridesWithConfig.map((override) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverrideStyles, { override }, override.id)) });
}
function getVariationStylesWithRefValues(globalStyles, name, variation) {
if (!globalStyles?.styles?.blocks?.[name]?.variations?.[variation]) {
return;
}
const replaceRefs = (variationStyles) => {
Object.keys(variationStyles).forEach((key) => {
const value = variationStyles[key];
if (typeof value === "object" && value !== null) {
if (value.ref !== void 0) {
if (typeof value.ref !== "string" || value.ref.trim() === "") {
delete variationStyles[key];
} else {
const refValue = (0, import_object.getValueFromObjectPath)(
globalStyles,
value.ref
);
if (refValue) {
variationStyles[key] = refValue;
} else {
delete variationStyles[key];
}
}
} else {
replaceRefs(value);
if (Object.keys(value).length === 0) {
delete variationStyles[key];
}
}
}
});
};
const styles = JSON.parse(
JSON.stringify(
globalStyles.styles.blocks[name].variations[variation]
)
);
replaceRefs(styles);
return styles;
}
function useBlockStyleVariation(name, variation, clientId) {
const { globalSettings, globalStyles } = (0, import_data.useSelect)((select) => {
const settings = select(import_store.store).getSettings();
return {
globalSettings: settings.__experimentalFeatures,
globalStyles: settings[import_private_keys.globalStylesDataKey]
};
}, []);
return (0, import_element.useMemo)(() => {
const variationStyles = getVariationStylesWithRefValues(
{
settings: globalSettings,
styles: globalStyles
},
name,
variation
);
return {
settings: globalSettings,
// The variation style data is all that is needed to generate
// the styles for the current application to a block. The variation
// name is updated to match the instance specific class name.
styles: {
blocks: {
[name]: {
variations: {
[`${variation}-${clientId}`]: variationStyles
}
}
}
}
};
}, [globalSettings, globalStyles, variation, clientId, name]);
}
function useBlockProps({ name, className, clientId }) {
const { getBlockStyles } = (0, import_data.useSelect)(import_blocks.store);
const registeredStyles = getBlockStyles(name);
const variation = getVariationNameFromClass(className, registeredStyles);
const variationClass = `${VARIATION_PREFIX}${variation}-${clientId}`;
const { settings, styles } = useBlockStyleVariation(
name,
variation,
clientId
);
const variationStyles = (0, import_element.useMemo)(() => {
if (!variation) {
return;
}
const variationConfig = { settings, styles };
const blockSelectors = (0, import_global_styles_engine.getBlockSelectors)((0, import_blocks.getBlockTypes)(), clientId);
const hasBlockGapSupport = false;
const hasFallbackGapSupport = true;
const disableLayoutStyles = true;
const disableRootPadding = true;
return (0, import_global_styles_engine.toStyles)(
variationConfig,
blockSelectors,
hasBlockGapSupport,
hasFallbackGapSupport,
disableLayoutStyles,
disableRootPadding,
{
blockGap: false,
blockStyles: true,
layoutStyles: false,
marginReset: false,
presets: false,
rootPadding: false,
variationStyles: true
}
);
}, [variation, settings, styles, clientId]);
(0, import_utils.usePrivateStyleOverride)({
id: `variation-${clientId}`,
css: variationStyles,
__unstableType: "variation",
variation,
// The clientId will be stored with the override and used to ensure
// the order of overrides matches the order of blocks so that the
// correct CSS cascade is maintained.
clientId
});
return variation ? { className: variationClass } : {};
}
var block_style_variation_default = {
hasSupport: () => true,
attributeKeys: ["className"],
isMatch: ({ className }) => getVariationMatches(className).length > 0,
useBlockProps
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
__unstableBlockStyleVariationOverridesWithConfig,
getVariationStylesWithRefValues
});
//# sourceMappingURL=block-style-variation.js.map