README

这是什么？

这是 Greenpeace Planet 4 项目的 WordPress Gutenberg 块插件。您可以在 Planet 4 博客上了解更多关于此项目的信息。

贡献

最佳开始方式是从包含所有必要信息和任务的 Planet 4 仓库。

如何在 Planet 4 中使用此插件

您可以直接在 WordPress 中使用此插件，通过将其包含在您的 composer.json 文件中

"require": {
    ...
    "greenpeace/planet4-plugingutenberg-plugin" : "X.X.X",
    ...
},

资产构建

您需要 npm 来安装依赖项，只需运行 npm install 来安装它们。

开发

运行 npm start 以启动一个监视器，每次您进行更改时都会重建。
运行 npm run build 以手动构建文件。

构建设置

WordPress 为整个构建设置提供了一个单一依赖项，包括

Babel：JSX & ES6 语法到浏览器兼容 JS 的转换器
Webpack：所有 JS 模块和依赖解析的打包器

您问如何开发新的块？

在 classes/blocks 目录内创建一个扩展 Base_Block ( P4GBKS\Blocks\Base_Block ) 的新类。类名应遵循命名约定，例如，Blockname，其文件名应为 class-blockname.php。
实现其父类的抽象方法。在块的 构造函数 中，您需要使用 register_block_type 定义块的详细信息（字段、模式），并在 prepare_data() 方法中准备用于渲染的数据。
在 templates/blocks 目录内创建将用于渲染块的模板文件。如果文件名为 blockname.twig，则需要将 BLOCK_NAME 常量设置为 'blockname'。它也适用于 HTML 模板。只需将 'php' 添加为 block() 方法的第三个参数。
将您的新的类名添加到 Loader ( P4GBKS\Loader ) 构造函数内的数组中。
在 react-blocks/src/blocks 目录内创建一个以您的块命名的新的文件夹 Blockname（首字母大写，其余小写）。在该文件夹内创建两个新文件，分别命名为 Blockname.js 和 BlocknameBlock.js。

BlocknameBlock.js 应该是一个使用 wordpress registerBlockType 定义块的属性、模式和 edit() 函数的类。 edit() 函数应返回一个用于在编辑器中渲染块的 React 组件。 save() 函数应返回 null，因为我们目前使用服务器端渲染。

Blockname.js 应该是一个定义一个实现 renderEdit() 和 renderView() 的 React 组件的类。 renderEdit() 应用于在编辑器中渲染块，以定义编辑器特定的东西，如侧边栏选项、原地编辑组件等。 renderView() 将用于编辑器和前端网站以渲染块的正文，因为我们在前端也使用 React 来渲染块。

要了解更多关于渲染逻辑的细节，请参阅Planet 4 Gitbook中的blocks页面。
在react-blocks/src/blocks/styles目录下创建一个新的sccs文件，文件名应与您的块名称相同，命名为Blockname.scss，用于块的客户端样式。

如果您需要在编辑器中为块添加样式，请创建一个名为BlocknameEditor.scss的新文件。
最后，在提交之前，执行npm run build以构建插件的资产，并执行vendor/bin/phpcs以检查代码中的任何PHP样式错误。

greenpeace / planet4-plugin-gutenberg-blocks

维护者

详细信息