@wordpress/block-editor
Version:
92 lines (88 loc) • 3.24 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _label = _interopRequireDefault(require("./label"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ResponsiveBlockControl(props) {
const {
title,
property,
toggleLabel,
onIsResponsiveChange,
renderDefaultControl,
renderResponsiveControls,
isResponsive = false,
defaultLabel = {
id: 'all',
label: (0, _i18n._x)('All', 'screen sizes')
},
viewports = [{
id: 'small',
label: (0, _i18n.__)('Small screens')
}, {
id: 'medium',
label: (0, _i18n.__)('Medium screens')
}, {
id: 'large',
label: (0, _i18n.__)('Large screens')
}]
} = props;
if (!title || !property || !renderDefaultControl) {
return null;
}
const toggleControlLabel = toggleLabel || (0, _i18n.sprintf)(/* translators: %s: Property value for the control (eg: margin, padding, etc.). */
(0, _i18n.__)('Use the same %s on all screen sizes.'), property);
const toggleHelpText = (0, _i18n.__)('Choose whether to use the same value for all screen sizes or a unique value for each screen size.');
const defaultControl = renderDefaultControl(/*#__PURE__*/(0, _jsxRuntime.jsx)(_label.default, {
property: property,
viewport: defaultLabel
}), defaultLabel);
const defaultResponsiveControls = () => {
return viewports.map(viewport => /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.Fragment, {
children: renderDefaultControl(/*#__PURE__*/(0, _jsxRuntime.jsx)(_label.default, {
property: property,
viewport: viewport
}), viewport)
}, viewport.id));
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
className: "block-editor-responsive-block-control",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
className: "block-editor-responsive-block-control__title",
children: title
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "block-editor-responsive-block-control__inner",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
className: "block-editor-responsive-block-control__toggle",
label: toggleControlLabel,
checked: !isResponsive,
onChange: onIsResponsiveChange,
help: toggleHelpText
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _clsx.default)('block-editor-responsive-block-control__group', {
'is-responsive': isResponsive
}),
children: [!isResponsive && defaultControl, isResponsive && (renderResponsiveControls ? renderResponsiveControls(viewports) : defaultResponsiveControls())]
})]
})]
});
}
var _default = exports.default = ResponsiveBlockControl;
//# sourceMappingURL=index.js.map