Add styling to Notice actions

[marijnbent]

Actions in notices are quite limited. You can either a url or an onClick. The url renders a , while the onClick renders an button. Either options lack a way to add styling.

Feel free to refactor the editor.js file a bit as well.. A better way when and what notices should be shown.

It would be nice to have a functionality to add a class to a button or link. The link always opens in the same tab so if possible, adding some attributes wouldn't be too bad either.

1. editor.js:34 This button should be is-primary
2. editor.js:105 Add a link style button or link. Text: get_data('translations.contact_wordproof_support_button_text'). Link: 'https://help.wordproof.com'

/resources/js/helpers/editor.js

			errorNoticeOptions.actions = [
				{
					label: getData( 'translations.open_settings_button_text' ),
					onClick: () => {
						dispatch( 'wordproof:open_settings' );
					},
				},
			];

			createErrorNotice(
				getData( 'translations.no_balance' ),
				errorNoticeOptions
			);

[merlijnvanlent]

@marijnbent I have found many github issues and discussions about the lack of raw HTML support for the content... I have also not found a nice workaround to add custom HTML to the notices.

However opening the link in a new window is quite easy. Instead of using the URL option, we use the onclick option to open it ourselves.

const noticeOptions {
  label: 'This is a label',
  actions: [{
            label: 'Click me!',
            onClick: () => {
                window.open('https://example.com', '_blank').focus();
            }
        }
    ]
}