@wordpress/block-editor
Version:
182 lines (175 loc) • 6.29 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BACKGROUND_SUPPORT_KEY = exports.BACKGROUND_BLOCK_DEFAULT_VALUES = void 0;
exports.BackgroundImagePanel = BackgroundImagePanel;
exports.default = void 0;
exports.getBackgroundImageClasses = getBackgroundImageClasses;
exports.hasBackgroundSupport = hasBackgroundSupport;
exports.setBackgroundStyleDefaults = setBackgroundStyleDefaults;
var _blocks = require("@wordpress/blocks");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));
var _utils = require("./utils");
var _store = require("../store");
var _backgroundPanel = _interopRequireWildcard(require("../components/global-styles/background-panel"));
var _privateKeys = require("../store/private-keys");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const BACKGROUND_SUPPORT_KEY = exports.BACKGROUND_SUPPORT_KEY = 'background';
// Initial control values.
const BACKGROUND_BLOCK_DEFAULT_VALUES = exports.BACKGROUND_BLOCK_DEFAULT_VALUES = {
backgroundSize: 'cover',
backgroundPosition: '50% 50%' // used only when backgroundSize is 'contain'.
};
/**
* Determine whether there is block support for background.
*
* @param {string} blockName Block name.
* @param {string} feature Background image feature to check for.
*
* @return {boolean} Whether there is support.
*/
function hasBackgroundSupport(blockName, feature = 'any') {
const support = (0, _blocks.getBlockSupport)(blockName, BACKGROUND_SUPPORT_KEY);
if (support === true) {
return true;
}
if (feature === 'any') {
return !!support?.backgroundImage || !!support?.backgroundSize || !!support?.backgroundRepeat;
}
return !!support?.[feature];
}
function setBackgroundStyleDefaults(backgroundStyle) {
if (!backgroundStyle || !backgroundStyle?.backgroundImage?.url) {
return;
}
let backgroundStylesWithDefaults;
// Set block background defaults.
if (!backgroundStyle?.backgroundSize) {
backgroundStylesWithDefaults = {
backgroundSize: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize
};
}
if ('contain' === backgroundStyle?.backgroundSize && !backgroundStyle?.backgroundPosition) {
backgroundStylesWithDefaults = {
backgroundPosition: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition
};
}
return backgroundStylesWithDefaults;
}
function useBlockProps({
name,
style
}) {
if (!hasBackgroundSupport(name) || !style?.background?.backgroundImage) {
return;
}
const backgroundStyles = setBackgroundStyleDefaults(style?.background);
if (!backgroundStyles) {
return;
}
return {
style: {
...backgroundStyles
}
};
}
/**
* Generates a CSS class name if an background image is set.
*
* @param {Object} style A block's style attribute.
*
* @return {string} CSS class name.
*/
function getBackgroundImageClasses(style) {
return (0, _backgroundPanel.hasBackgroundImageValue)(style) ? 'has-background' : '';
}
function BackgroundInspectorControl({
children
}) {
const resetAllFilter = (0, _element.useCallback)(attributes => {
return {
...attributes,
style: {
...attributes.style,
background: undefined
}
};
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default, {
group: "background",
resetAllFilter: resetAllFilter,
children: children
});
}
function BackgroundImagePanel({
clientId,
name,
setAttributes,
settings
}) {
const {
style,
inheritedValue
} = (0, _data.useSelect)(select => {
const {
getBlockAttributes,
getSettings
} = select(_store.store);
const _settings = getSettings();
return {
style: getBlockAttributes(clientId)?.style,
/*
* To ensure we pass down the right inherited values:
* @TODO 1. Pass inherited value down to all block style controls,
* See: packages/block-editor/src/hooks/style.js
* @TODO 2. Add support for block style variations,
* See implementation: packages/block-editor/src/hooks/block-style-variation.js
*/
inheritedValue: _settings[_privateKeys.globalStylesDataKey]?.blocks?.[name]
};
}, [clientId, name]);
if (!(0, _backgroundPanel.useHasBackgroundPanel)(settings) || !hasBackgroundSupport(name, 'backgroundImage')) {
return null;
}
const onChange = newStyle => {
setAttributes({
style: (0, _utils.cleanEmptyObject)(newStyle)
});
};
const updatedSettings = {
...settings,
background: {
...settings.background,
backgroundSize: settings?.background?.backgroundSize && hasBackgroundSupport(name, 'backgroundSize')
}
};
const defaultControls = (0, _blocks.getBlockSupport)(name, [BACKGROUND_SUPPORT_KEY, 'defaultControls']);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_backgroundPanel.default, {
inheritedValue: inheritedValue,
as: BackgroundInspectorControl,
panelId: clientId,
defaultValues: BACKGROUND_BLOCK_DEFAULT_VALUES,
settings: updatedSettings,
onChange: onChange,
defaultControls: defaultControls,
value: style
});
}
var _default = exports.default = {
useBlockProps,
attributeKeys: ['style'],
hasSupport: hasBackgroundSupport
};
//# sourceMappingURL=background.js.map