UNPKG

@wordpress/block-editor

Version:
129 lines (123 loc) 4.18 kB
"use strict"; 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