在 WordPress 的古腾堡中单击更新时如何使用 e.preventDefault()答案

【问题标题】：How to e.preventDefault() when clicking on Update in Gutenberg, WordPress在 WordPress 的古腾堡中单击更新时如何使用 e.preventDefault()
【发布时间】：2022-12-16 10:41:13
【问题描述】：

在 WordPress 的古腾堡点击 Update 时如何 e.preventDefault()？

我想做的是检查一些东西，如果有任何错误，我将阻止更新过程并显示错误。

我的代码：

$(document).on('click', '#editor .editor-post-publish-button', function (e) {
    e.preventDefault();
    // Show Errors...
});

然而，e.preventDefault() 并没有阻止这个过程，帖子正在更新。

【问题讨论】：

如果您正在处理古腾堡错误，我不确定这是要走的路。你的问题很笼统——如果你解释得更详细一点，可能有人会建议另一种方法来做你需要做的事情。我不知道发布按钮是如何实现的，但取决于它是如何实现的，preventDefault 可能没有任何效果，因为它实际上是为了防止默认操作，而不是用户添加的操作。
@Frizzant 是的，你是对的。如果有人可以帮助我防止它使用 jQuery 以外的东西提交，我将不胜感激。

标签： wordpress wordpress-gutenberg

【解决方案1】：

使用 JavaScript，如果您自己的验证逻辑检测到任何问题，您可以使用核心 WordPress Block API issue error notices，并在出现错误时阻止帖子保存，例如：

JavaScript

// Create error notice
wp.data.dispatch('core/notices').createErrorNotice(
    'A value is required', // Message displayed to User
    {
        id: 'my-field', // Used to remove notice and check if notice is present
        isDismissible: false,
    }
);

// Remove notice
wp.data.dispatch('core/notices').removeNotice('my-field'); // unique id 'my-field'

// Prevent post from saving
wp.data.dispatch( 'core/editor' ).lockPostSaving( 'my-field' );

// Enable post saving
wp.data.dispatch( 'core/editor' ).unlockPostSaving( 'my-field' );

通过使用本机 WordPress API，可以处理通知的显示和样式并保持用户体验一致。该文档还有 an example of preventing a post from publishing，这也可能有帮助。

【讨论】：