@wordpress/block-editor/build/components/global-styles/advanced-panel.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = AdvancedPanel;
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _transformStyles = _interopRequireDefault(require("../../utils/transform-styles"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function AdvancedPanel({
  value,
  onChange,
  inheritedValue = value
}) {
  // Custom CSS
  const [cssError, setCSSError] = (0, _element.useState)(null);
  const customCSS = inheritedValue?.css;
  function handleOnChange(newValue) {
    onChange({
      ...value,
      css: newValue
    });
    if (cssError) {
      // Check if the new value is valid CSS, and pass a wrapping selector
      // to ensure that `transformStyles` validates the CSS. Note that the
      // wrapping selector here is not used in the actual output of any styles.
      const [transformed] = (0, _transformStyles.default)([{
        css: newValue
      }], '.for-validation-only');
      if (transformed) {
        setCSSError(null);
      }
    }
  }
  function handleOnBlur(event) {
    if (!event?.target?.value) {
      setCSSError(null);
      return;
    }

    // Check if the new value is valid CSS, and pass a wrapping selector
    // to ensure that `transformStyles` validates the CSS. Note that the
    // wrapping selector here is not used in the actual output of any styles.
    const [transformed] = (0, _transformStyles.default)([{
      css: event.target.value
    }], '.for-validation-only');
    setCSSError(transformed === null ? (0, _i18n.__)('There is an error with your CSS structure.') : null);
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
    spacing: 3,
    children: [cssError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
      status: "error",
      onRemove: () => setCSSError(null),
      children: cssError
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextareaControl, {
      label: (0, _i18n.__)('Additional CSS'),
      __nextHasNoMarginBottom: true,
      value: customCSS,
      onChange: newValue => handleOnChange(newValue),
      onBlur: handleOnBlur,
      className: "block-editor-global-styles-advanced-panel__custom-css-input",
      spellCheck: false
    })]
  });
}
//# sourceMappingURL=advanced-panel.js.map