@wordpress/block-editor
Version:
106 lines (105 loc) • 3.12 kB
JavaScript
// packages/block-editor/src/components/responsive-block-control/index.js
import clsx from "clsx";
import { __, _x, sprintf } from "@wordpress/i18n";
import { Fragment } from "@wordpress/element";
import { ToggleControl } from "@wordpress/components";
import ResponsiveBlockControlLabel from "./label";
import { jsx, jsxs } from "react/jsx-runtime";
function ResponsiveBlockControl(props) {
const {
title,
property,
toggleLabel,
onIsResponsiveChange,
renderDefaultControl,
renderResponsiveControls,
isResponsive = false,
defaultLabel = {
id: "all",
label: _x("All", "screen sizes")
},
viewports = [
{
id: "small",
label: __("Small screens")
},
{
id: "medium",
label: __("Medium screens")
},
{
id: "large",
label: __("Large screens")
}
]
} = props;
if (!title || !property || !renderDefaultControl) {
return null;
}
const toggleControlLabel = toggleLabel || sprintf(
/* translators: %s: Property value for the control (eg: margin, padding, etc.). */
__("Use the same %s on all screen sizes."),
property
);
const toggleHelpText = __(
"Choose whether to use the same value for all screen sizes or a unique value for each screen size."
);
const defaultControl = renderDefaultControl(
/* @__PURE__ */ jsx(
ResponsiveBlockControlLabel,
{
property,
viewport: defaultLabel
}
),
defaultLabel
);
const defaultResponsiveControls = () => {
return viewports.map((viewport) => /* @__PURE__ */ jsx(Fragment, { children: renderDefaultControl(
/* @__PURE__ */ jsx(
ResponsiveBlockControlLabel,
{
property,
viewport
}
),
viewport
) }, viewport.id));
};
return /* @__PURE__ */ jsxs("fieldset", { className: "block-editor-responsive-block-control", children: [
/* @__PURE__ */ jsx("legend", { className: "block-editor-responsive-block-control__title", children: title }),
/* @__PURE__ */ jsxs("div", { className: "block-editor-responsive-block-control__inner", children: [
/* @__PURE__ */ jsx(
ToggleControl,
{
__nextHasNoMarginBottom: true,
className: "block-editor-responsive-block-control__toggle",
label: toggleControlLabel,
checked: !isResponsive,
onChange: onIsResponsiveChange,
help: toggleHelpText
}
),
/* @__PURE__ */ jsxs(
"div",
{
className: clsx(
"block-editor-responsive-block-control__group",
{
"is-responsive": isResponsive
}
),
children: [
!isResponsive && defaultControl,
isResponsive && (renderResponsiveControls ? renderResponsiveControls(viewports) : defaultResponsiveControls())
]
}
)
] })
] });
}
var responsive_block_control_default = ResponsiveBlockControl;
export {
responsive_block_control_default as default
};
//# sourceMappingURL=index.js.map