块编辑器开发文档

💡 云策文档标注

概述

本文档介绍了WordPress编辑器为插件开发者提供的脚本资源,包括内部脚本、第三方脚本和polyfill脚本,并说明了如何通过依赖管理优化代码打包。

关键要点

  • WordPress编辑器提供多种内部脚本(如wp-blocks、wp-components、wp-data),用于块创建、UI组件和状态管理。
  • 第三方脚本(如react、moment、lodash)可作为依赖使用,避免捆绑以减小文件大小。
  • Polyfill脚本(如wp-polyfill、wp-polyfill-fetch)确保跨浏览器兼容性,推荐使用wp-polyfill主句柄加载。
  • 使用webpack等打包工具时,可通过wp_enqueue_script和@wordpress/dependency-extraction-webpack-plugin提取WordPress依赖,优化代码共享。

注意事项

  • 脚本句柄(如wp-blocks)用于在wp_enqueue_script中声明依赖,确保正确加载顺序。
  • 避免在插件中捆绑WordPress已提供的脚本,以减少冗余并利用缓存。
  • Polyfill脚本需根据目标浏览器环境选择性使用,主wp-polyfill句柄可简化加载过程。

📄 原文内容

The editor provides several vendor and internal scripts to plugin developers. Script names, handles, and descriptions are documented in the table below.

WordPress scripts

The editor includes a number of packages to enable various pieces of functionality. Plugin developers can utilize them to create blocks, editor plugins, or generic plugins.

Script Name Handle Description
Blob wp-blob Blob utilities
Block Library wp-block-library Block library for the editor
Blocks wp-blocks Block creations
Block Serialization Default Parser wp-block-serialization-default-parser Default block serialization parser implementations for WordPress documents
Block Serialization Spec Parser wp-block-serialization-spec-parser Grammar file (grammar.pegjs) for WordPress posts
Components wp-components Generic components to be used for creating common UI elements
Compose wp-compose Collection of handy Higher Order Components (HOCs)
Core Data wp-core-data Simplify access to and manipulation of core WordPress entities
Data wp-data Data module serves as a hub to manage application state for both plugins and WordPress itself
Date wp-date Date module for WordPress
Deprecated wp-deprecated Utility to log a message to notify developers about a deprecated feature
Dom wp-dom DOM utilities module for WordPress
Dom Ready wp-dom-ready Execute callback after the DOM is loaded
Editor wp-editor Building blocks for WordPress editors
Edit Post wp-edit-post Edit Post Module for WordPress
Element wp-element Element is, quite simply, an abstraction layer atop React
Escape Html wp-escape-html Escape HTML utils
Hooks wp-hooks A lightweight and efficient EventManager for JavaScript
Html Entities wp-html-entities HTML entity utilities for WordPress
I18N wp-i18n Internationalization utilities for client-side localization
Is Shallow Equal wp-is-shallow-equal A function for performing a shallow comparison between two objects or arrays
Keycodes wp-keycodes Keycodes utilities for WordPress, used to check the key pressed in events like onKeyDown
List Reusable blocks wp-list-reusable-blocks Package used to add import/export links to the listing page of the reusable blocks
NUX wp-nux Components, and wp.data methods useful for onboarding a new user to the WordPress admin interface
Plugins wp-plugins Plugins module for WordPress
Redux Routine wp-redux-routine Redux middleware for generator coroutines
Rich Text wp-rich-text Helper functions to convert HTML or a DOM tree into a rich text value and back
Shortcode wp-shortcode Shortcode module for WordPress
Token List wp-token-list Constructable, plain JavaScript DOMTokenList implementation, supporting non-browser runtimes
URL wp-url A collection of utilities to manipulate URLs
Viewport wp-viewport Module for responding to changes in the browser viewport size
Wordcount wp-wordcount WordPress word count utility

Vendor scripts

The editor also uses some popular third-party packages and scripts. Plugin developers can use these scripts as well without bundling them in their code (and increasing file sizes).

Script Name Handle Description
React react React is a JavaScript library for building user interfaces
React Dom react-dom Serves as the entry point to the DOM and server renderers for React, intended to be paired with React
Moment moment Parse, validate, manipulate, and display dates and times in JavaScript
Lodash lodash Lodash is a JavaScript library which provides utility functions for common programming tasks

Polyfill scripts

The editor also provides polyfills for certain features that may not be available in all modern browsers.

It is recommended to use the main wp-polyfill script handle which takes care of loading all the below mentioned polyfills.

Script Name Handle Description
Babel Polyfill wp-polyfill Emulate a full ES2015+ environment. Main script to load all the below mentioned additional polyfills
Fetch Polyfill wp-polyfill-fetch Polyfill that implements a subset of the standard Fetch specification
Promise Polyfill wp-polyfill-promise Lightweight ES6 Promise polyfill for the browser and node
Formdata Polyfill wp-polyfill-formdata Polyfill conditionally replaces the native implementation
Node Contains Polyfill wp-polyfill-node-contains Polyfill for Node.contains
Element Closest Polyfill wp-polyfill-element-closest Return the closest element matching a selector up the DOM tree

Bundling and code sharing

When using a JavaScript bundler like webpack, the scripts mentioned here can be excluded from the bundle and provided by WordPress in the form of script dependencies see wp_enqueue_script.

The @wordpress/dependency-extraction-webpack-plugin provides a webpack plugin to help extract WordPress dependencies from bundles. The @wordpress/scripts build script includes the plugin by default.