如何在Gutenberg组件渲染前加载JavaScript代码

方案1：CSS预隐藏 + JS控制显示 #

这是最稳妥的方案，利用CSS加载优先级高于JS的特性，先让组件处于不可见状态，等JS加载完成后再显示，完全避免闪现。

• 给自定义Gutenberg组件的外层容器添加专属类名，比如custom-g-block。
• 在主题style.css或自定义CSS面板中添加样式：

.custom-g-block {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease; /* 可选：添加淡入过渡优化体验 */
}

.custom-g-block.loaded {
    visibility: visible;
    opacity: 1;
}

• 在自定义JS脚本中，触发组件显示：

// 等待DOM完全加载
document.addEventListener('DOMContentLoaded', function() {
    const components = document.querySelectorAll('.custom-g-block');
    components.forEach(el => el.classList.add('loaded'));
});

// 处理动态加载的组件（如AJAX新增）
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.addedNodes.length) {
            const newComponents = mutation.target.querySelectorAll('.custom-g-block:not(.loaded)');
            newComponents.forEach(el => el.classList.add('loaded'));
        }
    });
});
observer.observe(document.body, { childList: true, subtree: true });

方案2：提升JS加载优先级 #

通过WordPress的脚本注册机制，让自定义JS更早加载，缩短等待时间。

• 在主题functions.php中调整脚本配置：

function enqueue_custom_gutenberg_script() {
    wp_enqueue_script(
        'custom-gutenberg-script',
        get_template_directory_uri() . '/js/custom-g-script.js',
        array('wp-element', 'jquery'), // 明确依赖Gutenberg核心脚本，避免加载顺序错误
        wp_get_theme()->get('Version'),
        false // 设置为false，让脚本在<head>中加载，优先级高于footer脚本
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_gutenberg_script');

注意：头部加载脚本可能阻塞页面渲染，建议搭配方案1的CSS预隐藏一起使用，平衡加载速度与首屏体验。

方案3：服务器端渲染时添加初始隐藏标记 #

如果组件是服务器端渲染输出的，可直接在PHP逻辑中给容器添加隐藏类，再由JS控制显示。

• 组件PHP渲染函数示例：

function render_custom_g_block($attributes, $content) {
    return '<div class="custom-g-block">'. $content .'</div>';
}

后续直接复用方案1的CSS和JS逻辑即可。

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