@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 _element = require("@wordpress/element");

var _components = require("@wordpress/components");

var _i18n = require("@wordpress/i18n");

var _icons = require("@wordpress/icons");

var _transformStyles = _interopRequireDefault(require("../../utils/transform-styles"));

/**
 * 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) {
      const [transformed] = (0, _transformStyles.default)([{
        css: value
      }], '.editor-styles-wrapper');

      if (transformed) {
        setCSSError(null);
      }
    }
  }

  function handleOnBlur(event) {
    if (!event?.target?.value) {
      setCSSError(null);
      return;
    }

    const [transformed] = (0, _transformStyles.default)([{
      css: event.target.value
    }], '.editor-styles-wrapper');
    setCSSError(transformed === null ? (0, _i18n.__)('There is an error with your CSS structure.') : null);
  }

  return (0, _element.createElement)(_components.__experimentalVStack, {
    spacing: 3
  }, (0, _element.createElement)(_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
  }), cssError && (0, _element.createElement)(_components.Tooltip, {
    text: cssError
  }, (0, _element.createElement)("div", {
    className: "block-editor-global-styles-advanced-panel__custom-css-validation-wrapper"
  }, (0, _element.createElement)(_icons.Icon, {
    icon: _icons.info,
    className: "block-editor-global-styles-advanced-panel__custom-css-validation-icon"
  }))));
}
//# sourceMappingURL=advanced-panel.js.map