通知是显示在管理页面顶部的信息性用户界面。WordPress 核心、主题和插件都使用通知来指示操作的结果,或引起用户对必要信息的注意。

在经典编辑器中,挂钩到 admin_notices 动作的通知可以渲染它们想要的任何 HTML。在块编辑器中,通知仅限于更正式的 API。

经典编辑器中的通知

在经典编辑器中,这是“帖子草稿已更新”通知的示例:

经典编辑器中的帖子草稿已更新

生成等效的“帖子草稿已更新”通知需要如下代码:

/**
 * 挂钩到 'admin_notices' 动作以渲染
 * 通用 HTML 通知。
 */
function myguten_admin_notice() {
    $screen = get_current_screen();
    // 仅在帖子编辑器中渲染此通知。
    if ( ! $screen || 'post' !== $screen->base ) {
        return;
    }
    // 渲染通知的 HTML。
    wp_admin_notice(
        sprintf( __( 'Post draft updated. <a href="%s" target="_blank">Preview post</a>' ), get_preview_post_link() ),
        array(
            'type'        => 'success',
            'dismissible' => true,
        )
    );
};
add_action( 'admin_notices', 'myguten_admin_notice' );

重要的是,admin_notices 钩子允许开发人员渲染他们想要的任何 HTML。一个优势是开发人员拥有很大的灵活性。关键劣势是任意 HTML 使得对通知的未来迭代更加困难,甚至不可能,因为迭代需要适应任意 HTML。这就是为什么块编辑器有一个正式的 API。

块编辑器中的通知

在块编辑器中,这是“帖子已发布”通知的示例:

块编辑器中的帖子已发布

生成等效的“帖子已发布”通知需要如下代码:

( function ( wp ) {
    wp.data.dispatch( 'core/notices' ).createNotice(
        'success', // 可以是以下之一:success, info, warning, error。
        'Post published.', // 要显示的文本字符串。
        {
            isDismissible: true, // 用户是否可以关闭通知。
            // 用户可以执行的操作。
            actions: [
                {
                    url: '#',
                    label: 'View post',
                },
            ],
        }
    );
} )( window.wp );

当在 JavaScript 应用程序生命周期内生成通知时,您将需要使用此 通知数据 API。

为了更好地理解上述具体代码示例:

  • wp 是 WordPress 全局窗口变量。
  • wp.data 是块编辑器提供的用于访问块编辑器数据存储的对象。
  • wp.data.dispatch('core/notices') 访问由通知包注册到块编辑器数据存储的功能。
  • createNotice() 是通知包提供的函数,用于注册新通知。块编辑器从通知数据存储中读取以了解要显示哪些通知。

查看 在编辑器中加载资源 教程,了解如何将自定义 JavaScript 加载到块编辑器中的入门知识。

了解更多

块编辑器提供了生成通知的完整 API。官方文档是回顾可能性的绝佳场所。

要获取可用动作和选择器的完整列表,请参阅 通知数据手册 页面。