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

Generic block editor.

import { createElement } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { TextareaControl, Tooltip, __experimentalVStack as VStack } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Icon, info } from '@wordpress/icons';
/**
 * Internal dependencies
 */

import { default as transformStyles } from '../../utils/transform-styles';
export default function AdvancedPanel({
  value,
  onChange,
  inheritedValue = value
}) {
  // Custom CSS
  const [cssError, setCSSError] = useState(null);
  const customCSS = inheritedValue?.css;

  function handleOnChange(newValue) {
    onChange({ ...value,
      css: newValue
    });

    if (cssError) {
      const [transformed] = transformStyles([{
        css: value
      }], '.editor-styles-wrapper');

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

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

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

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