@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
176 lines (172 loc) • 6.28 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.GlobalStylesProvider = GlobalStylesProvider;
exports.mergeBaseAndUserConfigs = mergeBaseAndUserConfigs;
exports.useGlobalStylesContext = useGlobalStylesContext;
var _deepmerge = _interopRequireDefault(require("deepmerge"));
var _isPlainObject = require("is-plain-object");
var _blockEditor = require("@wordpress/block-editor");
var _coreData = require("@wordpress/core-data");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
GlobalStylesContext,
cleanEmptyObject
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function mergeBaseAndUserConfigs(base, user) {
return (0, _deepmerge.default)(base, user, {
/*
* We only pass as arrays the presets,
* in which case we want the new array of values
* to override the old array (no merging).
*/
isMergeableObject: _isPlainObject.isPlainObject,
/*
* Exceptions to the above rule.
* Background images should be replaced, not merged,
* as they themselves are specific object definitions for the style.
*/
customMerge: key => {
if (key === 'backgroundImage') {
return (baseConfig, userConfig) => userConfig;
}
return undefined;
}
});
}
function useGlobalStylesUserConfig() {
const {
globalStylesId,
isReady,
settings,
styles,
_links
} = (0, _data.useSelect)(select => {
const {
getEntityRecord,
getEditedEntityRecord,
hasFinishedResolution,
canUser
} = select(_coreData.store);
const _globalStylesId = select(_coreData.store).__experimentalGetCurrentGlobalStylesId();
let record;
const userCanEditGlobalStyles = canUser('update', {
kind: 'root',
name: 'globalStyles',
id: _globalStylesId
});
if (_globalStylesId) {
if (userCanEditGlobalStyles) {
record = getEditedEntityRecord('root', 'globalStyles', _globalStylesId);
} else {
record = getEntityRecord('root', 'globalStyles', _globalStylesId, {
context: 'view'
});
}
}
let hasResolved = false;
if (hasFinishedResolution('__experimentalGetCurrentGlobalStylesId')) {
if (_globalStylesId) {
hasResolved = userCanEditGlobalStyles ? hasFinishedResolution('getEditedEntityRecord', ['root', 'globalStyles', _globalStylesId]) : hasFinishedResolution('getEntityRecord', ['root', 'globalStyles', _globalStylesId, {
context: 'view'
}]);
} else {
hasResolved = true;
}
}
return {
globalStylesId: _globalStylesId,
isReady: hasResolved,
settings: record?.settings,
styles: record?.styles,
_links: record?._links
};
}, []);
const {
getEditedEntityRecord
} = (0, _data.useSelect)(_coreData.store);
const {
editEntityRecord
} = (0, _data.useDispatch)(_coreData.store);
const config = (0, _element.useMemo)(() => {
return {
settings: settings !== null && settings !== void 0 ? settings : {},
styles: styles !== null && styles !== void 0 ? styles : {},
_links: _links !== null && _links !== void 0 ? _links : {}
};
}, [settings, styles, _links]);
const setConfig = (0, _element.useCallback)(
/**
* Set the global styles config.
* @param {Function|Object} callbackOrObject If the callbackOrObject is a function, pass the current config to the callback so the consumer can merge values.
* Otherwise, overwrite the current config with the incoming object.
* @param {Object} options Options for editEntityRecord Core selector.
*/
(callbackOrObject, options = {}) => {
var _record$styles, _record$settings, _record$_links;
const record = getEditedEntityRecord('root', 'globalStyles', globalStylesId);
const currentConfig = {
styles: (_record$styles = record?.styles) !== null && _record$styles !== void 0 ? _record$styles : {},
settings: (_record$settings = record?.settings) !== null && _record$settings !== void 0 ? _record$settings : {},
_links: (_record$_links = record?._links) !== null && _record$_links !== void 0 ? _record$_links : {}
};
const updatedConfig = typeof callbackOrObject === 'function' ? callbackOrObject(currentConfig) : callbackOrObject;
editEntityRecord('root', 'globalStyles', globalStylesId, {
styles: cleanEmptyObject(updatedConfig.styles) || {},
settings: cleanEmptyObject(updatedConfig.settings) || {},
_links: cleanEmptyObject(updatedConfig._links) || {}
}, options);
}, [globalStylesId, editEntityRecord, getEditedEntityRecord]);
return [isReady, config, setConfig];
}
function useGlobalStylesBaseConfig() {
const baseConfig = (0, _data.useSelect)(select => select(_coreData.store).__experimentalGetCurrentThemeBaseGlobalStyles(), []);
return [!!baseConfig, baseConfig];
}
function useGlobalStylesContext() {
const [isUserConfigReady, userConfig, setUserConfig] = useGlobalStylesUserConfig();
const [isBaseConfigReady, baseConfig] = useGlobalStylesBaseConfig();
const mergedConfig = (0, _element.useMemo)(() => {
if (!baseConfig || !userConfig) {
return {};
}
return mergeBaseAndUserConfigs(baseConfig, userConfig);
}, [userConfig, baseConfig]);
const context = (0, _element.useMemo)(() => {
return {
isReady: isUserConfigReady && isBaseConfigReady,
user: userConfig,
base: baseConfig,
merged: mergedConfig,
setUserConfig
};
}, [mergedConfig, userConfig, baseConfig, setUserConfig, isUserConfigReady, isBaseConfigReady]);
return context;
}
function GlobalStylesProvider({
children
}) {
const context = useGlobalStylesContext();
if (!context.isReady) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesContext.Provider, {
value: context,
children: children
});
}
//# sourceMappingURL=index.js.map