WordPress Gutenberg自定义块save函数前端失效问题求助

你的核心问题是：Gutenberg的save函数仅负责生成静态HTML结构，后台编辑器里的交互逻辑（点击缩略图切换视频）是由React状态管理实现的，但前端页面不会运行React代码，所以完全没有交互功能。另外代码里还有一个小问题：HTML的<video>标签不支持text属性，这个属性无法被前端读取。

第一步：修正save函数的HTML输出 #

把thumbVideo.text放到data-text自定义属性里，确保前端能获取到文本内容：

save: ({ attributes }) => {
    const { src, poster, text, thumbVideos} = attributes;
    const blockProps = useBlockProps.save( {
       className: 'pd-block pd-inline media-container',
    } );
    return (
       <section { ...blockProps }>
          <div className="display-con display">
             <div className="full-img" >
                <video className="displayed-video" controls src={src} poster={poster}></video>
                <p className="text">{text}</p> 
                <div className="overlay"></div> 
             </div>
             <div className="thumb-bar-video">
                {thumbVideos.map((thumbVideo, index) => (
                   <div className="thumb-video-item" key={index}>
                      {/* 把text属性改成data-text，让前端可以读取 */}
                      <video 
                        src={thumbVideo.src} 
                        poster={thumbVideo.poster} 
                        data-text={thumbVideo.text}
                      ></video>
                   </div>
                ))}
             </div>
          </div>
       </section>
    );
},

第二步：添加前端交互脚本 #

创建一个前端JS文件（比如video-gallery-frontend.js），添加点击缩略图切换主视频的逻辑：

document.addEventListener('DOMContentLoaded', function() {
    // 找到所有视频画廊块
    const mediaContainers = document.querySelectorAll('.pd-block.media-container');
    
    mediaContainers.forEach(container => {
        const mainVideo = container.querySelector('.displayed-video');
        const mainText = container.querySelector('.text');
        const thumbItems = container.querySelectorAll('.thumb-video-item video');
        
        thumbItems.forEach(thumb => {
            thumb.addEventListener('click', function() {
                // 切换主视频的源和封面
                mainVideo.src = this.src;
                mainVideo.poster = this.poster;
                // 更新文本
                mainText.textContent = this.dataset.text;
                // 自动播放视频（可选，根据需求调整）
                mainVideo.play();
            });
        });
    });
});

第三步：注册前端脚本 #

在你的块的block.json文件里，添加script字段，指定前端脚本的路径，确保脚本被正确加载到前端页面：

{
  "apiVersion": 3,
  "name": "your-namespace/video-gallery",
  "title": "视频画廊",
  "category": "media",
  "icon": "format-video",
  "editorScript": "file:./index.js",
  // 新增这行，注册前端交互脚本
  "script": "file:./video-gallery-frontend.js",
  "editorStyle": "file:./editor.css",
  "style": "file:./style.css"
}

额外检查点 #

• 查看前端页面的HTML源码，确认thumbVideos里的src、poster、data-text都有正确的值，确保属性在编辑器中已正常保存。
• 确认块的样式文件（style.css）已正确加载，避免因样式问题导致元素隐藏或布局错乱。

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