WordPress.org网站
获取WordPress
WordPress.org网站

WordPress开发人员资源

代码贡献入门

代码贡献入门

在本文中

返回页首

以下指南旨在为古腾堡项目建立当地环境。要贡献的环境和用于扩展WordPress块编辑器的环境之间有很大的重叠。您可以查看开发环境教程有关其他设置信息。

前提条件

  • 节点.js
    Gutenberg是一个JavaScript项目，需要节点.js。该项目目前使用Node.js v20和npm v10构建。尽管尽最大努力始终使用Node.js的Active LTS版本，但情况并非总是如此。有关更多详细信息，请参阅Node.js发布时间表.

我们建议使用节点版本管理器（nvm），因为这是使用WSL2安装和管理macOS、Linux和Windows 10节点的最简单方法。请参见我们的开发工具指南或Nodejs站点以获取其他安装说明。

作为Docker设置的替代方法，您可以使用本地,WampServer（WampServer），或MAMP公司，甚至使用远程服务器。

  • GitHub CLI
    虽然不是要求GitHub CLI可以帮助您在本地签出拉请求。都来自古腾堡回购和分叉回购。这可以在代码审查和测试pull请求时节省大量时间。

获取古腾堡代码

分出Gutenberg存储库，将其克隆到您的计算机上，并将WordPress存储库添加为上游。

$git克隆https://github.com/YOUR_github_USERNAME/gutenberg.git网站$cd古腾堡$git远程添加上游https://github.com/WordPress/gutenberg.git

将Gutenberg构建为插件

安装Gutenberg依赖项并在开发模式下构建代码：

npm安装npm运行开发

注意：安装脚本需要蟒蛇安装在本地系统的路径中。对于您的操作系统，这可能是默认安装的，或者需要下载和安装。

有两种方法可以构建代码。在开发时，您可能想使用npm运行开发在源文件更改时自动运行连续生成。开发版本还包括其他警告和错误，以帮助在开发时进行故障排除。一旦你对自己的改变感到满意，你就可以跑步npm运行生成以创建优化的生产构建。

一旦建成，古腾堡就可以用作WordPress插件了！

本地WordPress环境

要测试WordPress插件，需要安装WordPres本身。如果您已经设置了WordPress环境，那么可以通过将Gutenberg目录放在wp-content/plugins/目录中，将上述Gutenberg构建用作标准WordPres插件。

如果没有本地WordPress环境设置，请按照本节其余部分中的步骤创建一个。

使用Docker和wp-env

这个wp-env包是与Gutenberg项目一起开发的，作为使用Docker创建标准WordPress环境的快速方法。它也作为@wordpress/envnpm包。

默认情况下，wp-env公司可以在插件目录中运行以创建和运行WordPress环境，自动安装和激活插件。您还可以配置wp-env公司使用现有安装、多个插件或主题。请参阅wp-env包以获取完整的文档。

确保Docker正在运行，然后启动wp-env公司从gutenberg目录中：

npm运行wp-env启动

此脚本将使用最新的WordPress Docker图像在后台创建Docker实例，然后将Gutenberg插件代码从本地副本映射到Docker卷的环境中。这样，您对本地代码所做的任何更改都会立即反映在WordPress实例中。

注：npm运行将使用wp-env公司/WordPress（文字出版社）?? 在Gutenberg项目中指定的版本，确保运行的是最新的wp-env版本。

要停止运行环境，请执行以下操作：

npm运行wp-env停止

如果一切顺利，您应该会在终端中看到以下消息：

WordPress开发站点开始于http://localhost:8888/WordPress测试站点开始于http://localhost:8889/MySQL正在侦听端口51220✔ 完成！（261s 898ms）

如果你右键单击菜单栏（在Mac上）或系统托盘（在Linux和Windows上）中的图标并选择“dashboard”来打开Docker仪表板，你会看到脚本已经下载了一些Docker Images，并且正在运行一个功能齐全的WordPress安装的Docker Container：
WordPress Docker容器运行截图
WordPress开发环境下载的Docker图片截图

