发布于 由admin

Gutenberg区块：如何利用`create-block`工具创建高性能的区块，并集成自定义构建流程？

Gutenberg区块：使用create-block创建高性能区块并集成自定义构建流程

大家好，今天我们来深入探讨如何使用WordPress官方提供的create-block工具创建高性能的Gutenberg区块，并在此基础上集成自定义的构建流程。我们将从create-block的基本用法开始，逐步深入到构建优化、代码组织、以及如何利用Webpack等工具定制构建流程，最终打造出既高效又易于维护的Gutenberg区块。

create-block：快速生成区块骨架

create-block是WordPress官方提供的脚手架工具，用于快速生成Gutenberg区块的基本代码结构。它极大地简化了区块开发的初始设置，减少了重复性工作。

安装create-block：

首先，确保你的系统安装了Node.js和npm (Node Package Manager)。然后，通过npm全局安装@wordpress/create-block：

npm install -g @wordpress/create-block

使用create-block创建区块：

打开你的终端，导航到你想要创建区块的WordPress插件目录，然后运行以下命令：

npx @wordpress/create-block my-custom-block

这个命令会创建一个名为my-custom-block的区块，并生成必要的代码文件。create-block会提示你选择一些配置选项，例如区块的标题、描述、类别等。你可以根据自己的需求进行选择。

create-block生成的目录结构：

create-block生成的目录结构通常如下：

my-custom-block/
├── src/
│   ├── edit.js          # 区块编辑界面的代码
│   ├── index.js         # 区块注册代码
│   ├── save.js          # 区块保存的代码
│   ├── style.scss       # 区块在编辑器和前端的样式
│   └── editor.scss      # 区块在编辑器的样式
├── .editorconfig       # 代码风格配置
├── .gitignore          # Git忽略文件
├── block.json          # 区块元数据
├── package.json        # 项目依赖和脚本
├── phpcs.xml.dist      # PHP代码风格配置
├── README.md           # 项目说明
├── webpack.config.js   # Webpack配置文件

核心文件详解：

  • block.json: 这是区块的核心配置文件，包含了区块的标题、描述、图标、类别、属性等元数据。例如：

    {
  "name": "create-block/my-custom-block",
  "title": "My Custom Block",
  "description": "A custom Gutenberg block.",
  "icon": "smiley",
  "category": "common",
  "attributes": {
    "content": {
      "type": "string",
      "source": "html",
      "selector": "p"
    }
  },
  "supports": {
    "html": false
  },
  "textdomain": "my-custom-block",
  "editorScript": "file:./build/index.js",
  "editorStyle": "file:./build/index.css",
  "style": "file:./build/style-index.css"
}
    • name: 区块的唯一标识符，通常遵循 namespace/block-name 的格式。
    • title: 区块在编辑器中显示的标题。
    • description: 区块的描述。
    • icon: 区块的图标。
    • category: 区块所属的类别。
    • attributes: 区块的属性，定义了区块可以存储的数据。
    • supports: 定义了区块支持的功能，例如是否允许自定义HTML。
    • editorScript: 编辑器脚本文件路径。
    • editorStyle: 编辑器样式文件路径。
    • style: 前端样式文件路径。

  • src/index.js: 这是区块注册的入口文件。它负责导入编辑和保存组件，并将区块注册到WordPress中。例如：

    import { registerBlockType } from '@wordpress/blocks';
import './style.scss';

import Edit from './edit';
import save from './save';

registerBlockType( 'create-block/my-custom-block', {
    edit: Edit,
    save,
} );

  • src/edit.js: 这是区块编辑界面的代码。它定义了区块在编辑器中的显示方式和交互逻辑。例如：

    import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit( { attributes, setAttributes } ) {
    const { content } = attributes;

    const onChangeContent = ( newContent ) => {
        setAttributes( { content: newContent } );
    };

    return (
        <p { ...useBlockProps() }>
            <RichText
                tagName="p"
                value={ content }
                onChange={ onChangeContent }
                placeholder={ __( 'Write your text...', 'my-custom-block' ) }
            />
        </p>
    );
}

  • src/save.js: 这是区块保存的代码。它定义了区块在前端的显示方式。例如：

    import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save( { attributes } ) {
    const { content } = attributes;

    return (
        <p { ...useBlockProps.save() }>
            <RichText.Content tagName="p" value={ content } />
        </p>
    );
}

  • src/style.scss 和 src/editor.scss: 分别是区块在前端和编辑器的样式文件。

