@wordpress/block-editor
Version:
66 lines (65 loc) • 1.83 kB
JavaScript
// packages/block-editor/src/components/global-styles/advanced-panel.js
import {
TextareaControl,
Notice,
__experimentalVStack as VStack
} from "@wordpress/components";
import { useState } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { default as transformStyles } from "../../utils/transform-styles";
import { jsx, jsxs } from "react/jsx-runtime";
function AdvancedPanel({
value,
onChange,
inheritedValue = value
}) {
const [cssError, setCSSError] = useState(null);
const customCSS = inheritedValue?.css;
function handleOnChange(newValue) {
onChange({
...value,
css: newValue
});
if (cssError) {
const [transformed] = transformStyles(
[{ css: newValue }],
".for-validation-only"
);
if (transformed) {
setCSSError(null);
}
}
}
function handleOnBlur(event) {
if (!event?.target?.value) {
setCSSError(null);
return;
}
const [transformed] = transformStyles(
[{ css: event.target.value }],
".for-validation-only"
);
setCSSError(
transformed === null ? __("There is an error with your CSS structure.") : null
);
}
return /* @__PURE__ */ jsxs(VStack, { spacing: 3, children: [
cssError && /* @__PURE__ */ jsx(Notice, { status: "error", onRemove: () => setCSSError(null), children: cssError }),
/* @__PURE__ */ jsx(
TextareaControl,
{
label: __("Additional CSS"),
__nextHasNoMarginBottom: true,
value: customCSS,
onChange: (newValue) => handleOnChange(newValue),
onBlur: handleOnBlur,
className: "block-editor-global-styles-advanced-panel__custom-css-input",
spellCheck: false
}
)
] });
}
export {
AdvancedPanel as default
};
//# sourceMappingURL=advanced-panel.js.map