UNPKG

@wordpress/block-editor

Version:
73 lines (70 loc) 2.46 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = ImageSettingsPanel; exports.useHasImageSettingsPanel = useHasImageSettingsPanel; var _components = require("@wordpress/components"); var _i18n = require("@wordpress/i18n"); var _utils = require("./utils"); var _jsxRuntime = require("react/jsx-runtime"); /** * WordPress dependencies */ /** * Internal dependencies */ function useHasImageSettingsPanel(name, value, inheritedValue) { // Note: If lightbox `value` exists, that means it was // defined via the the Global Styles UI and will NOT // be a boolean value or contain the `allowEditing` property, // so we should show the settings panel in those cases. return name === 'core/image' && inheritedValue?.lightbox?.allowEditing || !!value?.lightbox; } function ImageSettingsPanel({ onChange, value, inheritedValue, panelId }) { const dropdownMenuProps = (0, _utils.useToolsPanelDropdownMenuProps)(); const resetLightbox = () => { onChange(undefined); }; const onChangeLightbox = newSetting => { onChange({ enabled: newSetting }); }; let lightboxChecked = false; if (inheritedValue?.lightbox?.enabled) { lightboxChecked = inheritedValue.lightbox.enabled; } return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, { children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanel, { label: (0, _i18n._x)('Settings', 'Image settings'), resetAll: resetLightbox, panelId: panelId, dropdownMenuProps: dropdownMenuProps, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem // We use the `userSettings` prop instead of `settings`, because `settings` // contains the core/theme values for the lightbox and we want to show the // "RESET" button ONLY when the user has explicitly set a value in the // Global Styles. , { hasValue: () => !!value?.lightbox, label: (0, _i18n.__)('Enlarge on click'), onDeselect: resetLightbox, isShownByDefault: true, panelId: panelId, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, { __nextHasNoMarginBottom: true, label: (0, _i18n.__)('Enlarge on click'), checked: lightboxChecked, onChange: onChangeLightbox }) }) }) }); } //# sourceMappingURL=image-settings-panel.js.map