@wordpress/block-editor
Version:
73 lines (70 loc) • 2.46 kB
JavaScript
;
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