构建优化：提升区块性能

create-block生成的区块代码已经可以正常工作，但为了提高性能，我们需要进行一些优化。

1. 代码分割（Code Splitting）：

默认情况下，create-block会将所有的JavaScript代码打包成一个文件。如果你的区块比较复杂，这个文件可能会很大，导致页面加载速度变慢。我们可以使用代码分割技术，将代码分割成多个小文件，按需加载。

Webpack支持代码分割，我们可以修改webpack.config.js文件来实现。例如，我们可以将编辑器的代码和前端的代码分别打包成不同的文件：

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const path = require('path');

module.exports = {
    ...defaultConfig,
    entry: {
        'index': path.resolve( process.cwd(), 'src', 'index.js' ),
        'editor': path.resolve( process.cwd(), 'src', 'editor.js' ), // 新增编辑器入口
    },
    output: {
        ...defaultConfig.output,
        filename: '[name].js', // 根据入口名称生成文件名
    },
};

然后，修改 block.json 文件，指定编辑器脚本：

{
  "name": "create-block/my-custom-block",
  "title": "My Custom Block",
  "description": "A custom Gutenberg block.",
  "icon": "smiley",
  "category": "common",
  "attributes": {
    "content": {
      "type": "string",
      "source": "html",
      "selector": "p"
    }
  },
  "supports": {
    "html": false
  },
  "textdomain": "my-custom-block",
  "editorScript": "file:./build/editor.js", // 修改编辑器脚本路径
  "editorStyle": "file:./build/index.css",
  "style": "file:./build/style-index.css"
}

同时，需要创建一个新的 src/editor.js 文件，导入编辑组件：

import Edit from './edit';

export default Edit;

并修改 src/index.js 文件，移除 Edit 的导入，只保留注册代码：

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';

import save from './save';

registerBlockType( 'create-block/my-custom-block', {
    edit: 'editor', //  指向 editor.js，Webpack 会自动处理
    save,
} );

2. 图片优化：

区块中使用的图片应该进行优化，以减小文件大小。可以使用Webpack的image-webpack-loader或其他图片优化工具。

3. 使用Memoization：

如果你的区块组件包含复杂的计算，可以使用Memoization技术来缓存计算结果，避免重复计算。可以使用React.memo或第三方库如reselect。

4. 懒加载：

对于不立即需要的资源，可以使用懒加载技术，延迟加载。例如，可以使用React.lazy和Suspense来懒加载组件。

5. 避免不必要的重新渲染：

使用shouldComponentUpdate或React.memo来避免不必要的重新渲染。

代码组织：提高可维护性

良好的代码组织可以提高区块的可维护性。

1. 组件化：

将区块拆分成多个小的、可复用的组件。每个组件应该只负责一个特定的功能。

2. 使用Hooks：

使用React Hooks来管理组件的状态和副作用。

3. 目录结构：

一个良好的目录结构可以提高代码的可读性。可以按照功能或组件类型组织目录。例如：

my-custom-block/
├── src/
│   ├── components/      # 可复用的组件
│   │   ├── MyComponent.js
│   │   └── MyComponent.scss
│   ├── edit.js
│   ├── index.js
│   ├── save.js
│   ├── style.scss
│   └── editor.scss
├── ...

4. 代码风格：

保持一致的代码风格可以提高代码的可读性。可以使用ESLint和Prettier等工具来强制执行代码风格。

5. 文档：

编写清晰的文档可以帮助其他人理解你的代码。

自定义构建流程：Webpack配置

create-block默认使用@wordpress/scripts提供的Webpack配置。如果你需要更高级的定制，可以修改webpack.config.js文件。

1. 添加Loader：

可以使用Loader来处理不同类型的文件。例如，可以使用sass-loader来处理Sass文件，使用babel-loader来处理ES6+代码。

2. 添加Plugin：

可以使用Plugin来执行各种构建任务。例如，可以使用MiniCssExtractPlugin将CSS提取到单独的文件中。

3. 修改入口和出口：

可以修改入口和出口，以改变代码的打包方式。

4. 添加别名：

可以使用别名来简化模块的导入路径。

示例：添加Sass Loader和MiniCssExtractPlugin

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
        ],
    },
    plugins: [
        ...defaultConfig.plugins,
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
    ],
};

