# @faustwp/blocks 中文文档

规范地址：https://npmcn.com/package/%40faustwp/blocks/

版本：7\.1\.1
npm 元数据更新时间：2026-11-03T16:50:31.132Z
中文译文更新时间：2026-11-14T11:57:43.986Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40faustwp/blocks
原文对照：https://npmcn.com/package/%40faustwp/blocks/?lang=original
项目主页：https://github.com/wpengine/faustjs#readme
源码仓库：https://github.com/wpengine/faustjs

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：184 kB，183 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：0 个
- peer 依赖：next ^16\.4\.2，react \>=17\.0\.2，react-dom \>=17\.0\.2，@faustwp/core \>=1\.1\.0，@apollo/client ^3\.14\.1 \|\| ^4\.0\.0，@wordpress/style-engine \>=1\.18\.0
- 首次发布：2023-01-19T16:23:20.305Z
- 最新版本发布：2026-11-03T16:50:30.711Z
- 近 30 天下载量：4730（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：105（近 12 个月 12 个）

## 中文简介

浮士德区

## 安装

```sh
npm install @faustwp/blocks
```

也可以使用：`pnpm add @faustwp/blocks`、`yarn add @faustwp/blocks`、`bun add @faustwp/blocks`

## README

# @ faustwp/ 块

 [![](https://img.shields.io/npm/v/@faustwp/blocks?color=7e5cef&style=for-the-badge)](https://www.npmjs.com/package/@faustwp/blocks)[![](https://img.shields.io/npm/l/@faustwp/blocks?color=7e5cef&style=for-the-badge)](https://github.com/wpengine/faustjs/blob/canary/LICENSE)

 [![](https://img.shields.io/npm/dm/@faustwp/blocks?color=7e5cef&style=for-the-badge&label=@faustwp/blocks)](https://www.npmjs.com/package/@faustwp/blocks)[![](https://img.shields.io/npm/dw/@faustwp/blocks?color=7e5cef&style=for-the-badge&label=@faustwp/blocks)](https://www.npmjs.com/package/@faustwp/blocks)

`@faustwp/blocks` 为渲染WordPress块提供常规连接器组件.

# 由 Gutenberg 块提供者和查看器开始

## 快速启动

请确认您已完成 Faust 的初始设置 [开始](https://faustjs.org/docs/getting-started)。 。 。 .

安装块包 :

```bash
npm i @faustwp/blocks
```

安装对等依赖 :

```bash
npm i @wordpress/style-engine
```

打开 `_app.js` 输入 `WordPressBlocksProvider`数字 :

```jsx
import { WordPressBlocksProvider } from '@faustwp/blocks';

<FaustProvider pageProps={pageProps}>
  <WordPressBlocksProvider
    config={{
      blocks,
    }}>
    <Component {...pageProps} key={router.asPath} />
  </WordPressBlocksProvider>
</FaustProvider>
```

然后,在你的模板中,你需要传递 `editorBlocks` 数据 `WordPressBlocksViewer`。 。 。 .

帮助函数 `flatListToHierarchical` 从 `@faustwp/core`数字 :

```js
import { flatListToHierarchical } from '@faustwp/core';
import { WordPressBlocksViewer } from '@faustwp/blocks';
import blocks from '../wp-blocks';

const { editorBlocks } = props.data.post;
const blocks = flatListToHierarchical(editorBlocks, {childrenKey: 'innerBlocks'});

return <WordPressBlocksViewer blocks={blocks}/>
```

默认情况下,API会将所有节点带回一个阵列中,而不是用自己的阵列组成一串单独的节点. 因此,我们使用 `flatListToHierarchical` 将列表转换回等级树类型.

示例 `editorBlocks` 图QL 查询片段 :

```graphql
${components.CoreParagraph.fragments.entry}
editorBlocks {
  __typename
  name
  renderedHtml
  id: clientId
  parentClientId
  ...${components.CoreParagraph.fragments.key}
}
```

## 简单块示例

这是一个简单的块叫做 `CoreParagraph`块是一个 `p` 标签,将其内容设置为 `attributes.content` 从道具上传过来的.

`CoreParagraph.fragments` 执行 WPGraphQL 查询 `content` 财务报告和审定财务报表 `cssClassName` 把它当作碎片 `CoreParagraphFragment`。 。 。 .

```jsx
import { gql } from '@apollo/client';
import React from 'react';

export default function CoreParagraph(props) {
  const attributes = props.attributes;
  return (
    <p
      className={attributes?.cssClassName}
      dangerouslySetInnerHTML={{ __html: attributes.content }}></p>
  );
}

CoreParagraph.fragments = {
  entry: gql`
    fragment CoreParagraphFragment on CoreParagraph {
      attributes {
        content
        cssClassName
      }
    }
  `,
  key: `CoreParagraphFragment`,
};
```

使用 Core 段落块的默认桶导出 `index.js`数字 :

```js
import CoreParagraph from './CoreParagraph';
export default {
  'CoreParagraph': CoreParagraph,
};
```

这样,框架将匹配导出名称 `CoreParagraph` 与 `__typename` 或者说 `name` 字段中。 如果找到匹配的,它将解决与该名称相关的组件.

## 进一步学习

详细情况 [Word PressBlocks 提供软件](https://faustjs.org/docs/reference/WordPressBlocksProvider)。 。 。 .

详细情况 [Word PressBlocks 编辑器](https://faustjs.org/docs/reference/WordPressBlocksViewer)。 。 。 .

通过引用 [示例工程行走结构.](https://faustjs.org/docs/next/guides/project-walkthrough)

请看 [https://faustjs.org/docs/gutenberg/getting-started 互联网档案馆的存檔,存档日期2013-12-21](https://faustjs.org/docs/gutenberg/getting-started) gutenberg Blocks的《开始指南》.

## 常见问题

### @faustwp/blocks 是什么？

浮士德区

### 如何安装 @faustwp/blocks？

在项目目录运行 npm install @faustwp/blocks，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：next（^16\.4\.2）、react（\>=17\.0\.2）、react-dom（\>=17\.0\.2）、@faustwp/core（\>=1\.1\.0）、@apollo/client（^3\.14\.1 \|\| ^4\.0\.0）、@wordpress/style-engine（\>=1\.18\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @faustwp/blocks 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @faustwp/blocks 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @faustwp/blocks 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @faustwp/blocks 可以商用吗？

@faustwp/blocks 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @faustwp/blocks 的下载量有多少？

根据 npm 官方下载统计，@faustwp/blocks 在 2026/10/15 – 2026/11/13 这 30 天内被下载 4,730 次，日均约 158 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @faustwp/blocks 还在维护吗？

最新版本 7\.1\.1 发布于 2026/11/04（10 天前）；至今共发布 105 个版本，其中过去 12 个月发布了 12 个；首次发布于 2023/01/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。