How to make a JavaScript validation on WordPress Gutenberg Editor Metabox

Question

I am creating a custom taxonomy date for a custom post type announcement on the new version of WordPress with Gutenberg .

I need this taxonomy to be a mandatory field to publish the post, and I already tried with

<input type="date" required>

and it did not work, now I am struggling to validate that input with class "requireMe".

So what I tried to do is to capture the Publish Post button with JavaScript and disable it either this input was already set or not.

My first problem here was that I never could capture this button because it is not part of the actual DOM, so I already notice there is a new way to do this through the API but I cant find a proper documentation to do so.

All I need is to make this validation.

as shown in this image

Answer 1

You can use the Editor store and dispatch an event which disables saving the post until you unlock it again.

wp.data.dispatch( 'core/editor' ).lockPostSaving( 'my_lock_key' );

to disable the lock, call:

wp.data.dispatch( 'core/editor' ).unlockPostSaving( 'my_lock_key' );

You could also optionally dispatch a notice that shows at the top of the editor.

wp.data.dispatch( 'core/notices' ).removeNotice('LOCK_NOTICE');
wp.data.dispatch( 'core/notices' ).createErrorNotice( 'Please enter a date to continue.', { id: 'LOCK_NOTICE',isDismissible: true} ) ;