在这个示例中，我们添加了sass-loader来处理Sass文件，并使用MiniCssExtractPlugin将CSS提取到单独的文件中。你需要先安装这些依赖：

npm install sass-loader sass css-loader mini-css-extract-plugin --save-dev

集成第三方库

在Gutenberg区块开发中，经常需要集成第三方库来增强区块的功能。

1. 安装第三方库：

使用npm或yarn安装第三方库。例如：

npm install lodash --save

2. 导入第三方库：

在你的区块代码中导入第三方库。例如：

import _ from 'lodash';

// 使用lodash
const myArray = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = _.uniq(myArray);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

3. 处理依赖关系：

Webpack会自动处理第三方库的依赖关系。

示例：集成Lodash库

假设我们需要在区块中使用Lodash库来对数组进行去重。

  1. 安装Lodash：

    npm install lodash --save

  2. 在edit.js中使用Lodash：

    import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import './editor.scss';
import _ from 'lodash';

export default function Edit( { attributes, setAttributes } ) {
    const { content } = attributes;

    const onChangeContent = ( newContent ) => {
        // 使用Lodash去重
        const uniqueContent = _.uniq(newContent.split(' ')).join(' ');
        setAttributes( { content: uniqueContent } );
    };

    return (
        <p { ...useBlockProps() }>
            <RichText
                tagName="p"
                value={ content }
                onChange={ onChangeContent }
                placeholder={ __( 'Write your text...', 'my-custom-block' ) }
            />
        </p>
    );
}

    在这个示例中，我们导入了Lodash库，并在onChangeContent函数中使用_.uniq方法对输入的文本进行去重。

高级技巧：动态区块

动态区块是指在服务器端渲染的区块。与静态区块不同，动态区块的内容可以根据不同的请求而变化。

1. 注册动态区块：

在PHP文件中注册动态区块。例如：

<?php
/**
 * Registers the block using the metadata loaded from the `block.json` file.
 * Behind the scenes, it registers also all assets so they can be enqueued
 * through the block editor in the corresponding context.
 *
 * @see https://developer.wordpress.org/reference/functions/register_block_type/
 */
function create_block_my_dynamic_block_block_init() {
    register_block_type( __DIR__ . '/build', array(
        'render_callback' => 'render_my_dynamic_block'
    ) );
}
add_action( 'init', 'create_block_my_dynamic_block_block_init' );

function render_my_dynamic_block( $attributes, $content ) {
    // 在这里生成动态内容
    $current_time = date('Y-m-d H:i:s');
    return '<p>Current time: ' . $current_time . '</p>';
}

2. 修改block.json：

在block.json文件中，删除save属性。

{
  "name": "create-block/my-dynamic-block",
  "title": "My Dynamic Block",
  "description": "A dynamic Gutenberg block.",
  "icon": "smiley",
  "category": "common",
  "attributes": {},
  "supports": {
    "html": false
  },
  "textdomain": "my-dynamic-block",
  "editorScript": "file:./build/index.js",
  "editorStyle": "file:./build/index.css",
  "style": "file:./build/style-index.css"
}

3. 修改src/edit.js：

在src/edit.js文件中，只显示占位符。

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
    return (
        <p { ...useBlockProps() }>
            { __( 'My Dynamic Block (will be rendered on the server)', 'my-dynamic-block' ) }
        </p>
    );
}

动态区块的应用场景：

  • 显示动态数据，例如当前时间、用户信息等。
  • 与第三方API集成，获取动态内容。
  • 根据用户权限显示不同的内容。

区块开发注意事项

  • 安全性： 避免在区块中使用不安全的代码，例如直接执行用户输入的代码。
  • 性能： 优化区块的代码，避免性能问题。
  • 兼容性： 确保区块在不同的浏览器和设备上都能正常工作。
  • 可访问性： 确保区块对残疾人士是可访问的。
  • 国际化： 使用@wordpress/i18n进行国际化。

总结

掌握create-block工具和自定义构建流程是开发高性能Gutenberg区块的关键。通过代码分割、图片优化、组件化、使用Hooks以及Webpack配置，我们可以打造出既高效又易于维护的Gutenberg区块。希望今天的分享能帮助大家更好地进行Gutenberg区块的开发工作。

几个要点

  • create-block是快速生成区块骨架的利器。
  • 优化构建流程可以显著提高区块性能。
  • 良好的代码组织是可维护性的保障。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注