块编辑器开发文档

@wordpress/autop

💡 云策文档标注

概述

@wordpress/autop 是 WordPress 自动段落函数 autop 及其反向行为 removep 的 JavaScript 移植版本,用于在文本和 HTML 段落之间进行转换。

关键要点

  • autop 函数将双换行符替换为 <p> 段落元素,剩余换行符默认转换为 <br /> 标签。
  • removep 函数是 autop 的反向操作,移除 <p> 标签并替换为双换行符,同时统一空白并缩进列表项以提高可读性。
  • 该包需要 ES2015+ 环境,否则需包含 @wordpress/babel-preset-default 中的 polyfill。

代码示例

import { autop } from '@wordpress/autop';
autop( 'my text' ); // "<p>my text</p>"
import { removep } from '@wordpress/autop';
removep( '<p>my text</p>' ); // "my text"

注意事项

autop 的 br 参数可选,默认为 true,控制是否转换剩余换行符为 <br /> 标签。


📄 原文内容

JavaScript port of WordPress’s automatic paragraph function autop and the removep reverse behavior.

Installation

Install the module

npm install @wordpress/autop --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.

API

autop

Replaces double line-breaks with paragraph elements.

A group of regex replaces used to identify text formatted with newlines and replace double line-breaks with HTML paragraph tags. The remaining linebreaks after conversion become <br /> tags, unless br is set to ‘false’.

Usage

import { autop } from '@wordpress/autop';
autop( 'my text' ); // "<p>my text</p>"

Parameters

  • text string: The text which has to be formatted.
  • br boolean: Optional. If set, will convert all remaining line- breaks after paragraphing. Default true.

Returns

  • string: Text which has been converted into paragraph tags.

removep

Replaces <p> tags with two line breaks. “Opposite” of autop().

Replaces <p> tags with two line breaks except where the <p> has attributes. Unifies whitespace. Indents <li>, <dt> and <dd> for better readability.

Usage

import { removep } from '@wordpress/autop';
removep( '<p>my text</p>' ); // "my text"

Parameters

  • html string: The content from the editor.

Returns

  • string: The content with stripped paragraph tags.

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.