块编辑器开发文档

@wordpress/hooks

💡 云策文档标注

概述

@wordpress/hooks 是一个轻量级且高效的 JavaScript 事件管理器,用于实现 WordPress 中的钩子(Hooks)机制。它提供了创建自定义实例和全局实例的功能,支持动作(Actions)和过滤器(Filters)的添加、移除和触发。

关键要点

  • 安装方式:通过 npm install @wordpress/hooks --save 安装,需在 ES2015+ 环境中运行,否则需包含 polyfill。
  • 基本用法:使用 createHooks() 创建自定义实例,或通过 defaultHooks 访问全局实例,如 wp.hooks.addAction()。
  • API 差异:JS 版本中 addAction() 和 addFilter() 需包含命名空间(namespace)作为第二参数,格式为 vendor/plugin/function。
  • 核心 API:包括 addAction、addFilter、removeAction、removeFilter、doAction、applyFilters 等方法,支持同步和异步操作。
  • 参数要求:hookName 为非空字符串,仅含数字、字母、短横线、点和下划线,且不能以 __ 开头;namespace 为非空字符串,格式为 vendor/plugin/function。
  • 事件触发:添加或移除动作/过滤器时会触发 hookAdded 或 hookRemoved 动作。
  • 调试功能:在非压缩版本中,可使用 all 钩子注册回调以调试所有钩子,但生产代码中会移除以提升性能。
  • 项目贡献:作为 Gutenberg 项目的一部分,以 monorepo 形式组织,欢迎贡献。

📄 原文内容

A lightweight & efficient EventManager for JavaScript.

Installation

Install the module

npm install @wordpress/hooks --save

This package assumes that your code will run in an ES2015+ environment. If you’re using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @wordpress/babel-preset-default in your code.

Usage

In your JavaScript project, use hooks as follows:

import { createHooks } from '@wordpress/hooks';

myObject.hooks = createHooks();
myObject.hooks.addAction(); //etc...

The global instance

In the above example, we are creating a custom instance of the Hooks object and registering hooks there. The package also creates a default global instance that’s accessible through the defaultHooks named exports, and its methods are also separately exported one-by-one.

In the WordPress context, that enables API functions to be called via the global wp.hooks object, like wp.hooks.addAction(), etc.

One notable difference between the JS and PHP hooks API is that in the JS version, addAction() and addFilter() also need to include a namespace as the second argument. Namespace uniquely identifies a callback in the form vendor/plugin/function.

API Usage

  • createHooks()
  • addAction( 'hookName', 'namespace', callback, priority )
  • addFilter( 'hookName', 'namespace', callback, priority )
  • removeAction( 'hookName', 'namespace' )
  • removeFilter( 'hookName', 'namespace' )
  • removeAllActions( 'hookName' )
  • removeAllFilters( 'hookName' )
  • doAction( 'hookName', arg1, arg2, moreArgs, finalArg )
  • doActionAsync( 'hookName', arg1, arg2, moreArgs, finalArg )
  • applyFilters( 'hookName', content, arg1, arg2, moreArgs, finalArg )
  • applyFiltersAsync( 'hookName', content, arg1, arg2, moreArgs, finalArg )
  • doingAction( 'hookName' )
  • doingFilter( 'hookName' )
  • didAction( 'hookName' )
  • didFilter( 'hookName' )
  • hasAction( 'hookName', 'namespace' )
  • hasFilter( 'hookName', 'namespace' )
  • actions
  • filters
  • defaultHooks

Parameters

hookName

Should be a non empty string containing only numbers, letters, dashes, periods and underscores. Also, the hook name cannot begin with __.

  • Type: String
  • Required: Yes

namespace

Should be a non empty string containing only numbers, letters, dashes, periods, underscores and slashes. It should take the form vendor/plugin/function.

  • Type: String
  • Required: Yes

Events on action/filter add or remove

Whenever an action or filter is added or removed, a matching hookAdded or hookRemoved action is triggered.

  • hookAdded action is triggered when addFilter() or addAction() method is called, passing values for hookName, functionName, callback and priority.
  • hookRemoved action is triggered when removeFilter() or removeAction() method is called, passing values for hookName and functionName.

The all hook

In non-minified builds developers can register a filter or action that will be called on all hooks, for example: addAction( 'all', 'namespace', callbackFunction );. Useful for debugging, the code supporting the all hook is stripped from the production code for performance reasons.

Contributing to this package

This is an individual package that’s part of the Gutenberg project. The project is organized as a monorepo. It’s made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project’s main contributor guide.