要完全销毁安装，请执行以下操作：

npm运行wp-env销毁

探索程序包文档用于其他命令。

访问本地WordPress安装

WordPress安装现在应该可以在`http://localhost:8888`

您可以在以下位置访问仪表板：http://localhost:8888/wp-admin/`使用**用户名**：管理员，**密码**：密码`。你会注意到古腾堡插件已经安装并激活，这是你的本地版本。

访问MySQL数据库

要访问上的MySQL数据库wp-env公司实例中，您将首先需要连接详细信息。为此，请执行以下操作：

  1. 在终端中，导航到您当地的古腾堡回购。
  2. 运行npm运行wp-env启动–关于wp-env公司环境应登录到终端。
  3. 在步骤2的输出中，查找有关MySQL数据库端口：
    例如：

MySQL正在侦听端口{MySQL_port_NUMBER}

  1. 复制/记录此端口号（注意每次都会更改wp-env公司重启）。
  2. 现在可以使用以下详细信息连接到MySQL实例（确保替换{MYSQL_PORT_NUMBER}使用步骤3中的端口号）：
主机：127.0.0.1用户名：root密码：Password数据库：wordpress端口：{MYSQL_Port_NUMBER}

请注意：MySQL端口号每次都会更改wp环境重新启动。如果您发现无法再访问数据库，只需重复上述步骤即可找到新端口号并恢复连接。

提示:Sequel Ace系列是访问MySQL数据库的有用GUI工具。其他工具可用，并记录在本文件中关于访问WordPress数据库的文章.

故障排除

如果遇到问题，请检查中的疑难解答部分wp-env公司文档.

使用本地或MAMP

作为Docker和wp-env公司，您还可以使用本地,WampServer（WampServer），或MAMP公司运行本地WordPress环境。为此，通过创建符号链接或将目录复制到适当的wp-content/插件目录。

您还需要一些额外的配置才能运行e2e测试。

将当前目录更改为plugins文件夹并将所有e2e测试插件进行符号链接：

