如何为免费Gutenberg区块插件开发付费扩展选项插件？

一、核心思路：彻底分离免费与付费代码 #

把付费功能完全做成独立的扩展插件，和免费插件的代码彻底切割。免费插件只保留基础功能，付费插件作为“附加组件”，激活后通过WordPress钩子和Gutenberg的扩展机制，给免费区块叠加专业选项。这种方式完全符合插件合规要求，也方便后续维护。

二、具体实现步骤 #

1. 搭建付费扩展的基础结构 #

付费插件单独建目录（比如your-block-pro），核心文件包括：

• your-block-pro.php：主插件入口，负责许可证验证、加载前端资源、注册钩子
• src/：存放React代码，用来扩展免费区块的编辑器UI
• build/：用@wordpress/scripts编译后的前端产物

2. 许可证验证逻辑 #

在付费插件的主文件里处理验证，只有验证通过才加载付费功能：

// 示例：简单的许可证验证逻辑
function your_block_pro_validate_license() {
    $license_key = get_option('your_block_pro_license_key');
    // 这里对接你的验证API，返回布尔值表示是否有效
    return $is_valid;
}

3. 给免费区块添加专业选项 #

在付费插件的React代码中，用Gutenberg的registerBlockExtension扩展免费区块的编辑器界面：

// src/index.js
import { registerBlockExtension } from '@wordpress/blocks';
import { PanelBody, ToggleControl } from '@wordpress/components';

// 替换成你的免费区块名称
registerBlockExtension('your-free-block/main', {
    // 添加付费专属属性
    attributes: {
        enableProStyle: {
            type: 'boolean',
            default: false,
        },
        proCustomColor: {
            type: 'string',
            default: '#000000',
        }
    },
    // 往免费区块的编辑器面板里加专业选项
    edit: (props) => {
        const { attributes, setAttributes } = props;
        return (
            <PanelBody title="专业选项">
                <ToggleControl
                    label="启用高级样式"
                    checked={ attributes.enableProStyle }
                    onChange={ (value) => setAttributes({ enableProStyle: value }) }
                />
                {/* 其他付费控件 */}
            </PanelBody>
        );
    },
});

激活付费插件后，这段代码会自动给免费区块的编辑器面板插入新的专业选项区域。

4. 同步前端与后端的付费功能渲染 #

• 前端样式/脚本：验证通过后，用WordPress钩子加载付费专属资源：

function your_block_pro_enqueue_assets() {
    if (your_block_pro_validate_license()) {
        wp_enqueue_style(
            'your-block-pro-style',
            plugins_url('build/style.css', __FILE__),
            array('your-free-block-style'), // 依赖免费插件的样式
            '1.0.0'
        );
    }
}
add_action('enqueue_block_assets', 'your_block_pro_enqueue_assets');

• 后端渲染修改：如果付费功能需要调整区块的前端输出，用render_block过滤器：

function your_block_pro_render_block($block_content, $block) {
    // 只处理你的免费区块，且验证通过时生效
    if ($block['blockName'] === 'your-free-block/main' && your_block_pro_validate_license()) {
        $attrs = $block['attrs'];
        if ($attrs['enableProStyle']) {
            $block_content = '<div class="your-block-pro-wrapper">' . $block_content . '</div>';
        }
    }
    return $block_content;
}
add_filter('render_block', 'your_block_pro_render_block', 10, 2);

5. 额外的兼容性检查 #

付费插件要先判断免费插件是否激活，否则提示用户：

function your_block_pro_check_free_plugin() {
    if (!is_plugin_active('your-free-block/your-free-block.php')) {
        add_action('admin_notices', function() {
            echo '<div class="error"><p>请先激活「你的免费区块插件」，再使用专业扩展。</p></div>';
        });
        deactivate_plugins(plugin_basename(__FILE__));
    }
}
register_activation_hook(__FILE__, 'your_block_pro_check_free_plugin');

三、合规性说明 #

这种方案完全规避了“免费插件藏付费代码”的问题，所有付费逻辑都在独立的扩展插件中，只有用户购买并激活后，才会给免费区块叠加功能，符合WordPress插件目录的审核规则。

内容的提问来源于stack exchange，提问作者Denis