Cómo crear una notificación en Gutenberg usando JavaScript

Muchas veces cuando estamos usando el editor Gutenberg (Wordpress) tenemos la necesidad de informar al usuario final que algo ocurrió, ya sea algo bueno y especialmente si es algo malo. Con el uso de Javascript en las plugins, debemos de tener en cuenta que el mismo paquete de Wordpress nos da una manera fácil de crear 4 tipos de notificaciones para el usuario final.

Tipos de notificación

Wordpress nos ofrece 4 distintos tipos de notificación para el usuario final al usar el editor Gutenberg, estos son los siguientes:

1. Información (Info)
2. Alerta (Warning)
3. Error (Error)
4. Éxito (Success)

Wordpress también nos permite usar un parámetro ID al crear dichas notificaciones, el cuál es útil cuando queremos mantener las alertas al mínimo, ya que se irán sobreescribiendo las alertas con el mismo ID. Por ejemplo, si usamos un id "mi-plugin", y enviamos tres alertas con el mismo id, solamente se desplegará la última alerta; de tal manera que, si no usamos el parámetro de ID y enviamos las mismas tres alertas, las tres se desplegaran y ocuparán más espacio en pantalla.

Ambas opciones tienen sus casos de uso, para los ejemplos utilizaré el parámetro de ID, pero recuerden que es opcional.

Información

wp.data.dispatch('core/notices').createInfoNotice(

    'This is an INFO Notice', 

    {id: 'info-notice'}

);

Alerta

wp.data.dispatch('core/notices').createWarningNotice(

    'This is a WARNING Notice',

    {id: 'warning-notice'}

);

Error

wp.data.dispatch('core/notices').createErrorNotice(

    'Tis is an ERROR Notice', 

    {id: 'error-notice'}

);

Éxito

wp.data.dispatch('core/notices').createSuccessNotice(

    'This is a SUCCESS Notice', 

    {id: 'success-notice'}

);