@wordpress/warning

Utility for warning messages to the console based on a passed condition.

Installation

Install the module

npm install @wordpress/warning --save

This package assumes that your code will run in an ES2015+ environment. If you’re using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @wordpress/babel-preset-default in your code.

Reducing bundle size

Literal strings aren’t minified. Keeping them in your production bundle may increase the bundle size significantly.

To prevent that, you should:

  1. Put @wordpress/warning/babel-plugin into your babel config or use @wordpress/babel-preset-default, which already includes the babel plugin.

    This will make sure your warning calls are wrapped within a condition that checks if SCRIPT_DEBUG === true.

  2. Use UglifyJS, Terser or any other JavaScript parser that performs dead code elimination. This is usually used in conjunction with JavaScript bundlers, such as webpack.

    When parsing the code in production mode, the warning call will be removed altogether.

API

default

Shows a warning with message if environment is not production.

Usage

import warning from '@wordpress/warning';

function MyComponent( props ) {
  if ( ! props.title ) {
    warning( '`props.title` was not passed' );
  }
  ...
}

Parameters

  • message string: Message to show in the warning.

Contributing to this package

This is an individual package that’s part of the Gutenberg project. The project is organized as a monorepo. It’s made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project’s main contributor guide.