Cannot add a class to the Gutenberg notice div?

[jsmoriss]

I've tried this, but no success:

createSuccessNotice( noticeElement, { className: 'custom-notice-class' } );

Is it possible to add an extra class or remove existing classes form the notice container?

Specifically, this container, but only when it contains the above noticeElement.

<div class="notice notice-alt notice-success is-dismissible">

Thanks,

js.

[aduth]

Does the class name need to be applied to the notice wrapper, or is it sufficient to pass a class name to your rendered child element?

[jsmoriss]

I'm giving createNotice a complete notice, so the wrapper is redundant and messing up the notice (with extra padding etc). I need to either: remove a class, add a class, or remove the wrapper completely. Removing the wrapper would be my preferred choice. :)

Right now I'm doing this, to get around the Gutenberg limitation, but this isn't what I'd call optimal. :)

noticeObj = createNotice( noticeStatus, noticeElement, noticeOptions );

jQuery( 'div.my-notice' ).parents( 'div.notice' ).removeClass( 'notice' );

js.

[aduth]

Could you provide more details about the type of notices you're showing that requires that you'd need to substitute the default experience with your own? As part of #3330, ideally this should be better supported out of the box; separately toward a goal of consistent user experience with notices.

[jsmoriss]

No thanks.

You have the option of making things easy for developers, or not. Either way, developers will find a way. ;-)

js.

[aduth]

That's not a very helpful or collaborative response.

My previous comment was probing for more information about where notices are currently lacking, with intentions of improving support for use cases which aren't currently satisfied.

[jsmoriss]

I gave you the information (see again bellow). It sounds to me like you're looking for a way to judge whether my use is valid or not. I'm not really interested in doing that - my use is valid to me and other developers. You may provide a more open API or not - either way, developers will find a way (as shown bellow) - it would just be easier with a more open API. ;-)

I'm giving createNotice a complete notice, so the wrapper is redundant and messing up the notice (with extra padding etc). I need to either: remove a class, add a class, or remove the wrapper completely. Removing the wrapper would be my preferred choice. :)

Right now I'm doing this, to get around the Gutenberg limitation, but this isn't what I'd call optimal. :)

noticeObj = createNotice( noticeStatus, noticeElement, noticeOptions );

jQuery( 'div.my-notice' ).parents( 'div.notice' ).removeClass( 'notice' );

[aduth]

You've made a request for a specific functionality of the API, but have not provided the context for arriving at this conclusion. Instead, you've chosen to withhold these details, presuming (wrongly, I'd add) to know that I have ill intentions.

Ultimately, you may well be right that this feature should be added. The real-world use-cases of developers can certainly highlight where deficiencies exist in the current implementation. But you've refused to engage in any meaningful discussion of the solution which best addresses the needs of the majority of developers and end-users.

As it stands, this is not a productive conversation, and without cooperation there's nothing to be done.

[jsmoriss]

I did not open this issue to converse, simply to highlight a possible issue. I've shown you an example, including a work-around. Hopefully the work-around will be helpful to other developers facing this same problem.

js.

[jcrawford]

@aduth I stumbled upon this ticket while attempting to integrate a feature myself. I wanted to add notices to alert the user why we were locking post saving, this works fine. However, when we unlock post saving I wanted to remove the notices automatically. I am unable to remove only notices that my block is putting up since I cannot get a className to add to the element.

This is what is currently outputted.

<div class="components-notice is-warning is-dismissible">
  <div class="components-notice__content">
    Saving is disabled until you select a page.
  </div>
  <button type="button" aria-label="Dismiss this notice" class="components-button components-icon-button components-notice__dismiss">
    <svg aria-hidden="true" role="img" focusable="false" class="dashicon dashicons-no-alt" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
      <path d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"></path>
    </svg>
  </button>
</div>

I would like the ability to add a className to the parent div so that I could remove any notices with the class from the DOM.

[aduth]

@jcrawford When you create a notice using the Notice's data store (as in the original example, wp.data.dispatch( 'core/notices' ).createNotice, you can assign an id, which can be later referenced for removing.

https://github.com/WordPress/gutenberg/blob/38f4914149bc6fecbeb45e86ed29b2c101ca65fc/packages/notices/src/store/actions.js#L30-L32

Example:

const id = 'my-id';
wp.data.dispatch( 'core/notices' ).createNotice( 'Hello world', { id: id } );
// ... some time later
wp.data.dispatch( 'core/notices' ).removeNotice( id );

[jcrawford]

@aduth thanks for getting back to me. I had not checked this ticket but did find that I was able to make use of removeNotice :) Appreciate it!