ln-s gutenberg/packages/e2e测试/插件/*。

如果添加了新插件，则需要再次运行此程序。要运行e2e测试：

WP_BASE_URL=http://localhost:8888/gutenberg网址/npm运行测试：e2e

PHP文件的缓存

您需要禁用OPCache才能正确处理PHP文件。要修复：

  • 去MAMP>首选项>PHP
  • 低于隐藏物，选择远离的
  • 用确认好 啊

传入连接

默认情况下，MAMP启动的web服务器（Apache）将侦听所有传入连接，而不仅仅是本地连接。这意味着同一本地网络上的任何人（在某些情况下，也包括Internet上的任何人员）都可以访问您的web服务器。这可能是有意的，对于在其他设备上测试站点很有用，但通常这可能是隐私或安全问题。记住这一点，不要在此服务器中存储敏感信息。

虽然可以修复此问题，但您应该自行承担修复风险，因为它破坏了MAMP解析web服务器配置的能力，从而使MAMP认为Apache正在侦听错误的端口。请考虑关闭MAMP。否则，您可以使用以下选项：

  • 编辑/应用程序/MAMP/conf/apache/httpd.conf
  • 更改听8888到听127.0.0.1:8888

链接到其他目录

您可能希望在插件和主题目录到其他文件夹，例如。

  • wp-content/plugins/gutenberg->~/projects/gutenberg
  • wp-content/themes/twentyinty->~/projects/twentyinty

如果是这样，您需要指示Apache允许以下链接：

  • 在打开或启动新文件/应用程序/MAMP/htdocs/.htaccess
  • 添加以下行：选项+SymLinksIfOwnerMatch

使用WP-CLI

MAMP等工具倾向于将MySQL配置为使用默认3306以外的端口，通常首选8889。这可能会引发WP-CLI，在尝试连接到数据库后会失败。要解决此问题，请编辑wp-config.php并更改数据库_主机常数来自define（'DB_HOST'，'localhost'）到define（“DB_HOST”，“127.0.0.1:8889”）.

在远程服务器上

您可以在开发中使用远程服务器，方法是在本地构建，然后将构建的文件作为插件上传到远程服务器。

构建：打开终端（如果在Windows上，则为命令提示符）并导航到克隆的存储库。现在键入npm-ci公司以设置所有依赖项。完成后，您可以输入npm运行生成.

构建包含完整插件的克隆gutenberg目录后，可以将整个存储库上传到您的wp-content/插件目录并从WordPress管理员激活插件。

构建后上传的另一种方法是运行npm运行版本：plugin-zip要创建插件zip文件-这需要猛击和php（电话）以运行。脚本创建古腾堡.zip您可以通过WordPress管理员使用它来安装Gutenberg。

故事书

Storybook是一个开源工具，用于为React、React Native等独立开发UI组件。它使建造令人惊叹的UI变得有序高效。

古腾堡仓库还包括故事书允许在WordPress-gnostic上下文中进行测试和开发的集成。这对于开发可重用组件和尝试无任何后端依赖性的通用JavaScript模块非常有用。

您可以通过运行以下命令启动Storybooknpm运行故事书：dev本地。它将在浏览器中自动打开。

您还可以测试Storybook的当前大旅行箱GitHub页面上的分支：https://wordpress.github.io/gutenberg网站/

开发人员工具

我们建议配置编辑器以自动检查语法和lint错误。这将通过自动修复较小的格式问题，帮助您在开发时节省时间。以下是设置VisualStudioCode的一些说明，这是许多核心开发人员使用的一种流行编辑器，其他编辑器也可以使用这些工具。

编辑器配置

编辑器配置定义用于设置编辑器的标准配置，例如使用制表符而不是空格。您应该安装VS代码的编辑器配置扩展，它将自动配置您的编辑器以匹配中定义的规则.editorconfig（编辑器配置）.

ESLint公司

ESLint公司静态分析代码以发现问题。lint规则集成在持续集成过程中，必须通过才能提交。您应该安装ESLint扩展有关Visual Studio代码，请参阅的eslint文档更多编辑器集成.

安装扩展后，ESLint将使用.eslintrc.js文件用于格式化规则的Gutenberg存储库根目录中的文件。它将在您开发时突出显示问题，您还可以设置以下首选项来修复save中的lint规则。

“editor.codeActionsOnSave”：{“source.fixAll.eslint”：true},

更漂亮

更漂亮是一个允许您定义固执己见格式并自动修复代码以匹配该格式的工具。Prettier和ESlint是相似的，Prettie更多的是关于格式和样式，而ESlint用于检测编码错误。

要在Visual Studio代码中使用Prettier，您应该安装Prettier–代码格式化程序扩展。然后，您可以将其配置为默认的格式化程序，并通过将以下内容添加到设置中来自动修复保存时的问题。注释：根据您查看此文档的位置，括号可能显示为双括号，正确的格式只是一个括号。

“[[javascript]]”：{“editor.defaultFormatter”：“esbenp.prettier-vscode”，“editor.formatOnSave”：true},“[[降价]]”：{“editor.defaultFormatter”：“esbenp.prettier-vscode”，“editor.formatOnSave”：true},

这将使用.prettierrc.js文件文件包含在Gutenberg存储库的根目录中。配置包含在@wordpress/prettier-config包裹。

如果您只想在Gutenberg项目中使用此配置，请在Gutenberg的顶层创建一个名为.vscode的目录，并将您的设置放在那里的settings.json中。VisualStudio代码将此称为工作区设置，仅适用于项目。

有关其他编辑器，请参见Prettier的编辑器集成文档

类型脚本

类型脚本是JavaScript语言的类型化超集。古腾堡项目通过JSDoc使用TypeScript键入检查JavaScript文件。如果使用Visual Studio代码，则内置TypeScript支持，否则请参见TypeScript编辑器支持用于编辑器集成。

首次发布

上次更新时间

编辑文章

在GitHub上进行改进：代码贡献入门