如何创建WordPress古腾堡编辑器的区块（PHP+原生JS）

创建WordPress古腾堡（Gutenberg）编辑器的区块是一个涉及前端和后端开发的过程。下面是一个简化的指南来帮助你理解如何使用PHP和原生JavaScript创建一个自定义区块。

前提条件

在开始之前，请确保你有以下内容：

1. 最新版本的WordPress安装和运行。
2. 基本的PHP和JavaScript知识。
3. 对WordPress内部结构有一定了解，包括主题和插件的工作机制。

步骤 1：创建插件

首先，你需要创建一个新的插件来存放你的自定义区块。

1. 在WordPress的wp-content/plugins目录下创建一个新文件夹，例如my-custom-blocks。
2. 在这个文件夹内创建一个PHP文件，例如my-custom-blocks.php。

在my-custom-blocks.php文件中，添加插件的头部信息：

<?php
/**
 * Plugin Name: My Custom Blocks
 * Description: A custom Gutenberg block plugin.
 * Version: 1.0
 * Author: Your Name
 */

步骤 2：注册区块

在你的插件文件中，使用register_block_type函数来注册一个新的区块。这个函数通常在init动作钩子中调用。

function my_custom_blocks_register_block() {
    // 注册区块和相关的脚本和样式
    wp_register_script(
        'my-custom-block-editor-script', // Handle.
        plugins_url( 'block.js', __FILE__ ), // block.js is where we will write our JS block code.
        array( 'wp-blocks', 'wp-element', 'wp-editor' ), // Dependencies.
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ) // Version: file modification time.
    );

    register_block_type( 'my-custom-blocks/my-custom-block', array(
        'editor_script' => 'my-custom-block-editor-script',
    ) );
}

add_action( 'init', 'my_custom_blocks_register_block' );

步骤 3：创建区块的JavaScript文件

在你的插件目录中创建一个新的JavaScript文件，例如block.js。这里你将使用原生JavaScript（或者可以使用@wordpress/scripts包来设置构建步骤）来定义区块的编辑器界面和保存功能。

(function(blocks, element, editor) {
    var el = element.createElement;
    var RichText = editor.RichText;

    blocks.registerBlockType('my-custom-blocks/my-custom-block', {
        title: 'My Custom Block',
        icon: 'universal-access-alt',
        category: 'layout',
        attributes: {
            content: {
                type: 'array',
                source: 'children',
                selector: 'p',
            },
        },
        edit: function(props) {
            var content = props.attributes.content;
            function onChangeContent(newContent) {
                props.setAttributes({ content: newContent });
            }

            return el(
                RichText,
                {
                    tagName: 'p',
                    className: props.className,
                    value: content,
                    onChange: onChangeContent,
                }
            );
        },
        save: function(props) {
            return el(
                RichText.Content,
                {
                    tagName: 'p',
                    value: props.attributes.content,
                }
            );
        },
    });
}(window.wp.blocks, window.wp.element, window.wp.editor));

步骤 4：激活插件

1. 登录到你的WordPress后台。
2. 导航到“插件”页面。
3. 找到你的“我的自定义区块”插件并点击“激活”。

步骤 5：测试区块

1. 创建一个新页面或者编辑一个现有页面。
2. 点击添加新区块按钮，搜索“我的自定义区块”。
3. 添加它到页面中，编辑内容，并保存或发布页面。

结束语

这个指南提供了一个基础的例子来创建一个简单的古腾堡区块。实际上，创建更复杂的区块可能涉及到更高级的JavaScript（如React）和后端逻辑。你可以查看WordPress官方文档来获取更详细的指南和最佳实践。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。