@wordpress/block-editor
Version:
129 lines (123 loc) • 4.18 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = BackgroundImagePanel;
exports.hasBackgroundImageValue = hasBackgroundImageValue;
exports.hasBackgroundSizeValue = hasBackgroundSizeValue;
exports.useHasBackgroundPanel = useHasBackgroundPanel;
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _backgroundImageControl = _interopRequireDefault(require("../background-image-control"));
var _utils = require("./utils");
var _object = require("../../utils/object");
var _i18n = require("@wordpress/i18n");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const DEFAULT_CONTROLS = {
backgroundImage: true
};
/**
* Checks site settings to see if the background panel may be used.
* `settings.background.backgroundSize` exists also,
* but can only be used if settings?.background?.backgroundImage is `true`.
*
* @param {Object} settings Site settings
* @return {boolean} Whether site settings has activated background panel.
*/
function useHasBackgroundPanel(settings) {
return _element.Platform.OS === 'web' && settings?.background?.backgroundImage;
}
/**
* Checks if there is a current value in the background size block support
* attributes. Background size values include background size as well
* as background position.
*
* @param {Object} style Style attribute.
* @return {boolean} Whether the block has a background size value set.
*/
function hasBackgroundSizeValue(style) {
return style?.background?.backgroundPosition !== undefined || style?.background?.backgroundSize !== undefined;
}
/**
* Checks if there is a current value in the background image block support
* attributes.
*
* @param {Object} style Style attribute.
* @return {boolean} Whether the block has a background image value set.
*/
function hasBackgroundImageValue(style) {
return !!style?.background?.backgroundImage?.id ||
// Supports url() string values in theme.json.
'string' === typeof style?.background?.backgroundImage || !!style?.background?.backgroundImage?.url;
}
function BackgroundToolsPanel({
resetAllFilter,
onChange,
value,
panelId,
children,
headerLabel
}) {
const dropdownMenuProps = (0, _utils.useToolsPanelDropdownMenuProps)();
const resetAll = () => {
const updatedValue = resetAllFilter(value);
onChange(updatedValue);
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanel, {
label: headerLabel,
resetAll: resetAll,
panelId: panelId,
dropdownMenuProps: dropdownMenuProps,
children: children
});
}
function BackgroundImagePanel({
as: Wrapper = BackgroundToolsPanel,
value,
onChange,
inheritedValue,
settings,
panelId,
defaultControls = DEFAULT_CONTROLS,
defaultValues = {},
headerLabel = (0, _i18n.__)('Background image')
}) {
const showBackgroundImageControl = useHasBackgroundPanel(settings);
const resetBackground = () => onChange((0, _object.setImmutably)(value, ['background'], {}));
const resetAllFilter = (0, _element.useCallback)(previousValue => {
return {
...previousValue,
background: {}
};
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
resetAllFilter: resetAllFilter,
value: value,
onChange: onChange,
panelId: panelId,
headerLabel: headerLabel,
children: showBackgroundImageControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!value?.background,
label: (0, _i18n.__)('Image'),
onDeselect: resetBackground,
isShownByDefault: defaultControls.backgroundImage,
panelId: panelId,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_backgroundImageControl.default, {
value: value,
onChange: onChange,
settings: settings,
inheritedValue: inheritedValue,
defaultControls: defaultControls,
defaultValues: defaultValues
})
})
});
}
//# sourceMappingURL=background-panel.js.map