WordPress插件Gutenberg侧边栏按钮不显示问题求助

核心原因 #

最新版WordPress的Gutenberg编辑器基于React/JavaScript构建，仅靠PHP无法直接在文档侧边栏添加自定义按钮。PHP仅负责注册和加载前端脚本，而侧边栏的UI元素、交互逻辑必须通过Gutenberg的JavaScript API实现。如果你的代码只有PHP部分，缺少对应的JS逻辑，按钮自然不会显示。

解决步骤 #

1. 调整PHP代码：正确注册前端脚本 #

在插件主文件中添加以下代码，用于注册并加载所需的JS脚本，同时确保依赖Gutenberg的核心库：

add_action('enqueue_block_editor_assets', 'enqueue_generate_title_script');
function enqueue_generate_title_script() {
    wp_enqueue_script(
        'generate-title-script',
        plugin_dir_url(__FILE__) . 'js/generate-title.js',
        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components'),
        filemtime(plugin_dir_path(__FILE__) . 'js/generate-title.js'),
        true
    );

    // 本地化按钮文本（支持多语言，可根据需求调整）
    wp_localize_script('generate-title-script', 'generateTitleData', array(
        'buttonLabel' => __('Generate title', 'your-plugin-textdomain')
    ));
}

2. 编写JavaScript代码：实现按钮与功能 #

在插件目录下创建js文件夹，新建generate-title.js文件，写入以下代码——通过PluginDocumentSettingPanel组件在文档侧边栏添加面板和按钮，并实现提取正文生成标题的逻辑：

const { __ } = wp.i18n;
const { PluginDocumentSettingPanel } = wp.editPost;
const { Button } = wp.components;
const { useSelect, useDispatch } = wp.data;

wp.plugins.registerPlugin('generate-title-plugin', {
    render: () => {
        // 获取当前编辑器的正文内容
        const editorContent = useSelect(
            select => select('core/editor').getEditedPostAttribute('content'),
            []
        );
        // 获取修改文章标题的方法
        const { editPost } = useDispatch('core/editor');

        const handleGenerateTitle = () => {
            // 移除HTML标签，提取纯文本
            const plainText = editorContent.replace(/<[^>]*>/g, '').trim();
            // 截取前50字符，避免拆分单词
            const truncatedText = plainText.length > 50 
                ? plainText.substring(0, 50).replace(/\s+$/, '') + '...' 
                : plainText;
            // 设置文章标题
            editPost({ title: truncatedText });
        };

        return (
            <PluginDocumentSettingPanel
                name="generate-title-panel"
                title={__('Title Generator', 'your-plugin-textdomain')}
            >
                <Button isPrimary onClick={handleGenerateTitle}>
                    {__('Generate title', 'your-plugin-textdomain')}
                </Button>
            </PluginDocumentSettingPanel>
        );
    },
});

3. 验证与排查 #

• 确认插件已在WordPress后台激活。
• 检查js/generate-title.js文件路径是否与PHP代码中指定的一致，确保文件存在。
• 打开浏览器开发者工具的「网络」标签，刷新编辑器页面，查看generate-title.js是否成功加载（状态码应为200）。

内容的提问来源于stack exchange，提问作者Manuel Esteban Morales Zuarez